どうも！LSSです！
AndroidStudio＋Kotlinでスマホアプリ開発の勉強中です。
少し間が空きましたが、前々回、前回と、layer-listを使用してボタンの見た目を
↑のように変えるxmlファイルを作りました。
今回は、「普段凸状態で、押されると凹状態になるボタンを表現するxml」を作ります！
- まずは恒例の（？）xmlファイル作成から！
- pushable.xmlの内容を編集するよ～
- ここでちょっと説明
- という事で、押されてる時と押されてない時のxmlを
- pushable.xmlは、こんなコードになります。
- 以上でいけてるハズ。動作テストします。
- って、ええええ！？
まずは恒例の（？）xmlファイル作成から！
画面左の「app」の中の「res」の中の
「drawable」を右クリック、出てきたメニューの
「New」にマウスカーソルを載せると更に右に出てくるメニューから
「Drawable resource file」をクリックします！
すると、こういうダイアログが出てきます。
「File name」のところに、xmlファイルにつける名前を入力します。
今回は pushable としました。（任意の名前。好きにつけてOK！）
で、OKボタンを押します。
↑このように作られます。
拡張子.xmlは自動で追加されるんですね。
いつだったか自分で入力して記事にしてたような…ま、いっかｗ
pushable.xmlの内容を編集するよ～
作りたてのxmlファイルは↑のようになっています。
最初からselectorタグが入っていますが、
実はこのタグが「押されてる時」「押されてない時」を区別するのに使うタグ
で、今回の主役さんです！
selectorタグの次の、空いてる行に
<item>
と入力すると、自動的に補完されて
<item></item>
となります^^
で、次に、<item と > の間に入力カーソルを合わせ、半角スペースを打つと…
↑こんな風にオプションの候補が出てきます！
で、ここは
android:state_pressed
を選択しておきます。
選択しただけでもう、=""まで補完された上に、trueかfalseかの選択を迫られます。
…AndroidStudioちゃん、「気が利く」を通り越してグイグイ積極的に迫ってきてる感ｗ
とりあえず、まずは false を選択しておきますね。
そして更に、<item>から</item>までをコピーして貼り付けで複製したり、複製したもののfalseをtrueに書き換えたり、整形したりして
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
</item>
<item android:state_pressed="true">
</item>
</selector>
↑こういう状態にしました！
ここでちょっと説明
selectorタグは、その中に書かれた複数のitemタグを状況に応じて選択します。
今回、候補から選んだandroid:state_pressedは、
pressed（押されている）state（状態）
が、
true（真）かfalse（偽）か
を問うもので、押されていない時はfalseと書いた方のitemタグの中身がselectorタグによって選択され、trueの方は無視されます。
押されている時は、trueと書いた方のitemタグの中身が選択され、falseの方は無視されます。
という事で、押されてる時と押されてない時のxmlを
まずは前々回作ったlayer.xmlを
こう、layer-listタグをタグごと全部選択して、キーボードの「Ctrlキー」と「C」キーでコピー。
pushable.xmlに戻って、
↑の位置にカーソルを合わせて、キーボードの「Ctrlキー」と「V」キーで貼り付け！
↑こんな感じになります。
同様にして、layer2.xmlのlayer-listタグもコピーして、
pushable.xmlの（だいぶ下のほうになってしまっていますが）↑の位置に貼り付けます。
pushable.xmlは、こんなコードになります。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false">
<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>
</item>
<item android:state_pressed="true">
<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="10dp"
android:left="10dp"
android:right="0dp"
android:bottom="0dp">
<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>
</item>
</selector>
以上でいけてるハズ。動作テストします。
テスト用xmlファイルのボタンを選択して、画面右のAttributes内、backgroudを
先ほど作ったpushableに変更します。
プレビュー表示では
クリックしても選択になるだけで絵は変わりませんが、エミュレータにインストールしてみますね。
って、ええええ！？
なんかこんな表示が出てきて、エミュレータが起動しないという緊急事態発生！！
最悪すぎる^^;;;;
一応、実機テストに切り替えて、ちゃんとボタンが動作する事は確認しました^^
…まいったな、しかし。
慌ててググって２，３の解決策を試したけど今んとこ直らず。
（ボタン動作をGIFアニメにして掲載するつもりだったんですが…）
ちとその問題の対策はまた色々やってみます^^;;;
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
