ViewPager是3.0以后加入的用于展现多个页面翻页效果的组件。Google为它提供了很多有趣的动画效果,使用它可以轻松实现令人舒服的交互效果。下面,在此记录ViewPager的使用方法。
先来讲讲图片翻页的例子。
首先是xml文件:
<android.support.v4.view.ViewPager android:id="@+id/viewPagerId" android:layout_width="match_parent" android:layout_height="match_parent"> </android.support.v4.view.ViewPager>
然后图片和图片Id列表:
final private int[] mImageIds = new int[]{R.mipmap.guide_image1,R.mipmap.guide_image2,R.mipmap.guide_image3}; List<ImageView> mImageViews = new ArrayList<ImageView>(); ViewPager viewPager;
接下来获取组件实例:
viewPager = (ViewPager) findViewById(R.id.viewPagerId); for(int i=0;i<mImageIds.length;i++){ ImageView imageView = new ImageView(this); imageView.setImageResource(mImageIds[i]); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); mImageViews.add(imageView); } //设置ViewPager翻页动画 viewPager.setPageTransformer(true , new DepthPageTransformer());
其中,DepthPageTransformer()是一个动画类,在Google教程中粘贴的,会放在本文最后。
最后,设置viewPager的适配器:
viewPager.setAdapter(new PagerAdapter() { //设置打开这个Page的资源 @Override public Object instantiateItem(ViewGroup container, int position) { container.addView(mImageViews.get(position)); return mImageViews.get(position); } //结束这个Page @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(mImageViews.get(position)); } @Override public int getCount() { return mImageIds.length; } @Override public boolean isViewFromObject(View view, Object o) { return view==o; } });
挺简单的哈,但是这样用的少,一般是和Fragment配合的。
和Fragment配合的例子如下。
算了,换下一篇吧 ViewPager用法(二)
补上DepthPageTransformer类的代码
public class DepthPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.75f; public void transformPage(View view, float position) { int pageWidth = view.getWidth(); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 0) { // [-1,0] // Use the default slide transition when moving to the left page view.setAlpha(1); view.setTranslationX(0); view.setScaleX(1); view.setScaleY(1); } else if (position <= 1) { // (0,1] // Fade the page out. view.setAlpha(1 - position); // Counteract the default slide transition view.setTranslationX(pageWidth * -position); // Scale the page down (between MIN_SCALE and 1) float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position)); view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } }