アンドロイドのレイアウトは、LinearLayoutとRelativeLayoutがあります。

2年 ago
綾乃, 一希
9 minutes

このチュートリアルでは、Androidのレイアウトについて概要を説明します。また、Android LinearLayoutとAndroid RelativeLayoutという画面コンテンツを整理するための特定のレイアウトコントロールについても探求します。

アンドロイドレイアウト

ユーザーインターフェースの基本的な構成要素は、Viewクラスから作成されたViewオブジェクトであり、画面上の長方形の領域を占めます。TextView、Button、EditTextなどのUIコンポーネントの基本クラスがViewです。ViewGroupはViewのサブクラスです。1つまたは複数のViewは、ViewGroupにまとめることができます。ViewGroupは、ビューの表示順序や配置方法を提供するアンドロイドのレイアウトを提供します。LinearLayout、FrameLayout、RelativeLayoutなどがViewGroupの例です。

アンドロイドのレイアウトタイプ

Androidは次のViewGroupまたはレイアウトを提供しています。

    1. LinearLayout(リニアレイアウト): 子要素を縦または横の一方向に揃えるViewGroupです。

 

    1. RelativeLayout(相対レイアウト): 子ビューを相対的な位置に表示するViewGroupです。

 

    1. AbsoluteLayout(絶対レイアウト): 子ビューやウィジェットの正確な位置を指定することができるレイアウトです。

 

    1. TableLayout(テーブルレイアウト): 子ビューを行と列にグループ化するViewです。

 

    1. FrameLayout(フレームレイアウト): 画面上のプレースホルダーで、1つのビューを表示するために使用されます。

 

    1. ScrollView(スクロールビュー): 物理的なディスプレイよりも多くのスペースを占有するビューのリストをスクロールできる特殊なFrameLayoutです。通常はLinearLayoutである1つの子ビューまたはViewGroupを含むことができます。

 

    1. ListView(リストビュー): スクロール可能なアイテムのリストを表示するViewGroupです。

 

    GridView(グリッドビュー): 2次元のスクロール可能なグリッドでアイテムを表示するViewGroupです。グリッド内のアイテムは、このビューに関連付けられたListAdapterから取得されます。

このチュートリアルでは、私たちはAndroidで最もよく使用される2つのレイアウトに焦点を当てます。

    1. LinearLayout (リニアレイアウト)

 

    RelativeLayout (リレイティブレイアウト)

アンドロイドのレイアウト属性

    1. android:id：これはビューを一意に識別するIDです。

 

    1. android:layout_width：これはレイアウトの幅です。

 

    1. android:layout_height：これはレイアウトの高さです。

 

    1. android:layout_margin：これはビューの外側の余白です。例えば、android:marginLeft=20dpを指定すると、ビューは左から20dp後に配置されます。

 

    1. android:layout_padding：これはandroid:layout_marginと似ていますが、ビューの内側の余白を指定します。

 

    1. android:layout_gravity：これは子Viewがどのように配置されるかを指定します。

 

    1. android:layout_weight：これはレイアウト内の余分なスペースのうち、ビューに割り当てる割合を指定します。

 

    1. android:layout_x：これはレイアウトのx座標を指定します。

 

    android:layout_y：これはレイアウトのy座標を指定します。

android:layout_width=wrap_contentは、ビューがそのコンテンツに必要な寸法に合わせてサイズを調整するように指示します。android:layout_width=match_parentは、ビューが親ビューと同じ大きさになるように指示します。

表示識別

XMLタグの中でIDの構文は次のようになります。

  • The at-symbol (@) at the beginning of the string indicates that the XML parser should parse and expand the rest of the ID string and identify it as an ID resource
  • The plus-symbol (+) means that this is a new resource name that must be created and added to our resources

アンドロイドのLinearLayout

