ViewPager引导页图片切换（带圆点）

需求：进入程序之前的页面是几张图片在一直切换

关键点：

ViewPager适配器
ViewPager页面改变监听器
自动更新页面的线程ViewPagerTask

效果：
这里写图片描述

布局文件activity_login1.xml

<?xml version="1.0" encoding="utf-8"?>
<com.zhy.android.percent.support.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/l_viewpager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="100%h"
        app:layout_widthPercent="100%w"/>

    <com.zhy.android.percent.support.PercentLinearLayout
        android:id="@+id/l_guide_dots"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_widthPercent="30%w"
        app:layout_heightPercent="10%h"
        app:layout_marginTopPercent="80%h"
        android:layout_gravity="center_horizontal"
        android:gravity="center_horizontal"
        android:orientation="horizontal" />

    <Button
        android:id="@+id/btn_d"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="10%h"
        app:layout_widthPercent="30%w"
        app:layout_marginBottomPercent="5%h"
        app:layout_marginLeftPercent="5%w"
        android:text="我是店长"
        android:layout_gravity="bottom|left"
        android:background="@drawable/circle_corner_selector"
        android:onClick="dlogin"/>

    <Button
        android:id="@+id/btn_l"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="10%h"
        app:layout_widthPercent="30%w"
        app:layout_marginBottomPercent="5%h"
        app:layout_marginRightPercent="5%w"
        android:text="我是量体师"
        android:layout_gravity="bottom|right"
        android:background="@drawable/circle_corner_selector"
        />

</com.zhy.android.percent.support.PercentFrameLayout>

这里我布局用的是鸿洋大神的百分比布局，换成正常的FrameLayout也可以！

接下来看activity的几个关键方法：

  /**
     * 初始化页面
     */
    public void initPager(){
        viewList=new ArrayList<View>();
        int[] images = new int[] {R.drawable.news01, R.drawable.news02, R.drawable.news03};

        for(int i=0;i<images.length;i++){
            ImageView imageView=new ImageView(mContext);
            imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
            viewList.add(imageView);
            imageView.setImageResource(images[i]);
        }

        //初始化指示器
        initDots(images.length);
    }

可以看到，背景滑动的图片都是通过新建ImageView实现，然后是初始化指示器的方法：

/**
     * 初始化指示点，用xml布局实现
     * @param count
     */
    public void initDots(int count){

        for (int i=0;i<count;i++){
            View view=LayoutInflater.from(mContext).inflate(R.layout.layout_dots,null);
            dotsLLayou.addView(view);
        }
        //将第一个指示点设为选中状态。此处原点是用selector实现的
        dotsLLayou.getChildAt(0).setSelected(true);
    }

这里给了指示器一个简单的布局

<?xml version="1.0" encoding="utf-8"?>
<ImageButton xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/dot"
    android:layout_width="20dp"
    android:layout_height="20dp"
    android:src="@drawable/dot_selector"
    android:background="@android:color/transparent"
    android:paddingLeft="10dp"
    android:paddingRight="10dp" />

其中的dot_selector

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/new_guide_round_selected"
        android:state_selected="true"/>

    <item android:drawable="@drawable/new_guide_round"/>

</selector>

这样就实现了指示器选中和不选中两种状态的显示

下面是ViewPager的适配器

 /**
     * ViewPager的适配器
     */
    class ViewPagerAdapter extends PagerAdapter{

        private List<View> data;

        public ViewPagerAdapter(List<View> data){
            super();
            this.data=data;
        }

        @Override
        public int getCount() {
            return data.size();
        }

        @Override
        public boolean isViewFromObject(View view, Object o) {
            return view==o;
        }

        /**
         * 关键方法，增加view Item
         * @param container
         * @param position
         * @return
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            container.addView(data.get(position));
            return data.get(position);
        }

        /**
         * 关键方法，删除view Item
         * @param container
         * @param position
         * @param object
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {

            container.removeView(data.get(position));
        }
    }

最后，自动滑动是通过线程结合handler实现的

 private class ViewPagerTask implements Runnable{
        @Override
        public void run() {
            //改变当前页面的值
            currPage =(currPage+ 1)%viewList.size();
            //发送消息给UI线程
            handler.sendEmptyMessage(0);
        }
    }

handler接收到currPage，然后设置adapter

 private Handler handler= new Handler(){
        public void handleMessage(Message msg) {
            //接收到消息后，更新页面
            mViewPager.setCurrentItem(currPage);
        };
    };

之后在Activity中启动该线程，

//开启定时器，每隔2秒自动播放下一张（通过调用线程实现）（与Timer类似，可使用Timer代替）
        scheduled =  Executors.newSingleThreadScheduledExecutor();
        //设置一个线程，该线程用于通知UI线程变换图片
        ViewPagerTask pagerTask = new ViewPagerTask();
        scheduled.scheduleAtFixedRate(pagerTask, 3, 3, TimeUnit.SECONDS);

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

最后将整个OnCreate（）方法贴出来

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login1);

        mContext=this;
        ButterKnife.bind(this);

        initPager();

        //ViewPager绑定适配器
        mViewPager.setAdapter(new ViewPagerAdapter(viewList));
        //viewPager添加页面改变监听器
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int arg0) {
                for (int i = 0; i < dotsLLayou.getChildCount(); i++) {
                    if(i == arg0){
                        dotsLLayou.getChildAt(i).setSelected(true);
                    } else {
                        dotsLLayou.getChildAt(i).setSelected(false);
                    }
                }

                //为了实现图片的轮播
                oldPage = arg0;
                currPage = arg0;
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

        //开启定时器，每隔2秒自动播放下一张（通过调用线程实现）（与Timer类似，可使用Timer代替）
        scheduled =  Executors.newSingleThreadScheduledExecutor();
        //设置一个线程，该线程用于通知UI线程变换图片
        ViewPagerTask pagerTask = new ViewPagerTask();
        scheduled.scheduleAtFixedRate(pagerTask, 3, 3, TimeUnit.SECONDS);
    }

欢迎留言讨论

ViewPager引导页图片切换（带圆点）

猜你喜欢