自定义布局之宽高比布局的实现

最近在项目中遇到一个屏幕适配的问题，在显示图片时我在布局中宽度和高度都设置了固定的dp值，但当app运行在一些屏幕比较宽的手机上时，会出现图片宽高比不对情况，因为宽屏的手机横向的像素密度比较大，为此在网上找到一个解决方案是，定义一个可以根据图片本身宽高比来设置控件宽高的布局。实现如下

首先声明两个属性，一个是picRatio表示图片的宽高比，一个是relative表示要根据宽度按比例确定高度，还是根据高度按比例确定宽度

<resources>

<declare-styleable name="RatioLayout">
<attr name="picRatio" format="float" />
<attr name="relative">
<enum name="width" value="0" />
<enum name="height" value="1" />
</attr>
</declare-styleable>

</resources>

下面是具体的代码实现

public class RatioLayout extends FrameLayout {
private float				mPicRatio		= 0f;				// 图片的宽高比 2.43
public static final int	RELATIVE_WIDTH	= 0;				// 控件宽度固定,已知图片的宽高比,求控件的高度
public static final int	RELATIVE_HEIGHT	= 1;				// 控件高度固定,已知图片的宽高比,求控件的宽度
private int					mRelative		= RELATIVE_WIDTH;

public void setPicRatio(float picRatio) {
mPicRatio = picRatio;
}

public void setRelative(int relative) {
mRelative = relative;
}

public RatioLayout(Context context) {
this(context, null);
}

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

TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RatioLayout);

mPicRatio = typedArray.getFloat(R.styleable.RatioLayout_picRatio, 0);

mRelative = typedArray.getInt(R.styleable.RatioLayout_relative, RELATIVE_WIDTH);

typedArray.recycle();
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

// 获取控件宽度模式，若控件宽度固定,已知图片的宽高比,求控件的高度
int parentWidthMode = MeasureSpec.getMode(widthMeasureSpec);

// 获取控件高度模式，若控件高度固定,已知图片的宽高比,求控件的宽度
int parentHeightMode = MeasureSpec.getMode(heightMeasureSpec);

if (parentWidthMode == MeasureSpec.EXACTLY && mPicRatio != 0 && mRelative == RELATIVE_WIDTH) {// 控件宽度固定,已知图片的宽高比,求控件的高度
// 得到父容器的宽度
int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
// 得到孩子的宽度
int childWidth = parentWidth - getPaddingLeft() - getPaddingRight();
// 控件的宽度/控件的高度 = mPicRatio;

// 计算孩子的高度
int childHeight = (int) (childWidth / mPicRatio + .5f);

// 计算父容器的高度
int parentHeight = childHeight + getPaddingBottom() + getPaddingTop();

// 主动测绘孩子.固定孩子的大小
int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
measureChildren(childWidthMeasureSpec, childHeightMeasureSpec);

// 设置自己的测试结果
setMeasuredDimension(parentWidth, parentHeight);

} else if (parentHeightMode == MeasureSpec.EXACTLY && mPicRatio != 0 && mRelative == RELATIVE_HEIGHT) {
// 控件高度固定,已知图片的宽高比,求控件的宽度
// 得到父亲的高度
int parentHeight = MeasureSpec.getSize(heightMeasureSpec);

// 得到孩子的高度
int childHeight = parentHeight - getPaddingBottom() - getPaddingTop();

// 控件的宽度/控件的高度 = mPicRatio;
// 计算控件宽度
int childWidth = (int) (childHeight * mPicRatio + .5f);

// 得到父亲的宽度
int parentWidth = childWidth + getPaddingRight() + getPaddingLeft();

// 主动测绘孩子.固定孩子的大小
int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
measureChildren(childWidthMeasureSpec, childHeightMeasureSpec);

// 设置自己的测试结果
setMeasuredDimension(parentWidth, parentHeight);

} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

}
}

这个布局的使用跟FrameLayout差不多，只要嵌入一个显示图片（只放一个）的ImageView并设置宽高比，它就会按图片比例进行显示了