ViewPager使用讲解

ViewPager的使用讲解

ViewPager的几个主要逻辑：

一、自动轮播逻辑：

1.使用Handler发送一个延时消息来启动自动轮播
2.在handleMessage方法中，先获取当前页面，然后将当前页面在使用之前设置为下一页(可以切换到下一页)
3.在在handleMessage方法中，
继续发送一个延时消息，这样就可以不断的轮播了
二、手指按下的时候停止轮播，抬起继续轮播逻辑：
1.给ViewPager设置onTouchEventListener事件在手指按下的时候，使用Handler将所有消息移除
2.手指抬起的时候，继续发送延时消息
三、动态更新小圆点逻辑：
1.创建一个存放小圆点的LinearLayout布局
2.在drawable目录下创建shape标签的文件，使用它的shape属性中的oval绘制圆，并用size标签定相同的宽和高
3.创建ImageVeiw对象，并通过setImageResource将drawable设置给ImageVeiw对象
4.将ImageVeiw添加到LinearLayout容器中
5.通过修改布局参数的leftMargin属性，修改小圆点的间距

6.通过ViewPager的addOnPageChangeListener方法监听页面的切换，然后在页面选中的时候更新小红点的状态

展示一个下App:

代码：

public class MainActivity extends AppCompatActivity {    private ViewPager mViewpager;    private int[]    mImageIds = {R.mipmap.a, R.mipmap.b, R.mipmap.c,            R.mipmap.d, R.mipmap.e, R.mipmap.f, R.mipmap.g};    private String[] mImageDes = {"美图一", "美图二", "美图三",            "美图四", "美图五", "美图六", "美图七"};    private MainActivity mContent;    private TextView     tvTitle;    private LinearLayout mLlContainer;  //小圆点的容器    private Handler mHandler = new Handler() {        @Override        public void handleMessage(Message msg) {            switch (msg.what) {                case 0:                    //切换到下一页                    int currentItem = mViewpager.getCurrentItem();                    mViewpager.setCurrentItem(++currentItem);                    mHandler.sendEmptyMessageDelayed(0, 2000); //继续两秒发一个消息                    break;            }        }    };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        mContent = MainActivity.this;        mViewpager = (ViewPager) findViewById(R.id.viewpager);        mLlContainer = (LinearLayout) findViewById(R.id.llContainer);        tvTitle = (TextView) findViewById(R.id.tvTitle);        //初始化第一个条目文字        tvTitle.setText(mImageDes[0]);        mViewpager.setAdapter(new MyViewPager());        //设置当期的item位置        mViewpager.setCurrentItem(mImageIds.length * 1000000);        initDot();   //初始化小圆点        //监听ViewPager页面切换        mViewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            //页面滑动的时候回调            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            //页面被选中的时候回调            @Override            public void onPageSelected(int position) {                position = position % mImageDes.length;                tvTitle.setText(mImageDes[position]);                for (int i = 0; i < mLlContainer.getChildCount(); i++) {                    ImageView ivDot = (ImageView) mLlContainer.getChildAt(i);                    if (i == position) {                        ivDot.setImageResource(R.drawable.red_dot_shape);                    } else {                        ivDot.setImageResource(R.drawable.grey_dot_shape);                    }                }            }            //页面滑动状态发生改变的时候回调            @Override            public void onPageScrollStateChanged(int state) {            }        });        //给ViewPager设置触摸监听        mViewpager.setOnTouchListener(new View.OnTouchListener() {            @Override            public boolean onTouch(View v, MotionEvent event) {                int action = event.getAction();                switch (action) {                    case MotionEvent.ACTION_DOWN:                        //手按下的时候停止自动轮播                        mHandler.removeCallbacksAndMessages(null);                        break;                    case MotionEvent.ACTION_UP:                        //抬起的时候继续自动轮播                        mHandler.sendEmptyMessageDelayed(0, 2000);                        break;                }                return false;            }        });    }    private void initDot() {        for (int i = 0; i < mImageIds.length; i++) {            ImageView ivDot = new ImageView(this);            //布局参数可以修改xml文件中以layout开头的属性,            // LayoutParams保存了一个View的布局参数。            /**             * 注意：通过getLayoutParams()获取LayoutParams时，             * 需要根据View所在父布局的类型来设置不同的类型，             * (为什么呢？我们知道LayoutParams作用就是子视图告诉父视图             * 它们想要变成什么样的布局，因此必须要使用父控件.LayoutParams，             * 况且只有ViewGroup才有LayoutParams属性)             */            LinearLayout.LayoutParams layoutParams =                    new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,                            LinearLayout.LayoutParams.WRAP_CONTENT);            if (i > 0) {                layoutParams.leftMargin = 10;                ivDot.setImageResource(R.drawable.grey_dot_shape);            } else {                ivDot.setImageResource(R.drawable.red_dot_shape);            }            ivDot.setLayoutParams(layoutParams);            mLlContainer.addView(ivDot);        }        //启动自动轮播        mHandler.sendEmptyMessageDelayed(0, 2000); //延时两秒发一个消息    }    /**     * ViewPager内存优化：     * 永远最多只加载3页，其余页都销毁     * 即：上一页、当前页、下一页     * 这样的做法也有助于滑动的流畅性     */    class MyViewPager extends PagerAdapter {        //返回条目的个数        @Override        public int getCount() {            //为了可以无限制的左右滑动，将此值设为整数的最大值            return Integer.MAX_VALUE;        }        //判断当前显示的对象是否是我们初始化返回的object(固定这样写)        @Override        public boolean isViewFromObject(View view, Object object) {            return view == object;        }        //初始化条目的布局，类似于getView();        @Override        public Object instantiateItem(ViewGroup container, final int position) {            int i = position % mImageIds.length;            //初始化布局对象            View view = View.inflate(mContent, R.layout.viewpager_item, null);            ImageView ivIcon = (ImageView) view.findViewById(R.id.ivIcon);            //给ViewPager的item增加点击事件(一般会给图片设置点击事件)            ivIcon.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Toast.makeText(mContent, "跳转到美图展示界面", Toast.LENGTH_SHORT).show();                }            });            ivIcon.setImageResource(mImageIds[i]);            /**             * setImageResource和setBackGroundResource区别：             * 后者是可以填充父布局的             */            //将布局对象添加给容器            container.addView(view);            //返回布局对象            return view;        }        //销毁布局，由系统自动调用（固定这样写）        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            //上面我们将布局放入到container容器中，现在移除            container.removeView((View) object);        }    }}

布局：

<?xml version="1.0" encoding="utf-8"?><RelativeLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <FrameLayout        android:layout_width="match_parent"        android:layout_height="200dp">        <android.support.v4.view.ViewPager            android:id="@+id/viewpager"            android:layout_width="match_parent"            android:layout_height="match_parent"/>        <LinearLayout            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_gravity="bottom"            android:background="#277bdb"            android:gravity="center"            android:orientation="vertical"            android:padding="8dp">            <TextView                android:id="@+id/tvTitle"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:text="标题"                android:textColor="#000"                android:textSize="16sp"/>            <LinearLayout                android:id="@+id/llContainer"                android:layout_width="wrap_content"                android:layout_height="wrap_content"                android:gravity="center_horizontal"                android:orientation="horizontal"/>        </LinearLayout>    </FrameLayout></RelativeLayout>

shape标签：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">    <solid android:color="#ccc"/>    <size        android:width="10dp"        android:height="10dp"/></shape>

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"       android:shape="oval">    <solid android:color="#f00"/>    <size        android:width="10dp"        android:height="10dp"/></shape>