テキストを、円状に配置する方法を説明します。
Sponsor Link
完成イメージ
以下のような表示ができます。(グレーの円は、別途、表示してます)
設計概要
テキストを表示してくれる SwiftUI の View は Text なので、Text を使って実装していきます。
しかし、Text は、直線状にだけ配置してくれるため、円に沿って表示するためには、そのままでは使えません。
Text の内部に手を入れるのは大変そうなので、1文字づつ分解して、それぞれを適切な場所に移動して表示することで、実現します。
- 与えられた文字列を、1文字づつに分解
- 文字を適切な位置に1文字づつ配置する
- 各文字を適切に回転させる
円状に文字を並べる時に、各文字がどの方向にそって表示されるかは、いろいろとパターンがありそうですが、
ここでは、円周に沿うように文字も回転させています。
実装
全体のコードは、CircularText@GitHub で見ることができます。
実装コード
文字列を円状に並べる
public var body: some View {
// (1)
ZStack {
// (2)
ForEach(0..<displayText.count) { index in
// (3)
Text(String(Array(displayText)[index]))
.font(font)
.foregroundColor(color)
// (4)
.position(x: radius, y: 0)
// (5)
.rotationEffect(calcAngle(index))
}
}
// (6)
.frame(width: radius*2, height: radius*2)
}
コード解説
- 1文字ごとに Text で表示するので、重ねて表示するために ZStack を使っています
- displayText に含まれる文字数分の Text を ForEach を使って作成します
- displayText という String の index 番目の文字を1文字づつ取得していきます
- 各文字の Text を円周の12時の位置に配置します
- 各文字をその文字が何文字目かに応じて回転させます
- 文字を乗せる円の直径を一辺にもつ正方形を指定することで、スペースを確保します
まとめ:テキストを円状に配置する View 作りました
テキストを円状に配置する View 作りました
- Text を .position, .rotationEffect を使うことで、円状に配置できます
- GitHub で公開している CircularText を使うことで、簡単に表示できます。
SwiftUI本
SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、超便利です。
説明は以上です。
Sponsor Link