[Android] アスペクト比が固定のビューを作成する

#Android

#ミレニアム・ファルコン製作日記

田中圭介

2016.02.24

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

アスペクト比を設定すれば高さが決まる

そんなビューを作ります。

カスタムビュークラスの作成

まずはカスタムクラスを作成しましょう。
例によってコンストラクタを記述します。

/**
 * 高さを動的に決めるカスタムビュー
 * 利用する側がアスペクト比（高さ ÷ 横幅）をセットする
 */
public class DynamicHeightView extends View {

    public DynamicHeightView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
}

属性の定義

res/values/attrs.xml を作成し、aspectRatio というカスタム属性を追加します。
XML での属性追加に関してはこちらの記事をご覧ください。

<resources>
    <declare-styleable name="DynamicHeightView">
        <attr name="aspectRatio" format="float"/>
    </declare-styleable>
</resources>

コンストラクタの実装

作成したカスタムビューのコンストラクタに、値の取得と設定処理を実装します。

private float mAspectRatio;

public DynamicHeightView(Context context, AttributeSet attrs) {
    super(context, attrs);

    TypedArray a = context.getTheme().obtainStyledAttributes(
            attrs,
            R.styleable.DynamicHeightView,
            0, 0);

    try {
        mAspectRatio = a.getFloat(R.styleable.DynamicHeightView_aspectRatio, 0);
    } finally {
        a.recycle();
    }

    if (mAspectRatio < 0) mAspectRatio = 0;
}

onMeasure() のオーバーライド

onMeasure() メソッドは View の高さと横幅を決定するメソッドです。
このメソッドをオーバーライドし、動的に高さを求めます。

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int widthSize = MeasureSpec.getSize(widthMeasureSpec); // *1
    int heightSize = (int) (widthSize * mAspectRatio);  // *2

    setMeasuredDimension(widthSize, heightSize);  // *3

    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    widthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, widthMode);
    heightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, heightMode);

    super.onMeasure(widthMeasureSpec, heightMeasureSpec); // *4
}

解説

まず、引数で渡された widthMeasureSpec からビューの横幅を取得します。（*1）

次にメンバ変数の mAspectRatio を利用して、高さを動的に設定します。（*2）

そして setMeasuredDimension() メソッドで、横幅と高さを決定します。（*3）
onMeasure() メソッドをオーバーライドした場合、setMeasuredDimension() は必ず実行しなければなりません。

それ以降の部分ではスーパークラスの onMeasure() に渡す MeasureSpec を作成しています。
ここではビューのサイズから正しい値の MeasureSpec を作成し、スーパークラスの onMeasure() メソッドを呼び出す必要があります。（*4）
これを行わなかった場合、ビューの表示時にレイアウトが崩れることがあるので注意しましょう。

layout xml での設定

<jp.co.ketanaka.app.dynamicheightview.view.DynamicHeightView
    android:layout_width="200dp"
    android:layout_height="0dp"
    android:background="#00ff00"
    app:aspectRatio="0.75"
    />

作成したカスタムビューを指定し、aspectRatio に任意の値を設定します。
この値に x を指定した場合、「高さは横幅の x 倍」というビューができあがります。