使用ViewPager+CardView实现卡片效果

效果如图

实现步骤,只需四步:

1.xml布局(注意:android:clipChildren="false"属性,最外层布局和ViewPager都设置为false):

    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:id="@+id/viewpager"

        android:layout_width="match_parent"

        android:layout_height="200dp"

        android:layout_marginLeft="40dp"

        android:layout_marginRight="40dp"

        android:clipChildren="false"/>

   

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()));

到这里开发就结束了,可以看看效果。

你可能感兴趣的:(使用ViewPager+CardView实现卡片效果)