Viewを円形状に配置する

Viewを円形状に配置して、時計のようなレイアウトを作ってみたいと思います。

**▼完成形▼**
![Screenshot_1615637518.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365643/bb85c4b2-de52-105a-3b24-f9e9b23cecf6.png)

# 1. 丸いViewを作る

まずは色が付いた丸いViewを作ります。

丸いViewの作成方法については、以下の記事が参考になると思います。

[色が付いた丸いViewを作成する
](https://qiita.com/yass97/items/4046ac4eebd12e65f2cc)

中央にある赤いViewのシェイプドローワブルだけ記載しますが、`<solid android:color="" />`を変更すれば、他の色にも適用出来ます。

```res/drawable/shape_red_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Viewの角を丸くする -->
    <corners android:radius="15dp" />
    <!-- Viewの色を指定する -->
    <solid android:color="#ef9a9a" />
</shape>
```

# 2. Viewを円形状に配置する

Viewを円形状に配置するときは、ルートを`ConstraintLayout`にして、以下の属性を指定します。

### `layout_constraintCircle`

中心になるViewのIDを指定します。

### `layout_constraintCircleAngle`

`layout_constraintCircle`で指定したViewを起点に、円形状に配置するViewの「角度（0〜360）」を指定します。

時計に例えると「0->12時、30->1時、60->2時」の位置になります。

### `layout_constraintCircleRadius`

`layout_constraintCircle`で指定したViewからの「半径」を指定します。

![layout_constraintCircle image](https://developer.android.com/reference/androidx/constraintlayout/widget/resources/images/circle2.png)![layout_constraintCircleAngle](https://developer.android.com/reference/androidx/constraintlayout/widget/resources/images/circle1.png)

レイアウトは以下のようになります。

```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=".MainActivity">

    <View
        android:id="@+id/red_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_red_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/pink_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_pink_icon"
        app:layout_constraintBottom_toTopOf="@+id/red_circle_view"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="0"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/purple_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_purple_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="30"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/deep_purple_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_deep_purple_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="60"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/indigo_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_indigo_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="90"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/blue_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_blue_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="120"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/light_blue_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_light_blue_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="150"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/cyan_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_cyan_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="180"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/teal_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_teal_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="210"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/green_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_green_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="240"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/light_green_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_light_green_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="270"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/lime_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_lime_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="300"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/yellow_circle_view"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/shape_yellow_icon"
        app:layout_constraintCircle="@id/red_circle_view"
        app:layout_constraintCircleAngle="330"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
```

これで完成です。