实现步骤,只需四步:
1.xml布局(注意:android:clipChildren="false"属性,最外层布局和ViewPager都设置为false):
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/gradual_color_bg"
android:gravity="center"
android:clipChildren="false"
android:orientation="vertical">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="200dp"
android:layout_marginLeft="40dp"
android:layout_marginRight="40dp"
android:clipChildren="false"/>
</RelativeLayout>
2.新建CardViewAdapter :
public class CardViewAdapterextends PagerAdapter {
private Listlist;
private Contextcontext;
private LayoutInflaterinflater;
private ImageViewitem_cardIv ;
public CardViewAdapter(Context context, List list) {
this.context = context;
this.list = list;
inflater = LayoutInflater.from(context);
}
@Override
public int getCount() {
return list.size();
}
@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}
@Override
public ObjectinstantiateItem(ViewGroup container, final int position) {
View view =inflater.inflate(R.layout.item_card_view, container, false);
item_cardIv = view.findViewById(R.id.item_cardIv);
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
3.自定义卡片样式(设置阴影和缩放效果),新建ScaleTransformerCardView:
public class ScaleTransformerCardViewimplements ViewPager.PageTransformer {
private static final float MIN_SCALE =0.90f;
private static final float MIN_ALPHA =0.8f;
private Contextcontext;
private float elevation;
public ScaleTransformerCardView(Context context) {
this.context = context;
elevation = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
20, context.getResources().getDisplayMetrics());
}
@Override
public void transformPage(View page, float position) {
//给卡片添加阴影 ------开始-------
if (position < -1 || position >1) {
}else {
if (position <0) {
((CardView) page).setCardElevation((1 + position) *elevation);
}else {
((CardView) page).setCardElevation((1 - position) *elevation);
}
}
//给卡片添加阴影 ------结束-------
//给卡片添加缩放效果 ------开始-------
if (position < -1 || position >1) {
page.setAlpha(MIN_ALPHA);
page.setScaleX(MIN_SCALE);
page.setScaleY(MIN_SCALE);
}else if (position <=1) {// [-1,1]
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
if (position <0) {
float scaleX =1 +0.1f * position;
Log.d("google_lenve_fb", "transformPage: scaleX:" + scaleX);
page.setScaleX(scaleX);
page.setScaleY(scaleX);
}else {
float scaleX =1 -0.1f * position;
page.setScaleX(scaleX);
page.setScaleY(scaleX);
}
page.setAlpha(MIN_ALPHA + (scaleFactor -MIN_SCALE) / (1 -MIN_SCALE) * (1 -MIN_ALPHA));
}
//给卡片添加缩放效果 ------结束-------
}
}
4.代码调用:
List list =new ArrayList<>();
list.add(R.mipmap.icon_logo);
list.add(R.mipmap.icon_logo);
list.add(R.mipmap.icon_logo);
list.add(R.mipmap.icon_logo);
list.add(R.mipmap.icon_logo);
CardViewAdapter adapter =new CardViewAdapter(getActivity(), list);
viewpager.setAdapter(adapter);
viewpager.setOffscreenPageLimit(list.size());
// viewpager.setPageMargin(10);
viewpager.setPageTransformer(false, new ScaleTransformerCardView(getActivity()));
到这里开发就结束了,可以看看效果。