【Android】ConstraintLayoutの用法メモ2【ConstraintLayout】

#０．前回記事
####前回はConstraintLayoutの考え方とそれを使った単独View、隣接Viewの指定方法を紹介しました。
https://qiita.com/Nana_777/items/043cb17bd6ab5b686f38

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

#１．斜め配置
【ポイント】
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" />

###②結果