Android/レイアウト/Layoutなどの使い方

レイアウト種類

LinearLayout ・・レイアウトを横に並べる
FrameLayout ・・レイアウトを重ねる
RelativeLayout ・・上の２つの組み合わせを同時にできる

水平一直線

<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が下側からの距離

サンプル

４隅にボタン、中央にボタン、２段目にボタン

<?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);

参考

右上とか左下とか９分割とかの参考ページ

http://d.hatena.ne.jp/Korsakov/20110131/1296504108

Android/レイアウト/Layoutなどの使い方

目次

レイアウト種類

水平一直線

垂直一直線

絶対位置を指定

Linearでの配置

xmlレイアウトで分割

横に2分割

縦に2分割

レイアウトをコードで実行

横に2分割

縦に2分割

右下にボタン追加

他レイアウトに↑の"右下ボタン"をかぶせる場合

addViewをsetLayoutParams＆addViewに分ける

ConstraintLayout

サンプル

RelativeLayoutで中央中段表示

参考

案内メニュー

個人用ツール

名前空間

変種

表示

その他

検索

案内

プログラムメモ

サーバメモ

デザインメモ

サービスメモ

便利系メモ

クライアント

cmsメモ

その他

ページ内

ツール