SwiftUI

縦に並べるVStackと同様に、すでに紹介した HStack は横方向にオブジェクトを並べます。 前回のコードに続けて書く Text( “あいうえお” )を包む形で HStack を追加する 見た目は前回と変わらない HStackの中にオブジェクトを追加すると横に並ぶようになる ここでは見た目は変わりませんが、次回HStack内にオブジェクトを追加して横並びの効果を確認します。 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Text( "あいうえお" ) .font( .title ) } Divider() .background( .gray ) .padding( .vertical, 20.0 ) Image( "CC0_01" ) .resizable() .scaledToFit() } .padding( .horizontal, 20.0 ) } } 結果

前回の続きでHStackの中に、別のオブジェクトを追加して横並びの効果を見てみます。追加するものは Image オブジェクトですが、標準で用意されているアイコンの表示を試してみます。 前回のコードに続けて書く Imageオブジェクトをつかってアイコンを作る. HStackの中、Textの後に記述する Image( systemName:”gearshape” ) と書く HStackの効果でTextの右側に並ぶ Image( systemName:アイコンの名前 ) とsystemName:ラベルを使うと、SF Symbols を使うことができます。iOSにマッチした色々なアイコンを簡単に使うことができるため、便利です。 コード 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 { HStack { Text( "あいうえお" ) .font( .title ) Image( systemName:"gearshape" ) .foregroundStyle( .blue ) .font( .title2 ) } Divider() .background( .gray ) .padding( .vertical, 20.0 ) Image( "CC0_01" ) .resizable() .scaledToFit() } .padding( .horizontal, 20.0 ) } } 結果

前回の続きでHStackの中に、Spacer オブジェクトを追加します。これも既に紹介しているものですがオブジェクトの間に隙間をつくってくれます。 前回のコードに続けて書く Spacer を HStack内のTextとImageの間に追加する Textは左端に、Imageは右端に寄る Spacerも.frameなどを使えばサイズを指定することができる コード 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 import SwiftUI struct ContentView: View { var body: some View { VStack { HStack { Text( "あいうえお" ) .font( .title ) Spacer() Image( systemName:"gearshape" ) .foregroundStyle( .blue ) .font( .title2 ) } Divider() .background( .gray ) .padding( .vertical, 20.0 ) Image( "CC0_01" ) .resizable() .scaledToFit() } .padding( .horizontal, 20.0 ) } } 結果

本項の締めくくりとして、スクロールできるオブジェクトを導入したいと思います。スクロールができると画面に収まらない要素を閲覧できるようになります。包んだ要素をスクロールできるようにする ScrollView を紹介します。 前回のコードに続けて書く Image( “CC0_01” )を ScrollView で包む ScrollViewの中のImageを4つに増やす ScrollViewは標準で画面めいっぱいになるように調整されます。その結果、ScrollViewより前に記述してあるHStackやDividerは画面上に寄ります。プレビューを実行状態にすると並んだ画像をスクロールできます。 コード 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 { var body: some View { VStack { HStack { Text( "あいうえお" ) .font( .title ) Spacer() Image( systemName:"gearshape" ) .foregroundStyle( .blue ) .font( .title2 ) } Divider() .background( .gray ) .padding( .vertical, 20.0 ) ScrollView { Image( "CC0_01" ) .resizable() .scaledToFit() Image( "CC0_02" ) .resizable() .scaledToFit() Image( "CC0_03" ) .resizable() .scaledToFit() Image( "CC0_04" ) .resizable() .scaledToFit() } } .padding( .horizontal, 20.0 ) } } 結果

前節でSwiftUIでオブジェクトを装飾して部品作りに触れました。今節では基本的なオブジェクトの紹介をしつつ、簡易なApp画面を構築していこうと思います。まずはこれまでも使ってきた Text の紹介です。 SFSwiftUI01-3.swiftpm を開く (サンプルコード) 文字を表示するTextオブジェクトを追加する Textオブジェクトに.fontを追加し、 .title を指定 タイトル用の大きな文字サイズになる コード 1 2 3 4 5 6 7 8 9 10 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "あいうえお" ) .font( .title ) } } } 結果

