Android 自定义最大宽度，高度, 宽高比例 Layout

2019-03-10 本文已影响15人程序员徐公

前言

这篇博客主要介绍的是怎样自定义一个可以指定最大宽度，高度，以及宽高比的 Layout。原理其实很简单，就是通过重写 onMeasure 方法，重新制定 MeasureSpec。

使用说明

常用的自定义属性

    <attr name="ml_maxWidth" format="dimension" />
    <attr name="ml_maxheight" format="dimension" />
    <attr name="ml_ratio" format="float" />
    <attr name="ml_ratio_standard">
        <enum name="w_h" value="1" />
        <enum name="h_w" value="2" />
    </attr>
</declare-styleable>

key	含义	补充说明
ml_maxWidth	最大宽度
ml_maxheight	最大高度
ml_ratio_standard	指定比例的模式，即是宽高比还是高宽比	w_h，宽高比， h_w 高宽比
ml_ratio	比例值	只有比例模式是 w_h 或者 h_w，该值才会生效

指定最大宽度，高度

指定最大宽度，最大高度，我们值需要使用 ml_maxWidth，ml_maxheight 属性即可，当然我们也可以同时指定最大宽度和最大高度。如下

image

<com.xj.maxlayout.MaxLayout
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_marginTop="15dp"
    android:background="@android:color/holo_blue_light"
    app:ml_maxWidth="200dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:text="指定最大宽度,指定最大宽度,指定最大宽度" />

</com.xj.maxlayout.MaxLayout>

<com.xj.maxlayout.MaxLayout
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:layout_marginTop="15dp"
    android:background="@android:color/holo_blue_light"
    app:ml_maxheight="200dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="center"
        android:gravity="center"
        android:padding="10dp"
        android:text="指定最大高度" />

</com.xj.maxlayout.MaxLayout>

<com.xj.maxlayout.MaxLayout
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_marginTop="15dp"
    android:background="@android:color/holo_blue_light"
    app:ml_maxWidth="200dp"
    app:ml_maxheight="150dp">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="10dp"
        android:text="同时指定最大宽度和最大高度" />

</com.xj.maxlayout.MaxLayout>

指定宽高比

指定宽高比，我们需要设置两个属性，ml_ratio_standard 和 ml_ratio。ml_ratio_standard 有两个值，w_h 代表已宽度为基准，h_w 代表已高度为基准。

比如，我们要指定高度是宽度的某个比例的时候，如，高度是宽度的两倍，可以这样写

<com.xj.maxlayout.MaxLayout
    android:id="@+id/ml_1"
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent"
    app:ml_ratio="2.0"
    app:ml_ratio_standard="w_h">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/jsy03" />


</com.xj.maxlayout.MaxLayout>

image

比如，我们要指定宽度是高度的某个比例的时候，如，宽度是高度的 0.8，可以这样写

<com.xj.maxlayout.MaxLayout
    android:id="@+id/ml_2"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:layout_marginLeft="20dp"
    android:layout_toRightOf="@id/ml_1"
    android:background="@android:color/holo_blue_light"
    app:ml_ratio="0.8"
    app:ml_ratio_standard="h_w">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/jsy04" />

</com.xj.maxlayout.MaxLayout>

image

当然，也可以同时指定比例和最大宽度，高度。

<com.xj.maxlayout.MaxLayout
    android:id="@+id/ml_03"
    android:layout_width="match_parent"
    android:layout_height="220dp"
    android:layout_below="@id/ml_1"
    android:layout_marginTop="15dp"
    android:background="@android:color/holo_blue_light"
    app:ml_maxWidth="150dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@mipmap/jsy05" />

</com.xj.maxlayout.MaxLayout>

image

原理介绍

原理其实很简单，对自定义 View 有基本了解的人都知道，View 的宽度和高度，是在 onMeasure 方法中进行测量的，他们的大小受 MeasureSpec 的影响。既然如此，那么我们在继承 FrameLayout，重写它的 onMeasure 方法。在 onMeasure 方法中根据我们指定的最大宽度，高度和比例对 MeasureSpec 进行调整即可。

思路大概如下

