0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【知見メモ】wordJoinerでSwiftUIのText()の文字を変な位置で改行させないようにする方法

Last updated at Posted at 2024-05-01

はじめに

本記事では、wordJoinerを使って、SwiftUIのText()の文字を変な位置で改行させないようにする方法をご紹介します。

環境

  • Xcode 15.2
  • iOS 17.2

発生した課題

SwiftUIのTextを表示した時に、左詰めで文字が表示されず、変な位置で改行されていました。

スクリーンショット 2024-05-01 18.12.28.png

現状: ボヘミア\nン・ラプソデ

しかし、理想とする改行の位置はこちら

理想: ボヘミアン\n・ラプソデ

(正式名称は、ボヘミアン・ラプソディですが、文字数の都合上、「ィ」は省略)

実装(before)

また、実装は下記の通りです。
ZStackでRoundedRectangleの上にTextを載せています。

frameを決めて、そのframe幅におさまるようにテキストを表示しています。

struct SampleView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 10)
                .foregroundStyle(Color.gray)

            Text("ボヘミアン・ラプソデ")
        }
        .frame(width: 96, height: 96)
    }
}

#Preview {
    SampleView()
}

原因

あくまで予想ですが、「・」が行の先頭に配置されないように、内部で調整されていると考えました。

実際に、文字の改行パターンを調査しました。

「・」を消して「ラ」を追加した時のケース

「ラ」を追加すると、左詰めで表示される。

スクリーンショット 2024-05-01 18.11.33.png

ひらがなのケース

ひらがなも同様に「・」が先頭に配置されないように改行されてしまいます。

スクリーンショット 2024-05-01 18.13.37.png

解決策

前提

今回の要件は下記の通りです。

  • 「・」の有無関係なく、文字が左詰めになっていること
  • どんな文字が入っても問題なく表示できること

wordJoinerを使う

そこで今回は、wordJoinerというものを使います。

単語結合子は、Unicodeの制御文字の一つです。

単語の途中など改行してほしくない箇所に単語結合子を入れることで、その場所では改行されなくなります。

イメージ: let string = "ボ" + "\u{2060}" + "ヘ" + "\u{2060}" + "ミ" ...

実装(after)

今回は、stringの拡張として、メソッド化しました。
characters.joined(separator: wordJoiner)で全ての文字の間にwordJoinerを追加しています。

private extension String {
    // 全ての単語の間に Unicode WORD JOINER を挿入する
    func insertWordJoiners() -> String {
        let wordJoiner = "\u{2060}"
        let characters = self.map { String($0) }
        let modifiedString = characters.joined(separator: wordJoiner)
        return modifiedString
    }
}
struct WordJoinerSampleView: View {
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 10)
                .foregroundStyle(Color.gray)

            Text("ボヘミアン・ラプソデ".insertWordJoiners())
        }
        .frame(width: 96, height: 96)
    }
}

#Preview {
    WordJoinerSampleView()
}

結果

無事に左詰めで改行されました。

スクリーンショット 2024-05-01 18.49.10.png

おわりに

他により良い方法などがあればコメントいただけると幸いです。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?