SwiftUI

VStackは複数のオブジェクトを包んで縦方向に並べます。 前回からコードの変更はない VStack { … } のカッコ内にオブジェクトを並べる 今回は以下の順に並んでいる Image Spacer Text オブジェクトが縦方向に並んだことを確認する コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Text( "こんにちわ" ) .padding() } } } 結果

VStackがオブジェクトを縦に並べたように、横に並べるためのオブジェクトが HStack です。 前回のコードを以下の手順で書き換えます。 VStackの中に、HStackを追加、さらに以下のようにコードを書く 既存のImage( systemName:“globe” ) をHStackの中に入れる Spacer(), Image( systemName:”info.circle” )を追加する コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Image( systemName:"globe" ) .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Image( systemName:"info.circle" ) .imageScale(.large) .foregroundColor( .blue ) .padding() } Spacer() Text( "こんにちわ" ) .padding() } } } 結果

VStackで縦方向, HStackで横方向に並べてみました。次は上に重ねていくZStackを紹介します。以下のように前回のコードに追加していきます。 VStackをZStackで包む 次にColor()を追加。Colorは色オブジェクトで背景の色を塗ってくれる Colorに続いて前回のVStack{ … }を置く コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 import SwiftUI struct ContentView: View { var body: some View { ZStack { Color( .sRGB, red:0.2, green:0.3, blue:0.2, opacity:1.0 ) VStack { HStack { Image( systemName:"globe" ) .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Image( systemName:"info.circle" ) .imageScale(.large) .foregroundColor( .blue ) .padding() } Spacer() Text( "こんにちわ" ) .padding() } } } } 結果

プログラムの動作を確認するにはいくつか方法があります。 ビルド(App化)して実行 プレビューで実行 プレビューで見た目変更の自動確認 それぞれ用途が異なりますが、ここではまず手軽なプレビューで実行する方法を紹介します。 1. Mac(Xcode)のプレビュー Xcodeでswiftpmのプロジェクトを利用している場合、SwiftUIのプレビューは基本的に自動で実行されます。 ただし大きな変更など、自動認識できなくなることがあります。 その場合、プレビュー右上に出てくるResumeを押すと、更新を再開できます。 2. iPadのプレビュー iPadのプレビューも同様に基本は自動で実行されます。 ただMac同様に必要な時は自動で更新を実行できます。 Appのプレビューというタイトルを押す メニューが出てくるので必要な項目をタップ プレビューが再構築される

では今回から、SwiftUIでのプログラムをはじめていきましょう。初回はもっとも基本的なオブジェクトの1つ、Textを使ってみます。 作成したswiftpmのAppプロジェクト(Mac, iPad)を開く サンプルコードを利用してもOK あるいはSFSwiftUI01-1.swiftpm を開く (サンプルコード) プロジェクトは、はじめからいくつかのファイルがつくられます。 この中の ContentView を開きます。ContentViewはAppを起動した時にはじめに表示される画面です。 この中身を書き換えて、変更がプレビューに反映されるか確認してみます。 ContentView をひらく Text(“Hello, world!”) の Hello, world! を こんにちわ に変更 プレビューで こんにちわ に変わっていることを確認 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text( "こんにちわ" ) } } } 結果

iOSにはライトモードとダークモードがあります。 基本的にユーザがOSの設定で決めるものなのでプログラム側で何かすることはありません。ただ作成するAppのコンセプトによってはダークモードに固定したいといったリクエストもあると思います（※ 夜がテーマのAppならダークモードに固定したくなるとおもいます）。 今回はプレビューでの見え方を統一するためにコードでモードの切り替えを行います。 モードの切り替えはContentViewに対して設定します。 MyAppを開く ContentView() に .preferredColorScheme(.dark) を追加する ContentView() がダークモードになることをプレビューで確認 .darkを.lightとすればライトモードになります コード 1 2 3 4 5 6 7 8 9 10 11 import SwiftUI @main struct MyApp: App { var body: some Scene { WindowGroup { ContentView() .preferredColorScheme(.dark) } } } 結果

前回、SwiftUIのオブジェクトの編集をはじめることができました。ここからはオブジェクトにいろいろな性格を持たせて見た目を変えていきましょう。今回は padding です。オブジェクトに余白を持たせます。 ContentViewを開く Text( “こんにちわ” )に.padding()を追加して余白をつくる .padding() は幅や方向を指定することも可能 .padding( 50.0 ) : 上下左右に50.0ptの余白 .padding( .top, 80.0 ) : 上に80.0ptの余白 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) Text( "こんにちわ" ) .padding() } } } 結果

2022年から、iPadをつかってiOS App開発ができるようになりました。 1. Swift Playgroundsをインストールする iPadでは、Swift Playgroundsを使ってAppを開発します。 App StoreからSwift Playgroundsをインストールしてください。 2. プロジェクトの作成 Swift Playgroundsをタップして起動します。 画面左下のAppを選択 3. プロジェクトを開く Appを作成するとマイプレイグラウンドに**マイApp*が追加されます。これがApp作成に必要なものを詰めたパッケージです。プロジェクトと呼びます。これを開いてみましょう。 マイAppをタップ 4. 準備完了 マイAppを開いて以下のような画面がでてくれば準備完了です。

MacをつかってiOS App開発をはじめてみます。 1. Xcodeをインストールする MacではXcodeを用いてAppをつくります。 App StoreからXcodeをインストールしてください。 2. プロジェクトの作成 Xcodeを立ち上げると以下のようなウインドウがでてきます。 Appを作成するために必要な材料を管理する仕組みをプロジェクトと呼びます。今回は新規のプロジェクトを作成します。 Create a new Xcode projectを押す メニューのFile > New > Projectでも可 3. Swift Playground Appプロジェクトの選択 プロジェクトにはいろいろな種類があり、様々なAppを作成することができます。 今回は2022年からApp開発に使えるようになったSwift Playground Appのプロジェクト(swiftpm)を選択します。 PlatformでiOSを選択 Swift Playgrounds Appを選択 4. プロジェクトの初期設定 プロジェクトの名前をつけてください。 App Name (名前) 自由な名前でOK Team (開発アカウント) NoneでOK 開発者アカウントがあればそれを選択 Organization Identifier (組織ID) com.sampleと入力 自分のドメインがあれば入力(sample.netの場合, net.sample.appnameのようにすることが多い) Nextを押すとプロジェクトの保存先を聞かれるので適当な場所に保存してください。 指定した場所にApp Nameのswiftpmファイルができていますので確認してください。 5. 準備完了 プロジェクト作成が終わるとXcodeのエディタが開きます。 画像のような状態が表示できたら準備完了です。 6. MacとSwift Playground App ここまでXcodeでの準備を説明しましたが、MacでもiPadと同じようにSwift Playgrounds Appを用いて開発をすることも可能になりました。 ...