ConstraintLayoutを用いたレイアウトの作り方【Android Studio】

ConstraintLayoutを用いたレイアウトの作り方

android developer のサイトを参考にConstraintLayoutの使い方を勉強しました。

【参考サイト】
https://developer.android.com/reference/androidx/constraintlayout/widget/ConstraintLayout

ConstraintLayoutを使うためにはまず、下記コードで囲う必要があります。
```
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android">
</androidx.constraintlayout.widget.ConstraintLayout>
```

- テキストアリアの右側にボタンをくっつける

<img width="300" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349192/1a6c2f6a-2296-2975-7839-077e85d282ae.png">

```
    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        />
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintLeft_toRightOf="@+id/editTextTextPersonName"
        app:layout_constraintTop_toTopOf="@+id/editTextTextPersonName" />
```
- ボタンがはみ出ているのでbiasでテキストアリアを左に寄せる
<img width="300" alt="2.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349192/b9069423-caba-8ddd-5537-5ffc523e31de.png">

```
<EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" 
        app:layout_constraintHorizontal_bias="0.1" />
```

- ボタンとテキストエリアの間にmarginを作る
<img width="300" alt="4.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349192/b06ca01e-0225-366d-5e5b-f805ee3817ec.png">


```
    <EditText
        android:id="@+id/editTextTextPersonName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="10"
        android:inputType="textPersonName"
        android:text="Name"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.1" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginLeft="30dp"
        app:layout_constraintLeft_toRightOf="@+id/editTextTextPersonName"
        app:layout_constraintTop_toTopOf="@+id/editTextTextPersonName" />
```


- 円状にする
<img width="300" alt="8.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/349192/2835cfdc-392c-4de7-fd0c-4e60dd1e7caa.png">

```
   <TextView
        android:id="@+id/textView"
        android:layout_width="32dp"
        android:layout_height="37dp"
        android:gravity="center"
        android:text="O"

        tools:layout_editor_absoluteX="180dp"
        tools:layout_editor_absoluteY="370dp" />

    <TextView
        android:id="@+id/textView12"
        android:layout_width="32dp"
        android:layout_height="37dp"
        android:gravity="center"
        android:text="12"
        app:layout_constraintCircle="@+id/textView"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="0" />

    <TextView
        android:id="@+id/textView1"
        android:layout_width="32dp"
        android:layout_height="37dp"
        android:gravity="center"
        android:text="1"
        app:layout_constraintCircle="@+id/textView"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="30" />
```