Android定制控件之按照比例来确定高度

前言：当我们在开发app的时候，获取的图片的宽高每一张有时候不太一样，要么用wrap_content属性来指定原始宽高，要么用宽match_parent高wrap_content(这种做法用的比较多)，要么指定宽高为多少，但是图片又会变形，所以今天我们来实现按照宽高的比例来实现图片的放大，又不会使图片不会变形，又不会占用过多的空间。

-----------------分割线--------------

我们来看下下面的两张效果图：

第一张图使用的是我们定制的控件包裹的一张imagView，设置宽高比例为2之后的效果。

第二章图虽然也是和第一张图的效果一样，但是明显占据了很多太多的空间，如果把他RecyclerView的item的话，就要占用一页屏幕，用户使用的时候可想而知，效果是多么的不好。

---------------------------分割线--------------------------

看到上图你也应该明显了，我们应该有规律的放大或者缩小图片，而不会使图片变形，或者占用更多的空间，想要做到这一点，需要考虑几点：

1.要先知道你原图的大小的大概比例：

2.在onMeasure里面重新计算图片的高度值。

3.图片高度的值 = 图片宽度/宽高比例（图片默认是match_parent）。

4.我们还要注意padding值的影响。

5.最后重新设置测量的控件的高度。

-------------------------分割线-------------------

为了方便确定宽高我们直接继承FrameLayout类：

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.widget.FrameLayout;

import com.fly.googleplayview.R;

/**
 * 自定义控件, 按照比例来决定布局高度
 *
 */
public class RatioLayout extends FrameLayout {

	private float ratio;

	public RatioLayout(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public RatioLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RatioLayout);
		ratio = typedArray.getFloat(R.styleable.RatioLayout_ratio, -1);
		typedArray.recycle();
	}

	public RatioLayout(Context context) {
		super(context);
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
	
		int width = MeasureSpec.getSize(widthMeasureSpec);// 获取宽度值
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);// 获取宽度模式
		int height = MeasureSpec.getSize(heightMeasureSpec);// 获取高度值
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);// 获取高度模式

		// 宽度确定, 高度不确定, ratio合法, 才计算高度值
		if (widthMode == MeasureSpec.EXACTLY
				&& heightMode != MeasureSpec.EXACTLY && ratio > 0) {
			// 图片宽度 = 控件宽度 - 左侧内边距 - 右侧内边距
			int imageWidth = width - getPaddingLeft() - getPaddingRight();

			// 图片高度 = 图片宽度/宽高比例
			int imageHeight = (int) (imageWidth / ratio + 0.5f);

			// 控件高度 = 图片高度 + 上侧内边距 + 下侧内边距
			height = imageHeight + getPaddingTop() + getPaddingBottom();

			// 根据最新的高度来重新生成heightMeasureSpec(高度模式是确定模式)
			heightMeasureSpec = MeasureSpec.makeMeasureSpec(height,
					MeasureSpec.EXACTLY);
		}

		// 按照最新的高度测量控件
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
	}

}

attrs属性：

    <declare-styleable name="RatioLayout">
        <attr name="ratio" format="float" />
    </declare-styleable>

在布局中使用：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.fly.googleplayview.view.RatioLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:ratio="2">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/pic2" />
    </com.fly.googleplayview.view.RatioLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/pic2" />
</LinearLayout>

---------------- 欢迎留言，积极讨论-----------------