facebook twitter hatena line email

「Android/レイアウト/Layoutなどの使い方」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内、 検索
(→‎参考)
(→‎ConstraintLayout)
 
(同じ利用者による、間の9版が非表示)
行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 previewよりConstraintLayoutが追加された
+
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が下側からの距離
 +
 +
===サンプル===
 +
４隅にボタン、中央にボタン、２段目にボタン
 +
<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);
  
 
==参考==
 
==参考==

2020年11月19日 (木) 15:29時点における最新版

レイアウト種類

  • 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

「http://wiki.nonip.net/index.php?title=Android/レイアウト/Layoutなどの使い方&oldid=12309」から取得