谷歌電子市場4--專題

1.json

2.按照指定比例展示寬高的自定義控制項實現

為了讓圖片按照完美比例進行展現, 不被壓縮, 需要自定義控制項,該控制項可以根據預設的比例來確定寬高

 * 按照比例展示寬高的自定義控制項
 * 
 * @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>