SwiftUI

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 ...

この節では画面の移動を行うために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( "タイトル" ) } } } 結果 ...

Textオブジェクトなどの文字は、特に指定がなければ標準のフォントを標準のサイズで表示してくれます。.fontを指定するとサイズやフォントの種類などを変えることができます。 前回のコードに続けて書く Text( “こんにちわ” )に .font( .system(size:24.0) ) を追加 .fontにはさまざまな指定方法がある OSのシステムフォント: .system( size: ) 項目に適したフォント: .largetitle, .title, .headline, .subheadline 太文字: .system( size:24.0, weight: .bold ) コード 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( .system( size:24.0 ) ) .frame( minWidth: 100, minHeight: 100 ) .padding() .background( .indigo ) .padding( .bottom, 50.0 ) Text( "こんばんわ" ) .frame( maxWidth:.infinity, minHeight:40 ) .padding() .background( .purple ) } } } 結果

オブジェクトの主となる色を変えてみます。Textオブジェクトの場合、主となるのは文字の色です。主となる色の指定には .foregroundStyle を使います。 前回のコードに続けて書く Text( “こんにちわ” )に .foregroundStyle( .mint ) を追加 foregroundStyleはオブジェクトの主体となる色を指定できる foregroundStyleは単色以外にもグラデーションカラーなどを指定できる foregroundStyleが適用される対象はオブジェクトによって異なる コード 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 { VStack { Text( "こんにちわ" ) .font( .system(size: 24.0) ) .foregroundStyle( .mint ) .frame( minWidth: 100, minHeight: 100 ) .padding() .background( .indigo ) .padding( .bottom, 50.0 ) Text( "こんばんわ" ) .frame( maxWidth:.infinity, minHeight:40 ) .padding() .background( .purple ) } } } 結果 ...

オブジェクトは基本的に長方形(矩形)の領域を持ちます。しかし矩形領域内で形を変えることもできます。ここではオブジェクトを角丸にしてみましょう。.clipShape をつかって 前回のコードに続けて書く Text(“こんにちわ”)の .background後に.clipSpahe() を追加 .clipShape()に RoundedRectangle( cornerRadius:8 ) を指定する 半径8ポイントで角を丸くした四角でクリップ(切り取る)という意味 Text(“こんばんわ”)の .background後に. を追加 .clipShape()に RoundedRectangle( cornerRadius:30 ) を指定する 半径30ポイントで角を丸くした四角でクリップ(切り取る)という意味 オブジェクトに追加する並びで結果が変わる（背景色を決めた後に丸める） コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "こんにちわ" ) .font( .system(size: 24 ) ) .foregroundColor( .mint ) .frame( minWidth: 100, minHeight: 100 ) .padding() .background( .indigo ) .clipShape( RoundedRectangle( cornerRadius:8 ) ) .padding( .bottom, 50 ) Text( "こんばんわ" ) .frame( maxWidth:.infinity, minHeight:60 ) .padding() .background( .purple ) .clipShape( RoundedRectangle( cornerRadius:30 ) ) } } } 結果 ...

前回は.paddingで余白を作り、オブジェクトの隙間やサイズを調整しました。今回はオブジェクトのサイズを具体的に指定してみます。サイズの指定は .frame を用います。 前回のコードに続けて書く Text( “こんにちわ” )の 一番はじめに.frame(…) を追加 Text( “こんばんわ” )の 一番はじめに.frame(…) を追加 .paddingとおなじく、呼ぶ順番が重要 width, height: 固定値で指定 maxWidth, maxHeight: 最大値で指定 maxWidthに .infinity を指定すると横方向に最大になる コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "こんにちわ" ) .frame( minWidth: 100, minHeight: 100 ) .padding() .background( .indigo ) .padding( .bottom, 50.0 ) Text( "こんばんわ" ) .frame( maxWidth:.infinity, minHeight:40 ) .padding() .background( .purple ) } } } 結果

SwiftUIでiOS Appの開発に着手します. お手持ちのMacかiPadでお試しいただけます。 1章. プロジェクト作成と導入 1-0. 準備 1-0-1. Macでswiftpmを作成する 1-0-2. iPadでswiftpmを作成する 1-0-3. プレビューの使い方 1-0-4. 1章の目標・進め方・サンプルコード 1-1. コーディングをはじめる・レイアウトをはじめる 1-1-1. Textの文字を変える 1-1-2. ダークモードに切り替える 1-1-3. オブジェクトに余白をつくるpadding 1-1-4. 自動的に隙間を作るSpacer 1-1-5. 縦方向に並べるVStack 1-1-6. 横方向に並べるHStack 1-1-7. 重ねていくZStack 1-2. オブジェクトを装飾する 1-2-1. 背景を設定するbackground 1-2-2. paddingでオブジェクト内の余白を作る 1-2-3. paddingでオブジェクト間の余白を作る 1-2-4. オブジェクトのサイズを決めるframe 1-2-5. テキストスタイルを変えるfont 1-2-6. メインの色を変えるforegroundStyle 1-2-7. 角を丸くするclipShapeとRoundedRectangle 1-3. オブジェクトを組み合わせて画面をつくる 1-3-1. 文字を表示するText 1-3-2. 画像を表示するImageとアセット 1-3-3. 縦並びレイアウトVStackの応用 1-3-4. 分割線Divider 1-3-5. 横並びレイアウトHStack 1-3-6. Imageでアイコン利用 1-3-7. 隙間を充填するSpacer 1-3-8. スクロールを実現するScrollView 1-4. オブジェクトとアクション 1-4-1. Buttonを押す 1-4-2. Buttonの装飾とLabel 1-4-3. Linkを使った外部リンク 1-4-4. ボタンを押した時テキストを変える - @Stateの使い方 1-4-5. ユーザが入力できるTextField - 値のBinding 1-4-6. オブジェクトのタップを捉えるonTapGesture ...