Android 宽高比控件

以ImageView为例 ，写一个宽高比控件，以及各种写法的应用场景

1 代码实现

1. ConstraintLayout 约束布局

设置宽度为父控件的50% ：app:layout_constraintWidth_percent=“0.5”
宽高比16:9 app:layout_constraintDimensionRatio=“H,16:9”

    <ImageView
        android:id="@+id/img"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_car"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent="0.5" />

2. 百分比布局

设置宽度为父控件的50% ： app:layout_widthPercent=“50%”
宽度为高度的160%

    <ImageView
        android:id="@+id/img"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_centerInParent="true"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_car"
        app:layout_aspectRatio="160%"
        app:layout_widthPercent="50%" />

3. 自定义ImgeView 重写onMeasure（）方法

设置宽度为父控件50%
宽高比80%，需要在代码构建成功后才能预览

	<com.zn.advanced.ui.view.RatioImageView
	        android:id="@+id/img"
	        android:layout_width="0dp"
	        android:layout_height="0dp"
	        android:layout_centerInParent="true"
	        android:scaleType="centerCrop"
	        android:src="@mipmap/ic_car"
	        app:ratio="0.7"
	        app:width_ratio="0.5" />

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize;
        if (widthRatio != 0) {
            //父控件
            ViewGroup viewGroup = (ViewGroup) this.getParent();
            //父控件宽度
            int width = viewGroup.getMeasuredWidth();
            //当前控件宽度
            widthSize = (int) ((float) width * widthRatio);
            widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, MeasureSpec.EXACTLY);
        } else {
            widthSize = MeasureSpec.getSize(widthMeasureSpec);
        }
        if (ratio != 0) {
            heightMeasureSpec = MeasureSpec.makeMeasureSpec((int) (widthSize * ratio), MeasureSpec.EXACTLY);
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

4.代码中设置

传入view 、宽 、比例，Android studio不能预览，只有在代码执行后才能看到效果

public static void setRatioWidthHeight(View view, int width, float ratio) {
        if (width <= 0) width = view.getWidth();
        int height = (int) ((float) width * ratio);
        ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
        if (layoutParams != null) {
            layoutParams.height = height;
            layoutParams.width = width;
            view.setLayoutParams(layoutParams);
        }
    }

效率测试

我们在demo中测试一下我们的代码执行效率，考虑一下每种设置方式的应用场景 。
在activity的根布局，也就是测试ImageView的父布局，还有我们的ImageView的onMeasure中打上断点查看执行次数。

1.ConstraintLayout：

在ConstraintLayout 的onLayout（）、onMeasure（），ImageView的onMeasure（）方法打上断点log，执行

ConstraintLayout  onMeasure    width =1440  height=2708
ImageView         onMeasure    width =720 height=405
ConstraintLayout  onMeasure    width =1440  height=2708
ImageView         onMeasure    width =720 height=405
ConstraintLayout  onLayout

2.PercentRelativeLayout：

在PercentRelativeLayout的onLayout（）、onMeasure（），ImageView的onMeasure（）方法打上断点log，执行

PercentRelativeLayout onMeasure    width =1440  height=2708
ImageView onMeasure    width =720 height=2708
ImageView onMeasure    width =720 height=450
PercentRelativeLayout onMeasure    width =1440  height=2708
ImageView onMeasure    width =720 height=2708
ImageView onMeasure    width =720 height=450
PercentRelativeLayout onLayout

这里会发现，ImageView的onMesure（）方法在父布局每次执行onMeasure（）之后比在ConstraintLayout中多走了一次

3.自定义RatioImageView：

在RelativeLayout的onLayout（）、onMeasure（），ImageView的onMeasure（），RatioImageView的onMeasure（）方法打上断点log，执行

RelativeLayout onMeasure    width =1440  height=2708
RatioImageView onMeasure    width =0  height=0
ImageView onMeasure    width =0 height=0
RatioImageView onMeasure    width =0  height=0
ImageView onMeasure    width =0 height=0
RelativeLayout onMeasure    width =1440  height=2708
RatioImageView onMeasure    width =1008  height=504
ImageView onMeasure    width =1008 height=504
RatioImageView onMeasure    width =1008  height=504
ImageView onMeasure    width =1008 height=504
RelativeLayout onLayout

看起来跟上面的百分比差不多 ，因为继承了ImageView多走了一层onMeasure（）主要是执行了RatioImageView的宽高计算影响不大

4.代码计算宽高并赋值：

在RelativeLayout的onLayout（）、onMeasure（），ImageView的onMeasure（）方法打上断点log，执行

RelativeLayout onMeasure    width =1440  height=2708
ImageView onMeasure    width =720 height=2708
ImageView onMeasure    width =720 height=576
RelativeLayout onMeasure    width =1440  height=2708
ImageView onMeasure    width =720 height=2708
ImageView onMeasure    width =720 height=576
RelativeLayout onLayout    changed =true l=0 t=0 r=1440 b=2708

跟上面的一样

综上来看，我们通过第一种方法设置的宽高比的View执行效率最高，其他方式效率差不多。
在实际应用中第一种应该最优先考虑，在RecyclerView的列表或其他条件中宽高可能要动态计算，这时候最后一种就比较合适了，根据实际情况选择吧 。

测试代码