//tips
//swiftを使い四角形を表示
画面に表示されているテキストにプラスボタンのviewからrectangleをドラッグ+commandでドロップし、真っ黒な資格を表示し、表示が画面いっぱいになり気持ち悪いので、padding()を追加。
import SwiftUI
struct ContentView: View {
var body: some View {
Rectangle().padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
画面に黒い四角形が表示される。
//imageの表示と加工
Viewからテキスト部分にimageをドロップ。”smiley”を呼び出す。
初期では小さく表示されるようになっているのでmodifierからimage resizableを呼び出し、addする。
この際に、resumeを行うと顔が画面いっぱい広がる。
縦横比を適切に設定するために、modifierからscaled to fitをドロップするだけで顔のサイズの縦横比が適切に調整される。
さらにpaddingを追加し、foreground colorをimageの上にドロップすると色が変わる。
import SwiftUI
struct ContentView: View {
var body: some View {
Image(systemName: "smiley")
.resizable()
.foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
.padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
.scaledToFit()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Smileyのようなappleが用意するSF Symbolsにどのような種類があるかは下記サイトへアクセスしてアプリをダウンロードする必要がある。
https://developer.apple.com/design/human-interface-guidelines/sf-symbols/overview/
//viewやmodifierの詳細
プラスボタンを押して表示されるUI部品の使い方を知りたい場合は、気になる部品をクリックし、その説明文下記に表示されているopen in developer documentationを開くと、より詳しい使い方を確認することができる。
//カウンターアプリの作成
ViewからButtonをテキストの下に追加。
コードを下記のように編集。
import SwiftUI
struct ContentView: View {
@State var number = 0
var body: some View {
VStack {
Text("\(number)")
.padding()
Button(action: {self.number += 1}) {
Text("カウント")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
バックスラッシュはoption+¥マークで表示できる。
またButton(action: {self.number += 1}) の部分は
Button(action:count){}
func count()
{
Self.number += 1
}
とcountメソッドを組み込むことができる。countメソッドを使用しない代わりにaction以下では{self.number += 1}と本来ならメソッドで使用される{ }が残っている。
@stateを用いることで変数の値が変わるごとにstate構造体に組み込まれているupdateが呼び出され、viewの再表示が自動的に行われる。
これはプロパティラッパーと呼ばれ、プロパティ宣言時に指定すると、プロパティが特別な機能を持つものである。
@Stateの他には、プロパティの値が変更されたときに親のUI部品のプロパティも変わる@Bindingなどがある。
カウンターの画像も表示させたいのでAssets.xcassetsにデスクトップからimageをドラッグアンドドロップ。
全てのサイズのimageの追加後に、content view.swiftに変更。
プラスボタンのメディアというカテゴリーをおすと、追加したimageが表示されている。
数字の表示の上にimageを差し込んだあとは、画像を編集するため、画像サイズを変更するimage resizable,画像の縦横比を調節するAspect ratioをimageにドロップする。
数字の色も変更したい場合は、foreground colorを数字表記にドロップする。
カウンターの上に数字を重ねて表示させたいので、数字は白に変更。
Zstackを用いてUI部品を前後に重ねる。後に実装したviewが上に重なる。
import SwiftUI
struct ContentView: View {
@State var number = 0
var body: some View {
VStack {
ZStack{
Image("counter")
.resizable()
.aspectRatio(contentMode: .fit)
Text("\(number)")
.foregroundColor(/*@START_MENU_TOKEN@*/.white/*@END_MENU_TOKEN@*/)
.padding()
}
Button(action: {self.number += 1}) {
Text("カウント")
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
キーボードのoptionボタンを押しながら、プラスボタンを押すと、常時プラスのライブラリを表示した状態になるので便利。
