Android Custom Label list control Labelsview parsing

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Whether it's on the mobile app or on the front page, we'll often see a list of the following tags:


Labels are placed from left to right, and lines are automatically wrapped when they are not displayed. Such effects are not very well implemented with Android-derived controls, so it is often necessary to customize the controls ourselves. I have encountered several times in development to achieve such a label list effect, so I wrote a control, put on my GitHub, for later use. Interested students are also welcome to visit my GitHub, view the source code implementation and use the control. I'll introduce you to the implementation and use of the control.
To implement such a list of tags is not difficult, the list of item can be directly implemented with TextView, we only need to care about the size of the list control and label placement on it. That means we need to do just two things: the Measurement layout (onmeasure) and the placement label (onlayout). This is the basic step of customizing the ViewGroup, and I believe that the students who know a custom view are not unfamiliar. Let's take a look at the specific code implementation.
Measurement of the control:

    @OverrideProtectedvoidOnmeasure (int Widthmeasurespec,int Heightmeasurespec) {int count = Getchildcount ();int maxWidth = measurespec.getsize (widthmeasurespec)-Getpaddingleft ()-getpaddingright ();int contentheight =0;Record the height of the contentint linewidth =0;Width of the record rowint maxlinewidth =0;Record the widest line widthint maxitemheight =0;Record the height of item height in a rowBoolean begin =TrueIs the beginning of the lineLoop measure item and calculate the content width of the controlfor (int i =0; I < count; i++) {View view = Getchildat (i); Measurechild (view, Widthmeasurespec, Heightmeasurespec);The current row does not show any line breaks when item is not displayed.if (MaxWidth < linewidth + view.getmeasuredwidth ()) {contentheight + = Mlinemargin; Contentheight + = Maxitemheight; max ItemHeight =0; Maxlinewidth = Math.max (Maxlinewidth, linewidth); LineWidth =0; Begin =True } maxitemheight = Math.max (Maxitemheight, View.getmeasuredheight ());if (!begin) {linewidth + = Mwordmargin;}else {begin =False } linewidth + = View.getmeasuredwidth (); } contentheight + = Maxitemheight; Maxlinewidth = Math.max (Maxlinewidth, linewidth);Measure the final width height of the control setmeasureddimension (Measurewidth (widthmeasurespec,maxlinewidth), Measureheight (Heightmeasurespec, Contentheight)); }Measure the width of the controlPrivateIntMeasurewidth (int Measurespec,int contentwidth) {int result =0;int specmode = Measurespec.getmode (Measurespec);int specsize = measurespec.getsize (Measurespec);if (Specmode = = measurespec.exactly) {result = Specsize;}else {result = Contentwidth + getpaddingleft () + getpaddingright ();if (Specmode = = measurespec.at_most) {result = Math.min (result, specsize);}}This sentence is to support the MinWidth property. result = Math.max (result, getsuggestedminimumwidth ());return result; }//measurement control of high private int measureheight (int Measurespec, int Contentheight) {int result = 0; int Specmode = Measurespec.getmode (Measurespec); int specsize = Measurespec.getsize (Measurespec); if (Specmode = measurespec.exactly) {result = Specsize;} else {result = Contentheight + getpaddingtop () + Getpaddingbottom (); if (Specmode = = measurespec.at_most) {result = Math.min (result, specsize);}} //this sentence is to support the MinHeight attribute. result = Math.max (result, getsuggestedminimumheight ()); return result;}            

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66
• 67
• 68
• 69
• 70
• 71
• 72
• 73
• 74
• 75
• 76
• 77
• 78
• 79
• 80
• 81

Label Placement:

    @OverrideProtectedvoidOnLayout (Boolean changed,int left,int top,int right,int bottom) {int x = Getpaddingleft (); int y = getpaddingtop (); int contentwidth = right-left; int maxitemheight = 0; int count = Getchildcount (); //loop placed item for (int i = 0; I < count; i++) {View view = Getchildat (i); //the current row does not show any line breaks when item is not displayed. if (Contentwidth < x + view.getmeasuredwidth ()) {x = Getpaddingleft (); y + = Mlinemargin; y + = Maxitemheight; Maxitemheight = 0;} view.layout (x, y, X + view.getmeasuredwidth (), Y + view.getmeasuredheight ( )); x + = View.getmeasuredwidth (); x + = Mwordmargin; Maxitemheight = Math.max (Maxitemheight, View.getmeasuredheight ()); } }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21st
• 22
• 23
• 24
• 25
• 26
• 27

Onmeasure and OnLayout Implementation code is basically the same, the difference is only a measurement of the width of the high, one is placed position. It's very simple to implement.
The use of the control is much simpler and requires only three steps:
1, write the layout:

<com. Donkingliang. labels. Labelsview xmlns:app="Http://schemas.android.com/apk/res-auto" Android:Id="@+id/labels" android:layout_width= "match_parent" Android:layout_height= "wrap_content" app: Labelbackground= "@drawable/pink_frame_bg" //label background app: Labeltextcolor= "#fb435b" //label font Color App:labeltextsize= "14sp" //label font size app:labeltextpaddingbottom=  "5DP" //label Upper and lower left and right margin App:labeltextpaddingleft=" 10DP "App:labeltextpaddingright=" 10DP "App:labeltextpaddingtop= "5DP" App:linemargin= "10DP" //line-to-row distance app : Wordmargin= "10DP"/> //label and label distance    

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

2, set the label:

ArrayList<String>List=New ArrayList<> ();List. Add ("Android");List. Add ("IOS");List. Add ( "front"); list.add ( "backstage"); list.add (" development "); list.add ( "Java"); list.add ( "JavaScript"); list.add (" C + + "); list.add ( "PHP"); list.add (" Python "); Labelsview.setlabels (list);         

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12

3, set the tap to listen: (if required)

    labels.setOnLabelClickListener(new LabelsView.OnLabelClickListener() {            @Override            public void onLabelClick(TextView label, int position) { //label就是被点击的标签，position就是标签的位置。 } });

• 1
• 2
• 3
• 4
• 5
• 6

• 1
• 2
• 3
• 4
• 5
• 6

:

Don't forget to introduce dependencies before you use them:

allprojects {        repositories {            ...            maven { url ‘https://jitpack.io‘ }        }    }dependencies {        compile ‘com.github.donkingliang:LabelsView:1.0.0‘    }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

Finally, the address of the control in GitHub is given and you are welcome to visit and use it.
Https://github.com/donkingliang/LabelsView

Article synced to my Pinterest

Android Custom Label list control Labelsview parsing