準備( Mac, iPad )を進めて、コードが実行できるようになりましたでしょうか。このSwiftUI入門の進め方について説明します。 各章と節について 重富士SwiftUI入門は、テーマごとに章と節を区切っています。 節ごとにスタート地点となるサンプルコードを用意しています。そして節は前の項目から続いていく形になっています。まず節の頭から順番に読み進めることをおすすめします。 1章の進め方 肩の力を抜いて、まず動かしてみるところから始めます。SwiftUIを覚える！といった緊張はひとまず忘れて、コードに触れてみましょう。コードに触れたときの感覚、生まれるイメージも大切にしていきたいです。 1章の一応の目標は、コードを打つと画面が変わる・自分が思い描く画面をコードで作っていけるんだ、という感覚をもっていただくことです。なにより楽しんでいただければと思います。 サンプルコード 各ページから サンプルコードが必要になるタイミングで、各ページに用意しています。必要に応じて入手してご利用ください。 Githubから Githubにも公開しています。一括してサンプルコードが欲しい方はこちらから取得してください。 https://github.com/wdkk/ShigeFuji-SwiftUI-swiftpm

前回はpaddingを使って、オブジェクト内に余白をつけました。今度は.paddingを使って２つのオブジェクトの間に余白を作ってみます。 前回のコードに続けて書く Text( “こんばんわ” ) を追加する こんにちわの下にこんばんわが増える Text( “こんにちわ” )の.backgroundの後 に .padding( .bottom, 50.0 ) を追加 コード 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 { VStack { Text( "こんにちわ" ) .padding() .background( .indigo ) .padding( .bottom, 50.0 ) Text( "こんばんわ" ) .padding() .background( .purple ) } } } 結果

前節でSwiftUIの画面レイアウトの基本に触れました。その中でオブジェクトを自然と使ってきましたが、この節ではオブジェクト１つずつに注目して、オブジェクトをカスタマイズしていきましょう。ここではTextオブジェクトに背景をつけてみます。オブジェクトに .background() を追加します。 SFSwiftUI01-2.swiftpm を開く (サンプルコード) Text( “こんにちわ” ) に .background( .indigo ) を追加 .indigoは色を指定しています。backgroundは色以外に画像や図形を指定することもできます。 色を指定 : .background( Color.indigo ) 画像を指定 : .background( Image(…) ) 図形を指定 : .background( ShapeStyle(…) ) コード 1 2 3 4 5 6 7 8 9 10 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "こんにちわ" ) .background( .indigo ) } } } 結果

前回はオブジェクトのカスタマイズとして背景の設定を行いました。今回はpaddingを用いてオブジェクトの余白を操作してみます。 前回のコードに続けて書く 色をつけたTextの.backgroundの前に.paddingを追加 色がついた余白領域が増える メソッドを呼ぶ順番で意味が変わる .padding() -> .background() : 余白を作り、全部塗る .background() -> .padding() : 塗ったあと、透明の余白を作る コード 1 2 3 4 5 6 7 8 9 10 11 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "こんにちわ" ) .padding() .background( .indigo ) } } } 結果

Spacerは画面の隙間を埋めるオブジェクトです。例えばオブジェクトAとオブジェクトBの間に入れると、AとBを両端に寄せて、その合間に画面めいっぱい大きな隙間を作ってくれます。 以下の手順で隙間を作ってみます。 ImageとTextの間に Spacer を追加する バランスを取るため、 Imageにも.paddingをつける 地球マークが画面上、こんにちわが画面下に移動したことを確認 Spacer は同じグループのオブジェクト全体を満たす隙間をつくる 今回はVStackを目一杯に満たす大きさになる コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 import SwiftUI struct ContentView: View { var body: some View { VStack { Image(systemName: "globe") .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Text( "こんにちわ" ) .padding() } } } 結果