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,系统不知道精确的宽度、高度是多少的时候的一个标记。如果有具体的50dp, 100dp的时候,这个标记的值为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):

时间: 2024-10-07 19:11:31

Android自定义视图四:定制onMeasure强制显示为方形的相关文章

ANDROID自定义视图——onMeasure流程,MeasureSpec详解

简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGroup中的位置 3.绘制--onDraw():如何绘制这个View. 而第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 而这篇文章就来谈谈第一步,也是十分关键得一步:"测量(Measure)" Measure(): Measure的中文意思就是测量.所以它的

【转】ANDROID自定义视图——onMeasure,MeasureSpec源码 流程 思路详解

原文地址:http://blog.csdn.net/a396901990/article/details/36475213 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量——onMeasure():决定View的大小 2.布局——onLayout():决定View在ViewGroup中的位置 3.绘制——onDraw():如何绘制这个View. 而第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 而这篇文章就来谈谈第一步

onLayout源码 流程 思路详解(ANDROID自定义视图)

简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGroup中的位置 3.绘制--onDraw():如何绘制这个View. 而第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 第一步的测量,可以参考我之前的文章:(ANDROID自定义视图--onMeasure流程,MeasureSpec详解) 而这篇文章就来谈谈第二步:"

【转】ANDROID自定义视图——onLayout源码 流程 思路详解

转载(http://blog.csdn.net/a396901990) 简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量——onMeasure():决定View的大小 2.布局——onLayout():决定View在ViewGroup中的位置 3.绘制——onDraw():如何绘制这个View. 而第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 第一步的测量,可以参考我之前的文章:(ANDROID自定义视图——onMea

Android自定义视图与自定义属性

这是Android UI Fundamentals里的内容 创建自定义视图 创建自定义UI组件首先要继承一个视图类. 首先创建一个简单的自定义视图, 展示一条十字线. 需要做的第一件事是创建一个继承自View的CrossView类. public CrossView(Context context, AttributeSet attrs) { super(context, attrs); } 该构造函数的第二个参数是用来传递XML参数的, 等会儿会讲到. 接下来我们要重写两个基础方法: onMe

ANDROID自定义视图——仿瀑布布局(附源码)

简介: 在自定义view的时候,其实很简单,只需要知道3步骤: 1.测量--onMeasure():决定View的大小 2.布局--onLayout():决定View在ViewGroup中的位置 3.绘制--onDraw():如何绘制这个View. 第3步的onDraw系统已经封装的很好了,基本不用我们来操心,只需要专注到1,2两个步骤就中好了. 第一步的测量,可以参考:(ANDROID自定义视图--onMeasure,MeasureSpec源码 流程 思路详解) 第二步的布局,可以参考:(AN

Android自定义视图教程

Android自定义视图教程 Android的UI元素都是基于View(屏幕中单个元素)和ViewGroup(元素的集合),Android有许多自带的组件和布局,比如Button.TextView.RelativeLayout.在app开发过程中我们需要自定义视图组件来满足我们的需求.通过继承自View或者View的子类,覆写onDraw或者onTouchEvent等方法来覆盖视图的行为. 创建完全自定义的组件 创建自定义的组件主要围绕着以下五个方面: 绘图(Drawing): 控制视图的渲染,

android自定义View-------为什么重写onMeasure()以及怎么重写

这两天在看关于android自定义组件的知识,刚开始查阅了很多资料,依然觉得对onMeasure()方法的理解不够透彻,后来大致知道onMeasure怎么用了之后,又很好奇为什么需要去实现onMeasure()这个方法. 这篇文章主要记录两个问题,1)自定义组件时什么情况下需要实现onMeasure()方法,2)怎么实现onMeasure()方法 为什么需要实现onMeasure()方法 我们看以下例子,我们自己定义一个View,很简单,只是继承View类. public class MyVie

Android自定义视图三:给自定义视图添加“流畅”的动画

在第二部分我们实现了一个简单的折线图.这里假设你已经读了前篇.下面我们将继续为这个折线图添砖加瓦. 我在想给这个图的上方添加三个按钮,这样用户可以点选不同的按钮来查看不同类别的数据.比如,用户可以查看走路的.跑步的和骑车的.用户点不同的按钮,我们就跟还不同的运动数据显示在图形里. 我们实现了按钮点击后,设置不同的坐标点数据,然后运行APP.你会发现,虽然方法setChartData()已经被调用了,但是图形一点变化都没有.为什么呢?因为我们没有通知折线图"重绘".这可以通过调用inva