How does Android customize ViewGroup to realize likes of stacked avatars?

Today, I would like to share with you how to customize Android ViewGroup to achieve stacked avatar likes of the relevant knowledge points, detailed content, clear logic, I believe that most people still know too much about this knowledge, so share this article for your reference, I hope you can learn something after reading this article, let's take a look at it.

Realize

Custom attribute

Attribute name description default value vertivalSpace line spacing 4dppileWidth overlap width 10dp

OnMeasure method, the width of each row is no longer the sum of the width of child, but to subtract the width and the width of the overlap

@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super.onMeasure (widthMeasureSpec, heightMeasureSpec); int widthSpecMode = MeasureSpec.getMode (widthMeasureSpec); int widthSpecSize = MeasureSpec.getSize (widthMeasureSpec); int heightSpecMode = MeasureSpec.getMode (heightMeasureSpec); int heightSpecSize = MeasureSpec.getSize (heightMeasureSpec); / / AT_MOST int width = 0; int height = 0; int rawWidth = 0 / Total width of current row int rawHeight = 0 / current height int rowIndex = 0 / / current line position int count = getChildCount (); for (int I = 0; I

< count; i++) { View child = getChildAt(i); if(child.getVisibility() == GONE){ if(i == count - 1){ //最后一个child height += rawHeight; width = Math.max(width, rawWidth); } continue; } //这里调用measureChildWithMargins 而不是measureChild measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, 0); MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; if(rawWidth + childWidth - (rowIndex >

0? PileWidth: 0) > widthSpecSize-getPaddingLeft ()-getPaddingRight () {/ / Line wrap width = Math.max (width, rawWidth); rawWidth = childWidth; height + = rawHeight + vertivalSpace; rawHeight = childHeight; rowIndex = 0;} else {rawWidth + = childWidth; if (rowIndex > 0) {rawWidth-= pileWidth;} rawHeight = Math.max (rawHeight, childHeight) } if (I = = count-1) {width = Math.max (rawWidth, width); height + = rawHeight;} rowIndex++;} setMeasuredDimension (widthSpecMode = = MeasureSpec.EXACTLY? WidthSpecSize: width + getPaddingLeft () + getPaddingRight (), heightSpecMode = = MeasureSpec.EXACTLY? HeightSpecSize: height + getPaddingTop () + getPaddingBottom ();}

OnLayout each line, the first normal playback, followed by overlapping playback

@ Override protected void onLayout (boolean changed, int l, int t, int r, int b) {int viewWidth = r-l; int leftOffset = getPaddingLeft (); int topOffset = getPaddingTop (); int rowMaxHeight = 0; int rowIndex = 0 / current row position View childView; for (int w = 0, count = getChildCount (); w

< count; w++ ){ childView = getChildAt(w); if(childView.getVisibility() == GONE) continue; MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams(); // 如果加上当前子View的宽度后超过了ViewGroup的宽度，就换行 int occupyWidth = lp.leftMargin + childView.getMeasuredWidth() + lp.rightMargin; if(leftOffset + occupyWidth + getPaddingRight() >

ViewWidth) {leftOffset = getPaddingLeft (); / / go back to the leftmost topOffset + = rowMaxHeight + vertivalSpace; / / newline rowMaxHeight = 0; rowIndex = 0;} int left = leftOffset+ lp.leftMargin; int top = topOffset + lp.topMargin; int right = leftOffset+ lp.leftMargin + childView.getMeasuredWidth (); int bottom = topOffset + lp.topMargin + childView.getMeasuredHeight () ChildView.layout (left, top, right, bottom); / horizontal offset leftOffset + = occupyWidth; / / try to update the height of the highest View in the line int occupyHeight = lp.topMargin + childView.getMeasuredHeight () + lp.bottomMargin; if (rowIndex! = count-1) {leftOffset-= pileWidth;// where control overlap position} rowMaxHeight = Math.max (rowMaxHeight, occupyHeight); rowIndex++;}}

Effect picture

Because this usually displays only one row, there is no way to set the data source through setAdapter for the time being.

These are all the contents of the article "how to customize Android ViewGroup to like stacked avatars". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.