自动轮播本地图片触摸暂停轮播

Posted 2020-10-16 红领巾传递人

第一步自己创建自动轮播视图：

  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";