フッタにボタンを表示する - 明日の鍵（跡地）

ボタン２つ

この画面がどういう構成になっているかソースコードを読む。

uninstall_confirm.xml

android.git.kernel.org Git - platform/packages/apps/PackageInstaller.git/blob - res/layout/uninstall_confirm.xml

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal"
    style="@android:style/ButtonBar"
>
    <Button android:id="@+id/ok_button"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/ok"
    />

    <Button android:id="@+id/cancel_button"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/cancel"
    />
</LinearLayout>

layout_widthに0dp、layout_weightに1を設定することで、ボタン大きさが画面の半分ずつになるようにしている。
フッタのViewGroupにLinearLayoutを使用しており、styleに@android:style/ButtonBarを設定している。

styles.xml

android.git.kernel.org Git - platform/frameworks/base.git/blob - core/res/res/values/styles.xml

<style name="ButtonBar">
    <item name="android:paddingTop">5dip</item>
    <item name="android:paddingLeft">4dip</item>
    <item name="android:paddingRight">4dip</item>
    <item name="android:paddingBottom">1dip</item>
    <item name="android:background">@android:drawable/bottom_bar</item>
</style>

ボタンがセンタリングされるようパディングを設定している。
背景色の灰色は@android:drawable/bottom_barで設定しているようだ。

bottom_bar.png

android.git.kernel.org Git - platform/frameworks/base.git/blob - core/res/res/drawable-hdpi/bottom_bar.png
9patchかxmlだとおもいきや普通のpng画像だった。
hdpi/mdpi/ldpiが用意されている。
一番上に境界線を表す明るい色が使われ、縦にグラデーションがかかっている。
高さが伸びるとグラデーションが荒くなるが、横に伸びる分には問題ないので、landscapeとportlateどちらでも使えそうだ。

ボタン１つ

この画面がどういう構成になっているかソースコードを読む。

android.git.kernel.org Git - platform/packages/providers/GoogleSubscribedFeedsProvider.git/blob - res/layout/manage_accounts_screen.xml

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@android:drawable/bottom_bar">

    <View
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"/>

    <Button android:id="@+id/add_account_button"
        android:layout_width="0dip"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:layout_marginTop="5dip"
        android:text="@string/add_account_label" />

    <View
        android:layout_width="0dip"
        android:layout_height="fill_parent"
        android:layout_weight="1"/>
</LinearLayout>

Viewをおく事で適度な大きさになるようにしているようだ。
左右のViewのweightを1に、中央のボタンのweightを2にすることで中央に画面半分分のボタンを表示している。
左右のパディングは必要ないので、styleを使わずにボタンにマージンを設定して余白を調節している。
背景色はボタン２つの場合と同じで@android:drawable/bottom_barを使用している。

ボタン１つ（違うパターン）

以前、[twitter:@R246] さんに教えていただいた書き方

<LinearLayout
  android:orientation="horizontal"
  android:background="@android:drawable/bottom_bar"
  android:gravity="center_horizontal"
  android:weightSum="2"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
  <Button
    android:id="@+id/doneButton"
    android:text="@string/done"
    android:layout_weight="1"
    android:layout_marginTop="5dip"
    android:layout_width="0dip"
    android:layout_height="wrap_content" />
</LinearLayout>

weightSumに2を指定することでLinerLayoutの全体のweightが2になり、ボタンのweightに1を指定することで、ボタンの大きさが画面の半分になる。
さらにgravityにcenter_horizontalを指定するとボタンがセンタリングされる。
このほうがViewが少なくなり、すっきり。

所感

やっと書き方覚えたぞ