Hatena::ブログ(Diary)

明日の鍵

2012-02-26

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

4.0以前はこちら

フッタにボタンを表示する - 明日の鍵 
http://d.hatena.ne.jp/tomorrowkey/20110809/1312869978

ボタン2つ

f:id:tomorrowkey:20120226173416p:image:w250

この画面のレイアウトファイルはどうなっているかソースを探す

uninstall_confirm.xml


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:divider="?android:attr/dividerHorizontal"
    android:showDividers="beginning"
    android:paddingTop="16dip">

  <LinearLayout
      style="?android:attr/buttonBarStyle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:measureWithLargestChild="true">

    <LinearLayout android:id="@+id/leftSpacer"
      android:layout_weight="0.25"
      android:layout_width="0dip"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:visibility="gone" />

    <Button android:id="@+id/cancel_button"
      android:layout_width="0dip"
      android:layout_height="wrap_content"
      android:layout_gravity="left"
      android:layout_weight="1"
      android:text="@string/cancel"
      android:maxLines="2"
      style="?android:attr/buttonBarButtonStyle" />

    <Button android:id="@+id/ok_button"
      android:layout_width="0dip"
      android:layout_height="wrap_content"
      android:layout_gravity="right"
      android:layout_weight="1"
      android:text="@string/ok"
      android:maxLines="2"
      style="?android:attr/buttonBarButtonStyle" />

    <LinearLayout android:id="@+id/rightSpacer"
      android:layout_width="0dip"
      android:layout_weight="0.25"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      android:visibility="gone" />

  </LinearLayout>
</LinearLayout>

ボタン1つ

軽く探したけど、だいたいActionBarで実現してるみたい

レイアウトで実装したいなら以下でそれっぽくできる

<LinearLayout
  style="?android:attr/buttonBarStyle"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:measureWithLargestChild="true"
  android:orientation="horizontal" >

  <Button
    android:id="@+id/done_button"
    style="?android:attr/buttonBarButtonStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ok"
    android:drawableRight="@drawable/space"
    android:maxLines="2"
    android:text="@string/done" />
</LinearLayout>

2011-08-09

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

ボタン2つ

f:id:tomorrowkey:20110809141852p:image:w200

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

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どちらでも使えそうだ。

ボタン1つ

f:id:tomorrowkey:20110809144443p:image:w200

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

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を使わずにボタンにマージンを設定して余白を調節している。

背景色はボタン2つの場合と同じで@android:drawable/bottom_barを使用している。

ボタン1つ(違うパターン)

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

所感

やっと書き方覚えたぞ