a-1-1-1.制約配置(ConstraintLayout)

a-1-1-1.制約配置(ConstraintLayout)

目標設定

一覧に戻る

課題

1. 親のViewの上下左右からの位置を指定できるか。
2. 自身のViewのサイズを指定できるか。
3. 画面サイズに応じた自身外のViewのサイズを指定ができるか。
4. ConstraintLayout管理下の同じ階層のViewとの距離を指定できるか。
5. ConstraintLayoutの中でConstraintLayoutを入れ子にできるか。
6. 上下左右のセンタリングできるか。
7. マージンの比率を指定できるか。

Github

テスト実装

activity_constraint_layout_test.xml

<?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"
    tools:context=".ConstraintLayoutTestActivity">

    <!--
        1. 親のViewの上下左右からの位置を指定できるか。
        ・自身と対象の接点をlayout_constraintで指定し、
        layout_marginでマージンを指定する。

        2. 自身のViewのサイズを指定できるか。
        ・layout_widthで指定する。
     -->
    <View
        android:id="@+id/view1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@color/black"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="23dp"
        android:layout_marginTop="23dp"
        />

    <View
        android:id="@+id/view2"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/teal_200"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view1"
        android:layout_marginStart="23dp"
        android:layout_marginEnd="23dp"
        android:layout_marginTop="11dp"
        />

    <!--
        3. 画面サイズに応じた自身外のViewのサイズを指定ができるか。
        ・match_parentのConstraintLayoutの中の、wrap_contentの指定で、
        自動調節可能になる。
        4. ConstraintLayout管理下の同じ階層のViewとの距離を指定できるか。
        ・layout_constraintLeft_toLeftOfとlayout_marginStartで可能です。
        5. ConstraintLayoutの中でConstraintLayoutを入れ子にできるか。
        ・可能でした。
　   -->

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toBottomOf="@id/view2"
        android:layout_marginStart="23dp"
        android:layout_marginEnd="23dp"
        android:layout_marginTop="21dp"
        >

        <View
            android:id="@+id/view3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="@color/purple_500"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@id/view4"
            app:layout_constraintTop_toTopOf="parent"
            />

        <View
            android:id="@+id/view4"
            android:layout_width="200dp"
            android:layout_height="match_parent"
            android:background="@color/purple_200"
            app:layout_constraintLeft_toRightOf="@id/view3"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:layout_marginStart="21dp"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!--
        6. 上下左右のセンタリングできるか。
        ・可能でした。layout_marginも有効。
    -->

    <View
        android:id="@+id/view5"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/purple_500"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        />

    <!--
        7. マージンの比率を指定できるか。
        ・layout_constraintHorizontal_biasで可能でした。
        ・幅と指定する接点の間に余白がある、また、比率の複合指定ではないこと。
        ・合わせてlayout_marginの指定もできる。
    -->

    <View
        android:id="@+id/view6"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/purple_700"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.1"
        />

    <View
        android:id="@+id/view7"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/teal_700"
        app:layout_constraintLeft_toRightOf="@id/view6"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1"
        android:layout_marginStart="23dp"
        android:layout_marginEnd="23dp"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>