[SwiftUI] テキストを円状に配置する

SwiftUI

     

TAGS:

⌛️ < 1 min.
テキストを、円状に配置する方法を説明します。

完成イメージ

以下のような表示ができます。(グレーの円は、別途、表示してます)

CircularText 完成図

「CircularText 完成図」

設計概要

テキストを表示してくれる SwiftUI の View は Text なので、Text を使って実装していきます。

しかし、Text は、直線状にだけ配置してくれるため、円に沿って表示するためには、そのままでは使えません。

Text の内部に手を入れるのは大変そうなので、1文字づつ分解して、それぞれを適切な場所に移動して表示することで、実現します。

  1. 与えられた文字列を、1文字づつに分解
  2. 文字を適切な位置に1文字づつ配置する
  3. 各文字を適切に回転させる

円状に文字を並べる時に、各文字がどの方向にそって表示されるかは、いろいろとパターンがありそうですが、
ここでは、円周に沿うように文字も回転させています。

実装

全体のコードは、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. 1文字ごとに Text で表示するので、重ねて表示するために ZStack を使っています
  2. displayText に含まれる文字数分の Text を ForEach を使って作成します
  3. displayText という String の index 番目の文字を1文字づつ取得していきます
  4. 各文字の Text を円周の12時の位置に配置します
  5. 各文字をその文字が何文字目かに応じて回転させます
  6. 文字を乗せる円の直径を一辺にもつ正方形を指定することで、スペースを確保します

まとめ:テキストを円状に配置する View 作りました

テキストを円状に配置する View 作りました
  • Text を .position, .rotationEffect を使うことで、円状に配置できます
  • GitHub で公開している CircularText を使うことで、簡単に表示できます。

SwiftUI本

SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、超便利です。

SwiftUIViewsMastery

説明は以上です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です