drawable（背景）用のxmlでlayer-listを試してみる！

　どうも！LSSです！

　今回は、ドロワブルリソースのxml上で、layer-listっていう概念を試してみます！

　ドロワブルリソースのxml…ボタン等の背景として画像っぽく使うものですね。

　その中でSHAPEタグを使って、グラデーションや角丸を実現する事はだいぶ前からやってはいましたが、layer-listを使うとその名前の通り「レイヤー」として要素を重ねあわせて使う事が出来るようになるので、表現の幅が広がります！

※表現の幅が広がる＝よりデザインセンスが問われる事になりそうなのが怖いｗｗｗ

今回はこんな感じのものを作ります！

↓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の余白」を設け、
色（塗りつぶし色）は「透過ナシのグレー」
にしてみました。

んでまた、表示テスト！

　最初、ひとめ見た時、「う~ん…何かが違う？？」ような気がしましたが、もっかい見直すと「まぁ、それっぽくなってる…のかな？」とも思えましたｗ

　ちょっと何通りか試してもみたんですが、しっくりくる解答は今のところ見つけられず、
「このへんがデザインセンスの足りないところだなぁ」と実感しましたｗｗｗ

てなところで、今回はこのへんで！

　次回もまた、よろしくお願いします^^