スポンサーリンク

KotlinでAndroidアプリ#16

マス目デザイン

前回は上段のゲームプレー部分を除き画面定義を行った。

マス目部分をConstraintLayoutレイアウトのChainを利用して作成するか、TableLayoutで作成するか悩んだのだが、TableLayoutで作成しようと思う。その理由は3×3のマス目としてプログラムでハンドリングしやすいのではないか?ここでTableLayoutを使わなきゃいつ使う!、といったところだ。

TableLayout配置

画面左上の「Palete」->「Layouts」を選択すると「TableLayout」が表示される。これを選択し画面上部へドロップする。ちなみにこれでConstraintLayoutの子レイアウトとしてTableLayoutが配置される。

そしていつものように四辺の○を画面隅やGuidelineへドロップしていくのだが、最初から領域いっぱいに拡大されているので、四隅の■を選択し縮小してから行う。

部品を最大限大きくするため属性「layout_width」、「layout_height」を0dpにする。


さらに他部品と同様にマージン3dpを設定する。

画面左下の「Componet Tree」のTableLayoutを展開するとTableRow(行)が4つあることがわかる。3×3のマス目にしたいので一つ削除する。

ImageButton配置

TableLayoutで3行のレイアウトが完成した。次に3列に対応する部品ImageButtonを配置していく。ImageButtonは名前の通り、クリック/タッチすると特定のプログラムを実行できる。そしてテキストではなく画像が表示できるのだ。この画像で○や×を表示する予定だ。

ImageButtonを配置していく。画面左上のPaleteから「Buttons」を選択すると「ImageButton」が表示される。これを選択し画面左下のComponet TreeのTableRowへ3回ドロップし3列作成する。

一つ目のImageButtonをドロップしたところ、パネルが開いた。これはデフォルト画像を設定するパネルだ。どの画像を設定するか、その前にAndroidアプリの画像について整理してみる。

前へ<ーーー>つづく

タイトルとURLをコピーしました