SwiftUI

オブジェクトは基本的に長方形(矩形)の領域を持ちます。しかし矩形領域内で形を変えることもできます。ここではオブジェクトを角丸にしてみましょう。.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で余白を作り、オブジェクトの隙間やサイズを調整しました。今回はオブジェクトのサイズを具体的に指定してみます。サイズの指定は .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( ....

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

VStackは複数のオブジェクトを包んで縦方向に並べます。 前回からコードの変更はない VStack { … } のカッコ内にオブジェクトを並べる 今回は以下の順に並んでいる Image Spacer Text オブジェクトが縦方向に並んだことを確認する コード 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() } } } 結果

VStackがオブジェクトを縦に並べたように、横に並べるためのオブジェクトが HStack です。 前回のコードを以下の手順で書き換えます。 VStackの中に、HStackを追加、さらに以下のようにコードを書く 既存のImage( systemName:“globe” ) をHStackの中に入れる Spacer(), Image( systemName:”info.circle” )を追加する コード 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 body: some View { VStack { HStack { Image( systemName:"globe" ) .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Image( systemName:"info.circle" ) .imageScale(.large) .foregroundColor( .blue ) .padding() } Spacer() Text( "こんにちわ" ) ....

VStackで縦方向, HStackで横方向に並べてみました。次は上に重ねていくZStackを紹介します。以下のように前回のコードに追加していきます。 VStackをZStackで包む 次にColor()を追加。Colorは色オブジェクトで背景の色を塗ってくれる Colorに続いて前回のVStack{ … }を置く コード 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 import SwiftUI struct ContentView: View { var body: some View { ZStack { Color( .sRGB, red:0.2, green:0.3, blue:0.2, opacity:1.0 ) VStack { HStack { Image( systemName:"globe" ) .imageScale(.large) .foregroundColor(.accentColor) .padding() Spacer() Image( systemName:"info....