【SwiftUI】テキスト表示とレイアウト調整してみた

こんにちは、のっくんです。

今日は初めてSwiftUIに触れてみました。

SwiftUIは2019年6月のWWDCで発表された新しい機能です。

いつもはストーリーボードでアプリを作っていたのですが、SwiftUIが気になったので本を買って勉強してみました。

少し使っただけですが、かなり使いやすいですね。

ストーリーボードにはなかったプレビュー機能が良い感じ。

以下のようにテキストを並べて、フォントを変えたり、レイアウトを調整をしてみました。

書いてみたコードは以下の通りです。

書いてみたと言ってもほとんどXcodeのアトリビュートインスペクタで設定するだけで自動的にコードが記載されます。

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack() {
            VStack(alignment: .trailing) {
                Text("Swift UIの学び方")
                    .font(.largeTitle)
                    .fontWeight(.medium)
                Text("by yamagablog").italic()
            }
            .padding(.vertical, 10.0)
            VStack() {
                Text("1. VStackの使い方")
                    .font(.title)
                    .fontWeight(.medium)
                    .padding(.vertical, 10.0)
            }
            VStack() {
                Text("2. Spacerの使い方")
                    .font(.title)
                    .fontWeight(.medium)
                    .padding(.vertical, 10.0)
            }
            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

設定したのは、

• 文字のフォント
• 文字の太さ
• パディング、上下
• 文字のアライメント（右寄せ）

です。

もっと色々アプリを作ってSwift UIにもっともっと慣れていきたいです。

以下の本を参考にしたのですが、分かりやすくて良い感じです。

詳細! SwiftUI iPhoneアプリ開発入門ノート iOS 13 + Xcode11対応 (日本語) 単行本 – 2019/12/21