アンドロイド - RelativeLayoutを使用する方法

By JS | Last updated: September 03, 2017

androidbasic

RelativeLayout

RelativeLayoutは親(Parent)Viewまたは子(Child)Viewの相対的な位置関係を定義してUIを配置するLayoutです。

LinearLayoutは、水平または垂直方向にViewが順番に配置されたがRelativeLayoutは、オブジェクト間の相対的な位置関係を定義していないとの配置がされていません。

今回のチュートリアルでは、RelativeLayoutの基本的な内容について説明します。

プロジェクトを作成する

[File] >> [New] >> [New Project]でEmpty Activityを選択し、新しいプロジェクトを作成してください。

プロジェクトを作成すると、自動的に MainActivity.javaとactivity_main.xmlファイルが生成されます。 MainActivity.javaコードを見ると、activity_main.xmlにUI Layoutを定義するコードが入力されています。

の位置関係を定義していない場合、

RelativeLayoutは、オブジェクトの相対的な位置関係を定義する必要があります。相対的な位置を定義していない場合、デフォルトで、横軸は、親の左、縦軸は、親の上に定義がされます。

例を通じて説明します。次のコードを /res/layout/activity_main.xmlに入力し、結果を確認してください。

RelativeLayoutオブジェクトはTextViewオブジェクトの2つが含まれています。そして相対的な位置は、何も定義されていません。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:layout_width="200dp"
        android:layout_height="30dp"
        android:text="TextView01"
        android:background="#80cbc4"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="200dp"
        android:text="TextView02"
        android:gravity="center"
        android:background="#e0e0e0"/>

</RelativeLayout>

結果を見ると、TextView01上TextView02が積まれている形で配置がされた。

RelativeLayoutは相対的な位置が定義されていない場合、横軸は、親左、縦軸は親上向きに設定されます。だから二つのViewがすべて左と上に配置されました。

そしてRelativeLayoutは、Viewの位置を決めるとき、XMLコードの上から下の順序で指定します。だから最初に定義されたTextView01が最初に配置され、その後ろにTextView02が配置されてTextView01の一部が隠れています。

relativelayout

親(上位)オブジェクトに相対的な位置

親オブジェクトとの相対的な位置を関係を定義して、子オブジェクトの位置を定めることができます。たとえば、親の左上に配置、親の中央に配置、親の右下に配置などのように親を基準に子Viewの位置を定義することができます。

下の属性を使用して、親オブジェクトに相対的な位置関係を定義することができます。

XML attributes
layout_alignParentTop 親の上にオブジェクトを配置
layout_alignParentBottom 親の下にオブジェクトを配置
layout_alignParentRight 親の右側にオブジェクトを配置
layout_alignParentLeft 親の左側にオブジェクトを配置
layout_centerHorizontal 親の横軸の中央にオブジェクトを配置
layout_centerVertical 親の縦軸の中央にオブジェクトを配置
layout_centerInParent 親の縦、横軸の中央にオブジェクトを配置

例として詳しく説明します。次のコードを入力し、結果を確認してください。

RelativeLayoutは9つのTextViewが含まれており、各オブジェクトは、親の相対的な位置が2つずつ定義されています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView01"
        android:background="#80cbc4"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView02"
        android:background="#e0e0e0"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView03"
        android:background="#ababab"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView04"
        android:background="#a1887f"
        android:layout_centerVertical="true"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView05"
        android:background="#ff8a65"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView06"
        android:background="#81c784"
        android:layout_centerVertical="true"
        android:layout_alignParentRight="true"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView07"
        android:background="#29b6f6"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView08"
        android:background="#5c6bc0"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="TextView09"
        android:background="#f06292"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"/>

</RelativeLayout>

下の図は、AndroidスタジオのPreview画面です。点線と矢印があり、オブジェクトがうまく配置されていることを確認するお勧めします。

TextView01は layout_alignParentTopとlayout_alignParentLeftがtrueに設定されました。 alignParentTopは親の上部に配置させろという意味であり、alighParentLeftは親の左側に配置させろという意味です。だから、親の左上に配置されました。

TextView02は layout_alignParentTopとlayout_centerHorizontalがtrueに設定されました。親の上部と横軸の中央に配置させろという意味です。

TextView03の場合 layout_alignParentTopとlayout_alignParentRightがtrueに設定されました。親の上部と右側に配置させろという意味です。

TextView04、...、TextView09も親の相対的な位置に配置するように設定しました。

