Android 宽高比控件

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

1 代码实现

1. ConstraintLayout 约束布局

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

    <ImageViewandroid: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%

    <ImageViewandroid: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.RatioImageViewandroid: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" />

    @Overrideprotected 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的列表或其他条件中宽高可能要动态计算，这时候最后一种就比较合适了，根据实际情况选择吧。

测试代码