SwiftUIというUIフレームワークの使い方ついてのまとめサイトになります。
これからiPhoneやMac向けのアプリケーション開発に挑戦したい！という人の助けになれればと思います。
本記事では基礎的に使うViewの機能を列挙していきます。
画面への表示系
Text
画面に文字列を表示するビュー
Text("Hello World")Textビューの外観を変更
Text("Hello World").font(.largeTitle)文字の用途に応じて大きさを変更するタイププロパティ
LargeTitle：大きなタイトル
title：タイトル
headline：見出し
subheadline：小さい見出し
body：本文
callout：吹き出し
footnote：注釈
caption：キャプション
※上から大〜小
TextField
ユーザーに文字を入力させるビュー
TextField("初期値", text: $引数) //引数にユーザーが入力した文字を格納パスワードを入力させる場合
SecureField()を使用します。TextField()と使用方法はほぼ同じですが、ユーザーの入力文字が「••••••••」のような表記になります。
Image
画面に画像を表示するビュー
Image("画像名")あらかじめ用意されてるシステムイメージを使用する。（人のアイコン作成とかに便利でした。）
Image(systemName: "システムイメージの名前")画像のサイズを変更する
画像のサイズを変更するには後ろに「.resizable()」をつける必要があります。
複数ビューを指定するために
ContentViewのbodyプロパティには基本1つのビューしか指定できませんが、指定ビューの中に複数ビューを指定してUIを開発していきます。
VStack
縦方向にビューを配置
VStack {
Text("Hello,")
Text("SwiftUI!")
}HStack
横方向にビューを配置
HStack {
Text("Hello,")
Text("SwiftUI!")
}ZStack
ビューの重ね合わせ
ZStack {
Image("background") // 背景画像
Text("Hello, SwiftUI!") //画像の上の文字
}List
テーブルを作成し、行を表示していくイメージです。
List {
Text("Yamada")
Text("Sato")
Text("Tanaka")
}List は、スクロール可能なビューで、通常は複数のアイテムやデータを縦に配置して表示するのに適しています。結構使います。
ビューの配置
ここで紹介するのはビューの配置ではありますが実際は「ビューの周りの余白を指定する」というものになります。
個人的にこちらの方がUIが整って見えると思っています。
padding
ビューの周囲に余白（空白）を追加するために使用されます。余白を追加することで、ビュー内のコンテンツが周囲から適切に配置され、外観を調整することができます。
Text("Hello, SwiftUI!").padding(20) // 余白を20ポイント追加以下のような使い方で細かい調整も可能に
.padding([.top, .bottom], 10)のように、異なる方向（上、下、左、右）に異なる余白を設定.padding(.horizontal, 15)のように、水平方向の余白だけを設定.padding(.all, 5)のように、すべての方向に同じ余白を設定
以上になります。
次からは色々な使い方ができるビューにフォーカスしてSwiftUIの書き方の記事を上げていきます。
コメント