2014年01月21日

[Android] 画像と文字列を下端で揃えたいとき

画像と文字列の下端を揃えたいという要望がありました。
RelativeLayoutでlayout_alignBottomを設定すると以下のようになります。
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp" >
<ImageView
android:id="@+id/green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:src="@drawable/green" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="@id/green"
android:background="#ddf"
android:layout_toRightOf="@id/green"
android:text="テスト"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

align_bottom.png
しかし、これでは上の画像のように、文字列の下に少し隙間が開いてしまいます。
フォントにはdescentという部分があるためですね。

descentを考慮して画像と文字列の下端を合わせたいときはlayout_alignBaselineを使います。
同時に画像を表示するImageViewにはbaselineAlignBottomをtrueにしておく必要があります。
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp" >
<ImageView
android:id="@+id/green"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:baselineAlignBottom="true"
android:src="@drawable/green" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@id/green"
android:layout_toRightOf="@id/green"
android:background="#ddf"
android:text="テスト"
android:textAppearance="?android:attr/textAppearanceLarge" />
</RelativeLayout>

align_baseline.png
こんな感じです。
これで画像と文字列の下端が揃いました。

posted by t2low at 22:00| Android