Listは表示のスタイルを変えることができます。詳しくはこれから使いながら紹介していきます。今回はもっともシンプルなplaneスタイルを紹介します。スタイルの変更には .listStyle を用います。 前回のコードに続けて書く Listオブジェクトに .listStyle( .plain ) を追加 シンプルなリストに変化する 標準は .automatic コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import SwiftUI struct ContentView : View { var body: some View { List { Text( "あいうえお" ) Text( "かきくけこ" ) Text( "さしすせそ" ) Image( "CC0_01" ) .resizable() .scaledToFit() } .listStyle( .plain ) } } 結果
Listの表示内容は Section で区切ることができます。Sectionごとにタイトルをつけてデータを整理することも可能です。今回はSectionの使い方を紹介します。 前回のコードに続けて書く Listブロック内のText3つと画像1つを、それぞれ Section ブロックで包む Sectionに ”テキストセクション” , “画像セクション” とタイトルを追加 Listオブジェクトのスタイルを .listStyle( .grouped ) に変更 セクションごとにグループ化された表示になる コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import SwiftUI struct ContentView : View { var body: some View { List { Section( "テキストセクション" ) { Text( "あいうえお" ) Text( "かきくけこ" ) Text( "さしすせそ" ) } Section( "画像セクション" ) { Image( "CC0_01" ) ....
前回までにListとSectionの使い方を紹介しました。今回はSectionを活かしたスタイルの紹介です。 前回のコードに続けて書く Listブロックの.listStyle() の指定を変えて違いを確認する .plain .insetGrouped .sidebar 表示結果はコードの後に示します。 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import SwiftUI struct ContentView : View { var body: some View { List { Section( "テキストセクション" ) { Text( "あいうえお" ) Text( "かきくけこ" ) Text( "さしすせそ" ) } Section( "画像セクション" ) { Image( "CC0_01" ) .resizable() .scaledToFit() } } .listStyle( .insetGrouped ) } } 結果 ....
2章の進め方と目標 SwiftUI入門の2章は、まず1章をご覧いただいた上で進めることをお勧めします。 2章では2つのことを目標にしています。 複数の画面を作成して移動する データと画面を結びつける 触れていく中で1つずつ理解できるよう工夫しています。1節目から進めていただけると幸いです。 サンプルコード 各ページから 1章と同様サンプルコードが必要になるタイミングで各ページに用意しています。必要に応じて入手してご利用ください。 Githubから Githubにも公開しています。一括してサンプルコードが欲しい方はこちらから取得してください。 https://github.com/wdkk/ShigeFuji-SwiftUI-swiftpm
この節では画面の移動を行うためにNavigationの使い方を紹介します。Navigationを用いるために NavigationStack を追加します。 SFSwiftUI02-1.swiftpm を開く [(サンプルコード) NavigationStack でVStackを包む VStackに .navigationTitle を追加 表示中のオブジェクトに.navigationTitleがあるとタイトルに適用される コード 1 2 3 4 5 6 7 8 9 10 11 12 import SwiftUI struct ContentView: View { var body: some View { NavigationStack { VStack { Text( "白紙のページです" ) } .navigationTitle( "タイトル" ) } } } 結果 メモ iOS16以前は NavigationView を使用しましたが,iOS16から非推奨となりました. 関連情報 Apple開発者ドキュメント - NavigationStack
今回は用途が限られますが、押すと反応するオブジェクトとして、外部ページに誘導する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 ) ....
前回紹介した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 ) ....
前回までにユーザ操作に反応するオブジェクトとして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 ) ....
前回、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 ) ....
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 ) ....