AndroidのLinearLayoutは、要素を一直線に配置します。android:orientationを使用して、その直線が垂直か水平かを指定することができます。デフォルトでは水平方向の配置です。垂直LinearLayoutは、行ごとに1つの子要素しか持たないため（つまり、単一要素の列です）、水平LinearLayoutは画面上に1つの単一の行の要素しか持ちません。android:layout_weight属性は、要素の重要性を表します。重みが大きい要素は、画面上のスペースをより多く占有します。以下にLinearLayoutを使用したサンプルレイアウトのXMLがあります：layout_linear.xml

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_margin="@dimen/activity_horizontal_margin">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 2"
        android:layout_width="wrap_content"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 3"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 4"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:text="Row 5"
        android:textSize="18sp"
        android:layout_margin="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/next_button"
            android:text="next"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6b"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6c"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <TextView
            android:text="Row 6d"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_gravity="center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

このレイアウトでは、親のLinearLayoutが垂直方向に配置され、ボタン、テキストビュー、ネストされたLinearLayout（水平方向に配置される）が子ビューとして含まれています。注意：ネストされたレイアウトは必ずしも同じタイプである必要はありません。たとえば、RelativeLayoutの子の1つとしてLinearLayoutを持つこともありますし、その逆もあります。

アンドロイドのRelativeLayout

AndroidのRelativeLayoutは、要素同士や親コンテナとの関係に基づいて要素の配置を行います。これは最も複雑なレイアウトの一つであり、実際に望むレイアウトを得るためにいくつかのプロパティが必要です。つまり、RelativeLayoutを使用することで、ビューを左側に配置したり、右側に配置したり、下に配置したり、上に配置したりすることができます。さらに、ビューを親要素に対して水平または垂直に中央揃えすることも、親RelativeLayoutのどのエッジにも合わせることもできます。子ビューにこれらの属性が指定されていない場合、デフォルトでビューは左上の位置にレンダリングされます。

AndroidのRelativeLayout属性

RelativeLayoutで使用される主な属性は次のとおりです。これらは3つの異なるカテゴリーに分かれます。

コンテナに対しての相対的な位置

  • android:layout_alignParentBottom : Places the bottom of the element on the bottom of the container
  • android:layout_alignParentLeft : Places the left of the element on the left side of the container
  • android:layout_alignParentRight : Places the right of the element on the right side of the container
  • android:layout_alignParentTop : Places the element at the top of the container
  • android:layout_centerHorizontal : Centers the element horizontally within its parent container
  • android:layout_centerInParent : Centers the element both horizontally and vertically within its container
  • android:layout_centerVertical : Centers the element vertically within its parent container

兄弟姉妹に関連して

  • android:layout_above : Places the element above the specified element
  • android:layout_below : Places the element below the specified element
  • android:layout_toLeftOf : Places the element to the left of the specified element
  • android:layout_toRightOf : Places the element to the right of the specified element

「@id/XXXXX」という記述は、要素をそのIDで参照するために使用されます。覚えておくべき一つの点は、要素が宣言される前に参照しようとするとエラーが発生するため、そのような場合には@+id/を使用する必要があります。

他の要素との整合性

  • android:layout_alignBaseline : Aligns baseline of the new element with the baseline of the specified element
  • android:layout_alignBottom : Aligns the bottom of new element in with the bottom of the specified element
  • android:layout_alignLeft : Aligns left edge of the new element with the left edge of the specified element
  • android:layout_alignRight : Aligns right edge of the new element with the right edge of the specified element
  • android:layout_alignTop : Places top of the new element in alignment with the top of the specified element

以下のXMLレイアウトはRelativeLayoutを使用しています：layout_relative.xml

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="https://schemas.android.com/apk/res/android">
    <Button
        android:id="@+id/backbutton"
        android:text="Back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/firstName"
        android:text="First Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/backbutton" />
    <TextView
        android:id="@+id/editFirstName"
        android:text="JournalDev"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_marginLeft="10dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/firstName"
        android:layout_below="@id/backbutton"/>
    <TextView
        android:id="@+id/editLastName"
        android:text="Layout Tutorial Example"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/lastName"
        android:layout_toRightOf="@+id/lastName"
        android:layout_toEndOf="@+id/lastName" />
    <TextView
        android:id="@+id/lastName"
        android:text="Last Name"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:layout_below="@+id/firstName"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginRight="10dp"
        android:layout_marginLeft="40dp"
        android:layout_marginStart="40dp" />

    <Button
        android:id="@+id/next"
        android:text="Next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/editLastName"
        android:layout_alignLeft="@+id/editLastName"
        android:layout_alignStart="@+id/editLastName"
        android:layout_marginTop="37dp" />
