どうも！LSSです！
今回は、ドロワブルリソースのxml上で、layer-listっていう概念を試してみます！
ドロワブルリソースのxml…ボタン等の背景として画像っぽく使うものですね。
その中でSHAPEタグを使って、グラデーションや角丸を実現する事はだいぶ前からやってはいましたが、layer-listを使うとその名前の通り「レイヤー」として要素を重ねあわせて使う事が出来るようになるので、表現の幅が広がります！
※表現の幅が広がる＝よりデザインセンスが問われる事になりそうなのが怖いｗｗｗ
- 今回はこんな感じのものを作ります！
- タグの構造
- まず、xmlを作成します
- layer.xmlの内容を編集します
- ここで一旦、表示テスト！
- 再び、layer.xmlの内容を編集します
- ここで再度、表示テスト！
- さらに、layer.xmlの内容を編集します
- んでまた、表示テスト！
今回はこんな感じのものを作ります！
↓layer.xml（ボタンのbackgroundに設定）
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF000000"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:top="0dp"
android:left="0dp"
android:right="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFFFF"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:top="10dp"
android:left="10dp"
android:right="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#FF808080"/>
<corners android:radius="10dp"/>
</shape>
</item>
</layer-list>
タグの構造
layer-listを使う場合、xmlファイル内でのタグの構造は、
<layer-list>
<item>
<shape>
<gradient />
</shape>
</item>
<item>
<shape>
<gradient />
</shape>
</item>
</layer-list>
のようになり、<item>から</item>までが一つのレイヤーとして扱われます。
先に書いた方の<item>が下層になり、その上に重ねて次の<item>を表示する、っていう感じですね。
まず、xmlを作成します
「drawable」を右クリックし、出てきたメニューから
「New」にマウスカーソルを載せて、さらに出てきた中から
「Android Resource File」をクリックします！
出てくるダイアログは、
「File name」に任意の名前をつけて（今回はlayerとしました）、
「OK」ボタンをクリックします。
layer.xmlの内容を編集します
作られたxmlは最初、
こんな風になっています。
<selector>タグが最初から入ってて、このタグは
「タップされた時・されていない時などの状態に応じて切り替える」
のに使用します。
今回は使わないので、このselectorって部分を消して、layer-listに書き換えようと、
la まで打ったところで、候補としてlayer-listが出てきました！
AndroidStudioちゃん有能！！
有難く候補をクリックさせていただきます！
開始タグのほうのselectorを変更しただけですが、終了タグ</selector>も自動的に変更してくれました^^
続けて、その中に<item>タグを入れます。
うわぉ！
今度は<を入れただけで、itemが候補に出てきました^^
layer-listの直の子要素はitemしかないからですね。
アプリ開発を覚えるのは面倒な部分も多々ありますが、最新の開発環境は極力、補完して助けてくれようとしてくれます。
AndroidStudioちゃんマジ有能！！
そんで、再度ありがたくitemをクリックします。
で、そのタグを閉じるべく、>を入力すると…
自動的に</item>が入力されます！
AndroidStudioちゃんマジ天使！！
その後、itemの内容も編集した結果、
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF000000"/>
<corners android:radius="10dp"/>
</shape>
</item>
</layer-list>
こういうレイヤーにしてみました。
形状は「四角形（rectangle）で、」 <shape android:shape="rectangle">
色（塗りつぶし色）は「透過ナシの黒で、」<solid android:color="#FF000000"/>
「角は半径10dpで丸める」<corners android:radius="10dp"/>
という形状を定義した事になります。
ここで一旦、表示テスト！
↑こういうレイアウトxmlを用意しました。
この中央にあるボタンを選択し、画面右のAttributes内のbackgroundを、
とします。
真っ黒い怪しいボタンが出来ましたｗ
定義した通りに表示されている事が確認できたところで、再度layer.xmlの編集に戻ります！
再び、layer.xmlの内容を編集します
マウスドラッグで、<item>から</item>までを選択状態にします。
んで、キーボードの「Ctrlキー」と「Cキー」同時押しでクリップボードにコピー。
選択解除してから、</item>の後ろでEnterキーを叩いて、空行を用意します。
そして「Ctrlキー」と「Vキー」同時押しで貼り付け！
同じレイヤー（<item>から</item>まで）が作れました！
次はこの、下の方の<item>の内容を編集していきます。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF000000"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:top="0dp"
android:left="0dp"
android:right="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFFFF"/>
<corners android:radius="10dp"/>
</shape>
</item>
</layer-list>
↑こんな風にしてみました！
まず、itemタグの中に、「top」「left」「right」「bottom」として数値dpを指定しています。
これはそれぞれ、上、左、右、下、の余白の設定になります。
上記の例だと、「右と下だけ10dpあける」という事になりますね。
あと変更したのは、
色（塗りつぶし色）は「透過ナシの白で」<solid android:color="#FFFFFFFF"/>
の部分だけです。
ここで再度、表示テスト！
先ほどの「黒い角丸四角」の上に重ねて、「白い角丸四角」が表示されました^^
itemタグ内に書いた余白設定によって、
「上と左は完全に黒四角が覆い隠され、右と下だけ黒四角が顔を覗かせている」
という状態です。
期待通りに事が進むと勢いが出てきますｗ
さらに、layer.xmlの内容を編集します
２回目の時と同様に、２つめのほうの<item>から</item>までをコピペして、部分的に書き換えるというお手軽手法を用います。
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#FF000000"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:top="0dp"
android:left="0dp"
android:right="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#FFFFFFFF"/>
<corners android:radius="10dp"/>
</shape>
</item>
<item
android:top="10dp"
android:left="10dp"
android:right="10dp"
android:bottom="10dp">
<shape android:shape="rectangle">
<solid android:color="#FF808080"/>
<corners android:radius="10dp"/>
</shape>
</item>
</layer-list>
このようにしてみました！
３つめのレイヤーは、
「上下左右全てに10dpの余白」を設け、
色（塗りつぶし色）は「透過ナシのグレー」
にしてみました。
んでまた、表示テスト！
最初、ひとめ見た時、「う~ん…何かが違う？？」ような気がしましたが、もっかい見直すと「まぁ、それっぽくなってる…のかな？」とも思えましたｗ
ちょっと何通りか試してもみたんですが、しっくりくる解答は今のところ見つけられず、
「このへんがデザインセンスの足りないところだなぁ」と実感しましたｗｗｗ
てなところで、今回はこのへんで！
次回もまた、よろしくお願いします^^
