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);//這樣都會走到上一個構造函數
    }