</RelativeLayout>

日本語で以下の文を一つのオプションで表現する：
相対的な位置に基づいて要素を並べ替えることができます。次のXMLレイアウトは、入れ子になったリニアレイアウトと相対レイアウトを持つカスタムレイアウトを表しています。layout_mixed.xml

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    xmlns:android="https://schemas.android.com/apk/res/android">

    <TextView
        android:id="@+id/parent_rl"
        android:text="Parent RelativeLayout"
        android:textSize="18sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/linearLayout"
        android:layout_below="@id/parent_rl"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true">

        <TextView
            android:text="Nested Horizontal"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:text="LL"
            android:textSize="18sp"
            android:layout_margin="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />


        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">

            <TextView
                android:text="Double Nested"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="Vertical"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:text="LL"
                android:textSize="18sp"
                android:layout_margin="10dp"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        </LinearLayout>


    </LinearLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/linearLayout">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceMedium"
        android:text="Nested Relative Layout"
        android:id="@+id/textView"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

        <Button
            android:id="@+id/back_button_pressed"
            android:text="back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/textView"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="66dp" />

    </RelativeLayout>


</RelativeLayout>

Androidのレイアウトプロジェクトの構造

このプロジェクトは、上述した3つの活動とそれに対応するレイアウトから成り立っています。

アンドロイドのレイアウトコード

アプリケーションはMainActivityに起動し、次のコードによってlayout_linear.xmlの内容を読み込みます。

package com.scdev.layouts;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {


    Button back,next;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_linear);
        back=(Button)findViewById(R.id.back_button);
        next=(Button)findViewById(R.id.next_button);

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(MainActivity.this,SecondActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });

    }

}

以下のように、SecondActivityおよびThirdActivityは、それぞれlayout_relative.xmlおよびlayout_mixed.xmlのレイアウトを読み込みます。

package com.scdev.layouts;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class SecondActivity extends Activity {
    Button back,next;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_relative);
        back=(Button)findViewById(R.id.backbutton);
        next=(Button)findViewById(R.id.next);

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(SecondActivity.this,ThirdActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });
        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(SecondActivity.this,MainActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });

    }
}

package com.scdev.layouts;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class ThirdActivity extends Activity {
    Button back;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_mixed);
        back=(Button)findViewById(R.id.back_button_pressed);

        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(ThirdActivity.this,SecondActivity.class);
                intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
                startActivity(intent);
            }
        });

    }
}

3つのレイアウトファイルのイメージ出力は以下のようになります：layout_linear.xml。画像で示されているように、親LinearLayoutは1つの垂直の列に6つの子要素からなります。そのうちの1つは、水平方向に4つのコンポーネントを含むネストされたLinearLayoutの子ビューです。layout_relative.xml。上の画像で示されている矢印は、兄弟要素が互いやコンテナに対してどのように配置されるかを示しています。layout_mixed.xml。このRelative Layoutには、Nested Horizontal LinearLayout内のVertical LinearLayoutと、Child RelativeLayoutが含まれています。なお、異なるレイアウトに属するコンポーネントは兄弟でなく、したがって互いに相対的な位置に配置することはできません。それらのコンテナレイアウトが兄弟であり、互いに相対的な位置に配置することができます。青い線で囲まれた長方形と矢印について疑問があるかもしれませんが、それはグラフィカルビューのxmlレイアウトからのイメージです。アプリを実行すると、これらの青い線や長方形は表示されません。これでAndroidのレイアウトチュートリアルは終了です。次のチュートリアルでは他のAndroidのレイアウトをカバーします。最終的なAndroidレイアウトプロジェクトは以下のリンクからダウンロードできます。

AndroidのLinearLayoutとRelativeLayoutのサンプルプロジェクトをダウンロードしてください。

参照: APIドキュメント

コメントを残す 0

Your email address will not be published. Required fields are marked *