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

来源：互联网发布：中国传统价值观知乎编辑：程序博客网时间：2024/06/04 18:43

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

关键点：

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);    }

欢迎留言讨论

0 0