フッタにボタンを表示する

ボタン２つ

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

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を使用している。

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

以前、@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が少なくなり、すっきり。