xml
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#edebeb"
android:clipChildren="false"
android:gravity="center_horizontal"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="312.5dp"
android:layout_height="500dp"
android:layout_marginTop="@dimen/xhdpi_30dp"
/>
</LinearLayout>
限制viwpager的宽度并居中,这样就控制了被选中的viewpager的图片的位置,父布局的Lineralayout设置了
android:clipChildren="false",这样viewpager没有被选中的pager也会展示出来。
关键代码:
mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());
设置了viewpager切换时的动画,
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
@Override
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.5f);
}
else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float MIN_SCALE = 0.85f;
float 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);
// Fade the page relative to its size.
float MIN_ALPHA = 0.5f;
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.5f);
}
}
}