本节内容
1.流式布局
2.测量自定义view
一、效果展示
-
这一回子控件确定，但是每个子控件的大小不一样。
-
布局原则：第一个子控件摆放完之后，第二个子控件会先判断能不能摆在第一个子控件旁边，也就是它们的宽加起来是否小于屏幕的宽度，如果是的话，就摆在它旁边。否则，就放到下一行。后面的也是以此类推。
效果图
-
上图为了美观，我把高度设置的不一样，其实高度也可以不一样，如下图所示。
高度不一样
-
在这个demo中，我们需要计算每个子控件的高度和宽度，每一行的宽度和高度，以及最后的总宽度和总高度。
二、流式布局——计算控件大小
1.首先创建一个类，然后搭建好需要的那几个函数和构造方法。并设置好间距。
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中添加几个子控件
<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方法中，添加一个for循环，在里面获取子控件，并计算子控件
for(i in 0 until childCount){
val child = getChildAt(i)
//获取子控件的布局参数 xml中设置的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.定义两个变量来记录当前这一行的宽度和高度
var currentLineWidth = space
var currentLineHeight = 0
6.定义变量来保存所有的子控件以及所有行的高度，再定义一个变量记录当前这一行的所有子视图，另外定义两个变量记录当前最大宽度和高度（也就是最终父容器的宽度和高度）
private var totalLineViews = mutableListOf<MutableList<View>>()
//保存所有行的高度
private val allLineHeights = mutableListOf<Int>()
var lineViews = mutableListOf<View>()
//记录当前最大宽度 （最终父容器的宽度）
var resultWidth =0
//记录当前的最大高度（最终父容器的高度）
var resultHeight = space
7.在for循环里面判断这个子控件在当前行还是下一行，也就是加起来有没有超过屏幕的宽度。
-
如果没有超过，就添加到当前行，并改变当前行的宽度和高度
-
否则就添加到下一行：先保存上一行的数据，然后重置一下当前行，再把当前子控件加到当前行。
-
换行之后，就要重新确定当前的最大宽度和最大高度。
-
之后重置当前这一行的高度和宽度为子控件的高度和宽度
if (currentLineWidth+child.measuredWidth + space<= parentWidthSize){
//添加在当前行
lineViews.add(child)
//改变当前行的宽度
currentLineWidth+= child.measuredWidth+space
//确定高度
currentLineHeight = Math.max(currentLineHeight,child.measuredHeight)
}else{
//添加到下一行
//先保存上一行的数据
totalLineViews.add(lineViews)
//确定当前最大宽度
resultWidth = Math.max(resultWidth,currentLineWidth)
//确定最大高度
resultHeight += currentLineHeight + space
//保存上一行的高度
allLineHeights.add(currentLineHeight)
//重置
lineViews = mutableListOf()
lineViews.add(child)
//重置当前这一行的高度为子控件的高度
currentLineHeight = child.measuredHeight
currentLineWidth = space + child.measuredWidth
}
8.判断是否还有最后一行
//判断是否还有最后一行
if (lineViews.size>0){
//把最后一行加进去
totalLineViews.add(lineViews)
//确定当前最大宽度
resultWidth = Math.max(resultWidth,currentLineWidth)
//确定最大高度
resultHeight += currentLineHeight + space
//保存上一行的高度
allLineHeights.add(currentLineHeight)
}
9.设置父容器尺寸
setMeasuredDimension(resultWidth,resultHeight)
三、流式布局——布局子控件
1.在onLayout方法里面，先获取行数，并记录一下左上右下四个参数
val row = totalLineViews.size
var left = space
var right = 0
var top = space
var bottom = 0
2.接着进入for循环，先获取当前行的控件个数和所有子视图，然后遍历这一行
for(i in 0 until row){
//获取当前行的个数
val count = totalLineViews[i].size
//获取当前行所有的子视图
val lineViews = totalLineViews[i]
for ( j in 0 until count){
}
3.在第二个循环里面，先取出控件，然后再确定它的左上右下。
//取出当前的控件
var child = lineViews[j]
right = left+child.measuredWidth
bottom = top+child.measuredHeight
child.layout(left,top,right,bottom)
//确定下一个left
left += child.measuredWidth + space
4.换行之后，要确定下一行的top，并重置一下left
//确定下一行的top
top += allLineHeights[i]+space
//下一行的left从头开始
left = space
这样写完了之后，得到了如下结果。
结果
四、测量自定义view
1.先创建一个类，在里面画一个圆
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.然后把这个自定义view添加到xml里面
<com.example.riverlayout.MyView
android:layout_width="100dp"
android:layout_height="100dp"/>
-
但是如果把宽高都该为wrap_content，我们就要重新计算这个子控件了。
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)
}
-
如果有精确值，那么就为本身，否则就为默认值，这里我们设置的默认值为100.之后我们运行程序，得到如下结果。
结果
网友评论