这个系列是老外写的,干货!翻译出来一起学习。如有不妥,不吝赐教!
- Android自定义视图一:扩展现有的视图,添加新的XML属性
- Android自定义视图二:如何绘制内容
- Android自定义视图三:给自定义视图添加“流畅”的动画
- Android自定义视图四:定制onMeasure强制显示为方形
上一篇开发之后的效果如上图。不过看着这张图,需要注意的不是我们自定义视图展示了什么,而是这个视图的大小和位置。你会看到这个折线图有一个特定的大小(size)。这个size是怎么定的呢?现在的代码是使用了一个竖直方向的LinearLayout
,折线图和他下面的TextView
使用layout_weight
属性平分了他们所在的LinearLayout
的高度。那么如果我们删掉了TextView
和全部的layout_weight
,并把折线图的高度设定为wrap_content
会发生什么呢?
是的,以上修改之后整个的图就变成了这样。虽然使用了wrap_content
的高度,但是效果是填满了整个LinearLayout
。这就是View的默认布局行为,但是,如果我们要改变一下呢?
View的Layout
自定义视图显示在屏幕上一共分三步: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的宽度、高度只有这两种标记。
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
。不必要的属性都略掉了。
<RelativeLayout>
<LinearLayout>
<Button android:text="walking" />
<Button android:text="Running" />
<Button android:text="Cycling" />
</LinearLayout>
<demo.customview.customviewdemo.Views.SquareLineChartView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
效果:
支持任意宽高比例
一个正方形的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):
Android自定义视图四:定制onMeasure强制显示为方形的更多相关文章
-
Android自定义视图三:给自定义视图添加“流畅”的动画
这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...
-
Android自定义视图二:如何绘制内容
这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...
-
Android自定义视图一:扩展现有的视图,添加新的XML属性
这个系列是老外写的,干货!翻译出来一起学习.如有不妥,不吝赐教! Android自定义视图一:扩展现有的视图,添加新的XML属性 Android自定义视图二:如何绘制内容 Android自定义视图三: ...
-
【转】ANDROID自定义视图——onMeasure,MeasureSpec源码 流程 思路详解
原文地址:http://blog.csdn.net/a396901990/article/details/36475213 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量—— ...
-
ANDROID自定义视图——onMeasure,MeasureSpec源码&#160;流程&#160;思路详解
简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGroup中的位置 3. ...
-
【转】ANDROID自定义视图——onLayout源码 流程 思路详解
转载(http://blog.csdn.net/a396901990) 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量——onMeasure():决定View的大小 2.布局 ...
-
Android自定义视图教程
Android自定义视图教程 Android的UI元素都是基于View(屏幕中单个元素)和ViewGroup(元素的集合),Android有许多自带的组件和布局,比如Button.TextView.R ...
-
自定义View(四),onMeasure
转自:http://blog.csdn.net/a396901990/article/details/36475213 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--on ...
-
ANDROID自定义视图——onMeasure流程,MeasureSpec详解
简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量——onMeasure():决定View的大小 2.布局——onLayout():决定View在ViewGroup中的位置 3. ...
随机推荐
-
git回滚错误提交
git log //找到你要回滚的那次提交 比如:43596f6b1f57157e627c25ae7a843f60157ac52d git reset --hard HEAD~43596f6b1f57 ...
-
lua进阶(二)
第五章 函数 函数有两种用途:1.完成指定的任务,这种情况下函数作为调用语句使用:2.计算并 返回值,这种情况下函数作为赋值语句的表达式使用. function function_name( . ...
-
Python之日期与时间处理模块(date和datetime)
本节内容 前言 相关术语的解释 时间的表现形式 time模块 datetime模块 时间格式码 总结 前言 在开发工作中,我们经常需要用到日期与时间,如: 作为日志信息的内容输出 计算某个功能的执行时 ...
-
redis集群设置密码
redis集群密码设置 1.密码设置(推荐)方式一:修改所有Redis集群中的redis.conf文件加入: masterauth passwd123 requirepass passwd123 说 ...
-
C语言复习---迭代法,牛顿迭代法,二分法求根
一:用迭代法求 x=√a.求平方根的迭代公式为:X(n+1)=(Xn+a/Xn) /2. #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> ...
-
Python基础:内置函数
本文基于Python 3.6.5的标准库文档编写,罗列了英文文档中介绍的所有内建函数,并对其用法进行了简要介绍. 下图来自Python官网:展示了所有的内置函数,共计68个(14*4+12),大家可以 ...
-
[LuoguP1363]幻想迷宫
[LuoguP1363]幻想迷宫(Link) 现在有一个迷宫,从迷宫边界的任意一点可以走到对面,即:若都是路面,则可以从\((1, i)\)走到\((N, i)\).其余情况依旧.问是否可以从指定的起 ...
-
PAT甲级1016. Phone Bills
PAT甲级1016. Phone Bills 题意: 长途电话公司按以下规定向客户收取费用: 长途电话费用每分钟一定数量,具体取决于通话时间.当客户开始连接长途电话时,将记录时间,并且客户挂断电话时也 ...
-
LeetCode—Longest Consecutive Sequence
题目描述: Given an unsorted array of integers, find the length of the longest consecutive elements seque ...
-
Spring容器的属性配置详解的六个专题
在spring IOC容器的配置文件applicationContext.xml里,有一些配置细节值得一提.我们将一些问题归结为以下几个专题. 专题一:字面值问题 配置的bean节点中的值,我们提 ...