在开发过程中，常常会遇到需要固定宽高比例展现一个布局，最常见的就是实现正方形布局。在这里，简单地通过继承RelativeLayout的方式，来实现任意宽高比的RectangleLayout这个ViewGroup。
实现思路
- 创建RelativeLayout的子类
- 自定义属性
- 复写onMeasure()方法
具体实现
创建一个类，继承自RelativeLayout。
values资源文件夹中，新建attrs.xml文件。在resources节点下，申明我们需要的两个自定义属性。
<declare-styleable name="RectangleLayout">
<!--宽度占比-->
<attr name="width_weight" format="integer"/>
<!--高度占比-->
<attr name="height_weight" format="integer"/>
</declare-styleable>
简单改写一下三个构造器，通过TypedArray获得自定义属性的值。
//宽度占比
private int width_weight = 1;
//高度占比
private int height_weight = 1;
public RectangleLayout(Context context) {
this(context, null);
}
public RectangleLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public RectangleLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray typedArray = context.getTheme().obtainStyledAttributes(attrs, R.styleable.RectangleLayout, defStyleAttr, 0);
for (int i = 0; i < typedArray.getIndexCount(); i++) {
int attr = typedArray.getIndex(i);
switch (attr) {
case R.styleable.RectangleLayout_width_weight:
//默认值为1
width_weight = typedArray.getInt(attr, 1);
break;
case R.styleable.RectangleLayout_height_weight:
//默认值为1
height_weight = typedArray.getInt(attr, 1);
break;
}
}
}
3.要实现宽高定比，最重要的就是复写onMeasure方法。废话不多说，先贴代码。
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获取父容器允许的宽高
int maxWidth = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int maxHeight = MeasureSpec.getSize(heightMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//获取测量的宽高
int mWidth = getMeasuredWidth();
int mHeight = getMeasuredHeight();
//最终设定的宽高
int width = 0;
int height = 0;
//根据MeasureSpec模式的不同，宽高取值不同
if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
//当都为wrap时，宽高取最大值
if (mWidth * height_weight >= mHeight * width_weight) {
width = mWidth;
height = width * height_weight / width_weight;
} else {
height = mHeight;
width = height * width_weight / height_weight;
}
} else if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) {
//当都为固定值或match时，宽高取最小值，以保证不会越过设定的最大范围
if (mWidth * height_weight <= mHeight * width_weight) {
width = mWidth;
height = width * height_weight / width_weight;
} else {
height = mHeight;
width = height * width_weight / height_weight;
}
} else if (widthMode == MeasureSpec.EXACTLY) {
//当一项设为固定值或match时，以这条为标准
width = mWidth;
height = width * height_weight / width_weight;
} else if (heightMode == MeasureSpec.EXACTLY) {
//当一项设为固定值或match时，以这条为标准
height = mHeight;
width = height * width_weight / height_weight;
}
//最终和父容器允许的宽高比较，最大不超过父容器的约束
if (maxWidth < width) {
width = maxWidth;
height = width * height_weight / width_weight;
}
if (maxHeight < height) {
height = maxHeight;
width = height * width_weight / height_weight;
}
//将最终的宽高设定为容器的宽高
setMeasuredDimension(width, height);
}
阅读RelativeLayout的源码后，可以发现，在onMeasure方法中，主要做了如下几件事：
- 把内部子View进行横向和纵向的排序
- 初始化一些变量值，来记录一些状态
- 遍历水平关系的View
- 遍历垂直关系的View
- baseline的计算
- 高度和宽度的修正
可以发现，最复杂的子View位置的计算，RelativeLayout已经帮我们做好了，我们要做的只是最后一步，宽度和高度的修正（按一定的比例给值），这也是为什么继承一个现有ViewGroup的原因。下面看代码。
关于MeasureSpec和getMeasuredWidth()等不太清楚的同学可以自行百度学习一下，这里就不做过多的说明了。首先获取我们的ViewGroup能够占用的最大宽高，由父容器和自身宽高的设定有关，先记录一下，备用。下面，抛开父容器不管，单凭自身的设定以及子View测量出来的宽高，来计算宽高的值。
在计算过程中，我们始终遵循如下几条原则（由于原则都是听不懂的鬼话，我都举个栗子来加以说明）：
- 当ViewGroup宽高的模式都设为wrap_content时，看子View占据的最大宽高，尽量满足子View。
例如，布局中子View横向纵向的宽高加上margin等值，共需要100dp x 120dp。而宽高比设定为2:1，那么最终宽高就应该是240dp x 120dp。 - 当ViewGroup宽高的模式都为EXACTLY时，以该ViewGroup为准，子View不够时，空着；子View太大时，显示一部分。由于ViewGroup宽高固定，但要满足一定的宽高比例，只能取在这个范围内，最大的那个矩形。
例如ViewGroup宽高设定为50dp x 40dp，宽高比还是2:1，而在50 x 40这个矩形中，最大的矩形应该是50 x 25的，那么最终获得的宽高不管子View大还是小，多还是少，宽高就是50dp x 25dp，之前设置的高40dp无效。 - 当ViewGroup宽高的模式只有一个为EXACTLY时，以这个为标准。这个就不举例子了。
- 最大宽高不能超过父容器约束的宽高。若按照以上三条原则计算出宽高为50 x 50，而父容器只能允许40 x 40，那么最终宽高也只能是40 x 40。
代码中，乘法等式比较多，可能一眼看不明白，移项后则为 **宽/高？宽比/高比 **。逻辑并不复杂，仅仅只是宽高比的比较和修正，就能达到预期的目的。
- 下面演示一下最终效果。（记得在根布局中加入 xmlns:tools="http://schemas.android.com/tools"）
xml中：
<com.ugly.doggie.RectangleLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_marginTop="10dp"
android:background="#0f0"
app:width_weight="2"
app:height_weight="3">
<TextView
android:id="@+id/tv1"
android:layout_width="100dp"
android:layout_height="120dp"
android:background="#f00"/>
<TextView
android:id="@+id/tv2"
android:layout_toRightOf="@+id/tv1"
android:layout_width="20dp"
android:layout_height="30dp"
android:background="#00f"/>
<TextView android:id="@+id/tv3"
android:layout_below="@+id/tv1"
android:layout_width="30dp"
android:layout_height="40dp"
android:background="#ff0"/>
</com.ugly.doggie.RectangleLayout>
效果图如下：
最终获得宽为120dp，高为180dp。
看到这里也许你会说，这样设置完全没必要啊，因为所有的宽高自己都能算出来了，手动设置一下不就完了吗。但是你们在开发中有没有碰到过这么一种需求：需要三个正方形的布局，横向占满整个屏幕。宽高难道要在代码中计算然后重新设置LayoutParams吗？太复杂了吧。现在外面只要这么写：（自定义属性不写，默认为1:1，即正方形）
xml代码：
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:orientation="horizontal">
<com.ugly.doggie.RectangleLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#f00">
</com.ugly.doggie.RectangleLayout>
<com.ugly.doggie.RectangleLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#0f0">
</com.ugly.doggie.RectangleLayout>
<com.ugly.doggie.RectangleLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:background="#00f">
</com.ugly.doggie.RectangleLayout>
</LinearLayout>
效果图如下：
。。。国旗？Σ( ° △ °|||)︴
好了算是基本实现了。打完收工！
