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

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

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

#１．斜め配置
【ポイント】
2つのViewの対称な辺を基準に配置するTopに対してBottom,Leftに対してRight
##１－１．右斜め上に配置
###①コード

```mxml
    <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" />
```
###②結果
<img width="300" alt="upDownRightLeftCenter" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192949/bf72260a-d5ad-f914-302f-a0a5f2e8ca98.png">

##１－２．左斜め下に配置
###①コード

```mxml
    <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" />
```

###②結果
<img width="300" alt="upDownCenter" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192949/a1a73e11-6a1c-9794-78f7-48162c52133b.png">

#２．GuideLineを使用して画面の定位置に表示する
【ポイント】
GuideLineを画面比率で指定した場所に配置し、それを基準にViewを配置する

##２－１．画面の上から30%の場所に配置する
【ポイント】
縦の位置を比率で指定したい場合は

```mxml
android:orientation="horizontal"
```
を指定する
①コード

```mxml
    <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" />
```
###②結果
<img width="300" alt="RIGHT" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192949/b825edd1-e002-82e0-faea-8a473edd4db6.png">

##２－２．画面の左から30%の場所に配置する
【ポイント】
横の位置を比率で指定したい場合は

```mxml
android:orientation="vertical"
```
を指定する
###①コード

```mxml
    <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" />
```
###②結果
<img width="300" alt="LEFT" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192949/5f268afb-c175-ce91-e540-40e2ae09ee2e.png">


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

```mxml
    <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" />
```
###②結果
<img width="300" alt="LEFT" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/192949/c4d61099-fc3b-d16b-f33c-a9c7ff265475.png">