ViewPager是一个允许页面左右滑动的布局管理器,不同的页面可以有不同数据。我们可以通过实现ViewPager.PageTransformer接口来自定义滑动切换效果。
我们需重写transformPage方法,这个方法有2个参数。第一个参数是指需要设置滑动效果的页面,包括即将滑出页面,即将滑入页面,已经滑出的页面,我们可以通过第二个参数判断第一个参数是指哪个页面。第二个参数不是页面的下标,它是一个浮点数,在用户滑动的过程中,它是动态变化的,通过判断它的值可得出第一个参数的具体指向。
如果ViewPager没有设置PageMargin属性,当前页面的position为0,前一个为-1,后一个为1。在滑动的过程中,position不断变化。以左滑为例,当ViewPager向左滑动时,当前页面的position从0逐渐变为-1,即将滑入的页面position从1逐渐变为0,滑入的后一个页面position变为1。当设置了PageMargin属性时,当前页面依旧为0,前后页面得加上或减去一个偏移量。(前减后加)。偏移量为 pageMargin / pageWidth 。我们可以在滑动的过程中通过setAlpha()等方法,改变page的属性达到动态效果。
下面是一个小例子,如图。
由图我们可以看到,当页面没有处于当前页面时,页面变得透明,高度变少,当页面滑至当前页面时,恢复正常。另外我们可以看到屏幕不仅显示当前页面,而且显示前后页面的部分视图。我们可以通过设置ViewPager父布局以及ViewPager本身属性clipChildren为false实现。这个属性表示是否裁切子View的显示范围,设置为false就可以实现上述效果。
public class MyPageTransformer implements ViewPager.PageTransformer {
//透明度和高度最小值
private static final float MIN_SCALE = 0.70f;
private static final float MIN_ALPHA = 0;
@Override
public void transformPage(@NonNull View page, float position) {
int width = page.getWidth();
int offset = 20 / width; // 20为PageMargin属性值
if(position < -1 - offset){
page.setAlpha(MIN_ALPHA);
page.setScaleY(MIN_SCALE);
}else if(position <= 1 + offset){//在[-1-offset,1+offset]范围
if(position == 0){ //当前页面
page.setAlpha(1.0f);
page.setScaleY(1.0f);
}else{
if(position < 0){ //在[-1-offset,0]范围
//平滑变化
float f = MIN_ALPHA + (1 - MIN_ALPHA) * (1 + position + offset);
page.setAlpha(f);
float s = MIN_SCALE +(1 - MIN_SCALE) * (1+position + offset);
page.setScaleY(s);
}else{ //在[0,1+offset]范围
//平滑变化
float f = MIN_ALPHA + (1 - MIN_ALPHA) * (1 - position + offset);
page.setAlpha(f);
float s = MIN_SCALE +(1 - MIN_SCALE) * (1 - position + offset);
page.setScaleY(s);
}
}
}
}
}
我们根据不断变化的参数position来设置页面属性,达到平滑过渡的效果。
布局文件:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:clipChildren="false"
android:background="@color/colorPrimary"
tools:context=".Main3Activity">
<android.support.v4.view.ViewPager
android:id="@+id/view_pager_2"
android:layout_width="match_parent"
android:layout_height="220dp"
android:layout_marginLeft="60dp"
android:layout_marginRight="60dp"
android:clipChildren="false"
/>
</RelativeLayout>
设置margin留出空间来显示其他页面。
activity代码:
public class Main3Activity extends AppCompatActivity {
private ViewPager viewPager;
private List<Integer> list;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main3);
init();
MyPageTransformer n = new MyPageTransformer();
cardViewAdapter adapter = new cardViewAdapter(this, list);
viewPager.setAdapter(adapter);
viewPager.setPageMargin(20);
viewPager.setOffscreenPageLimit(3);//设置缓存页面数量
viewPager.setPageTransformer(false,n);
}
private void init(){
viewPager = findViewById(R.id.view_pager_2);
list = new ArrayList<>();
for(int i = 0; i < 7; i++){
list.add(R.drawable.a);
}
}
}
viewPager适配器:
public class cardViewAdapter extends PagerAdapter {
private List<Integer> list;
private LayoutInflater inflater;
private Context mContext;
private ImageView iv;
cardViewAdapter(Context context, List<Integer> list){
this.list = list;
mContext = context;
inflater = LayoutInflater.from(mContext);
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
View view = inflater.inflate(R.layout.cardview, container, false);
iv = view.findViewById(R.id.image_card);
iv.setImageResource(list.get(position));
container.addView(view);
return view;
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((View) object);
}
}
其他效果同理,修改MyPageTransformer代码即可。