Viewpager 实现画廊Gallery效果，左右两侧随着滑动一定比例缩放

来源：互联网发布：守望先锋ps4网络要求编辑：程序博客网时间：2024/05/05 09:14

画廊效果系列一：

左侧和右侧的页面显示30%，且随着页面滑动，左侧右侧和中间的页面有着不同的变化效果。页面切换很平滑。

效果图如下：

这里写图片描述

实现原理：

ViewPager 无限轮播，设置了Integer.MAX_VALUE ; 其实也可以设置为前一张后一张，不过麻烦点儿
ViewPager 的PageTransformer监听，用于设置ViewPager的页面切换时的动画效果
clipChildren 属性，用于设定是否约束子控件

遇到的问题

设定clipChildren不起作用

解决办法：应该把此属性设置给ViewPager的父控件，因为约束是父控件约束子控件，而非平级
加载新页面时，需要手动触动一下，左侧/右侧加载的页面才会变成70%

解决办法：页面初始化的时候就设置大小为70%

核心代码

ViewPager 布局设定

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/activity_main"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:clipChildren="false"    tools:context="ha.houviewpagergallery.MainActivity">    <android.support.v4.view.ViewPager        android:id="@+id/pager"        android:layout_marginTop="100dp"        android:layout_marginLeft="100dp"        android:layout_marginRight="100dp"        android:layout_width="match_parent"        android:layout_height="500dp"></android.support.v4.view.ViewPager></RelativeLayout>

2 . 代码中ViewPager的PageTransformer的监听

 pager.setPageTransformer(true, new ViewPager.PageTransformer() {            @Override            public void transformPage(View page, float position) {                    page.setScaleY(1f - ((float) (0.3 * Math.abs(position))));                    page.setScaleX(1f - ((float) (0.3 * Math.abs(position))));          }        });

3 . 预设ViewPager加载的页面的大小

view.setScaleY(0.7f);view.setScaleX(0.7f);

实现源码

欢迎访问我的github，有帮助的话就star/fork一个吧，^3^
https://github.com/liuda555/HouViewPagerGallery

0 0