Android實現(xiàn)3D層疊式卡片圖片展示

更新時間：2019年10月30日 14:01:37 作者：倔強的菜鳥

這篇文章主要為大家詳細介紹了Android實現(xiàn)3D層疊式卡片圖片展示，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android實現(xiàn)3D層疊式卡片圖片展示的具體代碼，供大家參考，具體內(nèi)容如下

先看效果

好了效果看了，感興趣的往下看哦！

整體實現(xiàn)思路

1、重寫RelativeLayout 實現(xiàn) 鎖定寬高比例的 RelativeLayout

2、自定義一個支持滑動的面板繼承 ViewGroup

3、卡片View繪制

4、頁面中使用布局

首先為了更好的展示圖片我們重寫一下 RelativeLayout 編寫一個鎖定寬高比例的 RelativeLayout

AutoScaleRelativeLayout

public class AutoScaleRelativeLayout extends RelativeLayout {
 //寬高比例
 private float widthHeightRate = 0.35f;

 public AutoScaleRelativeLayout(Context context) {
  this(context, null);
 }

 public AutoScaleRelativeLayout(Context context, AttributeSet attrs) {
  this(context, attrs, 0);
 }

 public AutoScaleRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  super(context, attrs, defStyleAttr);
  //通過布局獲取寬高比例
  TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.card, 0, 0);
  widthHeightRate = a.getFloat(R.styleable.card_widthHeightRate, widthHeightRate);
  a.recycle();
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);

  // 調(diào)整高度
  int width = getMeasuredWidth();
  int height = (int) (width * widthHeightRate);
  ViewGroup.LayoutParams lp = getLayoutParams();
  lp.height = height;
  setLayoutParams(lp);
 }
}

這樣我們就編寫好了我們想要的父布局

使用方法

<com.petterp.toos.ImageCard.AutoScaleRelativeLayout
  android:id="@+id/card_top_layout"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  card:widthHeightRate="0.6588">
<!--  widthHeightRate:就是設置寬高的百分比-->
  <ImageView
   android:id="@+id/card_image_view"
   android:layout_width="fill_parent"
   android:layout_height="match_parent"
   android:scaleType="fitXY" />
<!--    這是我們展示的圖片-->
  <View
   android:id="@+id/maskView"
   android:layout_width="fill_parent"
   android:layout_height="match_parent"
   android:background="?android:attr/selectableItemBackground"
   android:clickable="true" />
<!--  這個是為了讓我們圖片上有波紋-->
</com.petterp.toos.ImageCard.AutoScaleRelativeLayout>

接下來就是主要布局，也就是展示圖片的布局了

為了實現(xiàn)滑動我們編寫一個支持滑動的畫板

//事件處理
 @Override
 public boolean dispatchTouchEvent(MotionEvent ev) {
  int action = ev.getActionMasked();
  // 按下時保存坐標信息
  if (action == MotionEvent.ACTION_DOWN) {
   this.downPoint.x = (int) ev.getX();
   this.downPoint.y = (int) ev.getY();
  }
  return super.dispatchTouchEvent(ev);
 }

 /* touch事件的攔截與處理都交給mDraghelper來處理 */
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
  boolean shouldIntercept = mDragHelper.shouldInterceptTouchEvent(ev);
  boolean moveFlag = moveDetector.onTouchEvent(ev);
  int action = ev.getActionMasked();
  if (action == MotionEvent.ACTION_DOWN) {
   // ACTION_DOWN的時候就對view重新排序
   if (mDragHelper.getViewDragState() == ViewDragHelper.STATE_SETTLING) {
    mDragHelper.abort();
   }
   orderViewStack();

   // 保存初次按下時arrowFlagView的Y坐標
   // action_down時就讓mDragHelper開始工作，否則有時候?qū)е庐惓?
   mDragHelper.processTouchEvent(ev);
  }

  return shouldIntercept && moveFlag;
 }

 @Override
 public boolean onTouchEvent(MotionEvent e) {
  try {
   // 統(tǒng)一交給mDragHelper處理，由DragHelperCallback實現(xiàn)拖動效果
   // 該行代碼可能會拋異常，正式發(fā)布時請將這行代碼加上try catch
   mDragHelper.processTouchEvent(e);
  } catch (Exception ex) {
   ex.printStackTrace();
  }
  return true;
 }
 //計算
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  measureChildren(widthMeasureSpec, heightMeasureSpec);
  int maxWidth = MeasureSpec.getSize(widthMeasureSpec);
  int maxHeight = MeasureSpec.getSize(heightMeasureSpec);
  setMeasuredDimension(
    resolveSizeAndState(maxWidth, widthMeasureSpec, 0),
    resolveSizeAndState(maxHeight, heightMeasureSpec, 0));

  allWidth = getMeasuredWidth();
  allHeight = getMeasuredHeight();
 }
 //定位
 @Override
 protected void onLayout(boolean changed, int left, int top, int right,
       int bottom) {
  // 布局卡片view
  int size = viewList.size();
  for (int i = 0; i < size; i++) {
   View viewItem = viewList.get(i);
   int childHeight = viewItem.getMeasuredHeight();
   int viewLeft = (getWidth() - viewItem.getMeasuredWidth()) / 2;
   viewItem.layout(viewLeft, itemMarginTop, viewLeft + viewItem.getMeasuredWidth(), itemMarginTop + childHeight);
   int offset = yOffsetStep * i;
   float scale = 1 - SCALE_STEP * i;
   if (i > 2) {
    // 備用的view
    offset = yOffsetStep * 2;
    scale = 1 - SCALE_STEP * 2;
   }

   viewItem.offsetTopAndBottom(offset);
   viewItem.setScaleX(scale);
   viewItem.setScaleY(scale);
  }

  // 布局底部按鈕的View
  if (null != bottomLayout) {
   int layoutTop = viewList.get(0).getBottom() + bottomMarginTop;
   bottomLayout.layout(left, layoutTop, right, layoutTop
     + bottomLayout.getMeasuredHeight());
  }

  // 初始化一些中間參數(shù)
  initCenterViewX = viewList.get(0).getLeft();
  initCenterViewY = viewList.get(0).getTop();
  childWith = viewList.get(0).getMeasuredWidth();
 }
  //onFinishInflate 當View中所有的子控件均被映射成xml后觸發(fā)
 @Override
 protected void onFinishInflate() {
  super.onFinishInflate();
  // 渲染完成，初始化卡片view列表
  viewList.clear();
  int num = getChildCount();
  for (int i = num - 1; i >= 0; i--) {
   View childView = getChildAt(i);
   if (childView.getId() == R.id.card_bottom_layout) {
    bottomLayout = childView;
    initBottomLayout();
   } else {
    // for循環(huán)取view的時候，是從外層往里取
    CardItemView viewItem = (CardItemView) childView;
    viewItem.setParentView(this);
    viewItem.setTag(i + 1);
    viewItem.maskView.setOnClickListener(btnListener);
    viewList.add(viewItem);
   }
  }

  CardItemView bottomCardView = viewList.get(viewList.size() - 1);
  bottomCardView.setAlpha(0);
 }

