Android ViewPager+轮播图

Posted 2021-06-28 彬sir哥

1.实现轮播图(可点击事件)效果如下：

2.做的项目如下图：

3.实现目标

• 可以自动轮播(无限循环)
• 可以手动左右滚动
• 自定义性强

4.activity_main.xml，布局代码如下：

    <FrameLayout
        android:id="@+id/fl_vp"
        android:layout_width="match_parent"
        android:layout_height="150dip"
        android:visibility="gone">
        <!--轮播图-->
        <android.support.v4.view.ViewPager
            android:id="@+id/vp"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal|bottom"
            android:orientation="vertical">

            <TextView
                android:id="@+id/title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="10dp"
                android:lines="1"
                android:textColor="@android:color/white" />

            <LinearLayout
                android:id="@+id/item_home_picture_container_indicator"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_below="@id/title"
                android:layout_marginBottom="3dp"
                android:layout_marginRight="20dp"
                android:layout_marginTop="3dp"
                android:orientation="horizontal">

            </LinearLayout>
        </RelativeLayout>
    </FrameLayout>

5.MainActivity.java，代码如下：
5.1 给容器添加三个小点，第一个小黑点是默认的，第二、三是小白点

        // 给容器添加点
        mPointContainer.removeAllViews();
        for (int i = 0; i < 3; i++) {
            View v = new View(this);
            v.setBackgroundResource(R.drawable.indicator_selected);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(UIUtils.dip2px(6), UIUtils.dip2px(6));// dp
            // -->
            // px
            if (i != 0) {
                params.leftMargin = UIUtils.dip2px(8);
                params.bottomMargin = UIUtils.dip2px(8);
            } else {
                v.setBackgroundResource(R.drawable.indicator_normal);// 设置默认选中
            }
            mPointContainer.addView(v, params);

5.2 MAX_VALUE / 3、middle % 3表示第一个小黑点是默认的

        // 给ViewPager设置中间选中的值
        int middle = Integer.MAX_VALUE / 3;
        int extra = middle % 3;
        mViewPaper.setCurrentItem(middle - extra);

5.3 轮播图延迟时间，看看下面理解

    //自动播放广告栏任务
    class AutoSwitchTask implements Runnable {
        // 开始轮播
        public void start() {
            stop();
            UIUtils.postDelayed(this, 10000);//“10000”表示轮播图的第一图片开始延迟时间后轮播
        }

        // 停止轮播
        public void stop() {
            UIUtils.removeCallbacks(this);
        }

        @Override
        public void run() {
            // 让ViewPager选中下一个
            int item = mViewPaper.getCurrentItem();
            mViewPaper.setCurrentItem(++item);
            UIUtils.postDelayed(this, 5000);//“5000”表示每一个图片延迟时间后轮播
        }
    }

5.4 给容器添加三个轮播图，看看下面理解

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position = position % 3;//三个轮播图
            ImageView iv = new ImageView(MainActivity.this);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);
            // 给iv设置数据
            iv.setImageResource(R.drawable.image1);// 设置默认图片
            // 设置网络图片
            if (position == 0) {
                iv.setImageResource(R.drawable.image1);//第一个轮播图
//                BitmapHelper.display(iv,R.drawable.image1 );
            } else if (position == 1){
                iv.setImageResource(R.drawable.image2);//第二个轮播图
            }else {
                iv.setImageResource(R.drawable.image3);//第三个轮播图
            }
//            BitmapHelper.display(iv, AppConfig.IMAGE_BASE_URL + roastingDatas.get(position).get("ID"));
            final int finalPosition = position;
            iv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    roastingPictureClick(finalPosition);
                }
            });
            // 给viewpager加视图
            container.addView(iv);
            return iv;
        }

5.5 轮播图点击事件，代码如下：

    //轮播图点击
    private void roastingPictureClick(int position) {
        Toast.makeText(this, "轮播图点击:" + position, Toast.LENGTH_SHORT).show();
    }

5.6 三个小点，一个小黑点，二个小白点

@Override
    public void onPageSelected(int position) {
        // 页面选中时
        position = position % 3;
        int count = mPointContainer.getChildCount();
        for (int i = 0; i < count; i++) {
            View view = mPointContainer.getChildAt(i);
            view.setBackgroundResource(i == position ? R.drawable.indicator_normal//黑点
                    : R.drawable.indicator_selected);//白点
        }
    }

6.源代码下载：
https://download.csdn.net/download/qq_35091074/19697222