博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android自定义视图四:定制onMeasure强制显示为方形
阅读量:5956 次
发布时间:2019-06-19

本文共 3820 字,大约阅读时间需要 12 分钟。

这个系列是,干货!翻译出来一起学习。如有不妥,不吝赐教!

这里写图片描述

上一篇开发之后的效果如上图。不过看着这张图,需要注意的不是我们自定义视图展示了什么,而是这个视图的大小和位置。你会看到这个折线图有一个特定的大小(size)。这个size是怎么定的呢?现在的代码是使用了一个竖直方向的LinearLayout,折线图和他下面的TextView使用layout_weight属性平分了他们所在的LinearLayout的高度。那么如果我们删掉了TextView和全部的layout_weight,并把折线图的高度设定为wrap_content会发生什么呢?
这里写图片描述
是的,以上修改之后整个的图就变成了这样。虽然使用了wrap_content的高度,但是效果是填满了整个LinearLayout。这就是View的默认布局行为,但是,如果我们要改变一下呢?

View的Layout

自定义视图显示在屏幕上一共分三步:measure(测量),layout(布局),draw(绘制)。基本上一个自定义视图在测量这一步计算大小,之后可以通过getMeasureWidthgetMeasureHeight得到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,系统不知道精确的宽度、高度是多少的时候的一个标记。如果有具体的50dp100dp的时候,这个标记的值为MeasureSpec.EXACTLY。一般,一个view的宽度、高度只有这两种标记。

View的宽、高度测量分别处理三种情况:

  1. 如果宽、高度都是AT_MOST的时候,宽度和高度设置为默认值。
  2. 宽度为AT_MOST高度不是的时候,宽度设置为默认值,高度设置为测量的值heightSpecSize
  3. 宽度为精确值,高度为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之后像上面一样overrideonMeasure()方法就可以得到一个一直都是正方形显示的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):

这里写图片描述

欢迎加群互相学习,共同进步。QQ群:iOS: 58099570 | Android: 330987132 | Go:217696290 | Python:336880185 | 做人要厚道,转载请注明出处!http://www.cnblogs.com/sunshine-anycall/p/5470984.html
你可能感兴趣的文章
CentOS7 64位小型操作系统的安装
查看>>
线程互互斥锁
查看>>
KVM虚拟机&openVSwitch杂记(1)
查看>>
win7下ActiveX注册错误0x80040200解决参考
查看>>
《.NET应用架构设计:原则、模式与实践》新书博客--试读-1.1-正确认识软件架构...
查看>>
2013 Linux领域年终盘点
查看>>
linux学习之查看程序端口占用情况
查看>>
相逢在栀枝花开的季节
查看>>
linux下git自动补全命令
查看>>
Ubuntu14.04LTS更新源
查看>>
Linux报“Unknown HZ value! (288) Assume 100”错误
查看>>
mysql多实例实例化数据库
查看>>
我的友情链接
查看>>
golang xml和json的解析与生成
查看>>
javascript 操作DOM元素样式
查看>>
Android 内存管理 &Memory Leak & OOM 分析
查看>>
【查找算法】基于存储的查找算法(哈希查找)
查看>>
JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现
查看>>
记录一下这次web实训的两个网站
查看>>
POJ-1830 开关问题 高斯消元
查看>>