iOS開発者のAndroid開発入門その5(Layout)

botman3 Android
スポンサーリンク

はじめに

Android の Layout が色々あってわからないのでまとめました。
ソースはこれ↓
github鋭意作成中

サイズ指定

レイアウトの前に width などのサイズ指定について少し。

サイズ指定は下記3つがある。

  • match_parent
    親 View と同じサイズにする
  • wrap_content
    文字などコンテンツが表示できる十分なサイズにする
  • 数値指定
    10dp など指定したサイズにする

数値指定の場合の単位は下記の3つがあります。(基本的には dp でいいと思います)

  • dp
    相対的な値指定。(iOS の pt と思っていいはず?)
  • sp
    フォントサイズ指定用。相対的な値指定。
  • px
    絶対的な値指定で pixel を指定する。あまり使わないと思う。

余白指定

余白には外側に指定する marginpadding がある。

margin

指定できるのは下記。

  • margin
  • marginTop
  • marginBottom
  • marginLeft
  • marginRight
  • marginStart
  • marginEnd

android:margin="8dp" と指定すると View の外側に上下左右に 8 dp の余白で設定される。左右の余白は多言語対応(アラビア語とか)考慮すると Left/Right ではなく Start/End で指定した方が無難。

padding

指定できるのは下記。

  • padding
  • paddingTop
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingStart
  • paddingEnd

android:padding ="8dp" と指定すると View の内側に上下左右に 8 dp の余白で設定される。左右の余白は多言語対応(アラビア語とか)考慮すると Left/Right ではなく Start/End で指定した方が無難。

LinearLayout

定義

LinearLayout

こんなふうに縦横に並べたり境界線を付けたりできる。

linear_layout

並べる方向

  • HORIZONTAL
  • VERTICAL

境界線表示

  • SHOW_DIVIDER_BEGINNING
  • SHOW_DIVIDER_END
  • SHOW_DIVIDER_MIDDLE
  • SHOW_DIVIDER_NONE

下記のようにすると横に配置されます。

こんな感じ

linear_layout2

等分表示したい場合は weight を利用する。

境界線表示がしたい場合 android:divider="@drawable/divider" のように drawable を指定する必要があります。
下記のように drawable に divider.xml を作成してみます。

これを LinearLayout に指定してやると android:dividerPaddingandroid:showDividers が指定できるようになります。

こんな感じになります。dividerPadding は境界線の上下に余白がつきます。

linear_layout3

RelativeLayout

定義

RelativeLayout

他 View との相対位置指定で配置を行うやつ。今はほぼ ConstraintLayout を使うようであまり使わないっぽい。

relative_layout

他 View との相対位置指定 ex. android:layout_alignBottom="@id/image_yellow"

  • ALIGN_BASELINE
  • ALIGN_TOP
  • ALIGN_BOTTOM
  • ALIGN_LEFT
  • ALIGN_RIGHT
  • ALIGN_START
  • ALIGN_END
  • ABOVE
  • BELOW
  • LEFT_OF
  • RIGHT_OF
  • START_OF
  • END_OF
  • CENTER_HORIZONTAL
  • CENTER_VERTICAL

親 Viewとの相対位置指定 ex. android:layout_alignParentBottom="true"

  • ALIGN_PARENT_TOP
  • ALIGN_PARENT_BOTTOM
  • ALIGN_PARENT_LEFT
  • ALIGN_PARENT_RIGHT
  • ALIGN_PARENT_START
  • ALIGN_PARENT_END
  • CENTER_IN_PARENT

FrameLayout

定義

FrameLayout

こんな感じで View を重ねて表示したりできる。

frame_layout

TableLayout

定義

TableLayout

格子状に配置できるやつ。GridView でもできるけど表示個数固定ならこっちのが楽かも?
行ごとに TableRow を作成して配置する。

table_layout

実装はこんな感じ

LinearLayout のサブクラスなので下記のように境界線表示もできる。

GridLayout

定義

GridLayout

格子状に表示するやつ。TableLayout と違い行またぎの表示ができる。

