概要
文字を表示するビュー。入力はできない。
フォントデザイン
３種類のデザイン変更ができます。
| monospaced | 等幅フォント。文字の横幅が全て同じ。 プログラマーであれば、開発環境のエディタは等幅フォントの書体を使う |
| rounded | 丸みを帯びたフォント 優しい印象を与えたい場合に使う |
| serif | 飾り（ひげ）が装飾されたフォント セリフ体は、新聞などの長文などに使われる。細い書体のため、目に優しく長文に適しているらしい。 |
let sampleString = "12345abcdABCアイウあいうえお太郎"
VStack(alignment: .leading) {
Text("default")
Text(sampleString)
.padding(.bottom, 0.1)
Text("monospaced")
Text(sampleString)
.font(.system(.body, design: .monospaced))
.padding(.bottom, 0.1)
Text("rounded")
Text(sampleString)
.font(.system(.body, design: .rounded))
.padding(.bottom, 0.1)
Text("serif")
Text(sampleString)
.font(.system(.body, design: .serif))
.padding(.bottom, 0.1)
}
フォントスタイル
Appleがデザインしたフォントサイズを目的別に使うことができる
var body: some View {
let sampleString = "12345abcdABCアイウあいうえお太郎"
VStack(alignment: .leading) {
VStack(alignment: .leading) {
Text("body - 本文")
Text(sampleString)
.font(.body)
.padding(.bottom, 0.1)
Text("callout - 吹き出し")
Text(sampleString)
.font(.callout)
.padding(.bottom, 0.1)
Text("caption - 見出し")
Text(sampleString)
.font(.caption)
.padding(.bottom, 0.1)
Text("caption2 - 見出し2")
Text(sampleString)
.font(.caption2)
.padding(.bottom, 0.1)
Text("footnote - 脚注")
Text(sampleString)
.font(.footnote)
.padding(.bottom, 0.1)
}
VStack(alignment: .leading) {
Text("headline - 目立つ見出し")
Text(sampleString)
.font(.headline)
.padding(.bottom, 0.1)
Text("largeTitle - でかいタイトル")
Text(sampleString)
.font(.largeTitle)
.padding(.bottom, 0.1)
Text("subheadline - サブ見出し")
Text(sampleString)
.font(.subheadline)
.padding(.bottom, 0.1)
Text("title - タイトル")
Text(sampleString)
.font(.title)
.padding(.bottom, 0.1)
Text("title2 - タイトル2")
Text(sampleString)
.font(.title2)
.padding(.bottom, 0.1)
}
VStack(alignment: .leading) {
Text("title3 - タイトル3")
Text(sampleString)
.font(.title3)
.padding(.bottom, 0.1)
}
}
}
URLの表示
// URLの場合、自動でリンクになる
Text("https://google.co.jp")
// リンクを解除する
Text(verbatim: "https://google.co.jp")
色々な文字列表示方法
var body: some View {
let text = "あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめも"
VStack {
Text("デフォルト")
.font(.title)
Text(text)
.font(.title)
.padding(.bottom)
// １行で表示。lineLimit設定
Text("１行で表示.lineLimit")
.font(.title)
Text(text)
.font(.title)
.lineLimit(1)
.padding(.bottom)
// １行で表示して、１行に納まらない場合は縮小する。
Text("文字縮小表示.minimumScaleFactor")
.font(.title)
Text(text)
.font(.title)
.lineLimit(1)
.minimumScaleFactor(0.5) // 半分まで文字縮小
// 文字と文字の余白調整
Text("●文字と文字の余白調整.kerning")
Text(text)
.lineLimit(1)
.kerning(3.0)
.padding(.bottom)
Text("●トラッキング。tracking")
Text(text)
.lineLimit(1)
.tracking(3.0)
.padding(.bottom)
Text("●文字色を赤色にする。foregroundStyle")
Text(text)
.lineLimit(1)
.foregroundStyle(.red)
.padding(.bottom)
Text("●文字を太くする。fontWeight")
Text(text)
.lineLimit(1)
.fontWeight(.bold)
.padding(.bottom)
}
}
コメント