スポンサーリンク

KotlinでAndroidアプリ#18

ImageButton配置

ImageButtonを配置していく。画面左上のPalete-から「Buttons」を選択すると「ImageButton」が表示される。これを画面左下のComponet TreeのTableRowへドロップする。次に画像選択パネルが開くので取り込んだ3つのベクター画像を適当に選択し配置する。この操作を3つのTableRowへそれぞれ3回行い3列作成する。


id変更

部品にはぞれぞれIDが付与される。このIDを利用してプログラムからハンドリングするのでIDを整えておく。

配置されたImageButtonを選択すると、画面右側にid属性(「imageButton<番号>」)が表示される。この番号部分を1~9に変更しいく。

装飾

部品が小さく表示されているので画面サイズにフィットさせる。まず縦幅は3つのTabelRowを均等に伸長させる。

画面左下のComponet Treeから各TabelRowを選択し属性「layout_weight」を1に設定する。

次にImageButtonを縦横均等に伸長する。各ImageButtonを選択し属性「layout_weight」を1に、「layout_width」、「layout_height」をmatch_parentに変更する。

ImageButtonの画像が小さいためアスペクト比を維持したまま伸長させる。各ImageButtonを選択し属性「scaleType」を”fitCenter”に設定。さらに「background」属性を#4CAF50に変更し背景色を設定する。

ボタンのマージンを設ける。各ImageButtonを選択し属性「layout_margin」に3dpを設定する。

エラー解消

これで画面定義完了!と思ったが、ImageButtonにエラーが表示されていた。確認するとベクター画像を利用するために設定ファイルの変更が必要だった。

設定ファイルを変更する。画面左側のエクスプローラーからGradle Scripts/build.gradle(Module:app)ファイルを開く。「 defaultConfig 」ブロックに「 vectorDrawables.useSupportLibrary = true」を記述し保存する。

設定ファイルを変更したため画面上部に同期を促すメッセージが表示される。「Sync Now」をクリックし同期を行う。

同期が完了するとエラー表示が消えた。これで画面定義完了だ。ここまでのコードを掲載する。

動作確認

アプリを起動し確認する。MainActivityのsetContentView命令の引数「R.layout.activity_main」を作成した定義ファイル「R.layout.ticktacktoo」に変更する。

メニューバー「Run」->Run ‘app’を選択。

問題ないようだ。次に進む!

前へ<ーーー>つづく

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