0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

AndroidStudioでレイアウトをデザイン(layout_weight)

Posted at

AndroidStudioでレイアウトをデザインする(layout_weight)

AndroidStudio3.6.3現在、レイアウト方法はLinearLayoutConstraintLayoutを使うのが一般的のようです。
LinearLayoutにはhorizontalverticalのパーツが用意されていますが、中身は同じでorientation値が異なるだけです。
ConstraintLayoutはLinearLayoutよりさらに高機能になっているようです。
※と言ってもそこまで使いこなせないわけですが

ConstraintLayoutでレイアウトを思い通り配置してみましょう。

それではConstraintLayoutを配置します。配置したConstraintLayoutを選択した状態で■をドラッグして位置や大きさを変更します。

配置したConstraintLayoutの中にボタンを3つ配置します。ConstraintLayoutにパーツを配置する場合はレイアウト画面へドラッグするよりコンポーネントツリーへドラッグする方が確実です。配置する親子関係を間違えた場合はコンポーネントツリー画面で修正が可能です。

ボタン3つはそれぞれ idを bt1、bt2、bt3とします。split画面でコードを変えつつデザインをみてみます。
レイアウトの指示は再度これを見て参考にして下さい。
topstart.png
1.bt1のStartをドラッグしてConstraintLayoutのStartへドロップ
2.bt2のStartをドラッグしてbt1のEndへドロップ
3.bt3のStartをドラッグしてbt2のEndへドロップ
これで表示のルールが決まりました。左からbt1、bt2、bt3の順に並んで表示されます。

ボタンの表示幅をConstraintLayoutの幅に応じて変更

このままではボタンは並びましたがConstraintLayoutの左側に表示されただけで、使われていない空間が存在します。
ボタンの横幅をConstraintLayoutに合わせるにはlayout_weightを使います。

split画面では新規要素の追加が出来ないので画面をデザインに切り替えます。
ボタンの3つそれぞれのlayout_weightを1に、layout_widthを"0dp" に変更してみましょう。

するとボタンの横幅がConstraintLayoutの横幅いっぱいになるように広がります。
layout_weightに設定した「1」を比率を表すようです。
全て1に設定したのでボタン3つがそれぞれ 1:1:1 の比率で表示されるようです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?