relativelayout

子(サブ)オブジェクトに相対的な位置

親だけでなく、子オブジェクトとの間の相対的な位置を定義することができます。

下の属性を使用して、子オブジェクトに相対的な位置関係を定義することができます。

XML attributes
layout_above いくつかの子オブジェクトの上に配置
layout_below いくつかの子オブジェクトの下部に配置
layout_toRightOf いくつかの子オブジェクトの右側に配置
layout_toLeftOf いくつかの子オブジェクトの左側に配置

例として詳しく説明します。次のコードを入力し、結果を確認してください。

RelativeLayoutオブジェクトは、4つのTextViewオブジェクトが含まれています。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView01"
        android:gravity="center"
        android:background="#80cbc4"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

    <TextView
        android:id="@+id/tv02"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView02"
        android:gravity="center"
        android:background="#ababab"
        android:layout_toRightOf="@id/tv01"
        android:layout_below="@id/tv01"/>

    <TextView
        android:id="@+id/tv03"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView03"
        android:gravity="center"
        android:background="#ff8a65"
        android:layout_toRightOf="@id/tv02"
        android:layout_above="@id/tv02"/>

    <TextView
        android:id="@+id/tv04"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView04"
        android:gravity="center"
        android:background="#29b6f6"
        android:layout_toLeftOf="@id/tv03"
        android:layout_below="@id/tv02"/>

</RelativeLayout>

TextView01は親の左上に配置しました。そして id="@+id/tv01"にidを設定しました。 idは、Layoutで一意であること、オブジェクトを識別することができます。 idは id="@+id/name"で宣言して使用するときは @id/nameで +を抜いて使用します。

TextView02はidを tv02に宣言し、layout_toRightOf="@id/tv01", layout_below="@id/tv01"のプロパティを設定しました。 layout_toRightOfはどのオブジェクトの右側に配置さという意味であり、layout_belowはどのオブジェクトの下部に配置するという意味です。したがって、TextView02はidがtv01あるオブジェクトの右側と下側に配置させるという意味です。結果を見ればTextView01の右側と下側に配置されました。

TextView03はidを tv03に宣言し、相対的な位置は、idがtv02あるオブジェクトの右と上に配置するように設定しました。結果を見ればTextView02の右上に配置されました。

TextView04の場合tv03の左、tv02の下部に配置するように設定しました。結果を見れば設定通りに配置されている。

relativelayout

親と子オブジェクトに相対的な位置

親の相対的な位置と、子オブジェクトの相対的な位置を一緒に適用することもできます。

例で確認してみましょう。次のコードを入力し、結果を確認してください。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView01"
        android:gravity="center"
        android:background="#80cbc4"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true" />

    <TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:text="TextView02"
        android:gravity="center"
        android:background="#80cb00"
        android:layout_toRightOf="@id/tv01"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="100dp"
        android:text="TextView03"
        android:gravity="center"
        android:background="#80cb00"
        android:layout_below="@id/tv01"/>

    <TextView
        android:id="@+id/tv04"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView04"
        android:gravity="center"
        android:background="#ff8a65"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:text="TextView05"
        android:gravity="center"
        android:background="#ababab"
        android:layout_toRightOf="@id/tv04"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="100dp"
        android:text="TextView06"
        android:gravity="center"
        android:background="#ababab"
        android:layout_below="@id/tv04"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:text="TextView07"
        android:gravity="center"
        android:background="#29b6f6"
        android:layout_toRightOf="@id/tv04"
        android:layout_centerVertical="true"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="100dp"
        android:text="TextView08"
        android:gravity="center"
        android:background="#29b6f6"
        android:layout_below="@id/tv04"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

TextView01(tv01)は、親の左上に配置しました。 TextView02はtv01の右、TextView03はtv01の下部に配置されました。

TextView04(tv04)は、親の真ん中に配置しました。 TextView05はtv04の右側に配置さており、TextView06はtv05の下族に配置しました。結果を見ると、以前のようにText04にTextView05、06がついていないですね。その理由は、相対的な位置を1つだけ定義したため、横軸と縦軸が基本的に親の左、上に自動的に設定されてチェムンです。

TextView07はtv4の右、そして親の縦軸の中央に配置するように設定しました。結果を見ると、TextView04のすぐ隣に付くようになりました。

TextView08はtv4の下、そして親の横軸の中央に配置するように設定しました。結果を見ると、TextView04すぐ下に付くように設定しました。

relativelayout

