どうも!LSSです!
「昨日はめっちゃ中途半端なとこで記事終わっちゃったな~」と反省中。
「毎日更新」という目標を自分に課しているため、「ああ!もうすぐ日付変わっちゃう!!!」と、あーゆー事になってしまいました。
記事の質を取るか、毎日更新の継続を取るか、はたまた「いったん上げちゃって後から追記追記追記…」するか…は、今後の検討課題として、今日もカラーピッカーの続き、はっじまっるよぉ!!
TableLayoutを使ってみる!の続き!…の前にちょっと調整!
前回はここまでやりましたね。
ここで一度、試しにエミュレータにビルドしてみます。
この、右上の再生ボタンみたいなやつですね。
これをぽちっと。すると…
こんな感じの画面になります。
前回、kadomaru.xmlとして作った、「角丸で背景色は半透明の白色」のデザインが、この画面下部のボタンを囲むTableLayoutに適用されて、こんな見ためになります
ここで、シークバーで色を変えてみると…
こんな風に、背景色をうすーくした感じの角丸。ちょっとオシャレくさくないです?
…と、オシャレをまったく知らないLSSが言ってみるテスト。
で、まぁ、ビルドしてみて思った点が2つ。
- 起動直後に背景が真っ黒になるのに、作成画面では白色で、デザイン編集画面で感覚がつかみにくい(特に半透明白色のTableLayoutが境目が見えない)
- シークバーが細く、LSSの武骨な指でも操作可能ではあるけど、もちっと広いほうがいいのでは??
て事で、先にこの2つを解消していきます。
1つめについては、「LL0の背景色を黒に設定しておく」ってだけで解決ですね。
Component Treeの一番上にある、「LL0」をクリックしてから、画面右のAttributesの「background」を探して、
こう、「#000000」と入れてやると、
こんな風に、デザイン画面でも実行時と同じような雰囲気の画面になりました!
あと、シークバーの広さ(高さ)ですが、
Component Treeから「sbR」をまずクリックして、青くした状態で…
キーボードのShiftキーを押しながら、「sbB」をクリックすると、「sbR」「sbG」「sbB」の3つがまとめて選択状態になります。
その選択した状態のまま、画面右のほうのAttributesで、
layout_height(この時点ではwrap_contentになってると思います)を、
例えば「50dp」と手打ちで変更すると、
「ちょっと操作しやすいかな?誤操作減るかな?」って感じの高さになります。
…ここはまぁ、お好みで調整でよいかなと思います。
TableLayoutを使ってみる!の続き!
はい!本題いきます!
Component Treeの↑の画面の位置にある「button」をクリックします。
次に、画面右のAttributesから、以下の項目を変更していきますよ!
「id」…「bt」に打ち換えます。
「text」…デフォルトで「Button」って入ってるかと思いますが、消します。
「layout_width」…「60dp」に打ち換えます。
「layout_height」…「30dp」に打ち換えます。
「layout_margin」…▶をクリックして、出てきた中の、「layout_margin」に「6dp」と入力します。
↑こんな感じですね。
…以上です。
ボタンの設定ができたら、またComponent Treeに戻ります。
「bt」と名前の変わったボタンをクリックして、青くした状態で、キーボードの「CTRL」キーと「C」キーを同時に押します。
CTRL+Cを押したら、今度はマウスで、そのすぐ上の「TableRow」をクリックして、今度は「CTRL」キーと「V」キーを同時に押します。
↑すると、こんな風にボタンが増えます。
(ボタンの後の数字が2とか3かもですが、そこは気にしなくてOK!)
さらにあと2回、「TableRow」をクリックして「CTRL+V」を繰り返して、
こんな風に、TableRowの中にボタンが4つ並べばOKです^^
…さて、今、ボタンを4つ持たせたTableRowのほかに、
3つのTableRowがあります。この3つを、
選択して、キーボードの「Del」キーで削除、で3つとも消してしまいます。
コピペ便利!!!!
さて、今度は、「ボタンが4つ入ったTableRow」をクリックして青くします。
ここでまた、「CTRL」キーと「C」キーを同時に押します。
そして、その上の「TableLayout」をクリックして青くします。
そしたら、次は「CTRL+V」を押すと、TableRowが増殖します。
…そしてまた「TableLayout」をクリックして「CTRL+V」を2回繰り返すと…
こんな風に、ボタンが横4つ、縦4列になります。
「** おおっと **」
あ、ひとつ設定が漏れてたのに気づいたので、調整します!!^^;
また「TableLayout」をクリックして…
画面右、Attributesから、「layout_width」の項目を「match_parent」から「wrap_content」に変更しておきます!
↑そうすることで、こんな風に左右方向に真ん中に、ボタンを4×4に並べた囲みができました!!
次回に続きます!
ここで、また今回はここまでにしたいと思います。
次回またよろしくお願いいたします!