Android自定义视图四:定制onMeasure强制显示为方形

简介:

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

  1. Android自定义视图一:扩展现有的视图,添加新的XML属性
  2. Android自定义视图二:如何绘制内容
  3. Android自定义视图三:给自定义视图添加“流畅”的动画
  4. Android自定义视图四:定制onMeasure强制显示为方形

这里写图片描述
上一篇开发之后的效果如上图。不过看着这张图,需要注意的不是我们自定义视图展示了什么,而是这个视图的大小和位置。你会看到这个折线图有一个特定的大小(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不必要的属性都略掉了

<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之后像上面一样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):
这里写图片描述




























本文转自张昺华-sky博客园博客,原文链接:http://www.cnblogs.com/sunshine-anycall/p/5470984.html,如需转载请自行联系原作者

相关文章
|
6天前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
数据处理 Android开发
关于安卓glide加载显示进度
安卓glide加载显示进度
426 0
|
23天前
|
搜索推荐 Android开发 UED
安卓开发中的自定义视图:打造个性化用户界面
【10月更文挑战第22天】在安卓应用的海洋中,如何让你的应用脱颖而出?一个独特且直观的用户界面(UI)至关重要。本文将引导你通过自定义视图来打造个性化的用户体验,从基础的视图绘制到触摸事件的处理,我们将一步步深入探讨。准备好了吗?让我们开始吧!
|
2月前
|
搜索推荐 Android开发 UED
安卓开发中的自定义视图:打造个性化用户界面
【9月更文挑战第11天】在安卓应用开发领域,自定义视图是实现独特用户体验的基石。本文将引导你通过一个简单的自定义视图示例,探索如何从零开始创建并应用自定义组件,以增强你的应用界面。我们将一起学习如何扩展View类,重写onDraw方法,处理触摸事件,并最终在我们的安卓项目中使用这个自定义视图。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供清晰的步骤和实用的技巧,帮助你提升用户界面设计的能力。
|
3月前
|
存储 搜索推荐 Java
探索安卓开发中的自定义视图:打造个性化UI组件Java中的异常处理:从基础到高级
【8月更文挑战第29天】在安卓应用的海洋中,一个独特的用户界面(UI)能让应用脱颖而出。自定义视图是实现这一目标的强大工具。本文将通过一个简单的自定义计数器视图示例,展示如何从零开始创建一个具有独特风格和功能的安卓UI组件,并讨论在此过程中涉及的设计原则、性能优化和兼容性问题。准备好让你的应用与众不同了吗?让我们开始吧!
|
2月前
|
搜索推荐 前端开发 Android开发
安卓开发中的自定义视图:打造个性化用户界面
【9月更文挑战第26天】在移动应用开发的广阔天地中,定制性是提升用户体验的不二法宝。本文将带你深入了解安卓开发中自定义视图的魅力所在,通过简洁明了的语言和直观的代码示例,展示如何从零开始创建属于自己的控件,让你的应用界面与众不同。
|
4月前
|
搜索推荐 Android开发 UED
探索安卓开发中的自定义视图:打造个性化用户界面
【7月更文挑战第31天】在安卓应用的海洋中,一个独特且吸引人的用户界面是捕获用户眼球的关键。本文将带你深入理解如何在Android开发中创建自定义视图,从而设计出与众不同的用户界面。我们将一起探索如何从零开始构建一个自定义视图组件,并实现动态交互效果。通过实际的代码示例和详细的步骤解析,你将学会如何提升你的应用界面,让它在众多应用中脱颖而出。
113 31
|
3月前
|
前端开发 Android开发 开发者
安卓开发中的自定义视图:构建你的第一个控件
【8月更文挑战第26天】在安卓开发的浩瀚海洋中,自定义视图是一块充满魔力的乐土。它不仅是开发者展示创造力的舞台,更是实现独特用户体验的关键。本文将带你步入自定义视图的世界,从基础概念到实战应用,一步步教你如何打造自己的第一个控件。无论你是初学者还是有经验的开发者,这篇文章都将为你的开发之旅增添新的风景。
|
Android开发 C++
Android OpenGL显示任意3D模型文件
Android OpenGL显示任意3D模型文件
Android OpenGL显示任意3D模型文件
|
存储 缓存 Java
Android OpenGL 显示基本图形及相关概念解读
Android OpenGL 显示基本图形及相关概念解读
Android OpenGL 显示基本图形及相关概念解读