Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

Androidアプリ開発初心者がkotlinでカラーピッカーを作ってみるよ! その7

 どうも!LSSです!

 

「昨日はめっちゃ中途半端なとこで記事終わっちゃったな~」と反省中。

「毎日更新」という目標を自分に課しているため、「ああ!もうすぐ日付変わっちゃう!!!」と、あーゆー事になってしまいました。

 記事の質を取るか、毎日更新の継続を取るか、はたまた「いったん上げちゃって後から追記追記追記…」するか…は、今後の検討課題として、今日もカラーピッカーの続き、はっじまっるよぉ!!

 

TableLayoutを使ってみる!の続き!…の前にちょっと調整!

f:id:little_strange:20190925235531p:plain

 

 前回はここまでやりましたね。

 ここで一度、試しにエミュレータにビルドしてみます。

 

f:id:little_strange:20190926215638p:plain

 この、右上の再生ボタンみたいなやつですね。
 これをぽちっと。すると…

f:id:little_strange:20190926215822p:plain

 こんな感じの画面になります。
 前回、kadomaru.xmlとして作った、「角丸で背景色は半透明の白色」のデザインが、この画面下部のボタンを囲むTableLayoutに適用されて、こんな見ためになります

 

 ここで、シークバーで色を変えてみると…

f:id:little_strange:20190926220141p:plain

 こんな風に、背景色をうすーくした感じの角丸。ちょっとオシャレくさくないです?
…と、オシャレをまったく知らないLSSが言ってみるテスト。

 

 で、まぁ、ビルドしてみて思った点が2つ。

 

  • 起動直後に背景が真っ黒になるのに、作成画面では白色で、デザイン編集画面で感覚がつかみにくい(特に半透明白色のTableLayoutが境目が見えない)
  • シークバーが細く、LSSの武骨な指でも操作可能ではあるけど、もちっと広いほうがいいのでは??

 

て事で、先にこの2つを解消していきます。

 1つめについては、「LL0の背景色を黒に設定しておく」ってだけで解決ですね。

f:id:little_strange:20190926220910p:plain

 Component Treeの一番上にある、「LL0」をクリックしてから、画面右のAttributesの「background」を探して、

f:id:little_strange:20190926221133p:plain

こう、「#000000」と入れてやると、

f:id:little_strange:20190926221232p:plain

 こんな風に、デザイン画面でも実行時と同じような雰囲気の画面になりました!

 

 あと、シークバーの広さ(高さ)ですが、

f:id:little_strange:20190926221515p:plain

Component Treeから「sbR」をまずクリックして、青くした状態で…

f:id:little_strange:20190926221636p:plain

キーボードのShiftキーを押しながら、「sbB」をクリックすると、「sbR」「sbG」「sbB」の3つがまとめて選択状態になります。

 その選択した状態のまま、画面右のほうのAttributesで、

f:id:little_strange:20190926221909p:plain

layout_height(この時点ではwrap_contentになってると思います)を、

f:id:little_strange:20190926222230p:plain

例えば「50dp」と手打ちで変更すると、
「ちょっと操作しやすいかな?誤操作減るかな?」って感じの高さになります。
 …ここはまぁ、お好みで調整でよいかなと思います。

 

 

TableLayoutを使ってみる!の続き!

 はい!本題いきます!

f:id:little_strange:20190926230019p:plain

 Component Treeの↑の画面の位置にある「button」をクリックします。

 

 次に、画面右のAttributesから、以下の項目を変更していきますよ!

「id」…「bt」に打ち換えます。

「text」…デフォルトで「Button」って入ってるかと思いますが、消します。

「layout_width」…「60dp」に打ち換えます。

「layout_height」…「30dp」に打ち換えます。

「layout_margin」…▶をクリックして、出てきた中の、「layout_margin」に「6dp」と入力します。

f:id:little_strange:20190926230928p:plain

↑こんな感じですね。

…以上です。

 

 

 ボタンの設定ができたら、またComponent Treeに戻ります。

f:id:little_strange:20190926231256p:plain

「bt」と名前の変わったボタンをクリックして、青くした状態で、キーボードの「CTRL」キーと「C」キーを同時に押します。

f:id:little_strange:20190926231427p:plain

CTRL+Cを押したら、今度はマウスで、そのすぐ上の「TableRow」をクリックして、今度は「CTRL」キーと「V」キーを同時に押します。

f:id:little_strange:20190926231654p:plain

↑すると、こんな風にボタンが増えます。

(ボタンの後の数字が2とか3かもですが、そこは気にしなくてOK!)

 

 さらにあと2回、「TableRow」をクリックして「CTRL+V」を繰り返して、

f:id:little_strange:20190926232033p:plain

 こんな風に、TableRowの中にボタンが4つ並べばOKです^^

 

…さて、今、ボタンを4つ持たせたTableRowのほかに、

f:id:little_strange:20190926232331p:plain

3つのTableRowがあります。この3つを、

f:id:little_strange:20190926232601p:plain

選択して、キーボードの「Del」キーで削除、で3つとも消してしまいます。

コピペ便利!!!!

 さて、今度は、「ボタンが4つ入ったTableRow」をクリックして青くします。

f:id:little_strange:20190926232828p:plain

 

 ここでまた、「CTRL」キーと「C」キーを同時に押します。

 そして、その上の「TableLayout」をクリックして青くします。

f:id:little_strange:20190926233045p:plain

 そしたら、次は「CTRL+V」を押すと、TableRowが増殖します。

…そしてまた「TableLayout」をクリックして「CTRL+V」を2回繰り返すと…

f:id:little_strange:20190926233404p:plain

 こんな風に、ボタンが横4つ、縦4列になります。

 

「** おおっと **」

 あ、ひとつ設定が漏れてたのに気づいたので、調整します!!^^;

f:id:little_strange:20190926233812p:plain

 また「TableLayout」をクリックして…

f:id:little_strange:20190926233934p:plain

画面右、Attributesから、「layout_width」の項目を「match_parent」から「wrap_content」に変更しておきます!

f:id:little_strange:20190926234113p:plain

↑そうすることで、こんな風に左右方向に真ん中に、ボタンを4×4に並べた囲みができました!!

 

次回に続きます!

 ここで、また今回はここまでにしたいと思います。

 次回またよろしくお願いいたします!