Foursquare の Android 版をマネて、XML だけで作ってみた。
仕組みをすぐ忘れるので、ここにメモしておく。

```xml flat_panel.xml


## 使い方

上のファイル ``flat_panel.xml`` を、``res/drawable`` ディレクトリに入れて、適用したい Button などに↓のように設定。

```xml part_of_activity_main.xml
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/flat_panel"
        android:text="フラットなボタン" />

Theme とかにまとめたいけど、今日は割愛。

ボタンに適用した結果

通常

押した時

仕組み

<layer-list> タグの中の要素は、上から順に描画される。また、下位(手前)の要素は、上位(奥)の要素の入れ子になるみたい。

(図の id は flat_panel.xml と対応してます。)

  1. padding - ボタンの周りに少し余白を付ける役割(要らないなら消してもOK)
  2. shadow - ボタンの下部にちょっとだけ見えてる影の部分。大部分が face によって隠れてるけど、実際はほとんど同じ領域を持つ。ここで padding bottom を 2px としているので、face の高さが 2px 縮んで、影っぽく見える仕組み。つまり影の強さはここで調整。
  3. face - ボタンの「面」に該当。stroke でフチを、solid で面を塗りつぶしている。
  4. state - ボタンの状態によって色などを変える役割。ここでは state_pressed=true(押された状態)と、state_focused=true(フォーカスを持ってる状態)だけ対応してる。face を描画した「後」で評価されるので、face の色を置き換えるものではない事に注意(透過時)。あと、状態は上から評価される。
  5. child - LinearLayout など Group な View にこのスタイルを適用した時、子View への余白となる。

みんなの大好きな方眼紙EXCEL とオートシェイプで再現してみた → DL

Activity の背景が白だと、あんまり映えない。。。

色の定義を、別の xml に分けて、アプリ毎に変えれば、それっぽくなるのかなーと。

Android

published

Ads

Read more!

amay077

Microsoft MVP(Xamarin). フルリモートワーカー. Geospatial Mobile app developer. Love C#.

amay077 amay077