没有设置最大宽度，高度，宽高比例，不需要调整，直接返回
先拿到原来的 mode 和 size，暂存起来
根据宽高的比例进行相应的调整

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // 是否设置了比例
    boolean setRatio = isSetRatio();
    // 没有设置最大宽度，高度，宽高比例，不需要调整，直接返回
    if (mMaxWidth <= DEF_VALUE && mMaxHeight <= DEF_VALUE && !setRatio) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        return;
    }

    // 拿到原来宽度，高度的 mode 和 size
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);

    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);

    Log.d(TAG, "origin onMeasure: widthSize =" + widthSize + "heightSize = " + heightSize);

    if (mRatioStandrad == W_H) { // 当模式已宽度为基准
        widthSize = getWidth(widthSize);

        if (mRatio >= 0) {
            heightSize = (int) (widthSize * mRatio);
        }

        heightSize = getHeight(heightSize);
        int maxHeightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, MeasureSpec.EXACTLY);
        int maxWidthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, widthMode);
        super.onMeasure(maxWidthMeasureSpec, maxHeightMeasureSpec);

    } else if (mRatioStandrad == H_W) { // 当模式已高度为基准
        heightSize = getHeight(heightSize);

        if (mRatio >= 0) {
            widthSize = (int) (heightSize * mRatio);
        }

        widthSize = getWidth(widthSize);

        int maxHeightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, heightMode);
        int maxWidthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
        super.onMeasure(maxWidthMeasureSpec, maxHeightMeasureSpec);

    } else { // 当没有设定比例的时候
        widthSize = getWidth(widthSize);
        heightSize = getHeight(heightSize);
        int maxHeightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, heightMode);
        int maxWidthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, widthMode);
        super.onMeasure(maxWidthMeasureSpec, maxHeightMeasureSpec);

    }

    Log.d(TAG, "adjust onMeasure: widthSize =" + widthSize + "heightSize = " + heightSize);
    
}

我们来看一下，有三种模式：

当模式已宽度为基准的时候，我们首先对宽度进行调整，是否超出最大宽度，超出取最大宽度，没超出，取原来的值。接着，高度按照 mRatio 进行调整，接着判断高度是否超出最大高度，超出取最大高度，没超出，取原来的值。最后，根据相应的 size，mode 生成相应的 MeasureSpec
当模式已高度为基准的时候，我们首先对高度进行调整，是否超出最大高度，超出取最大高度，没超出，取原来的值。接着，宽度按照 mRatio 进行调整，接着判断宽度是否超出最大宽度，超出取最大宽度，没超出，取原来的值。最后，根据相应的 size，mode 生成相应的 MeasureSpec
当模式是默认，没有指定宽度或者高度作为基准的时候，直接判断宽高度是否超出最大的宽高度，制定相应的 MeasureSpec 即可。

源码到此分析为止

题外话

宽高比例的，其实在 2015 的时候，google 已经推出了 PercentFrameLayout，PercentRelativeLayout，可以很好得进行宽高比例的调整。在 API level 26.1.0 的时候，上述的 PercentFrameLayout，PercentRelativeLayout 背标记为过时，并推荐使用 ConstraintLayout。

写这一篇博客，主要是有时候一些旧项目里面，有时候需要设置最大宽度，高度，或者比例，并没有使用最新的一些控件 ConstraintLayout，如果不进行封装，经常需要在代码里面动态设置，这样比较麻烦。再者，这一篇可以帮助大家更好得理解 onMeasue 方法，尤其是 MeasureSpec。即 MeasureSpec 决定了 width， height。想调整 width， height 的话，可以通过调整 MeasureSpec 实现。

同时，这里还有一个坑，如果在代码里面直接设置 width 的话，当 TextView 超过设置的 width 的时候，textView 显示的文字会被截断。

Github MaxLayout Sample

Android 技术人，希望让你看到程序猿不同的一面，除了分享 Coding，，还有职场心得，面试经验，学习心得，人生感悟等等。希望通过该公众号，让大家看到，我们不只会敲代码，我们还会。。。。。。

Android 技术人

Android 自定义最大宽度，高度, 宽高比例 Layout

前言

使用说明

指定最大宽度，高度

指定宽高比

原理介绍

题外话

猜你喜欢

热点阅读