Viewpager设置转换动画

参考：https://blog.csdn.net/cuenca/article/details/52356956

效果图如下：

这个效果如何实现呢？？

viewpager的默认情况是裁剪过的，所以导致只能显示当前一张图片，如果想要显示如图，应该添加属性android：clipChildren=false,他的父布局也要这样设置，代码如下：

<FrameLayout android:layout_width="match_parent" android:layout_height="@dimen/dimen_190" android:clipChildren="false"> <android.support.v4.view.ViewPager android:id="@+id/vp_banner" android:layout_width="match_parent" android:layout_height="@dimen/dimen_164" android:layout_marginBottom="@dimen/dimen_13" android:layout_marginLeft="@dimen/dimen_19" android:layout_marginRight="@dimen/dimen_19" android:layout_marginTop="@dimen/dimen_13" android:clipChildren="false"> </android.support.v4.view.ViewPager> </FrameLayout>

然后将这种效果封装成一个类，代码如下：

/** * Created by Administrator on 2016/5/6. * <p> * viewpager实现无限循环效果 * 暂时删除自动轮播效果 */ public class InfiniteLoopViewPager2 { public static final String TAG = "InfiniteLoopViewPager2"; private Context mContext; private ViewPager mViewPager; private List<BannerListBean.BannerItem> mArrayList; private int currentPoint; //切换页面的时间间隔 private static final int BANNER_INTERVAL = 3000; //自动轮播发送消息的what private static final int BANNER_REQUEST_CODE = 20; //viewpager中图片个数的倍数 private static final int VIEWPAGER_SIZE = 10000; //用于无限自动循环的handle // private Handler handler = new Handler() { // @Override // public void handleMessage(Message msg) { // if (msg.what == BANNER_REQUEST_CODE) { // mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1); // handler.sendEmptyMessageDelayed(BANNER_REQUEST_CODE, BANNER_INTERVAL); // } // } // }; private MyViewpagerAdapter mAdapter; public InfiniteLoopViewPager2(Context context, View bannerView) { this.mContext = context; initListViewBanner(bannerView); } /** * 初始化轮播图 */ private void initListViewBanner(View bannerView) { mViewPager = (ViewPager) bannerView.findViewById(R.id.vp_banner); mArrayList = new ArrayList<>(); } /** * 显示数据 * @param list 数据集 */ public void showViewpager(List<BannerListBean.BannerItem> list) { if(list == null || list.size() <= 0) return; this.mArrayList = list; if(mAdapter == null){ mViewPager.setPageMargin((int) mContext.getResources().getDimension(R.dimen.dimen_10));//设置页面间距 mViewPager.setOffscreenPageLimit(3);//设置缓存几张图片 mViewPager.setPageTransformer(true,new ScalePageTransformer());//设置切换动画 mAdapter = new MyViewpagerAdapter(); mViewPager.setAdapter(mAdapter); mViewPager.setCurrentItem(mArrayList.size() * VIEWPAGER_SIZE / 2); initViewPagetEvent(); }else { mAdapter.notifyDataSetChanged(); } } private class MyViewpagerAdapter extends PagerAdapter { @Override public int getCount() { return mArrayList.size() * VIEWPAGER_SIZE; } @Override public Object instantiateItem(ViewGroup container, final int position) { final int pos = position % mArrayList.size(); RoundImageView imageView = new RoundImageView(mContext); imageView.setBorderRadius(9); imageView.setScaleType(ImageView.ScaleType.CENTER_CROP); BannerListBean.BannerItem banner = mArrayList.get(pos); RequestManager.getInstance().loadImage(banner.path, imageView,RequestManager.ImageSize.SIZE_322_163);//图片加载 imageView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { if (onItemClickListener != null) { onItemClickListener.onItemClick(currentPoint); } LoggerUtils.d("banner click " + currentPoint); } }); container.addView(imageView); return imageView;//这句很容忘记 } @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView((View) object); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } } /** * 实现页面切换动画 */ class ScalePageTransformer implements ViewPager.PageTransformer { private static final float DEFAULT_MIN_SCALE = 0.92f; private float mMinScale = DEFAULT_MIN_SCALE; @Override public void transformPage(View page, float position) { LoggerUtils.d(TAG + "transformPage: page = " + page + "," + "position = " + position); if (position < -1) { // page.setAlpha(mMinScale); // page.setScaleX(mMinScale); page.setScaleY(mMinScale); } else if (position <= 1) { // [-1,1] if (position < 0) //[0，-1] { float factor = mMinScale + (1 - mMinScale) * (1 + position); // page.setAlpha(factor); // page.setScaleX(factor); page.setScaleY(factor); } else//[1，0] { float factor = mMinScale + (1 - mMinScale) * (1 - position); // page.setAlpha(factor); // page.setScaleX(factor); page.setScaleY(factor); } } else { // (1,+Infinity] // page.setAlpha(mMinScale); // page.setScaleX(mMinScale); page.setScaleY(mMinScale); } } } /** * 初始化监听事件 */ private void initViewPagetEvent() { mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { //Log.d("TAG","过时position：" + position); position = position % mArrayList.size(); currentPoint = position; } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageScrollStateChanged(int state) { } }); //触摸监听，如果需要无限自动循环需要打开 // mViewPager.setOnTouchListener(new View.OnTouchListener() { // @Override // public boolean onTouch(View v, MotionEvent event) { // switch (event.getAction()) { // case MotionEvent.ACTION_DOWN: // handler.removeCallbacksAndMessages(null); // break; // case MotionEvent.ACTION_MOVE: // handler.removeCallbacksAndMessages(null); // break; // case MotionEvent.ACTION_CANCEL: // handler.sendEmptyMessageDelayed(BANNER_REQUEST_CODE, BANNER_INTERVAL); // break; // case MotionEvent.ACTION_UP: // handler.sendEmptyMessageDelayed(BANNER_REQUEST_CODE, BANNER_INTERVAL); // break; // } // return false; // } // }); } /** * 开始切换 */ public void startViewPager() { // if (!handler.hasMessages(BANNER_REQUEST_CODE)) { // handler.sendEmptyMessageDelayed(BANNER_REQUEST_CODE, BANNER_INTERVAL); // } } /** * 停止切换 */ public void endViewPager() { // handler.removeCallbacksAndMessages(null); } private OnItemClickListener onItemClickListener; //监听图片点击 public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; } public interface OnItemClickListener { void onItemClick(int position); } }

如果有执行灯的需求，初始化指示灯，代码如下：

private void initPoint() { if (mPoint.getChildCount() > 0) { mPoint.removeAllViews(); } for (int i = 0; i < mArrayList.size(); i++) { ImageView pointImage = new ImageView(mContext); pointImage.setImageResource(R.drawable.banner_index_point); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); if (i != mArrayList.size() - 1) { params.rightMargin = (int) mContext.getResources().getDimension(R.dimen.dimen_8); } if (i != currentPoint) { pointImage.setEnabled(false); } pointImage.setLayoutParams(params); mPoint.addView(pointImage); } }