ViewPager的翻页动画

1. ViewPager的简介和作用
   ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view
   1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。
   2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。
   3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

本文实现ViewPager实现翻页动画，并且下方圆点表示指示当前显示第几页

1. activity的代码如下：

public class WelGuideActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private List<ImageView> ivs;
    private LinearLayout ll_guide_points;
    private ImageView iv_point_red;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wel_guide);
        getSupportActionBar().hide();
        init();
    }

    private void init() {
        viewPager=(ViewPager) findViewById(R.id.pager);
        ll_guide_points=(LinearLayout) findViewById(R.id.ll_guide_points);
        iv_point_red=(ImageView) findViewById(R.id.iv_point_red);
        //准备数据
        initData();
        // 设置适配器
        viewPager.setAdapter(new QuickPageAdapter<ImageView>(ivs));
        viewPager.addOnPageChangeListener(new MyOnPageChangeListener());
    }

    private void initData() {
        int[] imgIds=new int[]{R.drawable.guide_1,R.drawable.guide_2,R.drawable.guide_3};
        ivs=new ArrayList<ImageView>();
        for (int i=0;i<imgIds.length;i++){
            ImageView iv=new ImageView(getApplicationContext());
            iv.setBackgroundResource(imgIds[i]);
            ivs.add(iv);

            //创建灰点
            ImageView point=new ImageView(getApplicationContext());
            point.setBackgroundResource(R.drawable.guide_point_normal);
            // 设置大小
            LinearLayout.LayoutParams params=new LinearLayout.LayoutParams(30,30);
            if(i!=0){
                params.leftMargin=30;
            }
            point.setLayoutParams( params);

            ll_guide_points.addView(point);
        }
    }



    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

        //position 页数，从0 开始，positionOffsetPixels 移动的像素，positionOffset 移动的像素占屏幕宽度的比例
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            Log.d("Tag",position+"   "+positionOffset+"   "+positionOffsetPixels);
            int redPointX=(int) (positionOffset+position)*60;
            // 移动红点，通过修改左边距 30+30=60
            RelativeLayout.LayoutParams params=(RelativeLayout.LayoutParams) iv_point_red.getLayoutParams();
            params.leftMargin=redPointX;
            iv_point_red.setLayoutParams(params);
        }

        @Override
        public void onPageSelected(int position) {

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }
}

1. 为了简化ViewPager的使用，所以对进行了PagerAdapter封装，以后可根据需要进行调整

public class QuickPageAdapter<T extends View> extends PagerAdapter {
    private List<T> mList;

    public QuickPageAdapter(List<T> mList) {
        this.mList = mList;
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(mList.get(position));
        return mList.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(mList.get(position));
    }
}

简化之后，使用它，这样不用每次都写个适配器
List views = new ArrayList();
…
mViewPager.setAdapter(new QuickPageAdapter(views));

1. 至于红点和灰点，为Drawable下的shape文件

红点颜色为#f00, 灰点为@android:color/darker_gray

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

1. Activity的布局内容如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_wel_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_height="match_parent"
        android:layout_width="match_parent"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp">
        <LinearLayout
            android:id="@+id/ll_guide_points"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            />
        <ImageView
            android:id="@+id/iv_point_red"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/guide_point_red"/>
    </RelativeLayout>


</RelativeLayout>

6.上述就实现了翻页动画和圆点指示功能，但是有一点需要注意一下。

1. 红点指示当前显示的是哪一页，原理其实是使用id为iv_point_red的ImageView来覆盖ll_guide_points中三个灰点的其中一个，第一页则覆盖第一个，第二页则覆盖第二个，以此类推。
2. 在Activity的布局文件中，iv_point_red的宽和高设置为10dp,在代码中我将灰点设置为了30,经研究此处的单位应该为px, 所以说灰点为30px,dp和px的关系如下
   **dp是虚拟像素,在不同的像素密度的设备上会自动适配,比如:
   在320x480分辨率,像素密度为160,1dp=1px
   在480x800分辨率,像素密度为240,1dp=1.5px
   计算公式:1dp*像素密度/160 = 实际像素数
   px（像素）：屏幕上的点.
   dp（与密度无关的像素）：一种基于屏幕密度的抽象单位.在每英寸160点的显示器上,1dp = 1px.**
3. 我在分辨率为1920*1080 的手机上运行，刚好10dp对等30px,所以才恰好覆盖。注意美观度。
4. 所以，在代码中我们应该做一个适配，即把我们知道的dp（在布局文件中已经定义）转成需要的px在代码中使用，可以调用如下方法：

private int dp2px(int dp){
        // px=dp*屏幕的密度比
        float desity=getResources().getDisplayMetrics().density; //屏幕的密度比
        int px= (int) (dp*desity+0.5f);
        return px;
}

关于ViewPager的深入学习可参考大神们写的一些博客：
http://www.jianshu.com/p/e5abbda4a71c ViewPager 全面剖析及使用详解