SwiftUIのTextの使い方
2021年03月09日
![](/images/category//swiftui.png)
基本の定義
Text("Hello, World!")
![Textを使って文字を表示する](/article-images/swiftui-text/01.png)
フォント
Text("Font Sample")
.font(.largeTitle)
Text("Font Sample")
.font(.title)
Text("Font Sample")
.font(.headline)
Text("Font Sample")
.font(.body)
Text("Font Sample")
.font(.system(size: 20, weight: .heavy, design: .monospaced))
![Textのフォントを変更する](/article-images/swiftui-text/02.png)
.title
・.headline
のようにデフォルトで数種類定義されています。
自分で定義する事も可能
色
Text("Color Sample")
.foregroundColor(Color.green)
Text("Color Sample")
.background(Color(red: 0.9, green: 0.9, blue: 0.9, opacity: 1.0))
.foregroundColor(Color.blue)
![Textの色・背景色を変更する](/article-images/swiftui-text/03.png)
Color
はUIColor
を使う事も可能なため、
UIColorのextensionやライブラリを使用する事も出来ます
表示方法
表示の仕方 | SwiftUIでの設定値 |
---|---|
左揃え(デフォルト) | .leading |
中央揃え | .center |
右揃え | .trailing |
left
・right
ではない事に注意
// 中央揃え
Text("center\ntext Sample")
.multilineTextAlignment(.center)
// 右揃え
Text("trailing\ntext Sample")
.multilineTextAlignment(.trailing)
![Textの表示位置を変更する](/article-images/swiftui-text/04.png)
斜体・太字
Text("Italic Sample").italic()
![Textを斜体にする](/article-images/swiftui-text/05.png)
Text("Bold Sample").bold()
![Textを太字にする](/article-images/swiftui-text/06.png)
fontWeight
を使って細かく分ける場合
Text("weight Sample").fontWeight(.ultraLight)
Text("weight Sample").fontWeight(.medium)
Text("weight Sample").fontWeight(.heavy)
他にも.thin
・.light
など用意されています
![TextのfontWeightを細かく設定する](/article-images/swiftui-text/07.png)
下線
Text("under line Sample")
.underline()
![Textに下線を引く](/article-images/swiftui-text/08.png)
行間・字間
Text("multi line\ntext\nSample")
.lineSpacing(16)
![Textに行間を設定](/article-images/swiftui-text/09.png)
Text("character spacling Sample")
.tracking(20)
![Textの字間を設定](/article-images/swiftui-text/10.png)
最大行数
Text("multi line\ntext\nSample")
.lineLimit(2)
![Textの最大行数を設定](/article-images/swiftui-text/11.png)