本節(jié)內(nèi)容
1.流式布局
2.測量自定義view
一、效果展示
這一回子控件確定，但是每個(gè)子控件的大小不一樣。
布局原則：第一個(gè)子控件擺放完之后，第二個(gè)子控件會(huì)先判斷能不能擺在第一個(gè)子控件旁邊，也就是它們的寬加起來是否小于屏幕的寬度，如果是的話，就擺在它旁邊。否則，就放到下一行。后面的也是以此類推。
效果圖
上圖為了美觀，我把高度設(shè)置的一樣，其實(shí)高度也可以不一樣，如下圖所示。
高度不一樣
在這個(gè)demo中，我們需要計(jì)算每個(gè)子控件的高度和寬度，每一行的寬度和高度，以及最后的總寬度和總高度。
二、流式布局——計(jì)算控件大小
1.首先創(chuàng)建一個(gè)類，然后搭建好需要的那幾個(gè)函數(shù)和構(gòu)造方法。并設(shè)置好間距。
class MyViewGroup:ViewGroup {
private val space= 30
constructor(context: Context, attrs: AttributeSet):super(context,attrs){}
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
}
override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
}
}
2.接著在xml中添加幾個(gè)子控件
<com.example.riverlayout.MyViewGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@color/colorOrange">
<View
android:layout_width="150dp"
android:layout_height="40dp"
android:background="@color/colorAccent" />
<View
android:layout_width="100dp"
android:layout_height="80dp"
android:background="@color/colorAccent" />
</com.example.riverlayout.MyViewGroup>
3.在onMeasure方法中，添加一個(gè)for循環(huán)，在里面獲取子控件，并計(jì)算子控件
for(i in 0 until childCount){
val child = getChildAt(i)
//獲取子控件的布局參數(shù) xml中設(shè)置的layout_width layout_height
val lp = child.layoutParams
//確定子控件的measureSpec
val widthSpec = getChildMeasureSpec(widthMeasureSpec,2*space,lp.width)
val heightSpec = getChildMeasureSpec(heightMeasureSpec,2*space,lp.height)
child.measure(widthSpec,heightSpec)
}
4.然后獲取父容器本身的限制尺寸
val parentWidthSize = MeasureSpec.getSize(widthMeasureSpec)
5.定義兩個(gè)變量來記錄當(dāng)前這一行的寬度和高度
var currentLineWidth = space
var currentLineHeight = 0
6.定義變量來保存所有的子控件以及所有行的高度，再定義一個(gè)變量記錄當(dāng)前這一行的所有子視圖，另外定義兩個(gè)變量記錄當(dāng)前最大寬度和高度（也就是最終父容器的寬度和高度）
private var totalLineViews = mutableListOf<MutableList<View>>()
//保存所有行的高度
private val allLineHeights = mutableListOf<Int>()
var lineViews = mutableListOf<View>()
//記錄當(dāng)前最大寬度 （最終父容器的寬度）
var resultWidth =0
//記錄當(dāng)前的最大高度（最終父容器的高度）
var resultHeight = space
7.在for循環(huán)里面判斷這個(gè)子控件在當(dāng)前行還是下一行，也就是加起來有沒有超過屏幕的寬度。
如果沒有超過，就添加到當(dāng)前行，并改變當(dāng)前行的寬度和高度
否則就添加到下一行：先保存上一行的數(shù)據(jù)，然后重置一下當(dāng)前行，再把當(dāng)前子控件加到當(dāng)前行。
換行之后，就要重新確定當(dāng)前的最大寬度和最大高度。
之后重置當(dāng)前這一行的高度和寬度為子控件的高度和寬度
if (currentLineWidth+child.measuredWidth + space<= parentWidthSize){
//添加在當(dāng)前行
lineViews.add(child)
//改變當(dāng)前行的寬度
currentLineWidth+= child.measuredWidth+space
//確定高度
currentLineHeight = Math.max(currentLineHeight,child.measuredHeight)
}else{
//添加到下一行
//先保存上一行的數(shù)據(jù)
totalLineViews.add(lineViews)
//確定當(dāng)前最大寬度
resultWidth = Math.max(resultWidth,currentLineWidth)
//確定最大高度
resultHeight += currentLineHeight + space
//保存上一行的高度
allLineHeights.add(currentLineHeight)
//重置
lineViews = mutableListOf()
lineViews.add(child)
//重置當(dāng)前這一行的高度為子控件的高度
currentLineHeight = child.measuredHeight
currentLineWidth = space + child.measuredWidth
}
8.判斷是否還有最后一行
//判斷是否還有最后一行
if (lineViews.size>0){
//把最后一行加進(jìn)去
totalLineViews.add(lineViews)
//確定當(dāng)前最大寬度
resultWidth = Math.max(resultWidth,currentLineWidth)
//確定最大高度
resultHeight += currentLineHeight + space
//保存上一行的高度
allLineHeights.add(currentLineHeight)
}
9.設(shè)置父容器尺寸
setMeasuredDimension(resultWidth,resultHeight)
三、流式布局——布局子控件
1.在onLayout方法里面，先獲取行數(shù)，并記錄一下左上右下四個(gè)參數(shù)
val row = totalLineViews.size
var left = space
var right = 0
var top = space
var bottom = 0
2.接著進(jìn)入for循環(huán)，先獲取當(dāng)前行的控件個(gè)數(shù)和所有子視圖，然后遍歷這一行
for(i in 0 until row){
//獲取當(dāng)前行的個(gè)數(shù)
val count = totalLineViews[i].size
//獲取當(dāng)前行所有的子視圖
val lineViews = totalLineViews[i]
for ( j in 0 until count){
}
3.在第二個(gè)循環(huán)里面，先取出控件，然后再確定它的左上右下。
//取出當(dāng)前的控件
var child = lineViews[j]
right = left+child.measuredWidth
bottom = top+child.measuredHeight
child.layout(left,top,right,bottom)
//確定下一個(gè)left
left += child.measuredWidth + space
4.換行之后，要確定下一行的top，并重置一下left
//確定下一行的top
top += allLineHeights[i]+space
//下一行的left從頭開始
left = space
這樣寫完了之后，得到了如下結(jié)果。
結(jié)果
四、測量自定義view
1.先創(chuàng)建一個(gè)類，在里面畫一個(gè)圓
class MyView:View {
private var cx= 0f
private var cy = 0f
private var radius = 0f
private val paint = Paint().apply {
color = Color.MAGENTA
style = Paint.Style.FILL
}
constructor(context:Context,attrs:AttributeSet):super(context,attrs){}
override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
super.onSizeChanged(w, h, oldw, oldh)
cx = measuredWidth/2f
cy = measuredHeight/2f
radius = (Math.min(measuredHeight,measuredWidth))/2f
}
override fun onDraw(canvas: Canvas?) {
canvas?.drawCircle(cx,cy,radius,paint)
}
}
2.然后把這個(gè)自定義view添加到xml里面
<com.example.riverlayout.MyView
android:layout_width="100dp"
android:layout_height="100dp"/>
最后運(yùn)行結(jié)果如下圖所示。
但是如果把寬高都該為wrap_content，我們就要重新計(jì)算這個(gè)子控件了。
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec)
val widthMode = MeasureSpec.getMode(widthMeasureSpec)
val widthSize = MeasureSpec.getSize(widthMeasureSpec)
val heightMode = MeasureSpec.getMode(heightMeasureSpec)
val heightSize = MeasureSpec.getSize(heightMeasureSpec)
var resultWidth = 0
var resultHeight = 0
when(widthMode){
MeasureSpec.EXACTLY -> resultWidth = widthSize
else -> resultWidth = 100
}
when(heightMode){
MeasureSpec.EXACTLY ->resultHeight = heightSize
else -> resultHeight = 100
}
setMeasuredDimension(resultWidth,resultHeight)
}
如果有精確值，那么就為本身，否則就為默認(rèn)值，這里我們設(shè)置的默認(rèn)值為100.之后我們運(yùn)行程序，得到如下結(jié)果。
結(jié)果
