Zenn
📘

SwiftUIでハマりやすいレイアウトのコツと小技まとめ

に公開
iOS
Swift
Xcode
アプリ
iosアプリ開発
tech

こんにちは、今日はSwiftUIでレイアウト調整中にハマったポイントと解決方法を共有します！実際のケースを通じて学んだテクニックをまとめているので、ぜひ参考にしてみてください！

1. Text内で改行させるには？

スペースで無理やり改行を作るよりも、改行コード\nを使うのが正解です。

Text("こんにちは\n世界！")

2. Textを中央揃えする方法

Textの文字を中央揃えにしたい時は.multilineTextAlignment(.center)を使います。

Text("真ん中にしたい")
    .multilineTextAlignment(.center)

3. font以外で文字サイズを大きくする裏技

基本は.font()ですが、無理やり見た目だけ拡大したい場合は.scaleEffect()を使えます。ただし文字が荒れる可能性あり。

Text("拡大")
    .scaleEffect(2.0)

4. SwiftUIで一番大きいフォントって？

デフォルトの.largeTitleよりさらに大きくしたい場合は.system(size:)を使いましょう。

Text("超デカ文字")
    .font(.system(size: 80))

5. fontとframeは一緒に使っていい？

結論、使ってもOK。ただし、文字サイズとframeサイズが合っていないと、文字がはみ出したりスカスカになります。バランスよく使うのがポイント。

Text("バランスよく")
    .font(.largeTitle)
    .frame(width: 300, height: 100)

6. 左右対称のレイアウトがズレる理由と解決策

特に◯や✕のような文字を使ったボタンは、文字の幅が違うため見た目がズレます。

解決策

① frameを統一

Text("◯")
    .font(.system(size: 160))
    .frame(width: 180, height: 180)

Text("✕")
    .font(.system(size: 160))
    .frame(width: 180, height: 180)

② Spacerで均等に配置

HStack {
    Spacer()
    Text("◯")
    Spacer()
    Text("✕")
    Spacer()
}

7. HStackの左右の余白調整

HStackの左右余白を調整したいときは.padding(.horizontal)が効果的。

HStack(spacing: 16) {
    Text("◯")
    Text("✕")
}
.frame(maxWidth: .infinity)
.padding(.horizontal)

8. if文をスッキリ書く（三項演算子）

SwiftUIで条件分岐をスッキリ１行で書くには三項演算子を使います。

Text(isError ? "エラー発生" : "正常動作中")

SwiftUIはシンプルな記法で強力なUIを作れますが、細かい調整が必要な場合は今日のような小技やコツが非常に役立ちます！ぜひ試してみてください〜✨

Discussion