ViewPager进阶，轻松实现简拼的splash界面

来源：互联网发布：创建表的sql语句主键编辑：程序博客网时间：2024/05/17 02:52

这是我们需要实现的效果图。刚开始我没想到用viewPager来实现，但是看了这篇博文，我觉得viewpager可以实现这个效果http://blog.csdn.net/lmj623565791/article/details/40411921/

开始有两个问题没搞懂：

1.viewpager可以在实现在显示一张图片的情况下，左右两边还可以各显示一半的图片吗？

2.viewpager滑动可以自定义动画效果吗？

因为上面两个问题，所以没想到viewpager这么强大

在大神的博客里可以看到这么一个东西 pageTransformer

然后通过Viewpager.setPageTransformer(boolean reverseDrawingOrder, PageTransformer transformer) 设置ViewPager切换时的动画效果，太方便了。。。。。

下面代码对这个pageTransformer里的

transformPage(View page, float position)

做了解释，另外我们可以通过translationX的方法将左右两边的view移动到屏幕里面来，移动的偏移量我随便写了个400。

class PageTransformerListener implements ViewPager.PageTransformer{        private static final float MIN_SCALE = 0.4f;        private static final float MIN_ALPHA = 0.5f;        /**         * position会根据view的移动而变化  比如当前有三个view 1,2,3         * 2在中间的时候，那么view2的position 为 0；         * 1在左边的时候，那么view1 的position为 -1；         * 3在右边的时候 ， 那么view3的position为1；         *         * 所以在view2移动的view3 值得变化范围就是 0---1         * VIEW2移动的view1 值得变化范围是 0 ---  -1         * 反之 1---0 ， -1 --- 0         *         * @param page  移动的View对象         * @param position   移动位置变化的值         */        @Override        public void transformPage(View page, float position) {            //设置偏移量  目的为了让左边的view（position = -1） 和 右边的view（position = 1）显示在屏幕上面，            page.setTranslationX(-400 * position);            //透明度变化            float alpha = MIN_ALPHA * position;            if(alpha < 0)                alpha = 1.0f + alpha;            else                alpha = 1.0f - alpha;            page.setAlpha(alpha);            //Y轴缩放比            float scaleY = MIN_SCALE * position;            if(scaleY < 0)                scaleY = 1.0f + scaleY;            else                scaleY = 1.0f - scaleY;            page.setScaleY(scaleY);        }    }

最后贴上完整代码

activity部分代码:

public class SplashActivity extends AppCompatActivity {    private ViewPager viewPager;    private int color[] = {Color.BLUE, Color.GRAY, Color.GREEN, Color.RED, Color.YELLOW};    private int drawable[] = {R.mipmap.mainpage_1, R.mipmap.mainpage_2, R.mipmap.mainpage_3, R.mipmap.mainpage_4, R.mipmap.mainpage_5};    private List<View>views;    private ImageView imageView[];    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_splash);        initView();    }    private void initView() {        viewPager = (ViewPager)super.findViewById(R.id.activity_splash_viewpager);        views = new ArrayList<View>();        for(int i =0; i< 5; i++){            View view = LayoutInflater.from(this).inflate(R.layout.splash_viewpager_item, null);            view.findViewById(R.id.splash_viewpager_item_iv_bg).setBackgroundResource(drawable[i]);            TextView textView = (TextView)view.findViewById(R.id.splash_viewpager_item_tv_content);            textView.setText( "Content " + i);            views.add(view);        }        SplashViewPagerAdapter splashViewPagerAdapter = new SplashViewPagerAdapter(views);        viewPager.setOffscreenPageLimit(2);       //缓存页数（左右都为两张）        viewPager.setAdapter(splashViewPagerAdapter);        viewPager.setPageTransformer(true, new PageTransformerListener()); //监听view滑动的位置变化        imageView = new ImageView[5];        imageView[0] = (ImageView)findViewById(R.id.activity_splash_dot0);        imageView[1] = (ImageView)findViewById(R.id.activity_splash_dot1);        imageView[2] = (ImageView)findViewById(R.id.activity_splash_dot2);        imageView[3] = (ImageView)findViewById(R.id.activity_splash_dot3);        imageView[4] = (ImageView)findViewById(R.id.activity_splash_dot4);        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                imageView[position].setBackgroundResource(R.mipmap.intro_page_dot2);                if(position>=1)                    imageView[position - 1].setBackgroundResource(R.mipmap.intro_page_dot1);                if(position < 4){                    imageView[position + 1].setBackgroundResource(R.mipmap.intro_page_dot1);                }            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }    class PageTransformerListener implements ViewPager.PageTransformer{        private static final float MIN_SCALE = 0.4f;        private static final float MIN_ALPHA = 0.5f;        /**         * position会根据view的移动而变化  比如当前有三个view 1,2,3         * 2在中间的时候，那么view2的position 为 0；         * 1在左边的时候，那么view1 的position为 -1；         * 3在右边的时候 ， 那么view3的position为1；         *         * 所以在view2移动的view3 值得变化范围就是 0---1         * VIEW2移动的view1 值得变化范围是 0 ---  -1         * 反之 1---0 ， -1 --- 0         *         * @param page  移动的View对象         * @param position   移动位置变化的值         */        @Override        public void transformPage(View page, float position) {            //设置偏移量  目的为了让左边的view（position = -1） 和 右边的view（position = 1）显示在屏幕上面，            page.setTranslationX(-400 * position);            //透明度变化            float alpha = MIN_ALPHA * position;            if(alpha < 0)                alpha = 1.0f + alpha;            else                alpha = 1.0f - alpha;            page.setAlpha(alpha);            //Y轴缩放比            float scaleY = MIN_SCALE * position;            if(scaleY < 0)                scaleY = 1.0f + scaleY;            else                scaleY = 1.0f - scaleY;            page.setScaleY(scaleY);        }    }}

viewpagerAdapter：

public class SplashViewPagerAdapter extends PagerAdapter {    private List<View> views;    public SplashViewPagerAdapter(List<View> views){        this.views = views;    }    @Override    public int getCount() {        return views.size();    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView(views.get(position));    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(views.get(position));        return views.get(position);    }}

xml部分代码：（activity_splash.xml）

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:gravity="center"    android:background="@mipmap/aboutbg"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.view.ViewPager        android:id="@+id/activity_splash_viewpager"        android:layout_width="fill_parent"        android:layout_height="500dp" />    <LinearLayout        android:gravity="center"        android:layout_width="fill_parent"        android:layout_height="wrap_content">        <ImageView            android:id="@+id/activity_splash_dot0"            android:background="@mipmap/intro_page_dot2"            android:layout_marginLeft="2dp"            android:layout_marginRight="2dp"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />        <ImageView            android:id="@+id/activity_splash_dot1"            android:background="@mipmap/intro_page_dot1"            android:layout_marginLeft="2dp"            android:layout_marginRight="2dp"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />        <ImageView            android:id="@+id/activity_splash_dot2"            android:background="@mipmap/intro_page_dot1"            android:layout_marginLeft="2dp"            android:layout_marginRight="2dp"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />        <ImageView            android:id="@+id/activity_splash_dot3"            android:background="@mipmap/intro_page_dot1"            android:layout_marginLeft="2dp"            android:layout_marginRight="2dp"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />        <ImageView            android:id="@+id/activity_splash_dot4"            android:background="@mipmap/intro_page_dot1"            android:layout_marginLeft="2dp"            android:layout_marginRight="2dp"            android:layout_width="wrap_content"            android:layout_height="wrap_content" />    </LinearLayout></LinearLayout>

splash_viewpager_item.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:orientation="vertical" android:layout_width="match_parent"    android:layout_height="match_parent">    <ImageView        android:id="@+id/splash_viewpager_item_iv_bg"        android:layout_centerInParent="true"        android:layout_width="200dp"        android:layout_height="400dp" />    <TextView        android:id="@+id/splash_viewpager_item_tv_content"        android:layout_centerInParent="true"        android:text="content"        android:textSize="30sp"        android:layout_width="wrap_content"        android:layout_height="wrap_content" /></RelativeLayout>

最终效果：（偏移量设置太大了。。。可以设置小点）

1 0