重富士

SwiftUIのオブジェクトの中でも特に便利なのが List です。従来のUIKitではTableView, CollectionViewなどでリスト表示を作りますが、SwiftUIのListオブジェクトはそれらに比べていたってシンプルです。Appでもリストを使ったデータ表示はよく用いられます。そこで今節ではListに触れてみようと思います。 SFSwiftUI02-2.swiftpm を開く (サンプルコード) ContentView.swiftを開く Listオブジェクトを追加する Listのブロック内のViewを自動的にリスト化する 内容が画面から溢れる時は自動的にスクロールが追加される コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import SwiftUI struct ContentView : View { var body: some View { List { Text( "あいうえお" ) Text( "かきくけこ" ) Text( "さしすせそ" ) Image( "CC0_01" ) .resizable() .scaledToFit() } } } 結果

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" ) .resizable() .scaledToFit() } } .listStyle( .grouped ) } } 結果

前回までに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 ) } } 結果 .plain ...

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( "タイトル" ) } } } 結果 ...

今回は用途が限られますが、押すと反応するオブジェクトとして、外部ページに誘導する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 ) } } } 結果 ...