grid_layout

  • android:columnCount
    列数指定
  • android:rowCount
    行数指定
  • android:columnOrderPreserved
    true/false 設定するみたいだけどちょっとわからない。。。
  • android:rowOrderPreserved
    同上。。。
  • android:orientation
    行数など指定していない場合はこの設定で縦横配置になる
  • android:useDefaultMargins
    デフォルトで要素間にマージンがあるのでこれを false にすると要素間のマージンがなくなる

各要素に下記を設定できる

  • android:layout_column
  • android:layout_row
  • android:layout_columnWeight
  • android:layout_rowWeight
  • android:layout_columnSpan
  • android:layout_rowSpan

columnSpanrowSpan で列またぎ行またぎ表示ができる。ex. android:layout_rowSpan="2" で2行またぎで表示。

上記のように設定するとこんな感じ

grid_layout_2

ConstraintLayout

定義

ConstraintLayout

RelativeLayout と同じように他の View と相対的な配置ができるやつ。RelativeLayout よりも柔軟な表現が可能! Guideline を組み合わせると複数の View のラインを合わせるのに便利。

constraint_layout

下記で指定の View を基準に上下左右の位置を設定できる ex. app:layout_constraintStart_toStartOf="@id/guideline_start"

位置

  • app:layout_constraintStart_toStartOf
  • app:layout_constraintStart_toEndOf
  • app:layout_constraintEnd_toEndOf
  • app:layout_constraintEnd_toStartOf
  • app:layout_constraintLeft_toLeftOf
  • app:layout_constraintLeft_toRightOf
  • app:layout_constraintRight_toRightOf
  • app:layout_constraintRight_toLeftOf
  • app:layout_constraintTop_toTopOf
  • app:layout_constraintTop_toBottomOf
  • app:layout_constraintBottom_toBottomOf
  • app:layout_constraintBottom_toTopOf
  • app:layout_constraintBaseline_toBaselineOf

こうやると中央表示になる

バイアス

0~1の範囲でバイアスを指定できる

  • app:layout_constraintHorizontal_bias
  • app:layout_constraintVertical_bias

下記のようにすると左側に30%バイアスがかかる。説明がむずかしいので参考 -> XMLで始めるConstraintLayout

マージン

制約対象の View が GONE の場合のマージンを設定できる

  • app:layout_goneMarginLeft
  • app:layout_goneMarginRight
  • app:layout_goneMarginStart
  • app:layout_goneMarginEnd
  • app:layout_goneMarginTop
  • app:layout_goneMarginBottom

角度指定

  • app:llayout_constraintCircle
  • app:llayout_constraintCircleRadius
  • app:llayout_constraintCircleAngle

下記のようにするとボタンAとボタンBの中心の距離が 100 dp で ボタンAの中心から 45 度の位置にボタンBの中心がくるような配置になる。(詳細はここ

サイズ

  • app:layout_constraintHeight_min
  • app:layout_constraintHeight_max
  • app:layout_constraintWidth_min
  • app:layout_constraintWidth_max
  • app:layout_constraintHeight_percent
  • app:layout_constraintWidth_percent

こいつはちょっと何かわからない。。。

  • app:layout_constrainedHeight
  • app:layout_constrainedWidth
  • app:layout_constraintHeight_default
  • app:layout_constraintWidth_default

比で指定

app:layout_constraintDimensionRatio
app:layout_constraintDimensionRatio="w,1:1" w, h で幅か高さを指定できる。

チェーン

これもまだよくわからないのでこれ参考 -> [Android] ConstraintLayout レイアウト逆引きまとめ

  • app:layout_constraintHorizontal_chainStyle
  • app:layout_constraintVertical_chainStyle

下記のスタイルがあるらしい

  • spread
  • spread_inside
  • packed

参考

さいごに

Layout の種類が豊富で迷う。大体は ConstraintLayoutLinearLayout でできそうな気がするけど GridLayout も便利そうな気がする。うーんわからん。。。

コメント

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