Android ConstraintLayout Guidelineの割合指定でレイアウトしてみた

前置き

今年始めにAndroidアプリを開発したときにConstraintLayoutのGuidelineを割合で指定して使いました。半年以上経ちましたが、それほどサンプルコードが増えていないように思いましたので些細ではありますが記事にしました。本記事のGuidelineは「dp指定」ではなく「割合指定」のみを扱います。

Guidelineとは

公式はこちらです。そして既に素敵な記事がございます。筆者の言葉でGuideline(割合指定)について説明すると「任意の割合で縦横方向に画面を分割してレイアウトすることが出来る制約」です。自身でも分かりづらい説明に思えるので実際に見ていきますね。

サンプルプロジェクト

GitHubに公開しています。併せてご覧ください。

縦方向に分割したGuideline

のちほどLayoutのXMLを見ていきますがAndroid Studioのデザイナでは赤矢印になります。

Layout XMLは以下のようにしました。コメントをつけました。

activity_vertical_guideline.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".VerticalGuidelineActivity">

    <!--
        orientation:vertical                                    縦方向に分割される。
        layout_constraintGuide_percent:0.3                      左側から30%の位置で分割される。
     -->
    <android.support.constraint.Guideline
        android:id="@+id/vertical_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3"/>

    <!--
        layout_width:0dp                                        制約内で最大幅にする。
        layout_height:100dp                                     適当に設定した。
        layout_constraintLeft_toLeftOf:parent                   画面左側とテキストビューの左側を合わせる。
        layout_constraintRight_toRightOf:@id/vertical_guideline Guidelineとテキストビューの右側を合わせる。(つまり左側30%の幅になる)
     -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="@string/left_side"
        android:background="@drawable/frame_textview"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="@id/vertical_guideline" />

    <!--
        layout_width:0dp                                        制約内で最大幅にする。
        layout_height:100dp                                     適当に設定した。
        layout_constraintLeft_toLeftOf:@id/vertical_guideline   Guidelineとテキストビューの左側を合わせる。
        layout_constraintRight_toRightOf:parent                 画面右側とテキストビューの右側を合わせる。(つまり右側70%の幅になる)
     -->
    <TextView
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:text="@string/right_side"
        android:background="@drawable/frame_textview"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/vertical_guideline"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

実行した結果は以下のようになります。左側30%幅、右側70%幅のはずです。

横方向に分割したGuideline

こちらのサンプルコードが特に少ない印象です
のちほどLayoutのXMLを見ていきますがAndroid Studioのデザイナでは赤矢印になります。

Layout XMLは以下のようにしました。コメントをつけました。

activity_horizontal_guideline.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".HorizontalGuidelineActivity">

    <!--
        orientation:horizontal                                      横方向に分割される。
        layout_constraintGuide_percent:0.3                          上側から30%の位置で分割される。
     -->
    <android.support.constraint.Guideline
        android:id="@+id/horizontal_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3"/>

    <!--
        layout_width:100dp                                          適当に設定した。
        layout_height:0dp                                           制約内で最大高にする。
        layout_constraintTop_toTopOf:parent                         画面上側とテキストビューの上側を合わせる。
        layout_constraintBottom_toBottomOf:@id/horizontal_guideline Guidelineとテキストビューの下側を合わせる。(つまり上側30%の高さになる)
     -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="@string/top_side"
        android:background="@drawable/frame_textview"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="@id/horizontal_guideline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <!--
        layout_width:100dp                                          適当に設定した。
        layout_height:0dp                                           制約内で最大高にする。
        layout_constraintTop_toTopOf:@id/horizontal_guideline       Guidelineとテキストビューの上側を合わせる。
        layout_constraintBottom_toBottomOf:parent                   画面下側とテキストビューの下側を合わせる。(つまり下側70%の高さになる)
     -->
    <TextView
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="@string/bottom_side"
        android:background="@drawable/frame_textview"
        app:layout_constraintTop_toTopOf="@id/horizontal_guideline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

実行した結果は以下のようになります。上側30%の高さ、下側70%の高さのはずです。

縦方向と横方向に分割したGuideline

オマケの応用編として画面を縦に3分割、横に3分割して「○×ゲーム」の3×3のようなGuidelineを設定しました。もう少しだけレイアウトを華やかにしたいのでアイコンを配置しました。筆者はよくicooon monoさんを利用させて頂いております。いつもお世話になっております

activity_cross_guideline.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context=".CrossGuidelineActivity">

    <!-- 縦方向に左側から33% -->
    <android.support.constraint.Guideline
        android:id="@+id/vertical_0_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33"/>

    <!-- 縦方向に左側から66% -->
    <android.support.constraint.Guideline
        android:id="@+id/vertical_1_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.66"/>

    <!-- 横方向に上から33% -->
    <android.support.constraint.Guideline
        android:id="@+id/horizontal_0_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.33"/>

    <!-- 横方向に上から66% -->
    <android.support.constraint.Guideline
        android:id="@+id/horizontal_1_guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.66"/>

    <!-- お猿のアイコンは左上に配置 -->
    <android.support.v7.widget.AppCompatImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/image_monkey"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/horizontal_0_guideline"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/vertical_0_guideline" />

    <!-- イカのアイコンは中央に配置 -->
    <android.support.v7.widget.AppCompatImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/image_squid"
        app:layout_constraintTop_toTopOf="@id/horizontal_0_guideline"
        app:layout_constraintBottom_toTopOf="@id/horizontal_1_guideline"
        app:layout_constraintLeft_toLeftOf="@id/vertical_0_guideline"
        app:layout_constraintRight_toLeftOf="@id/vertical_1_guideline" />

    <!-- 犬のアイコンは右下に配置 -->
    <android.support.v7.widget.AppCompatImageView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:src="@drawable/image_dog"
        app:layout_constraintTop_toTopOf="@id/horizontal_1_guideline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@id/vertical_1_guideline"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

実行した結果は以下のようになります。

終わりに

筆者はAndroidアプリの経験が少なく定番の割合指定の方法はわかりませんが、Guidelineについてサンプルコードを書いてみました。