ラインの並べ替えして配置

前の例ではTextView07はTextView04の右側中央に配置されました。もしTextView04の上部ラインに合わせて配置をしたい場合があります。

下の属性を使用してオブジェクトを同じラインに配置して配置することができます。

XML attributes
layout_alignTop オブジェクトを一番上の行に配置して配置
layout_alignBottom オブジェクトを一番下の行に配置して配置
layout_alignLeft オブジェクトを左ラインに整列して配置
layout_alignRight オブジェクトを右ラインに整列して配置

layout_alignTop、layout_alignLeft、 layout_alignRight、layout_alignBottom属性は、オブジェクトの任意の行を別のオブジェクトの同じラインに合わせて配置することができるように支援します。

例として詳しく説明します。次のコードを入力し、結果を確認してください。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView01"
        android:gravity="center"
        android:background="#ff8a65"
        android:layout_centerInParent="true"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:text="TextView02"
        android:gravity="center"
        android:background="#29b6f6"
        android:layout_toRightOf="@id/tv01"
        android:layout_centerVertical="true"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="100dp"
        android:text="TextView03"
        android:gravity="center"
        android:background="#29b6f6"
        android:layout_below="@id/tv01"
        android:layout_centerHorizontal="true"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:text="TextView04"
        android:gravity="center"
        android:background="#ababab"
        android:layout_alignTop="@id/tv01"
        android:layout_toRightOf="@id/tv01"/>

    <TextView
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:text="TextView05"
        android:gravity="center"
        android:background="#ababab"
        android:layout_alignBottom="@id/tv01"
        android:layout_toRightOf="@id/tv01"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="100dp"
        android:text="TextView06"
        android:gravity="center"
        android:background="#ababab"
        android:layout_alignLeft="@id/tv01"
        android:layout_below="@id/tv01"/>

    <TextView
        android:layout_width="30dp"
        android:layout_height="100dp"
        android:text="TextView07"
        android:gravity="center"
        android:background="#ababab"
        android:layout_alignRight="@id/tv01"
        android:layout_below="@id/tv01"/>
</RelativeLayout>

TextView01は layout_centerInParentをtrueに設定しました。 layout_centerInParentはlayout_centerVerticalとlayout_centerHorizontalの両方を適用する属性です。

TextView02とTextView03は、前の例と同じように配置しました。

TextView04は layout_alignTop="@id/tv01"を設定して、tv01の一番上の行と、自分の一番上の行を合わせて配置するように設定しました。結果を見ると、TextView04の一番上の行とTextView01の一番上の行がソートされて配置されたことを見ることができます。

TextView05は layout_alignBottom="@id/tv01"を設定して、tv01の一番下の行と、自分の一番下の行を合わせて配置するように設定しました。

TextView06は layout_alignLeft="@id/tv01"を設定して、tv01の左ラインと自分の左ラインを合わせて配置するように設定しました。

TextView06は layout_alignRight="@id/tv01"を設定して、tv01の右ラインと自分の右のラインを合わせて配置するように設定しました。

relativelayout

Baseline(ベースライン)に合わせて配置

文字列からBaselineとは、下の図のように基準となる線を指します。

relativelayout

layout_alignBaseline属性は、オブジェクトを他のオブジェクトのbaselineに整列して配置することができるようになります。

例として詳しく説明します。次のコードを入力し、結果を確認してください。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.codestudio.myapplication.MainActivity">

    <TextView
        android:id="@+id/tv01"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="TextView01"
        android:gravity="center"
        android:background="#ff8a65"
        android:layout_centerInParent="true"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView02"
        android:textSize="15sp"
        android:background="#29b6f6"
        android:layout_toLeftOf="@id/tv01"
        android:layout_alignBaseline="@id/tv01"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView03"
        android:background="#29b6f6"
        android:textSize="20sp"
        android:layout_toRightOf="@id/tv01"
        android:layout_alignBaseline="@id/tv01"/>

</RelativeLayout>

TextView01は親の中央に配置され、TextView02とTextView03は layout_alignBaseline="@id/tv01"に設定された。結果を見ると、3つのオブジェクトのbaselineが同一線上に配置されて配置されたことを見ることができます。

relativelayout

まとめ

RelativeLayoutについて簡単に調べ見UI Layoutを定義する方法を説明しました。

チュートリアルで使用したコードは、GitHub：Layout基本属性で確認することができます。

参考

android

Related Posts

codechachaCopyright ©2019 codechacha