按比例自适应-AutoSizeImageView

一、效果

实现原理比较简单，本章就不做原理讲解。一切只因为项目中经常遇到设置图片比例，于是便想到把功能封装一下方便以后使用。

先看效果：图1是xml代码，图2是效果

AutoImageView-code.png AutoImageView-result.png

二、代码

import android.content.Context;
import android.content.res.TypedArray;
import android.support.v7.widget.AppCompatImageView;
import android.util.AttributeSet;
import android.util.Log;

import com.fun.ex.app.R;

/**
 * 作者: Created by AdminFun
 * 邮箱: 614484070@qq.com
 * 创建: 2019/1/24
 * 修改: 2019/1/24
 * 版本: v1.0.0
 * 描述: 自动计算并重置宽高的图片控件，如果有需求可以继承自其他功能图片控件
 */
public class AutoSizeImageView extends AppCompatImageView {

    private final String TAG = "common";

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

    public AutoSizeImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AutoSizeImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.AutoSizeImageView, defStyleAttr, 0);
        mPercentWidth = attributes.getInt(R.styleable.AutoSizeImageView_widget_width_percent, 1);
        mPercentHeight = attributes.getInt(R.styleable.AutoSizeImageView_widget_height_percent, 1);
        attributes.recycle();
    }

    private int mPercentWidth = 0, mPercentHeight = 0; // 想要设置的宽高比例
    private int mCurrentWidth = 0, mCurrentHeight = 0; // 当前控件在视图中未处理的宽高
    private int mCurrentMode = 4;                      // 当前控件的宽高类型，详细类型见 getType 注释

    /**
     * 设置控件宽高比：这里只设置比例即可
     * 例如：想设置宽高比为4:3，那么即可设置 width = 40，高=30。或者width=4，高=3
     */
    public void setPercent(int width, int height) {
        this.mPercentWidth = width < 0 ? 0 : width;
        this.mPercentHeight = height <= 0 ? 1 : height;
        this.reMeaureView(mCurrentMode, mCurrentWidth, mCurrentHeight);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        // final int minimumWidth = getSuggestedMinimumWidth();
        // final int minimumHeight = getSuggestedMinimumHeight();
        final int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
        final int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
        this.mCurrentWidth = MeasureSpec.getSize(widthMeasureSpec);
        this.mCurrentHeight = MeasureSpec.getSize(heightMeasureSpec);
        this.mCurrentMode = getType(widthSpecMode, heightSpecMode);
        Log.d(TAG, String.format("AutoSizeImageView.onMeasure：width = %s,height = %s,mode = %s",
                String.valueOf(mCurrentWidth), String.valueOf(mCurrentHeight), String.valueOf(mCurrentMode)));
        this.reMeaureView(mCurrentMode, mCurrentWidth, mCurrentHeight);
    }

    private void reMeaureView(int CurrentMode, int MeasureWidth, int MeasureHeight) {
        switch (CurrentMode) {
            case 1:// 已知宽度和比例，不理会高度。
                setMeasuredDimension(MeasureWidth, getHeightByWidth(MeasureWidth, MeasureHeight));
                break;

            case 3:// 已知高度和比例，不理会宽度
                setMeasuredDimension(getWidthByHeight(MeasureWidth, MeasureHeight), MeasureHeight);
                break;

            case 2 | 4:// 宽度和高度都已知或都未知，完全不用理会
                // TODO  都已知的情况下是不需要处理的，暂时还未想到都未知的场景。
                break;
        }
    }

    private int getHeightByWidth(int width, int height) {
        return (mPercentWidth <= 0 || mPercentHeight <= 0) ?
                height : width * mPercentHeight / mPercentWidth;
    }

    private int getWidthByHeight(int width, int height) {
        return (mPercentWidth <= 0 || mPercentHeight <= 0) ?
                height : height * mPercentWidth / mPercentHeight;
    }

    /**
     * 四种类型
     * 1、width = match, height = warp,已知宽度和宽高比，计算高度size
     * 2、width = match, height = match,宽和高都已知，宽高比也有，这种情况下：不予理睬
     * 3、width = warp, height = match,已知高度和宽高比，计算宽度，重置size
     * 4、width = warp, height = warp,宽和高都未知，且知道比例，这种情况下：不予理睬
     * 注意：这里不考虑宽高都未设置的情况，默认第4种情况
     */
    private int getType(int widthMode, int heightMode) {
        switch (widthMode) {
            case MeasureSpec.EXACTLY: // 已知宽度
                if (heightMode == MeasureSpec.AT_MOST) {
                    return 1;
                } else if (heightMode == MeasureSpec.EXACTLY) {
                    return 2;
                } else {
                    return 1;
                }

            case MeasureSpec.AT_MOST | MeasureSpec.UNSPECIFIED: // 宽度未知
                if (heightMode == MeasureSpec.AT_MOST) {
                    return 4;
                } else if (heightMode == MeasureSpec.EXACTLY) {
                    return 3;
                } else {
                    return 4;
                }
        }
        return 4;
    }
}

 <declare-styleable name="AutoSizeImageView">
        <attr name="widget_width_percent" format="integer" />
        <attr name="widget_height_percent" format="integer" />
 </declare-styleable>

三、使用

方法一（设置比例并非是设置宽高）

 <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <com.fun.ex.app.custom_view.AutoSizeImageView
                    xmlns:app="http://schemas.android.com/apk/res-auto"
                    android:id="@+id/image"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fang_"
                    app:widget_height_percent="1"
                    app:widget_width_percent="1" />

                <android.support.v7.widget.AppCompatImageView
                    android:id="@+id/image1"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="#56ffff"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fang_" />
  </LinearLayout>

方法二

autoSizeImageView.setPercent(1, 1);