2章の進め方と目標 SwiftUI入門の2章は、まず1章をご覧いただいた上で進めることをお勧めします。 2章では2つのことを目標にしています。 複数の画面を作成して移動する データと画面を結びつける 触れていく中で1つずつ理解できるよう工夫しています。1節目から進めていただけると幸いです。 サンプルコード 各ページから 1章と同様サンプルコードが必要になるタイミングで各ページに用意しています。必要に応じて入手してご利用ください。 Githubから Githubにも公開しています。一括してサンプルコードが欲しい方はこちらから取得してください。 https://github.com/wdkk/ShigeFuji-SwiftUI-swiftpm
今回は用途が限られますが、押すと反応するオブジェクトとして、外部ページに誘導するLinkオブジェクトを紹介します。 前回のコードに続けて書く 外部リンクをつくる Link オブジェクト. Safariが開く URLの指定は URL( string: “アクセス先のアドレス” )! ! はOptionalという仕組みの記述。詳細は別途紹介する ※ Xcodeの場合、プレビューではリンク先に飛べないのでシミュレータで動作を確認してください。 コード 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 import SwiftUI struct ContentView: View { var body: some View { VStack { Button { print( "押しました" ) } label: { Label( "アイコンを含むボタン", systemImage: "plus" ) .foregroundStyle( .white ) .padding( .vertical, 10 ) .padding( .horizontal, 20 ) .background( .blue ) .clipShape( RoundedRectangle(cornerRadius: 8) ) } Link( "外部リンク", destination: URL( string:"https://wdkk.co.jp/" )! ) .padding( 20 ) } } } 結果 ...
前回紹介したButtonについて今回は見た目の工夫について考えてみます。labelのブロック内にViewオブジェクトを書くとボタンとして押せるようになりますが、Text以外にも色々なオブジェクトを使用可能です。ここではButtonと相性の良いLabelオブジェクトの利用を紹介します。 前回のコードに続けて書く ButtonのlabelにはTextやImage, VStackなどを使うことができる 今回は Label オブジェクトを使う Label( 文字列, systemImage:画像名 ) : ImageとTextを同時に表示 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import SwiftUI struct ContentView: View { var body: some View { VStack { Button { print( "押しました" ) } label: { Label( "アイコンを含むボタン", systemImage: "plus" ) .foregroundStyle( .white ) .padding( .vertical, 10 ) .padding( .horizontal, 20 ) .background( .blue ) .clipShape( RoundedRectangle(cornerRadius: 8) ) } } } } 結果
前回までにユーザ操作に反応するオブジェクトとしてButtonやLinkを紹介しました。Appはユーザが触れることで状態を変化させていきますが、今のところ状態を保持する方法がありません。そこで今回は状態変化を保持するための 変数(var) と @State を紹介します。 前回のコードに続けて書く 変数 var message をつくる 変数: 独立して値を保持できる領域 messageの初期値は""(空文字)にする messageの頭に @State をつける 詳細は後述 Buttonを押したときの処理に message = “押しました” を追加 ボタンを押したときに、messageの内容が"“から"押しました"に変化する TextオブジェクトをButtonの上に追加 Textの表示内容はmessage変数を設定する いくつか新しい要素が出てきたので複雑に見えますが、イメージがつかめればシンプルです。まずはコードを書いて結果をみてみましょう。その後、結果の下にある「変数」と「@State」の説明へ進んでください。 コード 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 31 import SwiftUI struct ContentView: View { @State var message:String = "" var body: some View { VStack { Text( message ) .frame( width: .infinity, height: 50 ) Button { print( "押しました" ) message = "押しました" } label: { Label( "アイコンを含むボタン", systemImage: "plus" ) .foregroundStyle( .white ) .padding( .vertical, 10 ) .padding( .horizontal, 20 ) .background( .blue ) .clipShape( RoundedRectangle(cornerRadius: 8) ) } Link( "外部リンク", destination: URL( string:"https://wdkk.co.jp/" )! ) .padding( 20 ) } } } 結果 ...
前回、SwiftUIの重要なしくみである @State を紹介しました。@Stateを用いることで扱えるオブジェクトも増えます。今回紹介する TextField もその1つです。 前回のコードに続けて書く @State var input_text:String = “あいうえお” を追加 ユーザが入力できる TextField オブジェクトを追加 TextField( “空文字時の表示”, text: つなぐ文字列変数 ) TextFieldへのユーザ入力によって値の変化が発生する 値の変化を受け入れるため、TextFieldに@Stateの文字列変数を紐づける 値を渡すとき $ をつける 変数input_textが つなぎ先 であることを示す Text( input_text ) を追加 input_textの変化を画面に反映する @Stateの変数をつなぐことでTextFieldが動作します。まずコードを書き動かしてみましょう。次に結果の下にある説明を読んでください。 コード 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 31 32 33 34 35 36 37 38 39 40 41 import SwiftUI struct ContentView: View { @State var message:String = "" @State var input_text:String = "あいうえお" var body: some View { VStack { Text( message ) .frame( width: .infinity, height: 50 ) Button { print( "押しました" ) message = "押しました" } label: { Label( "アイコンを含むボタン", systemImage: "plus" ) .foregroundStyle( .white ) .padding( .vertical, 10 ) .padding( .horizontal, 20 ) .background( .blue ) .clipShape( RoundedRectangle(cornerRadius: 8) ) } Link( "外部リンク", destination: URL( string:"https://wdkk.co.jp/" )! ) .padding( 20 ) TextField( "プレイスホルダー", text: $input_text ) .padding( 10 ) .border( .gray, width: 1.0 ) .padding( 20 ) Text( input_text ) .padding( 20 ) .frame( width: .infinity, height: 50 ) } } } 結果 ...
SwiftUIでは動作を捉えて反応する基本的なオブジェクトは用意されていますが、その他のオブジェクトに反応をつけたい場合があります。オブジェクトに .onTapGesture を追加します。 前回のコードに続けて書く @State var tap_text = “タップ前” を追加 VStackの一番下に **Text( tap_text )**を作成 上記のオブジェクトに .onTapGesture { … } を追加 タップ時の処理として tap_text = “タップしました” を記述 .onTapGestureはそのオブジェクトをタップしたときの反応を書くことができます。ただしButtonやLinkに触れたときのような見た目の変化はありません。.onTapGestureを用いる場合、良いインタラクションのために見た目の変化なども書く必要がありますので注意してください。 コード 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 import SwiftUI struct ContentView: View { @State var message:String = "" @State var input_text:String = "あいうえお" @State var tap_text:String = "タップ前" var body: some View { VStack { Text( message ) .frame( width: .infinity, height: 50 ) Button { print( "押しました" ) message = "押しました" } label: { Label( "アイコンを含むボタン", systemImage: "plus" ) .foregroundStyle( .white ) .padding( .vertical, 10 ) .padding( .horizontal, 20 ) .background( .blue ) .clipShape( RoundedRectangle(cornerRadius: 8) ) } Link( "外部リンク", destination: URL( string:"https://wdkk.co.jp/" )! ) .padding( 20 ) TextField( "プレイスホルダー", text: $input_text ) .padding( 10 ) .border( .gray, width: 1.0 ) .padding( 20 ) Text( input_text ) .padding( 20 ) .frame( width: .infinity, height: 50 ) Text( tap_text ) .padding( 20 ) .frame( width: .infinity, height: 50 ) .onTapGesture { tap_text = "タップしました" } } } } 結果 ...
前節で簡単にSwiftUIの画面作りに触れました。今節では作成したオブジェクトに触れたときの動作、つまり オブジェクトのインタラクション を扱っていきます。今回は Button です。その名の通り押せるボタンを作れます。 SFSwiftUI01-4.swiftpm を開く (サンプルコード) 押して反応するButtonオブジェクトをつくる 1つめのブロックに押した時の処理を書く print( “押しました” ) を追加 print( 値 ) : デバッグコンソールに値を出力 2つめのlabelブロックにボタンの見た目を書く 今回は見た目にTextをつかう コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import SwiftUI struct ContentView: View { var body: some View { VStack { Button { print( "押しました" ) } label: { Text( "ボタン" ) } } } } 結果 ...
SwiftUIで画像を扱いたい時は、Image を用います。前回のTextオブジェクトに並べて画像を表示してみます。 前回のコードに続けて書く 画像を表示する Image オブジェクト. 指定した画像を表示する “CC0_01” を指定する (詳細は後述) まずは画像の大きさがそのまま表示される。サイズ調整のため以下を追加する .resizable() : 大きさの変更を認める .scaledToFit() : 領域の大きさにフィットするサイズに自動調整する Imageオブジェクトは画像データをそのまま表示しようとしますが、.resizable()をつけることで表示サイズの変更ができるようになります。その上で.scaledToFit()を追加すると画面に収まるように大きさを変えてくれます。 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "あいうえお" ) .font( .title ) Image( "CC0_01" ) .resizable() .scaledToFit() } } } 結果 ...
すでに紹介したオブジェクトとして VStack があります。VStackは { … } の中に含まれるオブジェクトを縦に並べるオブジェクトになりますが、このようなオブジェクトにも調整を行うことができます。ここではVStackに適切な余白をつけてみます。 前回のコードに続けて書く 縦並びのレイアウトを作る VStack オブジェクト VStackに .padding を追加する .padding( .horizontal, 20.0 ) : VStackの左右に20ptの余白 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "あいうえお" ) .font( .title ) Image( "CC0_01" ) .resizable() .scaledToFit() } .padding( .horizontal, 20.0 ) } } 結果
コンテンツに分割線を入れると見やすくなることがあります。 SwiftUIで分割線を表示するときは Divider を使います。 前回のコードに続けて書く Text( “あいうえお” )と Image( “CC0_01” ) の間に Divider() を追加する Divider()に .padding を追加、分割線の上下の余白を調整する .padding( .vertical, 20.0 ) : オブジェクトの上下に20ptの余白 .background を設定する Dividerの線の色は背景色で指定する コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "あいうえお" ) .font( .title ) Divider() .background( .gray ) .padding( .vertical, 20.0 ) Image( "CC0_01" ) .resizable() .scaledToFit() } .padding( .horizontal, 20.0 ) } } 結果