Android屏幕适配之固定宽高比

图形自己的宽高比不等于控件的宽高比造成了显示的时候图片的变形.
以最常见的情况为例：
已知条件：图片的宽高比，控件的的宽度(match_parent)
解决办法：让图片宽高比等于控件宽高比,自定义一个Layout控件

package com.example.administrator.example.views;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;


/**
 * 作者：Created by Kevin on 2016/2/1.
 * 邮箱：
 * 描述：固定宽高比的控件
 */
public class RatioLayout extends FrameLayout {

    private float mPicRitio = 2.4f; //一个固定的宽高比，后面创建属性自定义来设置宽高比
    public RatioLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //父控件是否是固定值或者是match_parent
        int mode = MeasureSpec.getMode(widthMeasureSpec);
        if (mode == MeasureSpec.EXACTLY){
            //得到父容器的宽度
            int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
            //得到子控件的宽度
            int childWidth = parentWidth - getPaddingLeft() - getPaddingRight();
            //计算子控件的高度
            int childHeight = (int) (childWidth / mPicRitio +0.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 {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }

    }
}

然后在我们布局文件中调用

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="4dp"
        android:background="@drawable/selector_item_appinfo_bg"
        android:orientation="vertical"
        android:padding="10dp">


        <com.example.administrator.example.views.RatioLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/iv_icon"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </com.example.administrator.example.views.RatioLayout>

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="title" />
    </LinearLayout>

</FrameLayout>

这样我们现实的图片就是以一个固定宽高比来显示的，不会因为图片的大小造成显示的不同。在类RatioLayout 中我们固定了宽高比mPicRitio = 2.4f，我们更希望在布局文件中可以自定义该值
所以创建attrs。

<?xml version="1.0" encoding="utf-8"?>
<resources>

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

修改布局文件以及添加自定义命名空间

<com.example.administrator.googleplay.views.RatioLayout
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:picRatio="3.55"
            >

最后在RatioLayout 的构造函数中获取

    public RatioLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RatioLayout);
        mPicRitio = typedArray.getFloat(R.styleable.RatioLayout_picRatio,0);

        typedArray.recycle();
    }

    public RatioLayout(Context context) {
        this(context, null);//这样都会走到上一个构造函数
    }