はじめに
今回はView(特にText)を左に寄せたり、右に寄せたりする方法をご紹介します。
SwiftUIでのプロジェクトの作り方は以下の記事でご紹介しています。
VStackやHStackについてはこちらの記事で解説しています。
multilineTextAlignment
multilineTextAlignment
を使えばテキストを左寄せ、真ん中寄せ、右寄せにすることができます。
Sets the alignment of multiline text in this view. このビューで複数行のテキストの配置を設定します。
とあるようにテキストのView内での配置を指定できます。
import SwiftUI struct ContentView: View { @State private var isPlaying: Bool = false var body: some View { Text("Text\nThis is Text") .multilineTextAlignment(.leading) } }
プレビューはこんな感じになります。
ちなみに真ん中寄せにした場合
import SwiftUI struct ContentView: View { @State private var isPlaying: Bool = false var body: some View { Text("Text\nThis is Text") .multilineTextAlignment(.center) } } struct LeftAligned: ViewModifier { func body(content: Content) -> some View { HStack { content Spacer() } } }
View全体を左端に寄せたい場合
View全体をどこかに寄せたい場合はスペースを作りたいところにSpacerを指定することで実現できます。
import SwiftUI struct ContentView: View { @State private var isPlaying: Bool = false var body: some View { Text("Text\nThis is Text") .leftAligned() } } struct LeftAligned: ViewModifier { func body(content: Content) -> some View { HStack { content Spacer() } } } extension View { func leftAligned() -> some View { return self.modifier(LeftAligned()) } }
プレビューはこんな感じになります。
画面の左端にテキストが寄っていることがわかります。
もちろん右端に寄せることも可能です。
import SwiftUI struct ContentView: View { @State private var isPlaying: Bool = false var body: some View { Text("Text\nThis is Text") .rightAligned() } } struct RightAligned: ViewModifier { func body(content: Content) -> some View { HStack { Spacer() content } } } extension View { func rightAligned() -> some View { return self.modifier(RightAligned()) } }
プレビューはこんな感じです。
右端に寄っているのがわかるかと思います。