スポンサーリンク

KotlinでAndroidアプリ#13

部品を比率で配置

前回ConstraintLayoutレイアウトで部品を配置したが、dpの位置指定になってしまった。

比率指定にできないかと試したところ、上辺、左辺だけではなく下辺、右辺の○をドラックすることにより比率指定となった。

複数部品の配置

部品の比率配置ができたが、画面を構成する部品は複数あるはずだ。よって複数部品の配置を確認する。まず3部品配置し「Chain」機能により横並びにしてみる。

画面左上のPaletteからButtonを選択しプレビュー画面へドロップする。これを繰り返しボタンを3つ配置する。各部品を選択し上辺の○を画面上、下辺の○を画面下までドラックする。

Chain設定を行う。画面左下のComponent Treeから部品全てを選択し、マウス右クリック->Chians->Create Horizontal Chainを選択。これにより部品が横並びに均等配置される。

さらに比率で配置

横並びで均等比率で配置できたが均等でない場合もある。例えば左側ボタンのみ2倍大きいなどだ。これは部品に重み(weight)を付けると実現できる。

weightの設定はデザインモードからではやりずらいので、画面右上のCodeをクリックしコードで記述する。各部品の「android:layout_width」の値を”0dp”に、そしてweghtの属性「app:layout_constraintHorizontal_weight」を追加/設定していく。最初のボタンのみ2とし他のボタンを1にすることで最初のボタンが2倍の大きさになる。

縦位置も比率で

複数部品を任意の比率で配置できたが、これでもまだ不満なところがある。それは縦位置に関して各部品がバラバラなのだ。

縦位置も各部品を特定比率で配置できたらいいのだが、これには色々な方法があるみたいだ。発見したのは「GuideLine」という部品だ。このGuideLineは応用ができそうなので、ここで試してみる。

GuideLine部品を配置する。プレビュー画面の上にGuideLineアイコンをクリック->Add Horizontal GuideLineを選択。

プレビュー画面に横線が表示される。選択すると上下に移動できる。この横線に対して各部品の上辺○をドラッグし制約項目とする。これでGuideLineを上下に移動すると各部品も移動する。

これで各部品が同一の縦比率で配置できた!と思ったがよくよく見るとこのGuideLine、縦位置がdpで配置されていた。

この縦位置を比率で指定したいところだ。これにはコードを変更する必要がある。画面右上のCodeをクリックしコード編集する。Guideline定義内の属性「app:layout_constraintGuide_begin」を削除し、代わりに「app:layout_constraintGuide_percent」属性を追加する。ここに比率を設定する。

 

横並びだけの確認だが、ChainやGuidelineを利用すれば自由に比率配置できそうだ。次回は縦配置を確認しながら応用的な配置に挑戦してみる。

前へ<ーーー>つづく

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