實(shí)現(xiàn)步驟,只需四步:
1.xml布局(注意:android:clipChildren="false"屬性,最外層布局和ViewPager都設(shè)置為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.自定義卡片樣式(設(shè)置陰影和縮放效果),新建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);
? ? ? ? ? ? }
}
//給卡片添加陰影 ------結(jié)束-------
//給卡片添加縮放效果 ------開始-------
? ? ? ? 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));
? ? ? ? }
//給卡片添加縮放效果 ------結(jié)束-------
? ? }
}
4.代碼調(diào)用:
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()));
到這里開發(fā)就結(jié)束了搬男,可以看看效果蜻韭。