Android中常见的热门标签的流式布局的实现

Posted 2021-01-29 skiwnchhw

一、概述：
在日常的app使用中，我们会在android 的app中看见 热门标签等自动换行的流式布局，今天，我们就来看看如何

自定义一个类似热门标签那样的流式布局吧（源码下载在下面最后给出）

类似的自定义布局。下面我们就来详细介绍流式布局的应用特点以及用的的技术点：

1.流式布局的特点以及应用场景
    特点：当上面一行的空间不够容纳新的TextView时候，
    才开辟下一行的空间

　　原理图：

　　

    场景：主要用于关键词搜索或者热门标签等场景
2.自定义ViewGroup,重点重写下面两个方法

    1、onMeasure:测量子view的宽高，设置自己的宽和高

    2、onLayout:设置子view的位置

    onMeasure:根据子view的布局文件中属性，来为子view设置测量模式和测量值
    测量=测量模式+测量值；

    测量模式有3种：
    EXACTLY：表示设置了精确的值，一般当childView设置其宽、高为精确值、match_parent时，ViewGroup会将其设置为EXACTLY；
    AT_MOST：表示子布局被限制在一个最大值内，一般当childView设置其宽、高为wrap_content时，ViewGroup会将其设置为AT_MOST；
    UNSPECIFIED：表示子布局想要多大就多大，一般出现在AadapterView的item的heightMode中、ScrollView的childView的heightMode中；此种模式比较少见。
3.LayoutParams
    ViewGroup LayoutParams :每个 ViewGroup 对应一个 LayoutParams; 即 ViewGroup -> LayoutParams
    getLayoutParams 不知道转为哪个对应的LayoutParams ,其实很简单，就是如下：
    子View.getLayoutParams 得到的LayoutParams对应的就是 子View所在的父控件的LayoutParams;
    例如，LinearLayout 里面的子view.getLayoutParams ->LinearLayout.LayoutParams
    所以 咱们的FlowLayout 也需要一个LayoutParams，由于上面的效果图是子View的 margin，
    所以应该使用MarginLayoutParams。即FlowLayout->MarginLayoutParams

4.最后来看看实现的最终效果图：

二、热门标签的流式布局的实现：

1. 自定义热门标签的ViewGroup实现

　　根据上面的技术分析，自定义类继承于ViewGroup，并重写 onMeasure和onLayout等方法。具体实现代码如下：

 

[plain] view plaincopy

 

