【SwiftUI】Viewを円状に配置する方法

はじめに

この記事では、Viewを円状に配置する方法を紹介します。

作るもの

色のついた7つの円を円状に配置します。

やり方

コード全体

import SwiftUI

struct ContentView: View {
    private let colors = [Color.red, Color.orange, Color.yellow, Color.green, Color.blue, Color.purple, Color.pink]
    
    var body: some View {
        ZStack {
            ForEach(0 ..< colors.count, id: \.self) { i in
                Circle()
                    .fill(colors[i])
                    .frame(width: 50, height: 50)
                    .offset(
                        polarToRectangular(r: 100, theta: theta(i: i))
                    )
            }
        }
    }
}

extension ContentView {

    // 等間隔に配置するための角度を計算
    // 360° ÷ 色の数にインデックスを掛ける
    private func theta(i: Int) -> CGFloat {
        return CGFloat(i) * 2 * .pi / CGFloat(colors.count)
    }

    // 中心からの距離と角度を指定して、円状に配置するための座標を返す
    // 極座標（r, θ）を直交座標（x, y）に変換
    private func polarToRectangular(r: CGFloat, theta: CGFloat) -> CGSize {
        let x = r * cos(theta)
        let y = r * sin(theta)
        return .init(width: x, height: y)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

ポイント

このコードのポイントは、polarToRectangular(r:theta:)メソッドです。このメソッドは、中心からの距離と角度を指定して、円状に配置するための座標を返します。このメソッドは、数学の極座標（r, θ）と直交座標（x, y）の変換に着想を得ています。

また、theta(i:)メソッドは、等間隔に配置するための角度を計算しています。等間隔に配置するための角度は、360° ÷ 色の数にインデックスを掛けることで求めることができます。

おわりに

SwiftUIでViewを円状に配置する方法を紹介しました。メソッドに切り出す時って名前をどうするか悩みますよね。今回は、数学に着想を得て命名してみました。この記事が参考になったと思った方は、いいねとフォローしていただけると嬉しいです☺️