概述
在日常的开发中我们有时候会需要按需求自己定制一个ViewGroup,今天就用一个简单的例子说一下自定义ViewGroup的大致流程
运行效果
customLayout.png
这也就是大家常说的流式布局，这种布局一般在搜索功能或历史记录的展现中常用，今天就用这个例子来记录自定义ViewGroup的步骤
整体思路
我们知道，在自定义View中绘制大体分为3步
- 1.onMeasure()函数 测量自身的大小
- 2.onLayout() 定位自身的位置
- 3.onDraw() 绘制自身的内容
而在自定义ViewGroup中，它更重要的是展示多个子控件，自身的一些界面上的展示其实是次要的，所以我们在自定义ViewGroup中重点关心一下两个函数
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}
这个onMeasure主要是负责在绘制前的一次测量，这次测量会给后面的布局作为参考，要注意，只是参考，最终的控件大小和位置是需要重新确认的
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
}
onLayout函数主要是负责具体的子控件布局，通过子控件调用layout来放置在具体的位置上，最终的显示大小也是这里确认的，而不是在onMeasure()中确认的
MeasureSpec类用法
- 1.MeasureSpec.UNSPECIFIED 父控件不对子控件增加任何约束
- 2.MeasureSpec.EXACTLY 父控件会约束子控件，子控件的大小在父控件内部
- 3.MeasureSpec.AT_MOST 子控件最多达到多少指定大小
我们需要在onMeasure()中测量出父控件的大小，同时也要测量出子控件的大小，这里测量的代码是这样的
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
var measureWidth = MeasureSpec.getSize(widthMeasureSpec)
var measureHeight = MeasureSpec.getSize(heightMeasureSpec)
var measureWidthMode = MeasureSpec.getMode(widthMeasureSpec)
var measureHeightMode = MeasureSpec.getMode(heightMeasureSpec)
Log.d(tag,"onMeasure measureWidth +$measureWidth +\n " +
"measureHeight +$measureHeight +\n" +
"measureWidthMode +$measureWidthMode +\n" +
"measureHeightMode +$measureHeightMode +\n")
var w = 0
var h = 0
if (measureWidthMode==MeasureSpec.EXACTLY){
w=measureWidth
}
if (measureHeightMode==MeasureSpec.EXACTLY){
h=measureHeight
}
for (index in 0 until childCount){
var child = getChildAt(index)
measureChild(child,widthMeasureSpec,heightMeasureSpec)
}
setMeasuredDimension(w,h)
}
在onLayout()函数中布局子控件,由于时间关系，这个例子我没有处理当子控件高度不一致的时候的显示，因为这涉及到更复杂的位置处理，这里我们只按统一高度处理作为示例，其他情况都可以举一反三啦
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
Log.d(tag,"onLayout ")
var w = 0
var h = 0
for (index in 0 until childCount){
var child = getChildAt(index)
var top = 0
var left = 0
var right = 0
var bottom = 0
// 获取margin
var lp = child.layoutParams as MarginLayoutParams
var childWith = child.measuredWidth+lp.leftMargin+lp.rightMargin
var childHeight = child.measuredHeight+lp.topMargin+lp.bottomMargin
if (w+childWith<=measuredWidth){
left = w+lp.leftMargin
top = h+lp.topMargin
right = w+childWith-lp.rightMargin
bottom = h+childHeight-lp.bottomMargin
w+=childWith
}else{
w=0
h+=childHeight
left = w+lp.leftMargin
top = h+lp.topMargin
right = w+childWith-lp.rightMargin
bottom = h+childHeight-lp.bottomMargin
w+=childWith
}
child.layout(left,top,right,bottom)
}
}
CustomLayout完整源码
package com.tx.txcustomview.view
import android.content.Context
import android.graphics.Canvas
import android.util.AttributeSet
import android.util.Log
import android.view.ViewGroup
/**
* create by xu.tian
* @date 2021/10/6
*/
class CustomLayout(context: Context?, attrs: AttributeSet?) : ViewGroup(context, attrs) {
private val tag = "CustomLayout"
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
var measureWidth = MeasureSpec.getSize(widthMeasureSpec)
var measureHeight = MeasureSpec.getSize(heightMeasureSpec)
var measureWidthMode = MeasureSpec.getMode(widthMeasureSpec)
var measureHeightMode = MeasureSpec.getMode(heightMeasureSpec)
Log.d(tag,"onMeasure measureWidth +$measureWidth +\n " +
"measureHeight +$measureHeight +\n" +
"measureWidthMode +$measureWidthMode +\n" +
"measureHeightMode +$measureHeightMode +\n")
var w = 0
var h = 0
if (measureWidthMode==MeasureSpec.EXACTLY){
w=measureWidth
}
if (measureHeightMode==MeasureSpec.EXACTLY){
h=measureHeight
}
for (index in 0 until childCount){
var child = getChildAt(index)
measureChild(child,widthMeasureSpec,heightMeasureSpec)
}
setMeasuredDimension(w,h)
}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
Log.d(tag,"w $w h $h oldw $oldw oldh $oldh ")
}
override fun onLayout(changed: Boolean, left: Int, top: Int, right: Int, bottom: Int) {
Log.d(tag,"onLayout ")
var w = 0
var h = 0
for (index in 0 until childCount){
var child = getChildAt(index)
var top = 0
var left = 0
var right = 0
var bottom = 0
// 获取margin
var lp = child.layoutParams as MarginLayoutParams
var childWith = child.measuredWidth+lp.leftMargin+lp.rightMargin
var childHeight = child.measuredHeight+lp.topMargin+lp.bottomMargin
if (w+childWith<=measuredWidth){
left = w+lp.leftMargin
top = h+lp.topMargin
right = w+childWith-lp.rightMargin
bottom = h+childHeight-lp.bottomMargin
w+=childWith
}else{
w=0
h+=childHeight
left = w+lp.leftMargin
top = h+lp.topMargin
right = w+childWith-lp.rightMargin
bottom = h+childHeight-lp.bottomMargin
w+=childWith
}
child.layout(left,top,right,bottom)
}
}
override fun onDraw(canvas: Canvas?) {
super.onDraw(canvas)
Log.d(tag,"onDraw")
}
/**
* 获取margin必须重写以下3个方法
*/
override fun generateLayoutParams(p: LayoutParams?): LayoutParams {
return MarginLayoutParams(p)
}
override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
return MarginLayoutParams(context,attrs)
}
override fun generateDefaultLayoutParams(): LayoutParams {
return MarginLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT)
}
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<com.tx.txcustomview.view.CustomLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white">
<TextView
style="@style/text_style"
android:text="杨幂" />
<TextView
style="@style/text_style"
android:text="薛之谦" />
<TextView
style="@style/text_style"
android:text="迪丽热巴" />
<TextView
style="@style/text_style"
android:text="哈尼克孜" />
<TextView
style="@style/text_style"
android:text="毛不易" />
<TextView
style="@style/text_style"
android:text="易烊千玺" />
<TextView
style="@style/text_style"
android:text="林俊杰" />
<TextView
style="@style/text_style"
android:text="杨超越" />
<TextView
style="@style/text_style"
android:text="杨洋" />
<TextView
style="@style/text_style"
android:text="周杰伦" />
<TextView
style="@style/text_style"
android:text="王俊凯" />
<TextView
style="@style/text_style"
android:text="杨幂" />
<TextView
style="@style/text_style"
android:text="薛之谦" />
<TextView
style="@style/text_style"
android:text="迪丽热巴" />
<TextView
style="@style/text_style"
android:text="哈尼克孜" />
<TextView
style="@style/text_style"
android:text="毛不易" />
<TextView
style="@style/text_style"
android:text="易烊千玺" />
<TextView
style="@style/text_style"
android:text="林俊杰" />
<TextView
style="@style/text_style"
android:text="杨超越" />
<TextView
style="@style/text_style"
android:text="杨洋" />
<TextView
style="@style/text_style"
android:text="周杰伦" />
<TextView
style="@style/text_style"
android:text="王俊凯" />
</com.tx.txcustomview.view.CustomLayout>
Style
<style name="text_style">
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:textSize">20sp</item>
<item name="android:textColor">@color/white</item>
<item name="android:layout_margin">5dp</item>
<item name="android:gravity">center</item>
<item name="android:paddingTop">5dp</item>
<item name="android:paddingBottom">5dp</item>
<item name="android:paddingLeft">10dp</item>
<item name="android:paddingRight">10dp</item>
<item name="android:background">@drawable/text_shape_bg</item>
</style>
背景文件 text_shape_bg.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="8dp"/>
<stroke android:color="#777173"/>
<solid android:color="#BDB9B9"/>
</shape>
总结
需要注意的是，如果需要获取子控件的margin，那么就要复写以下三个函数
/**
* 获取margin必须重写以下3个方法
*/
override fun generateLayoutParams(p: LayoutParams?): LayoutParams {
return MarginLayoutParams(p)
}
override fun generateLayoutParams(attrs: AttributeSet?): LayoutParams {
return MarginLayoutParams(context,attrs)
}
override fun generateDefaultLayoutParams(): LayoutParams {
return MarginLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT)
}
具体的使用在上面的源码里也有体现了，今天就先写到这，Respect ~
