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

小咪咪 2022-03-15 04:38 983阅读 0赞

## 前言 ##

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

## 使用说明 ##

常用的自定义属性

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

### 指定最大宽度，高度 ###

指定最大宽度，最大高度，我们值需要使用 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][image 1]

比如，我们要指定宽度是高度的某个比例的时候，如，宽度是高度的 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][image 2]

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

<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][image 3]

--------------------

## 原理介绍 ##

原理其实很简单，对自定义 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);
        
    }

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

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

[image]: /images/20220315/adda5331708d4c679844ad1c867602ae.png
[image 1]: /images/20220315/7f3f73777a72471b94695db180337a59.png
[image 2]: https://ws1.sinaimg.cn/mw690/9fe4afa0gy1g0mfh9kuuej205i069jsw.jpg
[image 3]: https://ws2.sinaimg.cn/mw690/9fe4afa0gy1g0lzvx02zhj204n07jmza.jpg
[Github MaxLayout Sample]: https://github.com/gdutxiaoxu/MaxLayout
[Android]: /images/20220315/aa1223e4072345dc9d71db81b96080c5.png