dasukoの技術ブログ

現役エンジニアのブログです。

【SwiftUI】テキストのAlignmentについて(左に寄せる方法)

はじめに

今回はView(特にText)を左に寄せたり、右に寄せたりする方法をご紹介します。

SwiftUIでのプロジェクトの作り方は以下の記事でご紹介しています。

dasuko.hatenadiary.jp

 

VStackやHStackについてはこちらの記事で解説しています。

dasuko.hatenadiary.jp

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)
    }
}

プレビューはこんな感じになります。

f:id:dasuko:20210220145256p:plain

ちなみに真ん中寄せにした場合

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()
        }
    }
}

f:id:dasuko:20210220145413p:plain

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())
    }
}

プレビューはこんな感じになります。

画面の左端にテキストが寄っていることがわかります。

f:id:dasuko:20210220150031p:plain

もちろん右端に寄せることも可能です。

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())
    }
}

プレビューはこんな感じです。

右端に寄っているのがわかるかと思います。

f:id:dasuko:20210220150418p:plain

 

 

参考になったという方や、ここ間違っているよ!という方は

ぜひコメントしていただけると嬉しいです!!!!

 

SwiftUIを一から極めたいという人は本を買ってみるといいかも!

SwiftUIを本気でやろうとしていない人にはお勧めしません。

 

 

参考

ios - SwiftUI text-alignment - Stack Overflow

Apple Developer Documentation