とある愛知の電脳技師のConstraintLayoutの用法メモ2

9694 ワード
とある愛知の電脳技師 ConstraintLayout Android Layout Kotlin Android テキストリンク

０．前回記事

前回はConstraintLayoutの考え方とそれを使った単独View、隣接Viewの指定方法を紹介しました。

今回はその他の用法を紹介します

１．斜め配置

【ポイント】
2つのViewの対称な辺を基準に配置するTopに対してBottom,Leftに対してRight

１－１．右斜め上に配置

①コード

    <TextView
        android:id="@+id/tx02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_error"
        app:layout_constraintLeft_toRightOf="@+id/tx01"
        app:layout_constraintBottom_toTopOf="@+id/tx01" />

②結果

１－２．左斜め下に配置

①コード

    <TextView
        android:id="@+id/tx02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="World!"
        android:textSize="30sp"
        android:background="@color/design_default_color_error"
        app:layout_constraintRight_toLeftOf="@+id/tx01"
        app:layout_constraintTop_toBottomOf="@+id/tx01" />

②結果

２．GuideLineを使用して画面の定位置に表示する

【ポイント】
GuideLineを画面比率で指定した場所に配置し、それを基準にViewを配置する

２－１．画面の上から30%の場所に配置する

【ポイント】
縦の位置を比率で指定したい場合は

android:orientation="horizontal"

を指定する
①コード

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.3" />

    <TextView
        android:id="@+id/tx01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="↑30% "
        android:textSize="30sp"
        android:background="@color/design_default_color_secondary"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline" />

②結果

２－２．画面の左から30%の場所に配置する

【ポイント】
横の位置を比率で指定したい場合は

android:orientation="vertical"

を指定する

①コード

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.3"
        />

    <TextView
        android:id="@+id/tx01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="←30% "
        android:textSize="30sp"
        android:background="@color/design_default_color_secondary"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/guideline" />

②結果

２－３．画面の左から65%、上から80%の場所に配置する

①コード

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.65"
        />

    <TextView
        android:id="@+id/tx01"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="←65%,↑80% "
        android:textSize="24sp"
        android:background="@color/design_default_color_secondary"
        app:layout_constraintTop_toBottomOf="@+id/guideline01"
        app:layout_constraintLeft_toRightOf="@+id/guideline02" />

②結果