Android ViewPager实现图片标题轮播和点击事件

曾经终败给现在 2023-06-01 11:18 20阅读 0赞

**2018.9.27补Github项目**

**https://github.com/luhuan97/ImageCarousel**

**优化了很多，但是我半年不写安卓了，今晚花了两个小时弄了出来。**

**------------------------------------------------------------------------**

**我在看别人文章的时候，最喜欢先找图看。**

那我就先上效果图：

![1281542-20171216171641796-1759108091.gif][]

实现了图片自动轮播，手动滑动，轮播标题，以及点击事件。下面开始：

### 一、资源文件： ###

首先是布局：

<?xml version="1.0" encoding="utf-8"?>
    <android.support.constraint.ConstraintLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            tools:context="xyz.ncvt.viewpagerdemo.MainActivity">
    
        <FrameLayout
                android:layout_width="0dp"
                android:layout_height="200dp" app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent">
    
            <android.support.v4.view.ViewPager
                    android:id="@+id/viewPager"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent" tools:layout_editor_absoluteY="0dp"
                    tools:layout_editor_absoluteX="8dp"/>
    
            <LinearLayout
                    android:weightSum="10"
                    android:background="#33000000"
                    android:orientation="horizontal"
                    android:layout_gravity="bottom"
                    android:gravity="center_vertical"
                    android:layout_width="match_parent"
                    android:layout_height="35dip">
                <TextView
                        android:layout_weight="8"
                        android:id="@+id/tv_pager_title"
                        android:text="很长的标题。。。。。你懂我意思吧"
                        android:paddingLeft="8dip"
                        android:gravity="center_vertical"
                        android:textColor="@color/white"
                        android:layout_width="0dp" android:layout_height="35dip"/>
                
                <LinearLayout
                        android:id="@+id/lineLayout_dot"
                        android:layout_weight="2"
                        android:gravity="center|right"
                        android:layout_marginRight="5dp"
                        android:paddingLeft="3dp"
                        android:paddingRight="3dp"
                        android:orientation="horizontal"
                        android:layout_width="0dp" android:layout_height="match_parent">
                </LinearLayout>
    
            </LinearLayout>
        </FrameLayout>
    
    </android.support.constraint.ConstraintLayout>

轮播小点资源（Drawable）:这个是vector，大家可以自行搜索了解。

创建一个图片ID资源文件，用于图片点击事件：存放在values文件夹内

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <item name="pager_image1" type="id" />
        <item name="pager_image2" type="id" />
        <item name="pager_image3" type="id" />
        <item name="pager_image4" type="id" />
    </resources>

### 二、定义一个适配器，可以是内部类也可以是单独一个类：**适配器比较简单，重写了几个方法，定义了一个传入图片列表、ViewPager实例的构造方法。** ###

