<HOME

複数のViewを組み合わせたLayoutを作成する30分


複数のViewを表示するために、ViewGroupおよびViewGroupを継承した○○LayoutというAPIが用意されています。

Layoutを使用して画面にTextViewやImageViewを組み合わせた画面を表示してみましょう。

  1. 「LayoutTraining」アプリを作成します。

    1. Android Studioを起動し、新規プロジェクトを作成します。

      「Welcome to Android Studio」画面の場合は、「Start a new Android Studio project」をクリックします。

      別のプロジェクトが開いている場合は、ツールバーから「File」→「New」→「New Project...」をクリックします。

    2. HelloWorldの時と同じようにプロジェクトを作成していきます。

      アプリ名は「LayoutTraining」としてください。

      今回は「Backwards Compatibility (AppCompat)」のチェックは外しておきます。

  2. FrameLayoutを使用してみましょう。

    1. FrameLayoutは、基本的に1つのViewを表示することを前提としたLayoutです。

      ただし、複数の子Viewを追加して、重ねて表示することも可能です。

      各Viewの表示位置はgravityを指定することで調整できます。

      上に上に(前面に、という意味です)Viewを重ねていくようなLayoutを作りたい場合に利用しやすいLayoutです。


      詳細についてはリファレンスに記載されています。

      FrameLayout is designed to block out an area on the screen to display a single item. Generally, FrameLayout should be used to hold a single child view, because it can be difficult to organize child views in a way that's scalable to different screen sizes without the children overlapping each other. You can, however, add multiple children to a FrameLayout and control their position within the FrameLayout by assigning gravity to each child, using the android:layout_gravity attribute.

      Child views are drawn in a stack, with the most recently added child on top. The size of the FrameLayout is the size of its largest child (plus padding), visible or not (if the FrameLayout's parent permits). Views that are GONE are used for sizing only if setConsiderGoneChildrenWhenMeasuring() is set to true.
    2. 「activity_main.xml」を以下のように編集します。

      ImageViewとTextViewの内容は、各項で学習した内容やリファレンス、一般サイトの情報を参考に適宜変更してください。

      サンプル : activity_main.xml

      コードを表示するにはJavaScriptを有効にしてください

    3. 「Design」タブを選択して、アプリ上で実行した際のレイアウトイメージを確認してみましょう。

      左側に実際の見た目のイメージを、右側に各Viewの領域を示してくれています。

      「Component Tree」でViewを選択すると、それぞれの対応範囲を示してくれます。

      FrameLayoutに追加した各Viewが、重なってレイアウトされているのがわかります。

    4. TextViewの表示位置を変えてみましょう。

      TextViewに属性「android:layout_gravity」を追加して、値に「bottom」を指定します。

      「gravity」ではなく「layout_gravity」です。

      「gravity」はView内の要素(TextViewならテキスト)の表示位置、

      「layout_gravity」はViewそのもののレイアウト上の位置に作用します。

      コードを表示するにはJavaScriptを有効にしてください

    5. 「Design」タブを選択して、アプリ上で実行した際のレイアウトイメージを確認してみましょう。

      TextViewが、レイアウトの最下部に表示されているのがわかります。

  3. LinearLayoutを使用してみましょう。

    1. LinearLayoutは、複数のViewを1列に並べたLayoutを作りたい場合に利用しやすいLayoutです。


      詳細についてはリファレンスに記載されています。

      A layout that arranges other views either horizontally in a single column or vertically in a single row.
    2. 「activity_main.xml」を以下のように編集します。

      ImageViewとTextViewの内容は、各項で学習した内容やリファレンス、一般サイトの情報を参考に適宜変更してください。

      サンプル : activity_main.xml

      コードを表示するにはJavaScriptを有効にしてください

      • 次の記述について説明します。

        コードを表示するにはJavaScriptを有効にしてください

        表示方向を示しています。

        LinearLayoutに配置したいViewを水平方向に並べたい場合は「horizontal」、垂直に並べたい場合は「vertical」を指定します。

      • 次の記述について説明します。

        コードを表示するにはJavaScriptを有効にしてください

        子Viewの配置位置を「水平方向の中央寄せ」としています。

    3. 「Design」タブを選択して、アプリ上で実行した際のレイアウトイメージを確認してみましょう。

      LinearLayoutに追加した各Viewが、上から順に垂直方向に並べてレイアウトされているのがわかります。

    4. 続いて水平方向に並べてみましょう。

      コードを表示するにはJavaScriptを有効にしてください

    5. 「Design」タブを選択して、アプリ上で実行した際のレイアウトイメージを確認してみましょう。

    6. 続いて、途中のViewをできるだけめいっぱい広げてみます。

      「activity_main.xml」を以下のように編集します。

      サンプル : activity_main.xml

      コードを表示するにはJavaScriptを有効にしてください

      • 次の記述について説明します。

        コードを表示するにはJavaScriptを有効にしてください

        「layout_weight」で、親のLinearLayout内でのこのViewの重要度を指定します。

        weightの値に応じて、レイアウト内の余白を埋めるようにViewが拡大されます。

        つまり、めいっぱい広げようとします。

        今回はLinearLayoutのorientationがverticalですので、weightによってこのViewの高さが決まってきます。

        そのため、heightの値はぶっちゃけ何でも構いません。

    7. 「Design」タブを選択して、アプリ上で実行した際のレイアウトイメージを確認してみましょう。

      ImageViewの高さがめいっぱいとられていることがわかります。

    8. weightの値を変更して、余白の占有の仕方を確認してみましょう。

      • 複数のViewに同じweightを指定すると、余白を均等に分けあいます。

        コードを表示するにはJavaScriptを有効にしてください

      • 異なるweightを指定すると、重要度の高いものほど余白を多く占有します。

        コードを表示するにはJavaScriptを有効にしてください

  4. RelativeLayoutを使用してみましょう。

    1. RelativeLayoutは、複数のViewを別のViewや親Viewに対しての想定位置を指定して配置したい場合に利用しやすいLayoutです。

      例えば、「View-Aの右にView-Bを配置する」「親Viewの右端から3px離れた位置に子View-Aを配置する」といった場合に利用しやすいLayoutです。


      詳細についてはリファレンスに記載されています。

      A Layout where the positions of the children can be described in relation to each other or to the parent.

      Note that you cannot have a circular dependency between the size of the RelativeLayout and the position of its children. For example, you cannot have a RelativeLayout whose height is set to WRAP_CONTENT and a child set to ALIGN_PARENT_BOTTOM.
    2. 「activity_main.xml」を以下のように編集します。

      ImageViewとTextViewの内容は、各項で学習した内容やリファレンス、一般サイトの情報を参考に適宜変更してください。

      サンプル : activity_main.xml

      コードを表示するにはJavaScriptを有効にしてください

      • 次の記述について説明します。

        コードを表示するにはJavaScriptを有効にしてください

        「android:layout_alignParentRight」で、「親Viewの右端に揃えるかどうか(true=揃える)」を指定しています。

        「android:layout_alignParentBottom」で、「親Viewの下端に揃えるかどうか(true=揃える)」を指定しています。

        つまり、ここでは、idが「image1」のImageViewを、「親Viewの右端・下端から3pxの余白を持たせた位置」に配置しています。

      • 次の記述について説明します。

        コードを表示するにはJavaScriptを有効にしてください

        「android:layout_above」は、「指定したViewの上に配置する」ための属性です。

        「android:layout_below」は、「指定したViewの下に配置する」ための属性です。

        つまり、ここでは、idが「text」のTextViewを、idが「image1」Viewの上・idが「image2」のViewの下に、上下左右3pxの余白を持たせて配置しています。

      • 次の記述について説明します。

        コードを表示するにはJavaScriptを有効にしてください

        「android:layout_alignParentRight」で、「親Viewの右端に揃えるかどうか(true=揃える)」を指定しています。

        「android:layout_alignParentTop」で、「親Viewの上端に揃えるかどうか(true=揃える)」を指定しています。

        つまり、ここでは、idが「image2」のImageViewを、親Viewの右端・上端に配置しています。

    3. 「Design」タブを選択して、アプリ上で実行した際のレイアウトイメージを確認してみましょう。

      XMLで記載した通りに、「image1」が右下に、「image2」が右上に、「text」がimage1の上側・image2の下側に配置されているのがわかります。

各レイアウトに用意されているAPIはまだまだたくさんあります。

詳細についてはAPIガイド・リファレンスに記載されています。

また、Androidは先人たちがネット上にたくさんの情報を残してくれています。

これらも活用して、是非このAPIを有効に使えるようになってください。