Android如何實現3D層疊式卡片圖片展示

這篇文章將為大家詳細講解有關Android如何實現3D層疊式卡片圖片展示，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

整體實現思路

1、重寫RelativeLayout 實現 鎖定寬高比例的 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);  // 調整高度  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>

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

為了實現滑動我們編寫一個支持滑動的畫板

//事件處理 @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開始工作，否則有時候導致異常   mDragHelper.processTouchEvent(ev);  }  return shouldIntercept && moveFlag; } @Override public boolean onTouchEvent(MotionEvent e) {  try {   // 統一交給mDragHelper處理，由DragHelperCallback實現拖動效果   // 該行代碼可能會拋異常，正式發布時請將這行代碼加上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());  }  // 初始化一些中間參數  initCenterViewX = viewList.get(0).getLeft();  initCenterViewY = viewList.get(0).getTop();  childWith = viewList.get(0).getMeasuredWidth(); }  //onFinishInflate 當View中所有的子控件均被映射成xml后觸發 @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循環取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);   }  }); } //裝載數據 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="右側移除"    android:id="@+id/card_left_btn"    android:layout_width="wrap_content"    android:layout_height="wrap_content"   />   <Button    android:background="#03A9F4"    android:text="右側移除"    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); } //封裝數據 private void prepareDataList() {  int num = imagePaths.length;  //重復添加數據10次（測試數據太少）  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);   }  } }

關于“Android如何實現3D層疊式卡片圖片展示”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。