大图轮播是在ViewPager的基础上,实现(1)永远自动循环播放,(2)增加红点指示器,(3)标题自动变更,(4)图片相应点击事件。界面展示如下:
自定义空间代码如下:
public class LoopingViewPager extends ViewPager {
// 图片
private List<String> setImgurls = new ArrayList<String>();
private ImageCache imageCache = null;
public void setImgurls(List<String> imgurls) {
this.setImgurls = setImgurls;
}
// 标题
private List<String> titles = new ArrayList<String>();
private TextView titleTextView;
public void setTitles(List<String> titles, TextView titleTextView) {
this.titles = titles;
this.titleTextView = titleTextView;
this.titleTextView.setText(titles.get(0));
}
//暴露提供图片的方法
private int [] imagesIds;
public void setimagesIds(int [] imagesIds){
this.imagesIds = imagesIds;
}
private ArrayList<ImageView> dotsList = new ArrayList<ImageView>();
// private int[] imagesId = { R.drawable.recommend_14,
// R.drawable.recommend_15, R.drawable.recommend_16,
// R.drawable.recommend_17, R.drawable.recommend_18 };
private int preposition = 0;
private boolean isLooping = false;
// 暴露方法由外界控制是否需要一直循环下去:
public void setLooping(boolean isLooping) {
this.isLooping = isLooping;
}
public LoopingViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
imageCache = new ImageCache(context);
}
public LoopingViewPager(Context context) {
super(context);
imageCache = new ImageCache(context);
}
// 实行不停播放的效果,发送消息:
private Handler handler = new Handler() {
public void handleMessage(Message msg) {
if (msg.what == 1) {
int curr = getCurrentItem();
curr++;
setCurrentItem(curr);
// 接着发消息:
Message msg1 = handler.obtainMessage();
msg1.what = 1;
handler.sendMessageDelayed(msg1, 2000);
}
};
};
// 停止播放:即停止发送消息
public void stopLoop() {
handler.removeCallbacksAndMessages(null);
}
// 支持自动播放
// 暴露给外面调用。
public void startLoop() {
Message msg = handler.obtainMessage();
msg.what = 1;
handler.sendMessageDelayed(msg, 2000);
}
/**
* @param imageNumbers
* :大图的数目
* @param layoutId
* : 圆点的布局
*/
public void init(int imageNumbers, LinearLayout dotsLayout) {
// 初始化圆点
for (int i = 0; i < imageNumbers; i++) {
// 初始化单一个的圆点
ImageView dotImageView = new ImageView(getContext());
dotImageView.setBackgroundResource(R.drawable.dot_selector);
// 设置单一圆点的大小:由于imageview是要放在LinearLayout上,所以采用LinearLayout的布局参数
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.WRAP_CONTENT,
LinearLayout.LayoutParams.WRAP_CONTENT);
// 设置圆点与圆点之间的距离:
params.rightMargin = 8;
// 将设置好的图片和参数放置到布局中:
dotsLayout.addView(dotImageView, params);
// 将圆点控件装载到集合中:
dotsList.add(dotImageView);
}
// 将第一个圆点设置为红点,其余为白点:
dotsList.get(0).setSelected(true);
// 为loopingviewpager设置适配器,装载大图片:
PagerAdapter adapter = new LoopingPagerAdapter();
this.setAdapter(adapter);
// 为viewpager设置页面改变监听:
OnPageChangeListener changelistener = new MyOnPageChangeListener();
this.setOnPageChangeListener(changelistener);
// 为viewpager设置页面触摸事件的监听:
OnTouchListener touchlistener = new MyOnTouchListener();
this.setOnTouchListener(touchlistener);
}
// 触摸事件:判断为点解的话,有点击时间,判断为触摸的话,停止自动轮播
private class MyOnTouchListener implements OnTouchListener {
private int beginX;
private long begingTime;
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
// 当按下的时候。停止轮播
stopLoop();
beginX = (int) getX();
begingTime = System.currentTimeMillis();
break;
case MotionEvent.ACTION_MOVE:
stopLoop();
break;
case MotionEvent.ACTION_UP:
// 开始轮播:
startLoop();
int endX = (int) getX();
long endTime = System.currentTimeMillis();
// 判断为点击事件:
if (endX == beginX && (endTime - begingTime) < 300) {
// 被判定为点击事件,自定义接扣实行监听
if (listener != null) {
listener.onViewPagerClick();
}
}
break;
case MotionEvent.ACTION_CANCEL:
startLoop();
break;
default:
break;
}
return true;
}
}
// 自定义监听接口:
private onViewPagerClickListener listener;
public void setonViewPagerClickListener(onViewPagerClickListener listener) {
this.listener = listener;
}
public interface onViewPagerClickListener {
public void onViewPagerClick();
}
// 监听事件:
private class MyOnPageChangeListener implements OnPageChangeListener {
@Override
public void onPageScrollStateChanged(int arg0) {
// TODO Auto-generated method stub
}
@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// TODO Auto-generated method stub
}
@Override
public void onPageSelected(int position) {
// 当页面被选中的时候,标题栏改变,圆点的状态改变:
dotsList.get(preposition % dotsList.size()).setSelected(false);
preposition = position;
dotsList.get(position % dotsList.size()).setSelected(true);
// 设置标题:
if (titles != null && titleTextView != null) {
titleTextView.setText(titles.get(position % dotsList.size()));
}
}
}
// 适配器:
private class LoopingPagerAdapter extends PagerAdapter {
@Override
public int getCount() {
if (isLooping) {
return Integer.MAX_VALUE;
} else {
return dotsList.size();
}
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
// 初始化单一的布局:都是衣服图片:
position = position % dotsList.size();
Log.i("hxy", "position" + position);
ImageView bigImageView = new ImageView(getContext());
// 设置图片的的宽和高:
ViewPager.LayoutParams params = new ViewPager.LayoutParams();
params.height = ViewPager.LayoutParams.MATCH_PARENT;
params.width = ViewPager.LayoutParams.MATCH_PARENT;
// 图片来源:1.网络,2.本地,3.内存。在此省略从本地取数据
// 在此假定数据是从内存中获取的
if(imagesIds!=null){
bigImageView.setBackgroundResource(imagesIds[position]);
Log.i("hxy","imagesIds!=null");
//imageCache.display(setImgurls.get(position), bigImageView);
}
Log.i("hxy", "位置是:" + position);
container.addView(bigImageView, params);
return bigImageView;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((ImageView) object);
}
}
}
activity中的代码,实现图片中的效果:
public class MainActivity extends Activity {
private LoopingViewPager mLoopingViewPager;
private int[] imagesId = { R.drawable.recommend_14,
R.drawable.recommend_15, R.drawable.recommend_16,
R.drawable.recommend_17, R.drawable.recommend_18 };
private List<String> titles = new ArrayList<String>();
private TextView titleTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
titleTextView = (TextView) findViewById(R.id.tv_title);
mLoopingViewPager = (LoopingViewPager) findViewById(R.id.lvp_image);
LinearLayout dotsLayout = (LinearLayout) findViewById(R.id.ll_dots);
mLoopingViewPager.setLooping(true);
mLoopingViewPager.init(5, dotsLayout);
mLoopingViewPager.startLoop();
for( int i =0;i<imagesId.length;i++){
titles.add("标题"+i);
}
mLoopingViewPager.setTitles(titles, titleTextView);
mLoopingViewPager.setimagesIds(imagesId);
onViewPagerClickListener listener = new MyonViewPagerClickListener();
mLoopingViewPager.setonViewPagerClickListener(listener);
}
private class MyonViewPagerClickListener implements onViewPagerClickListener{
@Override
public void onViewPagerClick() {
Toast.makeText(getApplication(), "响应大图点击", 0).show();
}
}
}