卡片View繪制

private void initSpring() {
  SpringConfig springConfig = SpringConfig.fromBouncinessAndSpeed(15, 20);
  SpringSystem mSpringSystem = SpringSystem.create();
  springX = mSpringSystem.createSpring().setSpringConfig(springConfig);
  springY = mSpringSystem.createSpring().setSpringConfig(springConfig);

  springX.addListener(new SimpleSpringListener() {
   @Override
   public void onSpringUpdate(Spring spring) {
    int xPos = (int) spring.getCurrentValue();
    setScreenX(xPos);
    parentView.onViewPosChanged(CardItemView.this);
   }
  });

  springY.addListener(new SimpleSpringListener() {
   @Override
   public void onSpringUpdate(Spring spring) {
    int yPos = (int) spring.getCurrentValue();
    setScreenY(yPos);
    parentView.onViewPosChanged(CardItemView.this);
   }
  });
 }
 //裝載數(shù)據(jù)
 public void fillData(CardDataItem itemData) {
  Glide.with(getContext()).load(itemData.imagePath).into(imageView);


 }
 /**
  * 動畫移動到某個位置
  */
 public void animTo(int xPos, int yPos) {
  setCurrentSpringPos(getLeft(), getTop());
  springX.setEndValue(xPos);
  springY.setEndValue(yPos);
 }

 /**
  * 設置當前spring位置
  */
 private void setCurrentSpringPos(int xPos, int yPos) {
  springX.setCurrentValue(xPos);
  springY.setCurrentValue(yPos);
 }

接下來我們需要使用它編寫Fragment布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:card="http://schemas.android.com/apk/res-auto"
    android:background="#fff"
    android:orientation="vertical">



 <com.petterp.toos.ImageCard.CardSlidePanel
  android:id="@+id/image_slide_panel"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  card:bottomMarginTop="38dp"
  card:itemMarginTop="10dp"
  card:yOffsetStep="26dp">

  <LinearLayout
   android:id="@+id/card_bottom_layout"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:gravity="center"
   android:orientation="horizontal">

   <Button
    android:background="#03A9F4"
    android:text="右側(cè)移除"
    android:id="@+id/card_left_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
   />


   <Button
    android:background="#03A9F4"
    android:text="右側(cè)移除"
    android:id="@+id/card_right_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    />
  </LinearLayout>

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

  <com.petterp.toos.ImageCard.CardItemView
   android:layout_width="match_parent"
   android:layout_height="wrap_content" />

 </com.petterp.toos.ImageCard.CardSlidePanel>

</LinearLayout>

代碼中的使用

private void initView(View rootView) {
  CardSlidePanel slidePanel = (CardSlidePanel) rootView
    .findViewById(R.id.image_slide_panel);
  cardSwitchListener = new CardSlidePanel.CardSwitchListener() {

   @Override
   public void onShow(int index) {
    Toast.makeText(getContext(), "CardFragment"+"正在顯示=" +index, Toast.LENGTH_SHORT).show();

   }
   //type 0=右邊 ，-1=左邊
   @Override
   public void onCardVanish(int index, int type) {
    Toast.makeText(getContext(), "CardFragment"+ "正在消失=" + index + " 消失type=" + type, Toast.LENGTH_SHORT).show();
   }

   @Override
   public void onItemClick(View cardView, int index) {
    Toast.makeText(getContext(), "CardFragment"+"卡片點擊=" + index, Toast.LENGTH_SHORT).show();
   }
  };
  slidePanel.setCardSwitchListener(cardSwitchListener);
  prepareDataList();
  slidePanel.fillData(dataList);
 }
 //封裝數(shù)據(jù)
 private void prepareDataList() {
  int num = imagePaths.length;
  //重復添加數(shù)據(jù)10次（測試數(shù)據(jù)太少）
  for (int j = 0; j < 10; j++) {
   for (int i = 0; i < num; i++) {
    CardDataItem dataItem = new CardDataItem();
    dataItem.imagePath = imagePaths[i];
    dataList.add(dataItem);
   }
  }
 }

到此主要邏輯代碼就編寫完了