安卓筆記俠

 * 按照比例展示寬高的自定義控件
 * 
 * @author Kevin
 * 
 */
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);
        // 根據屬性id獲取屬性值, 方式: R.styleable.名稱_屬性
        ratio = typedArray.getFloat(R.styleable.RatioLayout_ratio, 0);
        // 回收TypedArray, 釋放內存
        typedArray.recycle();
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);

        // MeasureSpec.EXACTLY 確定值, 比如把寬高值寫死,或者match_parent
        // MeasureSpec.AT_MOST 至多, 能撐多大就多大, 類似wrap_content
        // MeasureSpec.UNSPECIFIED 未指定大小

        if (widthMode == MeasureSpec.EXACTLY
                && heightMode != MeasureSpec.EXACTLY && ratio != 0) {
            // 1. 根據布局寬度推算圖片寬度
            int imageWidth = widthSize - getPaddingLeft() - getPaddingRight();
            // 2. 根據圖片寬度和寬高比,推算圖片高度
            int imageHeight = (int) (imageWidth / ratio);
            // 3. 根據圖片高度, 推算布局高度
            heightSize = imageHeight + getPaddingTop() + getPaddingBottom();
            // 4. 根據布局高度, 推算heightMeasureSpec
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize,
                    MeasureSpec.EXACTLY);
        }

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

}

values/attrs.xml

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

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

</resources>

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:itheima="http://schemas.android.com/apk/res/com.itheima.googleplay74"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
?
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:background="@drawable/list_item_bg_selector"
        android:orientation="vertical" >
?
        <com.itheima.googleplay74.ui.view.RatioLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            itheima:ratio="2.43" >
            <ImageView
                android:id="@+id/iv_pic"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:src="@drawable/subject_default" />
        </com.itheima.googleplay74.ui.view.RatioLayout>
?
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:text="標題"
            android:textColor="#000"
            android:textSize="18sp" />
    </LinearLayout>
</LinearLayout>