SwiftUI

前回リスト用のデータを追加しましたが、表示の切り替えやセクションわけができませんでした。今回はデータに種別を追加して、表示の出しわけをしてみようと思います。 前回のコードに続けて書く PhotoDataに変数 type を増やす typeは「データの種類」 まず、データの種類がわかるようにPhotoDataを改良します。追加位置は自由ですが、下記の例ではidとimageNameの間に入れています。 コード1 1 2 3 4 5 6 7 8 9 import Foundation struct PhotoData : Identifiable { var id = UUID() var type:String var imageName:String var title:String var message:String } PhotoDataの構造を変えたので、ContentViewでPhotoDataを使う時typeの値を求められます。 それぞれのPhotoDataがどんな種類のデータであるか、typeに入力していきます。 ContentViewのphotos:[PhotoData]の各情報にtypeを追加する 景色のデータは type:”景色” と書く 食べ物のデータは type:”食べ物” と書く コード2 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 photos:[PhotoData] = [ PhotoData( type:"景色", imageName:"CC0_01", title:"景色1", message:"森と山です" ), PhotoData( type:"景色", imageName:"CC0_04", title:"景色2", message:"きれいな湖です" ), PhotoData( type:"景色", imageName:"CC0_06", title:"景色3", message:"フィレンツェです" ), PhotoData( type:"景色", imageName:"CC0_07", title:"景色4", message:"ひまわりです" ), PhotoData( type:"景色", imageName:"CC0_10", title:"景色5", message:"海に日が沈みます" ), PhotoData( type:"食べ物", imageName:"CC0_05", title: "ハンバーガーセット", message: "おいしいです" ), PhotoData( type:"食べ物", imageName:"CC0_08", title: "カフェラテ", message: "おちつきます" ), PhotoData( type:"食べ物", imageName:"CC0_09", title: "ケーキ", message: "あまいです" ), PhotoData( type:"食べ物", imageName:"CC0_12", title: "お酒", message: "酔います" ) ] var body: some View { List { Section( "景色写真" ) { ForEach( photos ) { photo in SceneryRow( data:photo ) } } } ....

前回、部品として使えるViewをつくることができました。しかし全く同じものをたくさん増やせるだけではあまり意味がありません。そこで今回は部品に変更できる余地を持たせて、値によって様子が変わるようにしてみます。具体的にはView部品に 初期の値を持たない変数 を追加します。 SceneryRow.swiftを開き, SceneryRowに変数 title を追加する 前回Textに固定で入力した ”景色” を, title に置き換える コード1 1 2 3 4 5 6 7 8 9 10 11 import SwiftUI struct SceneryRow : View { var title: String var body: some View { HStack { Text( title ) } } } SceneryRowに初期の値がないtitleを追加しました。 これによって一時的にエラーが起きますが、気にしないでください。View部品に値のない変数があった場合、部品を使うときに値が求められます。今回はSceneryRowにtitleの値が必要になりましたので、SceneryRowにtitleの値を渡してあげるようにします。 ContentView.swiftを開き、SceneryRowにtitleの値を渡す 5つあるので、それぞれ渡す値を変えてみる コード2 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 { Section( "景色情報" ) { SceneryRow( title:"景色1" ) SceneryRow( title:"景色2" ) SceneryRow( title:"景色3" ) SceneryRow( title:"景色4" ) SceneryRow( title:"景色5" ) } } ....

前回、View部品に値を渡せるようにしました。渡す値を増やすこともできます。 前回のコードに続けて書く SceneryRowに変数 imageName:String を追加 imageNameの文字列はAssetsにある画像名 Image( imageName )を追加 Text( title )の前に置く 大きさ調整のコード .resizable(), .scaledToFit() を追加 元画像が大きいので .frame( maxHeight:80 ) で縦幅を最大80ptに収める コード1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import SwiftUI struct SceneryRow : View { var imageName: String var title: String var body: some View { HStack { Image( imageName ) .resizable() .scaledToFit() .frame( maxHeight:80 ) Text( title ) } } } SceneryRowに初期値のないimageName変数を追加したのでSceneryRowに渡す値にimageNameを増やします。...

View部品を作れるようになると、多様なレイアウトを含むことができるようになります。たとえば前回作ったリストより大きな画像サムネイルで主張したいリストがあるとします。今回は食べ物写真が映えるように FoodAndDrinkRow という名前の新しいView部品を追加します。 前回のコードに続けて書く View部品にするswiftファイルを追加する ファイルリストで右クリック, New Fileを選択して新しいファイルを作る File.swiftを FoodAndDrinkRow.swift に変更する FoodAndDrinkRowを以下のように記述する 受け取る値は imageName, title, message の3つ VStackで縦方向に並べる alignment:.leading をつけて左寄せに コード1 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 FoodAndDrinkRow : View { var imageName: String var title: String var message: String var body: some View { VStack( alignment:.leading ) { Image( imageName ) ....

前節まででView部品をつくりListを色々な表示できるように工夫しました。しかし項目が増えるごとにコードが長くなりますし、View自体にそのまま値を書き込んでしまっています。Appとしてはもっと多くのデータを表示したいでしょう。そこで、今節ではViewに表示するデータの整理方法を紹介します。見た目は前節と同様のものを目指します。 構造体 はじめに、データをViewから独立させて扱いやすくします。 構造体 を使ってデータの容れ物をつくります。 SFSwiftUI02-4.swiftpm を開く (サンプルコード) 新しいswiftファイルを追加する ファイルリストで右クリック, New Fileを選択して新しいファイルを作る File.swiftを PhotoData.swift に変更する PhotoData.swiftに以下のコードを記述する struct は 構造体 を指す id, imageName, title, message の4つの変数を追加 Identifiable を付与し、 id に UUID() を代入 データをひとつひとつ識別できるようになる 後述する ForEach のためにIDが必要 構造体は、複数の変数を詰め合わせた変数 です。その他の役割もありますが今はこの理解で十分です。構造体を使うことでまず複数の種類の値を整理することができます。今回のPhotoDataなら、リストの1項目に必要な画像名、タイトル、メッセージをまとめて扱えるようになります。 コード1 1 2 3 4 5 6 7 8 import Foundation struct PhotoData : Identifiable { var id = UUID() var imageName:String var title:String var message:String } 配列 これで PhotoData を変数として使うことができます。さっそく表示のために使ってみましょう。リストには複数の項目がありますからPhotoDataも複数必要です。しかしながらデータの数だけPhotoDataを作るのはやはり大変です。そこで変数をたくさん並べられる 配列 を紹介します。...

前回までに複数の画面の行き来とListを説明しました。画面はViewによって作れることは紹介しましたが、画面の一部もViewです。よって部品も画面全体と同様にカスタマイズできます。今回はListの1項目にあたるView部品を自作してみます。 SFSwiftUI02-3.swiftpm を開く (サンプルコード) View部品にするswiftファイルを追加する ファイルリストで右クリック, New Fileを選択して新しいファイルを作る File.swiftを SceneryRow.swift に変更する SceneryRow.swiftに以下のコードを記述する コード1 1 2 3 4 5 6 7 8 9 import SwiftUI struct SceneryRow : View { var body: some View { HStack { Text( "景色" ) } } } ContentViewを開く List内にSection( “景色情報” )を作り、その中に SceneryRow を5つ書く コード2 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 { Section( "景色情報" ) { SceneryRow() SceneryRow() SceneryRow() SceneryRow() SceneryRow() } } ....

ナビゲーションを使うと複数の画面の行き来がしやすくなります。これまではContentViewのみでしたが、Navigationを使って複数の画面を扱えるようにします。手始めとしてNavigationViewの1つめの画面を作ります。 前回のコードに続けて書く 新しい画面用のswiftファイルを追加する ファイルリストで右クリック, New Fileを選択して新しいファイルを作る File.swiftという名前を FirstView.swift に変更する ファイルの追加 名前の編集 File.swift > FirstView.swiftへ変更 FirstView.swift を開く var body : some View { … } を記述 以下のコードを参照 コード1 1 2 3 4 5 6 7 8 9 import SwiftUI struct FirstView: View { var body: some View { VStack { Text( "はじめのページです" ) } } } 作成したFirstViewが一つ目の画面です。これをNavigationStackの中に表示してみましょう。 ContentView.swiftを開き, 前ページで作成したFirstViewを使うよう書き換える NavigationStackの中にVStack, その中にFirstView()を書く FirstView()に.navigationTitleを追加する プレビューでNavigationStackの中に、FirstViewの記述が反映されていることを確認してください。 コード2 1 2 3 4 5 6 7 8 9 10 11 12 import SwiftUI struct ContentView: View { var body: some View { NavigationStack { VStack { FirstView() ....

前回Navigationの1画面目としてFirstViewという自作Viewを追加しました。今回は2画面目を追加し、1画面目から遷移するプログラムを紹介します。NavigationStack内の遷移には NavigationLink を利用します。 前回のコードに続けて書く 新しい画面用のswiftファイルを追加する ファイルリストで右クリック, New Fileを選択して新しいファイルを作る File.swiftを SecondView.swift に変更する ファイルの追加 SecondView.swift を開く 作り方はFirstViewと同じ。TextとImageを追加する コード1 1 2 3 4 5 6 7 8 9 10 11 12 13 import SwiftUI struct SecondView: View { var body: some View { VStack { Text( "Secondページです" ) .padding() Image( systemName: "globe" ) .padding() } } } SecondViewができあがったら ContentView を開き、画面を遷移する処理を書きます。 画面下側に NavigationLink を追加する NavigationLinkの処理ブロック内に遷移する画面の内容を記述 SecondView NavigationLink( テキスト, distination: { 次の画面 } ) みやすくするために ....

前回までにNavigationによる画面遷移を紹介しました。もう一つ頻出する画面の移動方法に Sheet があります。モーダルビュー とも呼ばれます。Sheetは現在の画面の補助的な情報を提示するサブ画面に使われることが多いです。代表的なものとして、Appの共有ボタンを押すと「どのように共有しますか」を尋ねるアクションシートなどが挙げられます。今回は自作画面をSheetに表示してみます。 前回のコードに続けて書く 新しい画面用のswiftファイルを追加する ファイルリストで右クリック, New Fileを選択して新しいファイルを作る File.swiftを ModalView.swift に変更する ファイルの追加 ModalView.swift を開く 作り方はFirstViewと同じ。Textを追加する コード1 1 2 3 4 5 6 7 8 9 import SwiftUI struct ModalView: View { var body: some View { VStack { Text( "モーダルです" ) } } } ModalViewができあがったら SecondView を開きます。 VStackに**.sheet** を追加 .sheetのブロック内で ModalView を使った画面を作る @State var is_presented_shown = false を追加 .sheetのisPresentedに$is_presented_shownを指定する 値がtrueになるとsheetの中身が表示される Buttonを追加 押した時に is_present_shown = true is_present_shownの変化を察知して、sheetが動作する シートの表示・非表示は@Stateの値でコントロールします。 コード2 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 import SwiftUI struct SecondView: View { @State var is_present_shown:Bool = false var body: some View { VStack { Text( "Secondページです" ) ....

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() } } } 結果