分析CSDN搜索文字布局控件
首先，我们需要来分析一下，CSDN搜素框文字提示控件的布局，下图为最新CSDN的搜索框布局提示图：
经过前面的自定义控件，布局等学习后，我们来简单的来分析上面这个控件，可以看到文字的提示是由很多的文字（TextView）组成，而每排的文字（TextView）数量不固定，根据长度自适应每行多少个文字，同时他们有上间距，也有下间距，也就是布局中常用的Margin。
ok，我们看到的也就这些，主要实现的就是这个容器规则，但是我们前面只介绍了如果布局容器，并没有介绍如何使用Margin，所以我们先来了解一下ViewGroup中是如何获取，以及设置Margin的。
ViewGroup获取子控件的Margin
我们先来看看，ViewGroup需要重写获取设置Margin值的三个方法：
@Override protected LayoutParams generateDefaultLayoutParams() { return new MarginLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT); } @Override public LayoutParams generateLayoutParams(AttributeSet attrs) { return new MarginLayoutParams(getContext(),attrs); } @Override protected LayoutParams generateLayoutParams(LayoutParams p) { return new MarginLayoutParams(p); }
每个自定义控件都需要这样写，至于原因，我们还需要来看一段源代码，比如new MarginLayoutParams(getContext(),attrs)，你可以通过Android Studio开发工具点进去看下，就会发现其实跟前面获取自定义属性的代码基本一样，代码如下：
public MarginLayoutParams(Context c, AttributeSet attrs) { super(); TypedArray a = c.obtainStyledAttributes(attrs, R.styleable.ViewGroup_MarginLayout); setBaseAttributes(a, R.styleable.ViewGroup_MarginLayout_layout_width, R.styleable.ViewGroup_MarginLayout_layout_height); int margin = a.getDimensionPixelSize( com.android.internal.R.styleable.ViewGroup_MarginLayout_layout_margin, -1); if (margin >= 0) { leftMargin = margin; topMargin = margin; rightMargin= margin; bottomMargin = margin; } else { int horizontalMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginHorizontal, -1); int verticalMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginVertical, -1); if (horizontalMargin >= 0) { leftMargin = horizontalMargin; rightMargin = horizontalMargin; } else { leftMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginLeft, UNDEFINED_MARGIN); if (leftMargin == UNDEFINED_MARGIN) { mMarginFlags |= LEFT_MARGIN_UNDEFINED_MASK; leftMargin = DEFAULT_MARGIN_RESOLVED; } rightMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginRight, UNDEFINED_MARGIN); if (rightMargin == UNDEFINED_MARGIN) { mMarginFlags |= RIGHT_MARGIN_UNDEFINED_MASK; rightMargin = DEFAULT_MARGIN_RESOLVED; } } startMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginStart, DEFAULT_MARGIN_RELATIVE); endMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginEnd, DEFAULT_MARGIN_RELATIVE); if (verticalMargin >= 0) { topMargin = verticalMargin; bottomMargin = verticalMargin; } else { topMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginTop, DEFAULT_MARGIN_RESOLVED); bottomMargin = a.getDimensionPixelSize( R.styleable.ViewGroup_MarginLayout_layout_marginBottom, DEFAULT_MARGIN_RESOLVED); } if (isMarginRelative()) { mMarginFlags |= NEED_RESOLUTION_MASK; } } final boolean hasRtlSupport = c.getApplicationInfo().hasRtlSupport(); final int targetSdkVersion = c.getApplicationInfo().targetSdkVersion; if (targetSdkVersion < JELLY_BEAN_MR1 || !hasRtlSupport) { mMarginFlags |= RTL_COMPATIBILITY_MODE_MASK; } // Layout direction is LTR by default mMarginFlags |= LAYOUT_DIRECTION_LTR; a.recycle(); }
简单的来理解，这段代码先是提取了layout_margin的值并进行设置，然后，如果用户没有设置layout_margin，而是单独设置的，就一个一个提取。
需要注意的是，之所以需要重写这些函数，是因为默认的ViewGroup方法只会获取layout_width和layout_height，只有MarginLayoutParams()方法才具有提取margin值的功能。
实现CSDN搜索文字提示布局
今天讲解的Margin加上前面讲解的自定义布局的知识，就可以实现CSDN搜索文字提示布局，首先，我们还是来分析一下博文开始的图片，是不是发现所有的TextView的style除了文字不一样，其他的都一样呢？所以我为了减少代码额冗余，我们先自定义一个style，代码如下：
<style name="textview"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> <item name="android:layout_margin">4dp</item> <item name="android:background">@drawable/textviewshap</item> <item name="android:textColor">#FF1E90FF</item> <item name="android:textSize">16sp</item> </style>
接着，我们设置我们的布局文件，主Activity的XML布局文件如下：
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <com.liyuanjinglyj.csdnserachapplication.CSDNSerachView android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView style="@style/textview" android:text="Python"/> <TextView style="@style/textview" android:text="Java"/> <TextView style="@style/textview" android:text="Spring Boot"/> <TextView style="@style/textview" android:text="PHP"/> <TextView style="@style/textview" android:text="Vue"/> <TextView style="@style/textview" android:text="Flutter"/> <TextView style="@style/textview" android:text="Python基础教程"/> <TextView style="@style/textview" android:text="Java学习路线"/> <TextView style="@style/textview" android:text="C语言"/> <!--省略其他TextView--> </com.liyuanjinglyj.csdnserachapplication.CSDNSerachView>
然后就是常规的自定义ViewGroup步骤，测量onMeasure()，布局onLayout()，首先肯定是测量所有子控件的大小，计算整个自定义ViewGroup的宽高，代码如下（还是常规套路）：
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int measureWidth=MeasureSpec.getSize(widthMeasureSpec); int measureHeight=MeasureSpec.getSize(heightMeasureSpec); int measureWidthMode=MeasureSpec.getMode(widthMeasureSpec); int measureHeightMode=MeasureSpec.getMode(heightMeasureSpec); int width=0; int height=0; //中间代码 setMeasuredDimension((measureWidthMode==MeasureSpec.EXACTLY)?measureWidth:width, (measureHeightMode==MeasureSpec.EXACTLY)?measureHeight:height); }
最重要的还是中间计算的代码，但是我们现在增加了Margin值，所以我们需要多申请2个变量代码如下：
int lineWidth=0;//记录每一行的宽度 int lineHeight=0;//记录每一行的高度
定义变量后，我们需要遍历每个子控件，然后根据子空间的大小是否还能放在当前行，不行的话跳转到下一行，并记录当前行使用的宽度，以便后续判断其他子控件是否装的下，完整代码如下：
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int measureWidth = MeasureSpec.getSize(widthMeasureSpec); int measureHeight = MeasureSpec.getSize(heightMeasureSpec); int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec); int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec); int width = 0;//整体宽度 int height = 0;//整体高度 int lineWidth = 0;//记录每一行的宽度 int lineHeight = 0;//记录每一行的高度 int count = getChildCount();//获取子控件数量 for (int i = 0; i < count; i++) { View child = getChildAt(i); measureChild(child, widthMeasureSpec, heightMeasureSpec); MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; if (lineWidth + childWidth > measureWidth) { //如果当前行占位Textview+新占位如果当前行占位Textview大于整体宽度，就需要换行设置控件 width = Math.max(lineWidth, width);//获取最大值的宽度值 height += lineHeight;//换行后直接加上宽度就是整体宽度 //因为当前行放不下控件，所以宽高直接等于新换行的控件宽高 lineWidth = childWidth; lineHeight = childHeight; } else { //否则 lineWidth += childWidth;//如果控件没有换行，就是之前的宽度加上新TextView宽度 lineHeight = Math.max(lineHeight, childHeight);//而如果之前高度高于当前子控件高度，那么该行还是之前的宽度，否则为新控件高度 } //因为最后一行不管填不填满，高度都需要加上最后一行所以,没经过最后换行的操作，上面是不会计算加最后一行的高度的，所以必须单独写出来 if (i == count - 1) { height += lineHeight; width = Math.max(width, lineWidth); } } setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth : width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight : height); }
上面的注释应该够详细了，这里就不再赘述了，不过需要说明的是子控件的宽度是自身宽度加上margin_right和margin_left，子空间高度是自身高度加上margin_top和margin_bottom，上面自定义ViewGroup也就这个值的获取与之前博文不同，其他的都是一些常规操作与判断。
测量onMeasure()写完了，我们还需要进行布局代码的编写，因为我们在控件中加入了margin属性，所以我们需要标记当前子控件的top坐标和left坐标，为什么不需要bottom，以及right呢？因为定位一个控件是其左上角坐标（如上图所示，看完就会明白），具体的代码如下：
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int count = getChildCount(); int lineWidth = 0; int lineHeight = 0; int top = 0, left = 0; for (int i = 0; i < count; i++) { View child = getChildAt(i); MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams(); int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; if (childWidth + lineWidth > getMeasuredWidth()) { //如果换行,与onMeasure基本类同 top += lineHeight; left = 0; lineHeight = childHeight; lineWidth = childWidth; } else { lineHeight = Math.max(lineHeight, childHeight); lineWidth += childWidth; } //计算子空间的left,top,right,bottom int lc = left + lp.leftMargin; int tc = top + lp.topMargin; int rc = lc + child.getMeasuredWidth(); int bc = tc + child.getMeasuredHeight(); child.layout(lc, tc, rc, bc); left += childWidth;//将left更改为下个子空间的起始点 } }
这样我们就是实现了CSDN搜索框下文字布局的容器控件效果，当然，我这里还设置了边框等样式，本文主要介绍自定义ViewGroup，边框样式属于基础，这里就不再介绍了。(边框效果最后源代码里面有)，实现效果如下：
本文GitHub下载地址：点击下载
