第一步自己创建自动轮播视图:
1 public class AutoShowView extends FrameLayout { 2 private View view; 3 private ViewPager vp_lunbo; 4 private TextView tv_desc; 5 private LinearLayout ll_points; 6 private List<ImageView> datas; 7 private PicturePagerAdapter adapter; 8 private Handler handler; 9 10 final AutoScrollTask autoScrollTask = new AutoScrollTask(); 11 protected int selectIndex; 12 13 public AutoShowView(Context context) { 14 15 this(context, null); 16 } 17 18 public AutoShowView(Context context, AttributeSet attrs) { 19 this(context, attrs, 0); 20 } 21 22 public AutoShowView(Context context, AttributeSet attrs, int defStyleAttr) { 23 super(context, attrs, defStyleAttr); 24 initView(context); 25 initData(); 26 initListener(); 27 } 28 29 private void initView(Context context) { 30 view = LayoutInflater.from(context).inflate(R.layout.view_autoshow, 31 this); 32 33 vp_lunbo = (ViewPager) view.findViewById(R.id.vp_lunbo); 34 tv_desc = (TextView) view.findViewById(R.id.tv_desc); 35 ll_points = (LinearLayout) view.findViewById(R.id.ll_points); 36 37 datas = new ArrayList<ImageView>(); 38 adapter = new PicturePagerAdapter(datas); 39 if (handler == null) { 40 handler = new Handler(); 41 } 42 } 43 44 private void initData() { 45 // 初始化图片数据 46 initImageView(); 47 // 初始化点数据 48 initPoints(); 49 50 vp_lunbo.setAdapter(adapter); 51 // 设置ViewPager当前选中的位置,会调用instantiateItem,最终会选中item0 52 // 原理:一个数减去其余数后肯定能被除数整除 53 vp_lunbo.setCurrentItem(10000 - 10000 % datas.size()); 54 55 autoScrollTask.start(); 56 } 57 58 private void initImageView() { 59 for (int i = R.drawable.icon1; i < R.drawable.icon1 + 4; i++) { 60 // 创建ImageView容器 61 ImageView imageView = new ImageView(getContext()); 62 63 // 设置图片 64 imageView.setImageResource(i); 65 imageView.setScaleType(ImageView.ScaleType.FIT_XY);// 图片填充容器 66 datas.add(imageView);// 添加到集合中 67 } 68 } 69 70 private void initPoints() { 71 // 因为每次页面改变都会调用该方法,所以进入该方法时先清空集合。 72 ll_points.removeAllViews(); 73 74 for (int i = 0; i < datas.size(); i++) { 75 View view = new View(getContext()); 76 LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( 77 10, 10); 78 if (i == selectIndex) { 79 tv_desc.setText("图片" + i + "的描述"); 80 view.setBackgroundResource(R.drawable.point_red); 81 } else { 82 view.setBackgroundResource(R.drawable.point_white); 83 } 84 params.leftMargin = 10; 85 view.setLayoutParams(params);// 设置布局参数 86 ll_points.addView(view);// 添加到点的容器中 87 } 88 } 89 90 private void initListener() { 91 // viewpager注册页面改变监听器 92 vp_lunbo.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { 93 @Override 94 public void onPageSelected(int position) { 95 // 页面选中调用 96 selectIndex = position % datas.size(); 97 initPoints();// 红点跟着页面改变而移动 98 } 99 100 @Override 101 public void onPageScrolled(int position, float positionOffset, 102 int positionOffsetPixels) { // 页面滑动就调用 103 } 104 105 @Override 106 public void onPageScrollStateChanged(int state) { 107 // 页面状态改变调用 108 109 } 110 }); 111 112 // viewpager 注册触摸事件监听器,实现自动轮播 113 vp_lunbo.setOnTouchListener(new OnTouchListener() { 114 115 @Override 116 public boolean onTouch(View v, MotionEvent event) { 117 switch (event.getAction()) { 118 case MotionEvent.ACTION_DOWN:// 按下停止轮播 119 autoScrollTask.stop(); 120 break; 121 case MotionEvent.ACTION_MOVE: 122 123 break; 124 case MotionEvent.ACTION_UP:// 松开,取消 开始轮播 125 case MotionEvent.ACTION_CANCEL: 126 autoScrollTask.start(); 127 break; 128 129 default: 130 break; 131 } 132 return false;// 不会影响其他view的事件分发 133 } 134 }); 135 } 136 137 /** 实现轮播图自动轮播 */ 138 139 class AutoScrollTask implements Runnable { 140 141 @Override 142 public void run() { 143 int currentItem = vp_lunbo.getCurrentItem(); 144 currentItem++; 145 vp_lunbo.setCurrentItem(currentItem); 146 start(); 147 } 148 149 /** 150 * 开始轮播 151 */ 152 public void start() { 153 handler.postDelayed(this, 2000); 154 } 155 156 /** 157 * 停止轮播 158 */ 159 public void stop() { 160 handler.removeCallbacks(this); 161 } 162 } 163 164 }
第二步写自动轮播的适配器:
1 public class PicturePagerAdapter extends PagerAdapter { 2 private static final String tag = "PicturePagerAdapter"; 3 List<ImageView> list; 4 5 public PicturePagerAdapter(List<ImageView> imageViews) { 6 this.list = imageViews; 7 } 8 9 @Override 10 public int getCount() { 11 // 确定要显示的数据量 12 return Integer.MAX_VALUE;// 无限轮播 13 } 14 15 @Override 16 public boolean isViewFromObject(View view, Object object) { 17 // 判断当前要显示的view是否等于标记object,true则显示 18 return view == object; 19 } 20 21 @Override 22 public Object instantiateItem(ViewGroup container, int position) { 23 position = position % list.size(); 24 Log.d(tag, "instantiateItem==" + position); 25 // 无限轮播-因为position的值从0~Integer.MAX_VALUE 26 View view = list.get(position); 27 // 添加view到VIewPager中 28 container.addView(view); 29 return view; 30 } 31 32 @Override 33 public void destroyItem(ViewGroup container, int position, Object object) { 34 // 从容器中移除view 35 Log.d(tag, "destroyItem==" + position); 36 container.removeView((View) object); 37 } 38 }
第三步自定义轮播视图布局:
1 <android.support.v4.view.ViewPager 2 android:id="@+id/vp_lunbo" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" > 5 </android.support.v4.view.ViewPager> 6 <!-- 文字描述和点的容器点和容器 --> 7 8 <LinearLayout 9 android:layout_width="match_parent" 10 android:layout_height="wrap_content" 11 android:layout_alignParentBottom="true" 12 android:background="#22000000" 13 android:gravity="center" 14 android:orientation="vertical" 15 android:paddingBottom="5dp" 16 android:paddingTop="5dp" > 17 18 <TextView 19 android:id="@+id/tv_desc" 20 android:layout_width="wrap_content" 21 android:layout_height="wrap_content" 23 android:textColor="#ffffff" /> 24 25 <LinearLayout 26 android:id="@+id/ll_points" 27 android:layout_width="wrap_content" 28 android:layout_height="wrap_content" 29 android:orientation="horizontal" > 30 </LinearLayout> 31 </LinearLayout>
第四步在主页面布局将自动轮播视图插入:
1 <com.example.lenovo.lianxi.view.AutoShowView 2 android:id="@+id/asv" 3 android:layout_width="match_parent" 4 android:layout_height="200dp"> 5 6 </com.example.lenovo.lianxi.view.AutoShowView>
第五步自己写跟随轮播的红白点(可自己更改颜色):
1 <shape xmlns:android="http://schemas.android.com/apk/res/android" 2 android:shape="oval"> 3 4 <corners android:radius="5dp" /> 5 6 <solid android:color="#ff0000" /> 7 8 </shape> 9 10 11 12 <shape xmlns:android="http://schemas.android.com/apk/res/android" 13 android:shape="oval"> 14 15 <corners android:radius="5dp" /> 16 17 <solid android:color="#ffffff" /> 18 19 </shape>
最后在放入自动轮播的Activity插入
1 protected static final String tag = "MainActivity";