本文共 3820 字,大约阅读时间需要 12 分钟。
这个系列是,干货!翻译出来一起学习。如有不妥,不吝赐教!
LinearLayout
,折线图和他下面的TextView
使用layout_weight
属性平分了他们所在的LinearLayout
的高度。那么如果我们删掉了TextView
和全部的layout_weight
,并把折线图的高度设定为wrap_content
会发生什么呢? 是的,以上修改之后整个的图就变成了这样。虽然使用了wrap_content
的高度,但是效果是填满了整个LinearLayout
。这就是View的默认布局行为,但是,如果我们要改变一下呢? 自定义视图显示在屏幕上一共分三步:measure(测量),layout(布局),draw(绘制)。基本上一个自定义视图在测量这一步计算大小,之后可以通过getMeasureWidth
和getMeasureHeight
得到View的宽度和高度。在布局计算这个自定义视图的左上和右下坐标以及实际的宽度和高度,最后根据以上layout步骤获得的数据调用onDraw
方法把View绘制在屏幕上。
所以要修改size,也就是自定义视图中修改默认的行为,就需要override onMeasure()
方法。一般的通用做法是:
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) var widthSpecMode = MeasureSpec.getMode(widthMeasureSpec) var widthSpecSize = MeasureSpec.getSize(widthMeasureSpec) var heightSpecMode = MeasureSpec.getMode(heightMeasureSpec) var heightSpecSize = MeasureSpec.getSize(heightMeasureSpec) if (widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST) { // set default width and height values you defined setMeasuredDimension(mDefaultWidth, mDefaultHeight) } else if (widthSpecMode == MeasureSpec.AT_MOST) { // set default width value and calculated `heightSpecSize` as height setMeasuredDimension(mDefaultWidth, heightSpecSize) } else if (heightSpecMode == MeasureSpec.AT_MOST) { // set calculated `widthSpecSize` as width and default height setMeasuredDimension(widthSpecSize, mDefaultHeight) }}
简单理解MeasureSpec.AT_MOST
就是你给折线图的layout_width
或者layout_height
设置了wrap_content
,系统不知道精确的宽度、高度是多少的时候的一个标记。如果有具体的50dp, 100dp的时候,这个标记的值为MeasureSpec.EXACTLY
。一般,一个view的宽度、高度只有这两种标记。
AT_MOST
的时候,宽度和高度设置为默认值。AT_MOST
高度不是的时候,宽度设置为默认值,高度设置为测量的值heightSpecSize
。AT_MOST
的时候,宽度设置为widthSpecSize
,高度设置为默认值。而我们这里则是意外的简单。因为要设置为正方形,所以使用宽度和高度中相对较小的那个值来作为宽、高度共同的值就可以了:
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) var size = 0 var width = getMeasuredWidth() var height = getMeasuredHeight() if (width > height) { size = height } else { size = width } setMeasuredDimension(size, size)}
如前文所说,我们要把折线图这个自定义视图设置为正方形。所以,不管测量的Mode是如何的,只要用宽、高中的最小值就可以了。
而上面说到的layout部分,对于有子view的`View`比较有用,也就是说对于继承自`ViewGroup`的`View`来说比较有用。我们的折线图知识一个单纯的不能更单纯的`View`。
我们前面在onDraw
方法使用的getWidth()
和getHeight()
在onMeasure()
方法中都是不可用的。因为这个时候正在计算宽、高度。在这个方法里只能取到getMeasuredWidth()
和getMeasuredHeight()
。
override onMeasure
方法就一定要在最后调用setMeasuredDimension
方法。调用setMeasuredDimension
方法是告诉父view当前view的测量高度是多少。如果不调用这个方法的话会抛异常。
修改之后的布局,宽度match_parent
,高度wrap_content
。不必要的属性都略掉了。
效果:
一个正方形的View已经非常实用了。比如继承ImageView
之后像上面一样override了onMeasure()
方法就可以得到一个一直都是正方形显示的View。那么,既然我们已经支持了宽、高1:1了,为什么不支持任意的宽高比呢。
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) { super.onMeasure(widthMeasureSpec, heightMeasureSpec) var width = getMeasuredWidth() var height = getMeasuredHeight() var widthWithoutPadding = width - paddingLeft - paddingRight var heightWithoutPadding = height - paddingTop - paddingBottom var maxWidth = (heightWithoutPadding * RATIO).toInt() var maxHeight = (widthWithoutPadding / RATIO).toInt() if (widthWithoutPadding > maxWidth) { width = maxWidth + paddingLeft + paddingRight } else { height = maxHeight + paddingTop + paddingBottom } setMeasuredDimension(width, height)}
上面的代码就可以支持任意的宽高比了。看看效果(比例7:3):