Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve 3D cascading card picture display in Android. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The idea of overall realization

1. Rewrite RelativeLayout to lock the width-height ratio of RelativeLayout.

2. Customize a panel that supports sliding and inherit ViewGroup.

3. Card View drawing

4. Use layout in the page

First of all, in order to better show the picture, let's rewrite RelativeLayout and write a RelativeLayout that locks the aspect ratio.

AutoScaleRelativeLayout

Public class AutoScaleRelativeLayout extends RelativeLayout {/ / aspect ratio 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); / / obtain the aspect ratio TypedArray a = context.obtainStyledAttributes (attrs, R.styleable.card, 0,0) through layout WidthHeightRate = a.getFloat (R.styleable.card_widthHeightRate, widthHeightRate); a.recycle ();} @ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec); / / adjust height int width = getMeasuredWidth (); int height = (int) (width * widthHeightRate); ViewGroup.LayoutParams lp = getLayoutParams (); lp.height = height; setLayoutParams (lp);}}

So we have the parent layout we want.

Usage

Then there is the main layout, that is, the layout of the display picture.

In order to achieve sliding, we write a drawing board that supports sliding.

/ / event handling @ Override public boolean dispatchTouchEvent (MotionEvent ev) {int action = ev.getActionMasked (); / / Save coordinate information if (action = = MotionEvent.ACTION_DOWN) {this.downPoint.x = (int) ev.getX (); this.downPoint.y = (int) ev.getY ();} return super.dispatchTouchEvent (ev) } / * the interception and handling of touch events are left to mDraghelper to handle * / @ 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 reorder view (mDragHelper.getViewDragState () = ViewDragHelper.STATE_SETTLING) {mDragHelper.abort ();} orderViewStack () / / Save the Y coordinate of arrowFlagView when it is pressed for the first time / / action_down and let mDragHelper start to work, otherwise it will sometimes cause an exception mDragHelper.processTouchEvent (ev);} return shouldIntercept & & moveFlag } @ Override public boolean onTouchEvent (MotionEvent e) {try {/ / is handed over to mDragHelper, and the drag effect is realized by DragHelperCallback / / this line of code may throw an exception. Please add this line of code to try catch mDragHelper.processTouchEvent (e);} catch (Exception ex) {ex.printStackTrace ();} return true;} / calculate @ 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 ();} / / locate @ Override protected void onLayout (boolean changed, int left, int top, int right, int bottom) {/ / layout card 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) {/ / standby view offset = yOffsetStep * 2; scale = 1-SCALE_STEP * 2;} viewItem.offsetTopAndBottom (offset); viewItem.setScaleX (scale); viewItem.setScaleY (scale);} / / View if of the button at the bottom of the layout (null! = bottomLayout) {int layoutTop = viewList.get (0). GetBottom () + bottomMarginTop; bottomLayout.layout (left, layoutTop, right, layoutTop + bottomLayout.getMeasuredHeight ()) } / / initialize some intermediate parameters initCenterViewX = viewList.get (0). GetLeft (); initCenterViewY = viewList.get (0). GetTop (); childWith = viewList.get (0). GetMeasuredWidth ();} / / onFinishInflate triggers @ Override protected void onFinishInflate () {super.onFinishInflate () after all child controls in View are mapped to xml; / / rendering is complete, initializing the card view list viewList.clear (); int num = getChildCount () For (int I = num-1; I > = 0; iMui -) {View childView = getChildAt (I); if (childView.getId () = = R.id.card_bottom_layout) {bottomLayout = childView; initBottomLayout ();} else {/ / for cycle when fetching 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);}

Card View drawing

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);}});} / / load data public void fillData (CardDataItem itemData) {Glide.with (getContext ()) .load (itemData.imagePath) .into (imageView) } / * Animation moves to a location * / public void animTo (int xPos, int yPos) {setCurrentSpringPos (getLeft (), getTop ()); springX.setEndValue (xPos); springY.setEndValue (yPos);} / * set the current spring location * / private void setCurrentSpringPos (int xPos, int yPos) {springX.setCurrentValue (xPos); springY.setCurrentValue (yPos);}

Next we need to use it to write Fragment layouts

Use in code

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" + "is displaying =" + index, Toast.LENGTH_SHORT). Show () } / / type 0 = right,-1 = left @ Override public void onCardVanish (int index, int type) {Toast.makeText (getContext (), "CardFragment" + "is disappearing =" + index + "vanishing type=" + type, Toast.LENGTH_SHORT) .show () } @ Override public void onItemClick (View cardView, int index) {Toast.makeText (getContext (), "CardFragment" + "Card Click =" + index, Toast.LENGTH_SHORT). Show ();}}; slidePanel.setCardSwitchListener (cardSwitchListener); prepareDataList (); slidePanel.fillData (dataList);} / encapsulated data private void prepareDataList () {int num = imagePaths.length / / add data 10 times repeatedly (test data is too little) for (int j = 0; j < 10; jacks +) {for (int I = 0; I < num; idata +) {CardDataItem dataItem = new CardDataItem (); dataItem.imagePath = imagePaths [I]; dataList.add (dataItem);}

This is the end of the article on "how to achieve 3D cascading card picture display in Android". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.