ViewPager的翻页动画

来源：互联网发布：最小的windows 编辑：程序博客网时间：2024/06/05 08:09

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

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

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

为了简化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));

至于红点和灰点，为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>

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.上述就实现了翻页动画和圆点指示功能，但是有一点需要注意一下。

红点指示当前显示的是哪一页，原理其实是使用id为iv_point_red的ImageView来覆盖ll_guide_points中三个灰点的其中一个，第一页则覆盖第一个，第二页则覆盖第二个，以此类推。
在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.**
我在分辨率为1920*1080 的手机上运行，刚好10dp对等30px,所以才恰好覆盖。注意美观度。
所以，在代码中我们应该做一个适配，即把我们知道的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 全面剖析及使用详解

0 0