[Android]ScaleViewPager--仿“想去”客户端图片展示效果--中轴旋转ViewPager动画实现

效果图

实现原理是使用ViewPager加上切换时的动画

下面是一些基础知识的传送门

中轴旋转 http://blog.csdn.net/guolin_blog/article/details/10766017

拖动式动画 http://blog.csdn.net/guolin_blog/article/details/10471245

ViewPager关键代码

设置VewPager后台持有多少个View（一般选择3以上），因为同一个屏幕内需要显示三个View(中间全部加左右View的一部分)

setOffscreenPageLimit();

设置左右View露出的多少

setPageMargin();

Adapter关键代码

设立的paddingLeft与PaddingRight要与上面ViewPager的PageMagin有一定关系，可以自己设置看效果

img.setPadding(paddingLeft, paddingTop, paddingRight,paddingBottom);

ScaleYViewPager源码

package com.usst.csl.viewpagergallery.ui;import java.util.ArrayList;import java.util.List;import android.content.Context;import android.content.res.TypedArray;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;public class ScaleYViewPager extends ViewPager {private int mPgerMargin = -350;private int mPaddingLeft = 130;private int mPaddingRight = 130;private int mPageLimit = 3;private List<Integer> mList;private DefaultViewPagerAdapter mAdapter;private Context mContext;private int mDefaultTopMargin = 16;private int mDefaultBottomMargin = 16;public ScaleYViewPager(Context context) {this(context, null);}public ScaleYViewPager(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;TypedArray a = context.obtainStyledAttributes(attrs,R.styleable.ScaleYViewPager);mPageLimit = a.getInteger(R.styleable.ScaleYViewPager_offscreenPageLimit, mPageLimit);mPgerMargin = a.getInteger(R.styleable.ScaleYViewPager_pagerMargin,mPgerMargin);mPaddingLeft = a.getInteger(R.styleable.ScaleYViewPager_paddingLeft,mPaddingLeft);mPaddingRight = a.getInteger(R.styleable.ScaleYViewPager_paddingRight,mPaddingRight);a.recycle();setOffscreenPageLimit(mPageLimit);setPageMargin(mPgerMargin);setPageTransformer(true, new ScaleYPageTransformer());mList = new ArrayList<Integer>();mList.add(R.drawable.one);mList.add(R.drawable.two);mList.add(R.drawable.three);mList.add(R.drawable.four);mList.add(R.drawable.five);mList.add(R.drawable.six);mAdapter = new DefaultViewPagerAdapter(mList);setAdapter(mAdapter);}/** * set the distance in the center view of the ViewPager *  * @param pagerDis */public void setScaleYPagerMargin(int pagerDis) {setPageMargin(mPgerMargin);mAdapter.notifyDataSetChanged();}/** * set the number of view cache,better > 3 *  * @param pagerDis */public void setScaleYOffscreenPageLimit(int pagerDis) {if (pagerDis < 3) {throw new IllegalArgumentException("the offscreen page limit must >3");}setOffscreenPageLimit(pagerDis);}/** * add some image resource to the list *  * @param list */public void setImgResList(List<Integer> list) {if (list != null && list.size() > 0) {mList.clear();mList.addAll(list);mAdapter.notify();} else {throw new IllegalArgumentException("the list is illegal!");}}/** * default adapter *  * @author KC *  */private class DefaultViewPagerAdapter extends PagerAdapter {private List<Integer> mList;public DefaultViewPagerAdapter(List<Integer> list) {this.mList = list;}@Overridepublic int getCount() {return mList.size();}@Overridepublic boolean isViewFromObject(View view, Object obj) {return view == obj;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {ImageView img = new ImageView(mContext);img.setImageResource(mList.get(position));img.setPadding(mPaddingLeft, mDefaultTopMargin, mPaddingRight,mDefaultBottomMargin);((ViewPager) container).addView(img, position);return img;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {((ViewPager) container).removeView((ImageView) object);}}}

PageTransformer动画源码

package com.usst.csl.viewpagergallery.ui;import android.support.v4.view.ViewPager.PageTransformer;import android.view.View;public class ScaleYPageTransformer implements PageTransformer {private static final float MIN_SCALE = 0.9f;private static final float MIN_ALPHA = 0.9f;private static final float ROTATION_Y = -30;public void transformPage(View view, float position) {int pageWidth = view.getWidth();int pageHeight = view.getHeight();if (position < -1) { // [-Infinity,-1)// This page is way off-screen to the left.view.setAlpha(0);} else if (position <= 1) { // [-1,1]// Modify the default slide transition to shrink the page as// wellfloat scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));float vertMargin = pageHeight * (1 - scaleFactor) / 2;float horzMargin = pageWidth * (1 - scaleFactor) / 2;if (position < 0) {view.setTranslationX(horzMargin - vertMargin / 2);} else {view.setTranslationX(-horzMargin + vertMargin / 2);}// Scale the page down (between MIN_SCALE and 1)view.setScaleX(scaleFactor);view.setScaleY(scaleFactor);// rotate yview.setRotationY(position * ROTATION_Y);// Fade the page relative to its size.view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)/ (1 - MIN_SCALE) * (1 - MIN_ALPHA));} else { // (1,+Infinity]// This page is way off-screen to the right.view.setAlpha(0);}}}

在XML中加载

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    xmlns:scaleyviewpager="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context=".TestActivity" >    <com.usst.csl.viewpagergallery.ui.ScaleYViewPager        android:id="@+id/pager"        android:layout_width="match_parent"        android:layout_height="match_parent"        scaleyviewpager:offscreenPageLimit="3"        scaleyviewpager:pagerMargin="-350" /></RelativeLayout>

下面是源码地址

https://github.com/ChenSiLiang/ScaleViewPager.git