SwiftUI

SwiftUIで画像を扱いたい時は、Image を用います。前回のTextオブジェクトに並べて画像を表示してみます。 前回のコードに続けて書く 画像を表示する Image オブジェクト. 指定した画像を表示する “CC0_01” を指定する (詳細は後述) まずは画像の大きさがそのまま表示される。サイズ調整のため以下を追加する .resizable() : 大きさの変更を認める .scaledToFit() : 領域の大きさにフィットするサイズに自動調整する Imageオブジェクトは画像データをそのまま表示しようとしますが、.resizable()をつけることで表示サイズの変更ができるようになります。その上で.scaledToFit()を追加すると画面に収まるように大きさを変えてくれます。 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "あいうえお" ) .font( .title ) Image( "CC0_01" ) .resizable() .scaledToFit() } } } 結果 アセットについて サンプルコードにはあらかじめCC0_01という名前の画像が含まれています。 そのため、CC0_01と書けば画像が表示されます。 このようにApp内で利用する外部のファイルを アセット と呼びます。 アセットはAssets.xcassetsの中に含まれています。 もし新たな外部ファイルを利用したい場合、この中に登録していきます。

すでに紹介したオブジェクトとして VStack があります。VStackは { … } の中に含まれるオブジェクトを縦に並べるオブジェクトになりますが、このようなオブジェクトにも調整を行うことができます。ここではVStackに適切な余白をつけてみます。 前回のコードに続けて書く 縦並びのレイアウトを作る VStack オブジェクト VStackに .padding を追加する .padding( .horizontal, 20.0 ) : VStackの左右に20ptの余白 コード 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import SwiftUI struct ContentView: View { var body: some View { VStack { Text( "あいうえお" ) .font( .title ) Image( "CC0_01" ) .resizable() .scaledToFit() } .padding( .horizontal, 20.0 ) } } 結果

コンテンツに分割線を入れると見やすくなることがあります。 SwiftUIで分割線を表示するときは Divider を使います。 前回のコードに続けて書く Text( “あいうえお” )と Image( “CC0_01” ) の間に Divider() を追加する Divider()に .padding を追加、分割線の上下の余白を調整する .padding( .vertical, 20.0 ) : オブジェクトの上下に20ptの余白 .background を設定する Dividerの線の色は背景色で指定する コード 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( .title ) Divider() .background( .gray ) .padding( ....

縦に並べる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() } ....

前回の続きで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 ) ....

前回の続きで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( ....

本項の締めくくりとして、スクロールできるオブジェクトを導入したいと思います。スクロールができると画面に収まらない要素を閲覧できるようになります。包んだ要素をスクロールできるようにする 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( "あいうえお" ) ....

前節で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 ) } } } 結果

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

オブジェクトの主となる色を変えてみます。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....