Android to achieve popular tagged streaming layouts _android

First, overview:
In everyday app use, we see the hot tags in android apps and the streaming layouts, and today we're going to look at how to
Customize a streaming layout that looks like a popular tag (source download is given at the bottom)
Similar custom layouts. Here we will detail the application features of streaming layouts and the technical points used:
1. The characteristics of the flow layout and the application scene
features: When the above line of space is not enough to accommodate the new TextView time,
To open up the next line of space
Schematic diagram:

Scene: Mainly used for keyword search or popular tags and other scenes
2. Custom ViewGroup, focus on rewriting the following two methods
1), Onmeasure: Measure the width of the view of the height, set their own width and height
2), OnLayout: Set the location of the child view
Onmeasure: Sets the measurement mode and measurement values for the child view based on the attributes in the child view's layout file
Measurement = measurement mode + measurement value;
There are 3 kinds of measurement modes:
exactly:Indicates that the exact value is set, generally when the Childview set its width, height is accurate value, Match_parent, ViewGroup will set it to exactly;
At_most:Indicates that the child layout is limited to a maximum value, generally when Childview sets its width and height to wrap_content, ViewGroup will set it to At_most;
UNSPECIFIED:Indicates how large the child layout wants, generally appearing in the Heightmode of the Aadapterview item, in the Heightmode of the ScrollView Childview, which is relatively rare.
3.LayoutParams
ViewGroup layoutparams: Each viewgroup corresponds to a layoutparams; namely ViewGroup-> Layoutparams
Getlayoutparams do not know which corresponding layoutparams, in fact very simple, is as follows:
The layoutparams corresponding to the view.getlayoutparams is the layoutparams of the parent control in which the child view is located;
For example, the linearlayout inside the son view.getlayoutparams->linearlayout.layoutparams
So our flowlayout also need a layoutparams, because the above effect picture is the margin of the child view,
So you should use Marginlayoutparams. namely Flowlayout->marginlayoutparams
4. Finally, take a look at the final effect of the implementation diagram:

Second, the popular label Flow layout implementation:
1. ViewGroup implementation of custom Popular tags
based on the technical analysis above, the custom class inherits from ViewGroup and overrides methods such as Onmeasure and OnLayout. The specific implementation code is as follows:

<font color= "#362e2b" ><font style= "Background-color:rgb (255, 255, 255)" ><font face= "Arial" ><
 
Font style= "font-size:14px" >package com.czm.flowlayout;
Import java.util.ArrayList;
 
