SwiftUIで文字の見た目を調整したい時に便利なのが .tracking(_:) です。
文字の間隔を均等に広げたり詰めたりできるモディファイアで、見出しやロゴ風のテキストデザインを作るときに役立ちます。
この記事では .tracking(_:) の基本的な意味や使い方、引数の意味、活用シーン、注意点 まで、初心者の方にもわかりやすく解説します。
.tracking(_:) とは？
.tracking(_:) は SwiftUI の Text に適用できるモディファイアで、テキスト全体の文字間隔を均等に調整するために使います。
例えば「Swift」という文字に .tracking(5) を指定すると、S と w、w と i、i と f…といったすべての文字間隔が一律に広がります。
同じく文字間隔を調整できる .kerning(_:) とは似ていますが、kerning が「文字ペアごとの間隔補正」に基づいて調整するのに対して、tracking は「全体を一律に広げる・詰める」ことに特化しています。
具体例：文字間隔を均等に広げる・詰める
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import SwiftUI struct ContentView: View { var body: some View { VStack(spacing: 20) { Text("SwiftUI") .font(.title) .tracking(5) // 全体を均等に広げる Text("SwiftUI") .font(.title) .tracking(-1) // 全体を均等に詰める Text("SwiftUI") .font(.title) .tracking(0) // デフォルト } .padding() } } |
- 一行目：
.tracking(5)→ 全体的に広がった、余裕のある文字間隔 - 二行目：
.tracking(-1)→ 全体的に詰まった、コンパクトな文字間隔 - 三行目：
.tracking(0)→ デフォルトの文字間隔
指定の仕方
.tracking(_:)の指定の仕方は非常にシンプルで、どれくらい間隔を空けたいかを整数で指定するだけです。
|
1 2 3 |
Text("HELLO SWIFTUI") .tracking(3) // 文字間隔を均等に広げる |
特に大文字の見出しやタイトルに使うと、ロゴのような洗練された見た目になります。
.tracking(_:) の活用シーン
.tracking(_:)は特にロゴや大文字のデザインに使うと、スタイリッシュで印象的な表現が可能になります。
- アプリのタイトルやロゴ風の文字を強調したいとき
- 見出しをスタイリッシュに見せたいとき
- 長い文字列の可読性を高めたいとき
- 均一な間隔で並んだ文字を演出したいとき
これらのシーンでは、均一な間隔が「整ったデザイン感」を生み出します。
特に大文字テキストに適用するとデザイン性が一気に高まります。
注意点
一方で、.tracking(_:) を使う際には注意点もあります。使用する際、下記点は押さえておきましょう。
- フォントによって見え方が異なる
同じ tracking 値でもフォントの種類によって広がり方が違うため、必ず実機で確認しましょう。 - 全体に均一に適用される
部分的な調整はできません。部分的な調整が必要な場合はAttributedStringを使います。 - 日本語フォントでは効果が限定的
特に等幅フォントでは違いが出にくく、アルファベットや数字の利用に向いています。 - .kerning(_:) との違い
.kerning(_:)→ 文字の組み合わせごとの自然な補正をベースに調整
.tracking(_:)→ 全体を一律に広げたり詰めたり
ロゴ風デザインなら.tracking(_:)、自然な文章表示なら.kerning(_:)が適しています。
まとめ
今回はテキスト全体の文字間隔を均等に調整する.tracking(_:)を紹介しました！
.tracking(_:)はテキスト全体の文字間隔を均等に調整するモディファイア- 正の値で広げ、負の値で詰められる
- タイトルやロゴ風テキストのデザインに効果的
- フォントや言語によって見え方が変わるため実機での確認が必要
テキストの印象はUI全体の雰囲気に直結します。
ぜひ .tracking(_:) を活用して、洗練されたデザインを実現してみてくださいね！
