どうも！LSSです！！
日中はまだまだ暑いですが、夜になると結構すずしい、そんな季節になりましたね。
と、とってつけた時候の挨拶はさておき、カラーピッカーの続き、やっていきますよ！
今回はTableLayoutの使用と、SHAPEによる角丸の枠を作る、てな事をやっていきます。
↑目指すのはこういうデザインです！
またxmlの編集になります
AndroidStudioの全容をいまだ理解していないため、xmlデザインだけでも日々新たな発見があるなーと思う今日この頃です。
この画面ですね。
まず「app」をクリックして青い選択状態にします。
で、次に左上にある「File」をクリックして開き、一番上にある「New」にマウスカーソルを乗せると右にずらずらっと出てくる中から、「AndroidResourceFile」をクリックします。
↑これですね。
最初に「app」を選んでおかないと、出てくる候補が違うものになるっぽいです。
で、AndroidResourceFileをクリックすると、↓のようなダイアログが出てきます。
このダイアログ内の項目のうち、「File name」「Resource type」「Root element」を触ります。
あ、言ってませんでしたが、今、レイアウトを角丸にするためのSHAPE記述xmlを作ろうとしています。
なので、File nameは「kadomaru」とでもしておきます。（任意の文字列）
次に、Resource typeの右の▼をクリックして…
出てくる候補の中から「Drawable」をクリックします。
「Root element」は、手打ちで「shape」と入力します。
そうして、ダイアログ右下の「OK」を押します。
すると、まず右のほうに「kadomaru.xml」が生成され、またそのkadomaru.xmlの編集画面が勝手に開かれた状態（右）になります。
右の画面には最初からshapeタグが書かれています。
kadomaru.xmlの中身、編集していきます！
↑のように、shapeタグ行の最後、"と>の間にカーソルを合わせ、スペースキーを一回叩くと、android:なんとか～って候補が色々でてきます。
今回は「android:shape」をクリックします。すると…
続けて、こんな候補が出てきます。
こちらは「rentangle」を選択します。
それだけで、↑のようにshapeタグが完成します。
あとは、<shape～の行と、</shape>の行の間に以下の２行を追記します。
<corners android:radius="6dp"/>
<solid android:color="#80FFFFFF"/>
結果、↓のような画面になります。
ここまでで、kadomaru.xmlの編集は完成です。
shapeタグに追記した「android:shape="rectangle"」は「四角形」である事を宣言、solidは四角形の背景色を設定しています。
以前、#で始まる色の設定の説明は６桁でしたが、今回は８桁になっています。
８桁で指定した場合は、最初の２桁は「透明度」という事になり、「80」で50%の透明度になります。あとの６桁は６桁で指定した時と同じで、赤・緑・青です。
今回は全部「FF」にしているので「白」になり、「半透明の白」って色を指定している事になります。
完成したxmlの内容
kadomaru.xml
<?xml version="1.0" encoding="utf-8"?> |
続けて、メイン画面のデザイン！
左上の「activity_main.xml」をクリックして、メイン画面の編集に戻します。
「Layout」「LinearLayout(vertical)」の順に選択してから、「LinearLayout(vertical)」をドラッグアンドドロップで下のほうに持っていきます。
持っていく先は、「Component Tree」の中で、↑の画面のように「LL0」から青い点線が出てくる場所、で、ドロップします。
次に、今、設置したLinearLayoutが青い選択状態になったまま、画面右のAttributes内の「gravity」という項目を探し、旗のマークをクリックします。
出てきたダイアログから「bottom」と「center_horizontal」の２か所にチェックを入れて、「Apply」ボタンを押します。
TableLayoutを使ってみる！
今度は、今作ったLinearLayoutの中に、TableLayoutをつっこんでみます。
TableLayoutを↑のようにドラッグアンドドロップします。
そして…
設置したTableLayoutが選択された状態で、画面右のAttributesから「background」という項目を探します。
そしてそこに「@」と打つと…
先ほど作ったばかりの「@drawable/kadomaru」があるので、それを選択！！
続けて、「layout_height」を「wrap_content」に、
「layout_margin」の▶をクリックして、
いくつかの行が出てきますが、「layout_margin」に「10dp」と入れておきます。
さて、また画面左に移って、
今度は、TableLayoutの▶をクリックします。
すると、
実は最初から作られていた、TableRowがいくつか姿を現します。
そこで、上の「Buttons」「Button」をドラッグアンドドロップで、
TableRowの中にドロップします。
結果、こんな画面になります。
…というところで、はなはだ中途半端ではありますが、次回に続きます！！