Import java.util.List;
Import Android.content.Context;
Import Android.util.AttributeSet;
Import Android.view.View;
Import Android.view.ViewGroup;
  /** * * @author caizhiming * @created on 2015-4-13/public class Xcflowlayout extends viewgroup{//store all child view
  Private list<list<view>> mallchildviews = new arraylist<> ();
   
  The height of each row is private list<integer> mlineheight = new arraylist<> ();
    Public Xcflowlayout {This (context, NULL);  TODO auto-generated Constructor stub} public xcflowlayout (context, AttributeSet attrs) {The context,
    Attrs, 0);
    TODO auto-generated Constructor stub} public xcflowlayout (context, AttributeSet attrs, int defstyle) {
Super (context, attrs, Defstyle);    TODO auto-generated Constructor stub} @Override protected void onmeasure (int widthmeasurespec, int Heightmea SURESPEC) {//TODO auto-generated Method Stub//parent control pass in width and height and corresponding measurement mode int sizewidth = Measurespec.getsi
    Ze (widthmeasurespec);
    int modewidth = Measurespec.getmode (Widthmeasurespec);
    int sizeheight = measurespec.getsize (Heightmeasurespec);
     
    int modeheight = Measurespec.getmode (Heightmeasurespec); If the width of the current viewgroup is wrap_content int width = 0;//its own measured widths int height = 0;//its own measured height//record width and height of each row int Lin
    ewidth = 0;
     
    int lineheight = 0;
    Gets the number of child view int childcount = Getchildcount ();
      for (int i = 0;i < ChildCount i + +) {View child = Getchildat (i);
      Measure the width and height measurechild of the view (child, Widthmeasurespec, Heightmeasurespec);
      Get layoutparams marginlayoutparams LP = (marginlayoutparams) getlayoutparams (); The width of the child view occupies int childwidth = child.getmeasuredwidth () +Lp.leftmargin + lp.rightmargin;
      Child view occupies a height of int childheight = Child.getmeasuredheight () + Lp.topmargin + lp.bottommargin;
        When line break if (linewidth + childwidth > Sizewidth) {//contrast get maximum width = Math.max (width, linewidth);
        Resetting linewidth linewidth = childwidth;
        Record row High height = lineheight;
      Lineheight = Childheight;
        }else{////Overlay line width linewidth + = childwidth;
      Get maximum row height lineheight = Math.max (lineheight, childheight);
        ///Process Last child view if (i = = childCount-1) {width = Math.max (width, linewidth);
      Height + = lineheight; }//wrap_content setmeasureddimension (modewidth = = measurespec.exactly Sizewidth:width, ModeHeig HT = = measurespec.exactly?
    Sizeheight:height);
  Super.onmeasure (Widthmeasurespec, Heightmeasurespec);
 @Override protected void OnLayout (Boolean changed, int l, int t, int r, int b) {   TODO auto-generated Method Stub mallchildviews.clear ();
    Mlineheight.clear ();
     
    Gets the width of the current viewgroup int width = getwidth ();
    int linewidth = 0;
    int lineheight = 0;
    Record the current row's View list<view> lineviews = new arraylist<view> ();
    int childcount = Getchildcount ();
      for (int i = 0;i < ChildCount i + +) {View child = Getchildat (i);
      Marginlayoutparams LP = (marginlayoutparams) child.getlayoutparams ();
      int childwidth = Child.getmeasuredwidth ();
       
      int childheight = Child.getmeasuredheight (); If you need to line-wrap if (childwidth + linewidth + lp.leftmargin + lp.rightmargin > width) {//record lineheight Mlin
        Eheight.add (lineheight);
        Record the Views Mallchildviews.add (Lineviews) for the current row;
        The width of the reset row is linewidth = 0;
        Lineheight = childheight + Lp.topmargin + lp.bottommargin;
      Resets the view's collection lineviews = new ArrayList (); } linewidth + = Childwidth + LP.LEFTMArgin + lp.rightmargin;
      Lineheight = Math.max (lineheight, childheight + lp.topmargin + lp.bottommargin);
    Lineviews.add (child);
    //processing The last line of Mlineheight.add (lineheight);
     
    Mallchildviews.add (lineviews);
    Set the position of the child view int left = 0;
    int top = 0;
    Gets the number of rows int linecount = Mallchildviews.size ();
      for (int i = 0; i < LineCount i + +) {//When forward views and heights Lineviews = Mallchildviews.get (i);
      Lineheight = Mlineheight.get (i);
        for (int j = 0; J < Lineviews.size (); j + +) {View child = Lineviews.get (j);
        Determines whether to display if (child.getvisibility () = = View.gone) {continue;
        } marginlayoutparams LP = (marginlayoutparams) child.getlayoutparams ();
        int cleft = left + lp.leftmargin;
        int ctop = top + lp.topmargin;
        int cright = cleft + child.getmeasuredwidth ();
        int cbottom = ctop + child.getmeasuredheight (); Perform a child view layout child.layout (cleft, ctop, CrigHT, cbottom);
      Left + + child.getmeasuredwidth () + Lp.leftmargin + lp.rightmargin;
      } left = 0;
    Top + = Lineheight; }/** * Corresponds to the current ViewGroup layoutparams/@Override public layoutparams generatelayoutparams (AttributeS
  ET attrs) {//TODO auto-generated method stub return new Marginlayoutparams (GetContext (), attrs);
 }}</font></font></font></font>

2. Related Layout files:
To reference a custom control:

<font color= "#362e2b" ><font style= "Background-color:rgb (255, 255, 255)" ><font face= "Arial" >< Font style= "font-size:14px" ><relativelayout xmlns:android= "Http://schemas.android.com/apk/res/android"
  xmlns:tools= "Http://schemas.android.com/tools"
  android:id= "@+id/container"
  android:layout_width= " Match_parent "
  android:layout_height=" match_parent ">
 
  <com.czm.flowlayout.xcflowlayout
    android : id= "@+id/flowlayout"
    android:layout_width= "match_parent"
    android:layout_height= "Match_parent" >
 
  </com.czm.flowlayout.XCFlowLayout>
 
</relativelayout></font></font></font ></font>

TextView's style file:

<font color= "#362e2b" ><font style= "Background-color:rgb (255, 255, 255)" ><font face= "Arial" >< Font style= "font-size:14px" ><?xml version= "1.0" encoding= "Utf-8"?> "<shape xmlns:android=
" http:// Schemas.android.com/apk/res/android ">
  <solid android:color=" #666666 "/>
  <corners android: radius= "10DP"/>
  <padding 
    android:left= "5DP"
    android:right= "5DP"
    android:top= "5DP"
    Android:bottom= "5DP"
    />
 
</shape></font></font></font></font>

Third, use the custom layout control class
Finally, how do you use this custom hot tag control class? Quite simply, take a look at the example code below:

<font color= "#362e2b" ><font style= "Background-color:rgb (255, 255, 255)" ><font face= "Arial" ><
 
Font style= "font-size:14px" >package com.czm.flowlayout;
Import android.app.Activity;
Import Android.graphics.Color;
Import Android.os.Bundle;
Import Android.view.ViewGroup.LayoutParams;
Import Android.view.ViewGroup.MarginLayoutParams;
Import Android.widget.TextView;  /** * * @author caizhiming * @created on 2015-4-13/public class Mainactivity extends activity {private String Mnames[] = {"Welcome", "Android", "TextView", "Apple", "Jamy", "Kobe Bryant", "Jordan", "Layout", "ViewGroup
  "," margin "," padding "," text "," name "," type "," Search "," Logcat "};
  Private Xcflowlayout mflowlayout;
    @Override protected void OnCreate (Bundle savedinstancestate) {super.oncreate (savedinstancestate);
     
    Setcontentview (R.layout.activity_main);
     
  Initchildviews (); private void Initchildviews () {//TODO auto-generated Method stub mflowlayout = (Xcflowlayout) Findviewbyid (r.id.flowlayout);
    Marginlayoutparams LP = new Marginlayoutparams (layoutparams.wrap_content,layoutparams.wrap_content);
    Lp.leftmargin = 5;
    Lp.rightmargin = 5;
    Lp.topmargin = 5;
    Lp.bottommargin = 5;
      for (int i = 0; i < mnames.length i + +) {TextView view = new TextView (this);
      View.settext (Mnames[i]);
      View.settextcolor (Color.White);
      View.setbackgrounddrawable (Getresources (). getdrawable (R.DRAWABLE.TEXTVIEW_BG));
    Mflowlayout.addview (VIEW,LP); }}}</font></font></font></font>

The above is the entire content of this article, here is a small benefit for everyone:

Flow layout words are not much said, relatively simple, notes are written very clearly import java.util.ArrayList;

Import java.util.List;
Import Android.content.Context;
Import Android.util.AttributeSet;
Import Android.view.View;

Import Android.view.ViewGroup; /** * * @author Mr.himan * @version 1.0<br> * November 4, 2015 11:12:06 <br> * Streaming layout settings margintop and Margi Nleft effective marginright is not implemented/public class FlowLayout extends ViewGroup {/** * store all the child view/private list<list<

 view>> mallchildviews = new arraylist<list<view>> ();

 /** * Store the height of each row * * Private list<integer> mlineheight = new arraylist<integer> ();
 Public FlowLayout {This (context, NULL);
 Public FlowLayout (context, AttributeSet attrs) {This (context, attrs, 0);
 Public FlowLayout (context, AttributeSet attrs, int defstyle) {Super (context, attrs, Defstyle);
 @Override protected void OnLayout (Boolean changed, int l, int t, int r, int b) {mallchildviews.clear (); MlineheighT.clear ();

 Gets the width of the current viewgroup int width = getwidth ();
 int linewidth = 0;
 int lineheight = 0;
 Record the current row's View list<view> lineviews = new arraylist<view> ();
 int childcount = Getchildcount ();
  for (int i = 0; i < ChildCount. i++) {View child = Getchildat (i);
  Marginlayoutparams LP = (marginlayoutparams) child getlayoutparams ();
  int childwidth = Child.getmeasuredwidth ();

  int childheight = Child.getmeasuredheight (); If you need to line-wrap if (childwidth + linewidth + lp.leftmargin + lp.rightmargin > width) {//Record lineheight Mlineheight.add (
  Lineheight);
  Record the Views Mallchildviews.add (Lineviews) for the current row;
  The width of the reset row is linewidth = 0;
  Lineheight = childheight + Lp.topmargin + lp.bottommargin;
  Resets the view's collection lineviews = new ArrayList ();
  } linewidth + = childwidth + Lp.leftmargin + lp.rightmargin;
  Lineheight = Math.max (lineheight, childheight + lp.topmargin + lp.bottommargin);
 Lineviews.add (child);
 //processing The last line of Mlineheight.add (lineheight); MallchilDviews.add (lineviews);

 Marginlayoutparams params = (marginlayoutparams) this.getlayoutparams ();
 Set the position of the child view int left = 0;
 Add margintop int top = 0 + params.topmargin;
 Gets the number of rows int linecount = Mallchildviews.size ();
  for (int i = 0; i < LineCount i++) {//When forward views and heights Lineviews = Mallchildviews.get (i);
  Lineheight = Mlineheight.get (i);
  for (int j = 0; J < Lineviews.size (); j + +) {//Set marginleft if (j = = 0) {left = 0 + params.leftmargin for each column;
  View child = Lineviews.get (j);
  Determines whether to display if (child.getvisibility () = = View.gone) {continue;
  } marginlayoutparams LP = (marginlayoutparams) child getlayoutparams ();
  int cleft = left + lp.leftmargin;
  int ctop = top + lp.topmargin;
  int cright = cleft + child.getmeasuredwidth ();
  int cbottom = ctop + child.getmeasuredheight ();
  Perform a child view layout child.layout (cleft, ctop, Cright, cbottom);
  Left + + child.getmeasuredwidth () + Lp.leftmargin + lp.rightmargin;
  } left = 0; Top + = Lineheight; }} @Override protected void onmeasure (int widthmeasurespec, int heightmeasurespec) {//parent control pass in width and height and corresponding measurement mode int
 Sizewidth = Measurespec.getsize (Widthmeasurespec);
 int modewidth = Measurespec.getmode (Widthmeasurespec);
 int sizeheight = measurespec.getsize (Heightmeasurespec);

 int modeheight = Measurespec.getmode (Heightmeasurespec);  If the width of the current viewgroup is wrap_content int width = 0;//its own measured widths int height = 0;//its own measured height//record width and height of each row int linewidth =
 0;

 int lineheight = 0;
  
 Gets the number of child view int childcount = Getchildcount ();
  for (int i = 0; i < ChildCount. i++) {View child = Getchildat (i);
  Measure the width and height measurechild of the view (child, Widthmeasurespec, Heightmeasurespec);
  Get layoutparams marginlayoutparams params = (marginlayoutparams) child getlayoutparams ();
  The width of the child view occupies int childwidth = child.getmeasuredwidth () + Params.leftmargin + params.rightmargin; Child view occupies a height of int childheight = Child.getmeasuredheight () + Params.bottommargin +Params.topmargin;
  When line break if (linewidth + childwidth > Sizewidth) {//contrast get maximum width = Math.max (width, linewidth);
  Resetting linewidth linewidth = childwidth;
  Record row High height = lineheight;
  Lineheight = Childheight;
  else {//no newline//Overlay line width linewidth + = childwidth;
  Get maximum row height lineheight = Math.max (lineheight, childheight);
  ///Process Last child view if (i = = childCount-1) {width = Math.max (width, linewidth);
  Height + = lineheight; } setmeasureddimension (Modewidth = = measurespec.exactly? sizewidth:width, Modeheight = = measurespec.exactly? siz

 Eheight:height); /** * corresponding to the current ViewGroup layoutparams/@Override public layoutparams generatelayoutparams (AttributeSet attrs) {RET
 Urn New Marginlayoutparams (GetContext (), attrs);

 }
}

Hopefully this article will help you learn about the streaming layout of Android's popular tags.