「Android/レイアウト/Layoutなどの使い方」の版間の差分
提供: 初心者エンジニアの簡易メモ
細 (Admin がページ「Android/レイアウト/LinearLayoutなどの使い方」を「Android/レイアウト/Layoutなどの使い方」に、リダイレクトを残さずに移動しました) |
(→ConstraintLayout) |
||
(同じ利用者による、間の10版が非表示) | |||
行43: | 行43: | ||
す。 | す。 | ||
+ | ==xmlレイアウトで分割== | ||
+ | ===横に2分割=== | ||
+ | activity_main.xml | ||
+ | <pre> | ||
+ | <LinearLayout | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="match_parent" | ||
+ | android:id="@+id/ll" | ||
+ | android:orientation="horizontal"> | ||
+ | <TextView | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:text="1111" | ||
+ | android:layout_weight="1" | ||
+ | /> | ||
+ | <TextView | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:text="2222" | ||
+ | android:layout_weight="1" | ||
+ | /> | ||
+ | </LinearLayout> | ||
+ | </pre> | ||
+ | ===縦に2分割=== | ||
+ | activity_main.xml | ||
+ | <pre> | ||
+ | <LinearLayout | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="match_parent" | ||
+ | android:id="@+id/ll" | ||
+ | android:orientation="vertical"> | ||
+ | <TextView | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:text="1111" | ||
+ | android:layout_weight="1" | ||
+ | /> | ||
+ | <TextView | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:text="2222" | ||
+ | android:layout_weight="1" | ||
+ | /> | ||
+ | </LinearLayout> | ||
+ | </pre> | ||
+ | ==レイアウトをコードで実行== | ||
+ | activity_main.xml | ||
+ | <pre> | ||
+ | <LinearLayout | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="match_parent" | ||
+ | android:id="@+id/ll" | ||
+ | android:orientation="vertical"> | ||
+ | </pre> | ||
+ | ===横に2分割=== | ||
+ | MainActivity.java | ||
+ | <pre> | ||
+ | LinearLayout ll = findViewById(R.id.ll); | ||
+ | ll.setOrientation(LinearLayout.HORIZONTAL); | ||
+ | TextView text = new TextView(getApplicationContext()); | ||
+ | text.setText("1111"); | ||
+ | LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( | ||
+ | ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); | ||
+ | params.weight = 1.0f; | ||
+ | text.setLayoutParams(params); | ||
+ | ll.addView(text); | ||
+ | TextView text2 = new TextView(getApplicationContext()); | ||
+ | text2.setText("2222"); | ||
+ | text2.setLayoutParams(params); | ||
+ | ll.addView(text2); | ||
+ | </pre> | ||
+ | ===縦に2分割=== | ||
+ | MainActivity.java | ||
+ | <pre> | ||
+ | LinearLayout ll = findViewById(R.id.ll); | ||
+ | ll.setOrientation(LinearLayout.VERTICAL); | ||
+ | TextView text = new TextView(getApplicationContext()); | ||
+ | text.setText("1111"); | ||
+ | LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( | ||
+ | ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); | ||
+ | params.weight = 1.0f; | ||
+ | text.setLayoutParams(params); | ||
+ | ll.addView(text); | ||
+ | TextView text2 = new TextView(getApplicationContext()); | ||
+ | text2.setText("2222"); | ||
+ | text2.setLayoutParams(params); | ||
+ | ll.addView(text2); | ||
+ | </pre> | ||
+ | |||
+ | |||
+ | ===右下にボタン追加=== | ||
+ | |||
+ | int WC = ViewGroup.LayoutParams.WRAP_CONTENT; | ||
+ | int MP = ViewGroup.LayoutParams.MATCH_PARENT; | ||
+ | RelativeLayout btnLayout = new RelativeLayout(mContext); | ||
+ | btnLayout.setLayoutParams(new RelativeLayout.LayoutParams(MP, MP)); | ||
+ | RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC); | ||
+ | lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); | ||
+ | lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); | ||
+ | Button button = new Button(this); | ||
+ | playButton.setText("play"); | ||
+ | btnLayout.addView(playButton, lp); | ||
+ | addView(btnLayout); | ||
+ | |||
+ | ===他レイアウトに↑の"右下ボタン"をかぶせる場合=== | ||
+ | FrameLayout frameLayout = new FrameLayout(this); | ||
+ | setContentView(frameLayout); | ||
+ | frameLayout.addView(otherLayout); | ||
+ | // 上の項目のコードをここへ入れる | ||
+ | - addView(btnLayout | ||
+ | + frameLayout.addView(btnLayout); // ここを切り替える | ||
+ | |||
+ | 後にaddViewしたものがz軸は手前表示となる | ||
+ | |||
+ | ===addViewをsetLayoutParams&addViewに分ける=== | ||
+ | RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC); | ||
+ | btnLayout.addView(playButton, lp); | ||
+ | ↓ | ||
+ | RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC); | ||
+ | playButton.setLayoutParams(lp); | ||
+ | btnLayout.addView(playButton); | ||
+ | 同じ意味になる | ||
==ConstraintLayout== | ==ConstraintLayout== | ||
− | Android Studio 2.2 | + | GoogleI/O 2016で登場。 |
+ | |||
+ | Android Studio 2.2 previewよりConstraintLayoutが追加された。 | ||
+ | |||
+ | 自動的にレイアウトの位置をマテリアルデザインに沿った位置に調整してくれるよう。 | ||
https://qiita.com/tomoima525/items/0584be581a0d3a4db8c5 | https://qiita.com/tomoima525/items/0584be581a0d3a4db8c5 | ||
+ | |||
+ | * layout_marginTopが上側からの距離 | ||
+ | * layout_marginStartが左側からの距離 | ||
+ | * layout_marginEndが右側からの距離 | ||
+ | * layout_marginBottomが下側からの距離 | ||
+ | |||
+ | ===サンプル=== | ||
+ | 4隅にボタン、中央にボタン、2段目にボタン | ||
+ | <pre> | ||
+ | <?xml version="1.0" encoding="utf-8"?> | ||
+ | <androidx.constraintlayout.widget.ConstraintLayout | ||
+ | xmlns:android="http://schemas.android.com/apk/res/android" | ||
+ | xmlns:app="http://schemas.android.com/apk/res-auto" | ||
+ | xmlns:tools="http://schemas.android.com/tools" | ||
+ | android:layout_width="match_parent" | ||
+ | android:layout_height="match_parent"> | ||
+ | |||
+ | <Button | ||
+ | android:text="ButtonLeftUp" | ||
+ | android:layout_width="wrap_content" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:id="@+id/button" | ||
+ | android:layout_marginTop="16dp" | ||
+ | android:layout_marginStart="16dp" | ||
+ | app:layout_constraintTop_toTopOf="parent" | ||
+ | app:layout_constraintLeft_toLeftOf="parent" /> | ||
+ | |||
+ | <Button | ||
+ | android:text="ButtonRightUp" | ||
+ | android:layout_width="wrap_content" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:id="@+id/button2" | ||
+ | android:layout_marginTop="16dp" | ||
+ | android:layout_marginEnd="16dp" | ||
+ | app:layout_constraintTop_toTopOf="parent" | ||
+ | app:layout_constraintRight_toRightOf="parent" /> | ||
+ | |||
+ | <Button | ||
+ | android:text="ButtonLeftDown" | ||
+ | android:layout_width="wrap_content" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:id="@+id/button3" | ||
+ | app:layout_constraintBottom_toBottomOf="parent" | ||
+ | android:layout_marginBottom="16dp" | ||
+ | android:layout_marginStart="16dp" | ||
+ | app:layout_constraintLeft_toLeftOf="parent" /> | ||
+ | |||
+ | <Button | ||
+ | android:text="ButtonRightDown" | ||
+ | android:layout_width="wrap_content" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:id="@+id/button4" | ||
+ | android:layout_marginBottom="16dp" | ||
+ | android:layout_marginEnd="16dp" | ||
+ | app:layout_constraintBottom_toBottomOf="parent" | ||
+ | app:layout_constraintRight_toRightOf="parent" /> | ||
+ | |||
+ | <Button | ||
+ | android:text="ButtonMiddleCenter" | ||
+ | android:layout_width="wrap_content" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:id="@+id/button5" | ||
+ | android:layout_marginTop="16dp" | ||
+ | android:layout_marginStart="16dp" | ||
+ | android:layout_marginBottom="16dp" | ||
+ | android:layout_marginEnd="16dp" | ||
+ | app:layout_constraintRight_toRightOf="parent" | ||
+ | app:layout_constraintTop_toTopOf="parent" | ||
+ | app:layout_constraintBottom_toBottomOf="parent" | ||
+ | app:layout_constraintLeft_toLeftOf="parent" /> | ||
+ | |||
+ | <Button | ||
+ | android:text="ButtonUpCenter" | ||
+ | android:layout_width="0dp" | ||
+ | android:layout_height="wrap_content" | ||
+ | android:id="@+id/button6" | ||
+ | app:layout_constraintRight_toLeftOf="@+id/button2" | ||
+ | android:layout_marginEnd="8dp" | ||
+ | android:layout_marginStart="8dp" | ||
+ | app:layout_constraintLeft_toRightOf="@+id/button" | ||
+ | android:layout_marginTop="8dp" | ||
+ | app:layout_constraintTop_toBottomOf="@+id/button" /> | ||
+ | |||
+ | <TextView | ||
+ | android:text="TextView" | ||
+ | android:layout_width="0dp" | ||
+ | android:layout_height="0dp" | ||
+ | android:background="@android:color/background_dark" | ||
+ | android:id="@+id/textView2" | ||
+ | app:layout_constraintBottom_toTopOf="@+id/button4" | ||
+ | android:layout_marginBottom="8dp" | ||
+ | android:layout_marginStart="8dp" | ||
+ | app:layout_constraintLeft_toRightOf="@+id/button5" | ||
+ | app:layout_constraintTop_toTopOf="@+id/button5" | ||
+ | android:layout_marginEnd="16dp" | ||
+ | app:layout_constraintRight_toRightOf="parent" /> | ||
+ | </androidx.constraintlayout.widget.ConstraintLayout> | ||
+ | </pre> | ||
+ | 参考:https://techium.hatenablog.com/entry/2016/09/01/022115 | ||
+ | |||
+ | ==RelativeLayoutで中央中段表示== | ||
+ | RelativeLayout relativeLayout = new RelativeLayout(mActivity); | ||
+ | RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); | ||
+ | params.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); | ||
+ | relativeLayout.setLayoutParams(params); | ||
+ | relativeLayout.setGravity(Gravity.CENTER); | ||
==参考== | ==参考== | ||
+ | 右上とか左下とか9分割とかの参考ページ | ||
+ | |||
http://d.hatena.ne.jp/Korsakov/20110131/1296504108 | http://d.hatena.ne.jp/Korsakov/20110131/1296504108 |
2020年11月19日 (木) 15:29時点における最新版
目次
レイアウト種類
- LinearLayout ・・レイアウトを横に並べる
- FrameLayout ・・レイアウトを重ねる
- RelativeLayout ・・上の2つの組み合わせを同時にできる
水平一直線
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" >
垂直一直線
<LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" >
絶対位置を指定
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal"
Linearでの配置
android:gravity="right" android:gravity=”bottom”
top コンテナの上部に配置 bottom コンテナの下部に配置 right コンテナの左側に配置 left コンテナの右側に配置 fill オブジェクトの高さ・幅を、コンテナのサイズに合わせる。 fill_vertical オブジェクトの高さをコンテナのサイズに合わせる。 fill_horizontal オブジェクトの幅をコンテナのサイズに合わせる。 center オブジェクトを中央に配置する。サイズ変更無し。 center_vertical オブジェクトを上下中央に配置しする。サイズ変更無し。 center_horizontal オブジェクトを左右中央に配置する。サイズ変更無し。 clip_vertical top/bottomの追加オプションとして、オブジェクトの上部/下部の境界をコンテナの境界に合わせます。 clip_horizontal left/rightの追加オプションとして、オブジェクトの左側/右側の境界をコンテナの境界に合わせま
す。
xmlレイアウトで分割
横に2分割
activity_main.xml
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/ll" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="1111" android:layout_weight="1" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="2222" android:layout_weight="1" /> </LinearLayout>
縦に2分割
activity_main.xml
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/ll" android:orientation="vertical"> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="1111" android:layout_weight="1" /> <TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="2222" android:layout_weight="1" /> </LinearLayout>
レイアウトをコードで実行
activity_main.xml
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/ll" android:orientation="vertical">
横に2分割
MainActivity.java
LinearLayout ll = findViewById(R.id.ll); ll.setOrientation(LinearLayout.HORIZONTAL); TextView text = new TextView(getApplicationContext()); text.setText("1111"); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.weight = 1.0f; text.setLayoutParams(params); ll.addView(text); TextView text2 = new TextView(getApplicationContext()); text2.setText("2222"); text2.setLayoutParams(params); ll.addView(text2);
縦に2分割
MainActivity.java
LinearLayout ll = findViewById(R.id.ll); ll.setOrientation(LinearLayout.VERTICAL); TextView text = new TextView(getApplicationContext()); text.setText("1111"); LinearLayout.LayoutParams params = new LinearLayout.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); params.weight = 1.0f; text.setLayoutParams(params); ll.addView(text); TextView text2 = new TextView(getApplicationContext()); text2.setText("2222"); text2.setLayoutParams(params); ll.addView(text2);
右下にボタン追加
int WC = ViewGroup.LayoutParams.WRAP_CONTENT; int MP = ViewGroup.LayoutParams.MATCH_PARENT; RelativeLayout btnLayout = new RelativeLayout(mContext); btnLayout.setLayoutParams(new RelativeLayout.LayoutParams(MP, MP)); RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC); lp.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); lp.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM); Button button = new Button(this); playButton.setText("play"); btnLayout.addView(playButton, lp); addView(btnLayout);
他レイアウトに↑の"右下ボタン"をかぶせる場合
FrameLayout frameLayout = new FrameLayout(this); setContentView(frameLayout); frameLayout.addView(otherLayout); // 上の項目のコードをここへ入れる - addView(btnLayout + frameLayout.addView(btnLayout); // ここを切り替える
後にaddViewしたものがz軸は手前表示となる
addViewをsetLayoutParams&addViewに分ける
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC); btnLayout.addView(playButton, lp);
↓
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(WC, WC); playButton.setLayoutParams(lp); btnLayout.addView(playButton);
同じ意味になる
ConstraintLayout
GoogleI/O 2016で登場。
Android Studio 2.2 previewよりConstraintLayoutが追加された。
自動的にレイアウトの位置をマテリアルデザインに沿った位置に調整してくれるよう。
https://qiita.com/tomoima525/items/0584be581a0d3a4db8c5
- layout_marginTopが上側からの距離
- layout_marginStartが左側からの距離
- layout_marginEndが右側からの距離
- layout_marginBottomが下側からの距離
サンプル
4隅にボタン、中央にボタン、2段目にボタン
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:text="ButtonLeftUp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button" android:layout_marginTop="16dp" android:layout_marginStart="16dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintLeft_toLeftOf="parent" /> <Button android:text="ButtonRightUp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button2" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" app:layout_constraintTop_toTopOf="parent" app:layout_constraintRight_toRightOf="parent" /> <Button android:text="ButtonLeftDown" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button3" app:layout_constraintBottom_toBottomOf="parent" android:layout_marginBottom="16dp" android:layout_marginStart="16dp" app:layout_constraintLeft_toLeftOf="parent" /> <Button android:text="ButtonRightDown" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button4" android:layout_marginBottom="16dp" android:layout_marginEnd="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintRight_toRightOf="parent" /> <Button android:text="ButtonMiddleCenter" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/button5" android:layout_marginTop="16dp" android:layout_marginStart="16dp" android:layout_marginBottom="16dp" android:layout_marginEnd="16dp" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" /> <Button android:text="ButtonUpCenter" android:layout_width="0dp" android:layout_height="wrap_content" android:id="@+id/button6" app:layout_constraintRight_toLeftOf="@+id/button2" android:layout_marginEnd="8dp" android:layout_marginStart="8dp" app:layout_constraintLeft_toRightOf="@+id/button" android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/button" /> <TextView android:text="TextView" android:layout_width="0dp" android:layout_height="0dp" android:background="@android:color/background_dark" android:id="@+id/textView2" app:layout_constraintBottom_toTopOf="@+id/button4" android:layout_marginBottom="8dp" android:layout_marginStart="8dp" app:layout_constraintLeft_toRightOf="@+id/button5" app:layout_constraintTop_toTopOf="@+id/button5" android:layout_marginEnd="16dp" app:layout_constraintRight_toRightOf="parent" /> </androidx.constraintlayout.widget.ConstraintLayout>
参考:https://techium.hatenablog.com/entry/2016/09/01/022115
RelativeLayoutで中央中段表示
RelativeLayout relativeLayout = new RelativeLayout(mActivity); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); params.addRule(RelativeLayout.CENTER_IN_PARENT, RelativeLayout.TRUE); relativeLayout.setLayoutParams(params); relativeLayout.setGravity(Gravity.CENTER);
参考
右上とか左下とか9分割とかの参考ページ