1. package com.czm.flowlayout;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import android.content.Context;  
7. import android.util.AttributeSet;  
8. import android.view.View;  
9. import android.view.ViewGroup;  
10. /**  
11.  *   
12.  * @author caizhiming  
13.  * @created on 2015-4-13  
14.  */  
15. public class XCFlowLayout extends ViewGroup{  
16.   
17.     //存储所有子View  
18.     private List<List<View>> mAllChildViews = new ArrayList<>();  
19.     //每一行的高度  
20.     private List<Integer> mLineHeight = new ArrayList<>();  
21.       
22.     public XCFlowLayout(Context context) {  
23.         this(context, null);  
24.         // TODO Auto-generated constructor stub  
25.     }  
26.     public XCFlowLayout(Context context, AttributeSet attrs) {  
27.         this(context, attrs, 0);  
28.         // TODO Auto-generated constructor stub  
29.     }  
30.     public XCFlowLayout(Context context, AttributeSet attrs, int defStyle) {  
31.         super(context, attrs, defStyle);  
32.         // TODO Auto-generated constructor stub  
33.     }  
34.     @Override  
35.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
36.         // TODO Auto-generated method stub  
37.           
38.         //父控件传进来的宽度和高度以及对应的测量模式  
39.         int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);  
40.         int modeWidth = MeasureSpec.getMode(widthMeasureSpec);  
41.         int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);  
42.         int modeHeight = MeasureSpec.getMode(heightMeasureSpec);  
43.           
44.         //如果当前ViewGroup的宽高为wrap_content的情况  
45.         int width = 0;//自己测量的 宽度  
46.         int height = 0;//自己测量的高度  
47.         //记录每一行的宽度和高度  
48.         int lineWidth = 0;  
49.         int lineHeight = 0;  
50.           
51.         //获取子view的个数  
52.         int childCount = getChildCount();  
53.         for(int i = 0;i < childCount; i ++){  
54.             View child = getChildAt(i);  
55.             //测量子View的宽和高  
56.             measureChild(child, widthMeasureSpec, heightMeasureSpec);  
57.             //得到LayoutParams  
58.             MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();  
59.             //子View占据的宽度  
60.             int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;  
61.             //子View占据的高度  
62.             int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;  
63.             //换行时候  
64.             if(lineWidth + childWidth > sizeWidth){  
65.                 //对比得到最大的宽度  
66.                 width = Math.max(width, lineWidth);  
67.                 //重置lineWidth  
68.                 lineWidth = childWidth;  
69.                 //记录行高  
70.                 height += lineHeight;  
71.                 lineHeight = childHeight;  
72.             }else{//不换行情况  
73.                 //叠加行宽  
74.                 lineWidth += childWidth;  
75.                 //得到最大行高  
76.                 lineHeight = Math.max(lineHeight, childHeight);  
77.             }  
78.             //处理最后一个子View的情况  
79.             if(i == childCount -1){  
80.                 width = Math.max(width, lineWidth);  
81.                 height += lineHeight;  
82.             }  
83.         }  
84.         //wrap_content  
85.         setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth : width,  
86.                 modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height);  
87.         super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
88.     }  
89.       
90.     @Override  
91.     protected void onLayout(boolean changed, int l, int t, int r, int b) {  
92.         // TODO Auto-generated method stub  
93.         mAllChildViews.clear();  
94.         mLineHeight.clear();  
95.         //获取当前ViewGroup的宽度  
96.         int width = getWidth();  
97.           
98.         int lineWidth = 0;  
99.         int lineHeight = 0;  
100.         //记录当前行的view  
101.         List<View> lineViews = new ArrayList<View>();  
102.         int childCount = getChildCount();  
103.         for(int i = 0;i < childCount; i ++){  
104.             View child = getChildAt(i);  
105.             MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();  
106.             int childWidth = child.getMeasuredWidth();  
107.             int childHeight = child.getMeasuredHeight();  
108.               
109.             //如果需要换行  
110.             if(childWidth + lineWidth + lp.leftMargin + lp.rightMargin > width){  
111.                 //记录LineHeight  
112.                 mLineHeight.add(lineHeight);  
113.                 //记录当前行的Views  
114.                 mAllChildViews.add(lineViews);  
115.                 //重置行的宽高  
116.                 lineWidth = 0;  
117.                 lineHeight = childHeight + lp.topMargin + lp.bottomMargin;  
118.                 //重置view的集合  
119.                 lineViews = new ArrayList();  
120.             }  
121.             lineWidth += childWidth + lp.leftMargin + lp.rightMargin;  
122.             lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);  
123.             lineViews.add(child);  
124.         }  
125.         //处理最后一行  
126.         mLineHeight.add(lineHeight);  
127.         mAllChildViews.add(lineViews);  
128.           
129.         //设置子View的位置  
130.         int left = 0;  
131.         int top = 0;  
132.         //获取行数  
133.         int lineCount = mAllChildViews.size();  
134.         for(int i = 0; i < lineCount; i ++){  
135.             //当前行的views和高度  
136.             lineViews = mAllChildViews.get(i);  
137.             lineHeight = mLineHeight.get(i);  
138.             for(int j = 0; j < lineViews.size(); j ++){  
139.                 View child = lineViews.get(j);  
140.                 //判断是否显示  
141.                 if(child.getVisibility() == View.GONE){  
142.                     continue;  
143.                 }  
144.                 MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();  
145.                 int cLeft = left + lp.leftMargin;  
146.                 int cTop = top + lp.topMargin;  
147.                 int cRight = cLeft + child.getMeasuredWidth();  
148.                 int cBottom = cTop + child.getMeasuredHeight();  
149.                 //进行子View进行布局  
150.                 child.layout(cLeft, cTop, cRight, cBottom);  
151.                 left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;  
152.             }  
153.             left = 0;  
154.             top += lineHeight;  
155.         }  
156.           
157.     }  
158.     /**  
159.      * 与当前ViewGroup对应的LayoutParams  
160.      */  
161.     @Override  
162.     public LayoutParams generateLayoutParams(AttributeSet attrs) {  
163.         // TODO Auto-generated method stub  
164.           
165.         return new MarginLayoutParams(getContext(), attrs);  
166.     }  
167. }  

 

2.相关的布局文件：

引用自定义控件：

 

[plain] view plaincopy

 

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
2.     xmlns:tools="http://schemas.android.com/tools"  
3.     android:id="@+id/container"  
4.     android:layout_width="match_parent"  
5.     android:layout_height="match_parent" >  
6.   
7.     <com.czm.flowlayout.XCFlowLayout  
8.         android:id="@+id/flowlayout"  
9.         android:layout_width="match_parent"  
10.         android:layout_height="match_parent" >  
11.   
12.     </com.czm.flowlayout.XCFlowLayout>  
13.   
14. </RelativeLayout>  

 

TextView的样式文件：

 

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://www.cnblogs.com/captainbed