Line 3 Android code to customize a streaming Layout-FlowLayout and android-flowlayout

Line 3 Android code to customize a streaming Layout-FlowLayout and android-flowlayout

First, let's take a look.Shoutao HD-product details-select product attributesPage UI

The product has many sizes, and the size of the View required for each size is also different (mainly the width), so before pulling data from the server, the number of rows required to display all sizes and the number of each row cannot be determined, so you cannot directly use the GridView or ListView.

What if LinearLayout is used?

One LinearLayout can only display one row. If multiple rows are to be displayed, a new LinearLayout is required for each row, and the corresponding View of each LinearLayout can contain must be calculated, the implementation is also complicated.

In fact, to implement this function, you only need to learn from the flex-box of CSS3.

To implement a flexbox version of Android, the principle is very simple. To be consistent with the naming rules of Android, we call itFlowLayout.

Only the core code snippets are listed below. The complete code has been put on Github-AndroidFlowLayout. Welcome to fork.

Calculate the FlowLayout height in onMeasure.

// Traverse all child Viewfor (int I = 0, childCount = getChildCount (); I <childCount; ++ I) {View childView = getChildAt (I ); // measure sub-View, and obtain its width and height. LayoutParams childLayoutParams = childView. getLayoutParams (); childView. measure (getChildMeasureSpec (widthMeasureSpec, paddingLeft + paddingRight, childLayoutParams. width), getChildMeasureSpec (heightMeasureSpec, paddingTop + paddingBottom, childLayoutParams. height); int childWidth = childView. getMeasuredWidth (); int childHeight = childView. getMeasuredHeight (); // calculate the height of the current row (the highest of all child views of the current row) lineHeight = Math. max (childHeight, lineHeight); // place the current child view to the right of the previous child view. if not, wrap the line if (childLeft + childWidth + paddingRight> myWidth) {childLeft = paddingLeft; childTop + = mVerticalSpacing + lineHeight; lineHeight = childHeight;} else {childLeft + = childWidth + weight;} int wantedHeight = childTop + lineHeight + paddingBottom; // calculate the height setMeasuredDimension (myWidth, resolveSize (wantedHeight, heightMeasureSpec) required by FlowLayout ));

Layout child views in onLayout

Code andonMeasureSimilarly, you only need to place the child view width and height at the specified position.

For (int I = 0, childCount = getChildCount (); I <childCount; ++ I) {View childView = getChildAt (I); if (childView. getVisibility () = View. GONE) {continue;} int childWidth = childView. getMeasuredWidth (); int childHeight = childView. getMeasuredHeight (); lineHeight = Math. max (childHeight, lineHeight); if (childLeft + childWidth + paddingRight> myWidth) {childLeft = paddingLeft; childTop + = mVerticalSpacing + lineHeight; lineHeight = childHeight;} // key code childView. layout (childLeft, childTop, childLeft + childWidth, childTop + childHeight); childLeft + = childWidth + mHorizontalSpacing ;}

The full version of the Code has been put into Github-FlowLayout, And the aar package has been uploaded to bintray. The usage is very simple and you only needbuild.gradleAdd a dependency.

compile 'com.liangfeizc:flowlayout:1.0.0@aar'

Set AarPackage upload JCenter

For more information, see publishing gradle android library to jcenter.
For the packaging script, see flowlayout/build. gradle.

Leave a message if you have any questions. When there are too many threads, there are too many threads.