import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.ImageView;
    
    import java.util.List;
    
    public class ViewPagerAdapter extends PagerAdapter {
        private List<ImageView> images;
        private ViewPager viewPager;
    
        /**
         * 构造方法，传入图片列表和ViewPager实例
         * @param images
         * @param viewPager
         */
    
        public ViewPagerAdapter(List<ImageView> images, ViewPager viewPager){
            this.images  = images;
            this.viewPager = viewPager;
        }
    
        @Override
        public int getCount() {
            return Integer.MAX_VALUE;//返回一个无限大的值，可以 无限循环
        }
    
        /**
         * 判断是否使用缓存, 如果返回的是true, 使用缓存. 不去调用instantiateItem方法创建一个新的对象
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }
    
        /**
         * 初始化一个条目
         * @param container
         * @param position 当前需要加载条目的索引
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // 把position对应位置的ImageView添加到ViewPager中
            ImageView iv = images.get(position % images.size());
            viewPager.addView(iv);
            // 把当前添加ImageView返回回去.
            return iv;
        }
        /**
         * 销毁一个条目
         * position 就是当前需要被销毁的条目的索引
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            // 把ImageView从ViewPager中移除掉
            viewPager.removeView(images.get(position % images.size()));
    
        }

### 三、编写MainActivity代码：我还是不一部部分拆分代码了，我在代码写好完整的注释即可，不懂的可以留言给我。 ###

public class MainActivity extends AppCompatActivity {
        private ViewPager mViewPager;
        private TextView mTvPagerTitle;
    
        private List<ImageView> mImageList;//轮播的图片集合
        private String[] mImageTitles;//标题集合
        private int previousPosition = 0;//前一个被选中的position
        private List<View> mDots;//小点
    
        private boolean isStop = false;//线程是否停止
        private static int PAGER_TIOME = 5000;//间隔时间
    
        // 在values文件假下创建了pager_image_ids.xml文件，并定义了4张轮播图对应的id，用于点击事件
        private int[] imgae_ids = new int[]{R.id.pager_image1,R.id.pager_image2,R.id.pager_image3,R.id.pager_image4};
    
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            init();
        }
    
        /**
         * 第一步、初始化控件
         */
        public void init() {
            mViewPager = (ViewPager) findViewById(R.id.viewPager);
            mTvPagerTitle = (TextView) findViewById(R.id.tv_pager_title);
            initData();//初始化数据
            initView();//初始化View，设置适配器
            autoPlayView();//开启线程，自动播放
        }
    
        /**
         * 第二步、初始化数据（图片、标题、点击事件）
         */
        public void initData() {
            //初始化标题列表和图片
            mImageTitles = new String[]{"这是一个好看的标题1","这是一个优美的标题2","这是一个快乐的标题3","这是一个开心的标题4"};
            int[] imageRess = new int[]{R.drawable.ncvt_wifi_head,R.drawable.img1,R.drawable.img2,R.drawable.img3};
    
            //添加图片到图片列表里
            mImageList = new ArrayList<>();
            ImageView iv;
            for (int i = 0; i < mImageList.size(); i++) {
                iv = new ImageView(this);
                iv.setBackgroundResource(imageRess[i]);//设置图片
                iv.setId(imgae_ids[i]);//顺便给图片设置id
                iv.setOnClickListener(new pagerImageOnClick());//设置图片点击事件
                mImageList.add(iv);
            }
    
            //添加轮播点
            LinearLayout linearLayoutDots = (LinearLayout) findViewById(R.id.lineLayout_dot);
            mDots = addDots(linearLayoutDots,fromResToDrawable(this,R.drawable.ic_dot_normal),mImageList.size());//其中fromResToDrawable()方法是我自定义的，目的是将资源文件转成Drawable
    
    
        }
    
        //图片点击事件
        private class pagerImageOnClick implements View.OnClickListener{
    
            @Override
            public void onClick(View v) {
                switch (v.getId()) {
                    case R.id.pager_image1:
                        Toast.makeText(MainActivity.this, "图片1被点击", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.pager_image2:
                        Toast.makeText(MainActivity.this, "图片2被点击", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.pager_image3:
                        Toast.makeText(MainActivity.this, "图片3被点击", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.pager_image4:
                        Toast.makeText(MainActivity.this, "图片4被点击", Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        }
        /**
         *  第三步、给PagerViw设置适配器，并实现自动轮播功能
         */
        public void initView(){
            ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(mImageList, mViewPager);
            mViewPager.setAdapter(viewPagerAdapter);
            mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
                @Override
                public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
    
                }
    
                @Override
                public void onPageSelected(int position) {
                    //伪无限循环，滑到最后一张图片又从新进入第一张图片
                    int newPosition = position % mImageList.size();
                    // 把当前选中的点给切换了, 还有描述信息也切换
                    mTvPagerTitle.setText(mImageTitles[newPosition]);//图片下面设置显示文本
                    //设置轮播点
                    LinearLayout.LayoutParams newDotParams = (LinearLayout.LayoutParams) mDots.get(newPosition).getLayoutParams();
                    newDotParams.width = 24;
                    newDotParams.height = 24;
    
                    LinearLayout.LayoutParams oldDotParams = (LinearLayout.LayoutParams) mDots.get(previousPosition).getLayoutParams();
                    oldDotParams.width = 16;
                    oldDotParams.height = 16;
    
                    // 把当前的索引赋值给前一个索引变量, 方便下一次再切换.
                    previousPosition = newPosition;
    
                }
    
                @Override
                public void onPageScrollStateChanged(int state) {
    
                }
            });
            setFirstLocation();
        }
    
        /**
         * 第四步：设置刚打开app时显示的图片和文字
         */
        private void setFirstLocation() {
            mTvPagerTitle.setText(mImageTitles[previousPosition]);
            // 把ViewPager设置为默认选中Integer.MAX_VALUE / t2，从十几亿次开始轮播图片，达到无限循环目的;
            int m = (Integer.MAX_VALUE / 2) % mImageList.size();
            int currentPosition = Integer.MAX_VALUE / 2 - m;
            mViewPager.setCurrentItem(currentPosition);
        }
    
        /**
         * 第五步: 设置自动播放,每隔PAGER_TIOME秒换一张图片
         */
        private void autoPlayView() {
            //自动播放图片
            new Thread(new Runnable() {
                @Override
                public void run() {
                    while (!isStop){
                        runOnUiThread(new Runnable() {
                            @Override
                            public void run() {
                                mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);
                            }
                        });
                        SystemClock.sleep(PAGER_TIOME);
                    }
                }
            }).start();
        }
    
    
    
        /**
         * 资源图片转Drawable
         * @param context
         * @param resId
         * @return
         */
        public Drawable fromResToDrawable(Context context, int resId) {
            return context.getResources().getDrawable(resId);
        }
    
    
        /**
         * 动态添加一个点
         * @param linearLayout 添加到LinearLayout布局
         * @param backgount 设置
         * @return
         */
        public int addDot(final LinearLayout linearLayout, Drawable backgount) {
            final View dot = new View(this);
            LinearLayout.LayoutParams dotParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
            dotParams.width = 16;
            dotParams.height = 16;
            dotParams.setMargins(4,0,4,0);
            dot.setLayoutParams(dotParams);
            dot.setBackground(backgount);
            dot.setId(View.generateViewId());
            linearLayout.addView(dot);
            return dot.getId();
        }
    
        /**
         * 添加多个轮播小点到横向线性布局
         * @param linearLayout
         * @param backgount
         * @param number
         * @return
         */
        public List<View> addDots(final LinearLayout linearLayout, Drawable backgount, int number){
            List<View> dots = new ArrayList<>();
            for (int i = 0; i < number; i++) {
                int dotId = addDot(linearLayout,backgount);
                dots.add(findViewById(dotId));
            }
            return dots;
        }

诶呀，感觉有90%完美了，供大家学习参考。我优化一下代码，再上demo。

转载于:https://www.cnblogs.com/luhuan/p/8047098.html

[1281542-20171216171641796-1759108091.gif]: /images/20230601/d8805523c600431284239046b824798d.png