Android Custom ViewGroup Implementation FlowLayout streaming layout _android

Collation Summary from Hongyang Blog: http://blog.csdn.net/lmj623565791/article/details/38352503/
First, FlowLayout introduction
The so-called FlowLayout, is the control according to the width of the viewgroup, automatically add to the right, if the current line is not enough space, automatically added to the next line. A bit like all the controls to the left of the feeling, the first line full, to the second line of drift ~ so also called flow layout. Android does not provide a streaming layout, but in some situations, streaming layouts are ideal for use, such as keyword tags, search hot word lists, and so on, such as the following image:

GitHub already have ready-made flowlayout, this article is from scratch to make.

second, the production analysis

1, for FlowLayout, need to specify the Layoutparams, we currently only need to be able to identify margin can be, that is, the use of marginlayoutparams.
2, onmeasure in the calculation of all childview width and height, and then according to the Childview width and height, calculate their own width and height. (Of course, if it's not wrap_content, just use the parent ViewGroup to pass in the computed value)
3, OnLayout all the Childview layout.

Third, the Code
1, Mainactivity.java

 public class Mainactivity extends activity {

 @Override
 protected void onCreate (Bundle savedinstancestate) {
  super.oncreate (savedinstancestate);
  Setcontentview (r.layout.activity_main);  Setcontentview (r.layout.activity_main2);  Setcontentview (r.layout.activity_main3);
 }
 

2, Customviewgroup.java

public class Customviewgroup extends ViewGroup {private final String TAG = GetClass (). Getsimplename ();
 Public Customviewgroup {Super (context);
 Public Customviewgroup (context, AttributeSet attrs) {Super (context, attrs); 
 Public Customviewgroup (context, AttributeSet attrs, int defstyleattr) {Super (context, attrs, defstyleattr); /** * I, rewrite the generatelayoutparams, and determine that the layoutparams of the ViewGroup returns an instance of Marginlayoutparams, which specifies its viewgroup for our Layoutpar AMS for Marginlayoutparams */@Override public layoutparams generatelayoutparams (AttributeSet attrs) {return new Margin
 Layoutparams (GetContext (), attrs); /** * II, calculate the width and height of all childview and then set its own width and height/@Override protected void onmeasure (int widthmeasuresp) According to the Childview calculation result
  EC, int heightmeasurespec) {super.onmeasure (Widthmeasurespec, Heightmeasurespec);
  1, obtain this ViewGroup superior container for its recommended width and height, and compute mode int widthmode = Measurespec.getmode (Widthmeasurespec); int heightmode = Measurespec.getMode (HEIGHTMEASURESPEC);
  int sizewidth = measurespec.getsize (Widthmeasurespec);

  int sizeheight = measurespec.getsize (Heightmeasurespec);
  2, if the ViewGroup layout is wrap_content, according to the Childview size, compute the width of the container wide and high int width = 0;//viewgroup the height of int height = 0;//viewgroup int linewidth = 0;//childview The total width of the current line occupied by int lineheight = 0;//childview The total height of the rows occupied by int ccount = Getchildcount ();////child
   The number of view for (int i=0; i<ccount; i++) {//traverse each childview View Childview = Getchildat (i); Measurechild (Childview, Widthmeasurespec, Heightmeasurespec)//measure the width and height of the current child Marginlayoutparams = (
   Marginlayoutparams) Childview.getlayoutparams ();
   int cwidth = childview.getmeasuredwidth () + Mlp.leftmargin + mlp.rightmargin;
   int cheight = childview.getmeasuredheight () + Mlp.topmargin + mlp.bottommargin; if (linewidth + cwidth > Sizewidth) {//If the maximum width is exceeded after adding the current Childview, Width takes maximum height, adds Lineheight, then opens new line width = Math.max (Linewi
    DTH, cwidth);
    Height + = lineheight;
   LineWidth = Cwidth; }else{If the current childview is less than the maximum width, then the cumulative linewidthheight lineheight the maximum height linewidth + = cwidth;
   Height = Math.max (lineheight, cheight);
    } if (i = = cCount-1) {//If the last Childview, compare the maximum width of the current record with the current linewidth = Math.max (linewidth, cwidth);
   Height + = lineheight; }//3, if it is wrap_content set to the value we calculated, otherwise set the value directly calculated for the parent container setmeasureddimension ((Widthmode = = measurespec.exactly)? size Width:width, (Heightmode = = measurespec.exactly)?
 Sizeheight:height); /** * III, rewrite onlayout, locate all of its childview (set the area of the Childview) * * Private list<list<view>> allchildviews = NE W arraylist<list<view>> ()//Store all Childview, record private list<integer> by row maxlineheight = new ArrayList <Integer> ()//store Maximum height value per row @Override protected void OnLayout (Boolean changed, int l, int t, int r, int b) {Allchi
  Ldviews.clear ();

  Maxlineheight.clear (); int width = getwidth ();//maximum width int linewidth = 0;//per line of immediate width int lineheight = 0;//per line of immediate height list<view> LiNechildviews = new arraylist<view> ();//stores all Childview int ccount = Getchildcount () for each row;
   for (int i=0; i<ccount; i++) {//Traverse all Childview View Childview = Getchildat (i);
   Marginlayoutparams MLP = (marginlayoutparams) childview.getlayoutparams ();
   int cwidth = Childview.getmeasuredwidth ();
   int cheight = Childview.getmeasuredheight (); if (linewidth + cwidth + mlp.leftmargin + mlp.rightmargin > width) {//If you need to wrap maxlineheight.add (lineheight);//Store the largest line Height Allchildviews.add (linechildviews),//Saves the Childview of the current row, and then opens a new ArrayList saves the next line of childview linechildviews = new Array
    List<view> (); LineWidth = 0;//Reset line width}else{//If you do not need to wrap LineWidth + + cwidth + mlp.leftmargin + mlp.rightmargin;//Instant width additive Lineheigh t = Math.max (lineheight,cheight + mlp.topmargin + mlp.bottommargin);//immediate height fetch maximum linechildviews.add (childview); the current Chi
  Ldview the collection in this line}//record the last line of Maxlineheight.add (lineheight);

  Allchildviews.add (linechildviews); int ieft = 0;//Left coordinate inttop = 0;//coordinate int linenums = Allchildviews.size ()//Total row number for (int i = 0; i < linenums; i++) {linechildviews = Allchildviews.get (i);//Get all views Lineheight = Maxlineheight.get (i) of each line;//Get the maximum height of the current row log.e (TAG, "first" + i + "line:"
   + linechildviews.size () + "," + linechildviews);

   LOG.E (TAG, "first" + i + "line,:" + lineheight); Traverse all View for the current line (int j = 0; J < Linechildviews.size (); j + +) {View Childview = Linechildviews.get (j);//Get CH
    Ildview if (childview.getvisibility () = = View.gone) {continue;
    } marginlayoutparams MLP = (marginlayoutparams) childview.getlayoutparams ();
    COMPUTE childview Left,top,right,bottom int lc = left + Mlp.leftmargin;
    int TC = top + mlp.topmargin;
    int RC = LC + Childview.getmeasuredwidth ();

    int BC = TC + childview.getmeasuredheight ();

    LOG.E (TAG, Childview + ", L =" + LC + ", t =" + t + ", r =" + RC + ", b =" + BC); Childview.layout (LC, TC, RC, BC);/set this Childview position left + = ChildView.getmeasuredwidth () + Mlp.rightmargin + mlp.leftmargin;//left coordinate add} Ieft = 0;//start a new row, reset top + = lineheight;//with left coordinates
 Start a new row, up coordinate add}}}

 3, Activity_main.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" fill_parent "android:layout_height=" Fill_parent "Android: Background= "#E1E6F6" android:orientation= "vertical" > < Com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup android:layout_width= "Fill_parent" Android:layout_
   height= "Wrap_content" > <textview style= "@style/text_flag_01" android:text= "Welcome"/> <textview style= "@style/text_flag_01" android:text= "it engineer"/> <textview style= "@style/text_flag_01" Android:text = "Learning ing"/> <textview style= "@style/text_flag_01" android:text= "love ing"/> <textview "@sty Le/text_flag_01 "android:text=" earn money ing "/> <textview style=" @style/text_flag_01 "android:text=" work ing "/&gt

  ; <textview style= "@style/text_flag_01" android:text= "I thick I Can"/> </com.cctvjiatao.customviewgroupfloWlayout.view.customviewgroup> </LinearLayout>
 

  4, activity_main2.xml

<linearlayout xmlns:android= "http://schemas.android.com/apk/res/android" xmlns:tools= "http:// Schemas.android.com/tools "android:layout_width=" fill_parent "android:layout_height=" Fill_parent "Android: Background= "#E1E6F6" android:orientation= "vertical" > < Com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup android:layout_width= "Fill_parent" Android:layout_
   height= "Wrap_content" > <textview style= "@style/text_flag_01" android:text= "Welcome"/> <textview style= "@style/text_flag_01" android:text= "it engineer"/> <textview style= "@style/text_flag_01" Android:text = "Learning ing"/> <textview style= "@style/text_flag_01" android:text= "love ing"/> <textview "@sty Le/text_flag_01 "android:text=" earn money ing "/> <textview style=" @style/text_flag_01 "android:text=" work ing "/&gt

  ; <textview style= "@style/text_flag_01" android:text= "I thick I Can"/> </com.cctvjiatao.customviewgroupfloWlayout.view.customviewgroup> <com.cctvjiatao.customviewgroupflowlayout.view.customviewgroup android:
   Layout_width= "Fill_parent" android:layout_height= "wrap_content" android:layout_margintop= "20DP" > <TextView style= "@style/text_flag_01" android:background= "@drawable/flag_02" android:text= "Welcome" android:textcolor= "#88 8888 "/> <textview style=" @style/text_flag_01 "android:background=" @drawable/flag_02 "android:text=" It Engineering Division "android:textcolor=" #888888 "/> <textview style=" @style/text_flag_01 "android:background=" @drawable/FL Ag_02 "android:text=" learning ing "android:textcolor=" #888888 "/> <textview style=" @style/text_flag_01 "Andr oid:background= "@drawable/flag_02" android:text= "Love ing" "android:textcolor=" #888888 "/> <textview" @style/text_flag_01 "android:background=" @drawable/flag_02 "android:text=" earn money ing "android:textcolor=" #888888 "/&gt

  ; <textview style= "@style/text_flag_01 "android:background=" @drawable/flag_02 "android:text=" efforts ing "android:textcolor=" #888888 "/> & Lt TextView style= "@style/text_flag_01" android:background= "@drawable/flag_02" android:text= "I thick I Can" andro Id:textcolor= "#888888"/> </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup> < Com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup android:layout_width= "Fill_parent" Android:layout_ height= "Wrap_content" android:layout_margintop= "20DP" > <textview style= "@style/text_flag_01" Android:back ground= "@drawable/flag_03" android:text= "Welcome" android:textcolor= "#43BBE7"/> <textview style= "@style /text_flag_01 "android:background=" @drawable/flag_03 "android:text=" it engineer android:textcolor= "#43BBE7"/> & Lt TextView style= "@style/text_flag_01" android:background= "@drawable/flag_03" android:text= "learning ing" android:textc
  Olor= "#43BBE7"/> <textview style= "@style/text_flag_01" android:background= "@drawable/flag_03" android:text= "Love ing" android:textcolor= "#43BB 
   E7 "/> <textview style=" @style/text_flag_01 "android:background=" @drawable/flag_03 "android:text=" earn money ing " Android:textcolor= "#43BBE7"/> <textview style= "@style/text_flag_01" android:background= "@drawable/flag _03 "android:text=" to "android:textcolor=" "#43BBE7"/> <textview style= "@style/text_flag_01" Androi d:background= "@drawable/flag_03" android:text= "I thick I Can" android:textcolor= "#43BBE7"/> </com.cctvjiatao 

 .customviewgroupflowlayout.view.customviewgroup> </LinearLayout>

 5, Activity_main3.xml

<com.cctvjiatao.customviewgroupflowlayout.view.customviewgroup xmlns:android= "http://schemas.android.com/apk /res/android "xmlns:tools=" Http://schemas.android.com/tools "android:layout_width=" 200DP "android:layout_height=" Wrap_content "android:background=" #FFFFFF "> <textview style=" @style/text_flag_01 "android:background=" @drawa Ble/flag_04 "android:text=" Welcome "android:textcolor=" #323232 "/> <textview style=" @style/text_flag_01 "a ndroid:background= "@drawable/flag_04" android:text= "it Engineer" android:textcolor= "#323232/> <textview style=" @

 Style/text_flag_01 "android:background=" @drawable/flag_04 "android:text=" learning ing "android:textcolor=" #323232 "/> <textview style= "@style/text_flag_01" android:background= "@drawable/flag_04" android:text= "Love ing" android:textc Olor= "#323232"/> <textview style= "@style/text_flag_01" android:background= "@drawable/flag_04" android:text= "Earn money ing" android:textcolor= "#323232"/&GT <textview style= "@style/text_flag_01" android:background= "@drawable/flag_04" android:text= "work ing" android:textc Olor= "#323232"/> <textview style= "@style/text_flag_01" android:background= "@drawable/flag_04" android:text= "I thick I Can" android:textcolor= "#323232"/> </com.cctvjiatao.customviewgroupflowlayout.view.customviewgroup
 >

  above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud-dwelling community.