//tips
//aspectratio()の.fitに関する補足
imageのaspect ratioの引数を「.fit」として記載したが、これはaspect ratio()メソッドの引数である列挙体contentModeの値を指定している。
Image("counter")
.resizable()
.aspectRatio(contentMode: .fit)
列挙体contentModeを簡単に書くと下記の構造になっており、その中のfitの方を選んだということである。
Enum ContentMode{
case fit
case fill
}
ここで用いられている.ドットはContentMode.fitの列挙体名であるContentModeを省略していることを示している。
この列挙体を使う理由は、予め決められた列挙体の値のみを入力値として使用させたい場合に設定する。.fatや.0などは認めないということである。
//テキスト部分への追加編集
「カウント」という文字の背景と背景の角を丸くさせるコードを追加する。
Button(action: {self.number += 1}) {
Text("カウント")
.foregroundColor(/*@START_MENU_TOKEN@*/.white/*@END_MENU_TOKEN@*/)
.padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
.background(/*@START_MENU_TOKEN@*//*@PLACEHOLDER=View@*/Color.blue/*@END_MENU_TOKEN@*/)
.cornerRadius(/*@START_MENU_TOKEN@*/10.0/*@END_MENU_TOKEN@*/)
}
backgroundで文字の後ろに青い背景を追加した後、cornerRadius(10.0)で背景の長方形の角を丸くした。
//mapアプリの作成
まずはimport Mapkitをスクリプトに記載してMapView構造体を追加して編集。
import MapKit
import SwiftUI
struct MapView:UIViewRepresentable{
func makeUIView(context:Context)->MKMapView{
return MKMapView()
}
func updateUIView(_ uiView: MKMapView, context:Context){
}
}
struct ContentView: View {
var body: some View {
MapView()
.edgesIgnoringSafeArea(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
ピンチイン・ピンチアウトはoptionキーを押しながらドラッグする。
また、コードの内容の詳細を知りたい場合はoptionキーを押したまま単語をクリックすれば、ヘルプが表示される。
//英単語カードアプリ作成
日本語と英語で表裏となった英単語カードアプリを作成する。
ベースとなるスクリプトは下記とした。
import SwiftUI
struct ContentView: View {
var cards = ["鞄": "bag",
"自動車": "car",
"誕生日": "birthday"]
@State var japanese = "鞄"
@State var isJapanese = true
var body: some View {
VStack {
Text(isJapanese ? japanese : cards[japanese]!)
.padding()
HStack {
Button(action:{self.isJapanese.toggle()}) {
Text("裏返す")
}
Button(action: {
self.isJapanese = true
self.japanese = self.cards.randomElement()!.key
}) {
Text("次へ")
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
isJapanese ? : cards[japanese]! は
条件 ? 真の場合の式 : 偽の場合の式
となり、やっていることはif文と変わらない。
例えば、
x > 0 ? print(“0より大きい”) : print(“0以下”)
は
If x > 0{
print(“0より大きい”)
}else{
print(“0以下”)
}
となる。
なので、isJapanese ? : cards[japanese]!は
正の場合は、値はそのまま。
偽の場合は、cards[japanese]!の値に変わる。
!を付加しているのは、「反対」という意味の!ではなく、辞書は空ではなく、確実に値を取り出せるというサインである。
このサインを入力する理由は、辞書cardsに要素がない場合はnilが返されるようになっているからで、値にnil(無)を含める場合はこのような処理が必要になる。
また、ブールの使用時にtoggle()を使用することでtrue/falseを切り替えることができる。
var mybool = true
print(mybool.toggle())
先に辞書機能も使用したので内容に少し触れる。
辞書機能は、配列の中身を取り出しや空くするために用いられる。
例えば、
var week =[“月曜日”,”火曜日”]の中身を取り出すためには、print(todos[0])としなければならない。
この添字の0の部分と曜日の関係が非常に分かりにくい。
そこで、キーを曜日、値を曜日の日付の数字などにしておくと
var 辞書名 = [キー1:値1,キー1:値1]
var week = [“月曜日”:11, ”火曜日”:12]
などと互いに関係した設定にすることができる。
この辞書の要素をランダムで取り出すという仕組みを「次へ」へ組み込んでおり、コードのself.cards.randomElement()!.key部分に該当する。
randomElement()の戻り値は(key: String, value:String)?の形で表され、この戻り値の書き方をタプルという。
タプルは、配列や辞書のように複数の値をまとめて格納できる点で同じだが、要素の追加や削除が行えないというデメリットを持つ。メリットは値をキー毎に別のタイプに変えられる点。nameでstring、ageでintなど。配列や辞書ではこれはできない。
取り出し方は、変数名.要素名を記述すればよく、その点でも扱いやすい。
ver person = (name:”おじさん”,age:100)
print(person.name)
「おじさん」と表示される。
?がついている理由はnilが格納されているということを示し、これから返り値には!を追加する必要があることがわかる。
randomElement()!.keyで辞書の中の「キー」の一つが取り出され、
randomElement()!.valueで「値」の一つが取り出されることになる。
さらに、imageをAssts.xcassetsに追加してスクリプトを下記のように編集。
import SwiftUI
struct ContentView: View {
var cards = ["鞄": "bag",
"自動車": "car",
"誕生日": "birthday"]
@State var japanese = "鞄"
@State var isJapanese = true
var body: some View {
ZStack{
Color(red: 0.97, green: 0.96, blue: 0.56)
.edgesIgnoringSafeArea(.all)
VStack {
ZStack{
Image("card")
.resizable()
.frame(width: 300.0, height: 133.0)
.shadow(radius: 3)
.rotation3DEffect(
.degrees(isJapanese ? 0 : 180),
axis: /*@START_MENU_TOKEN@*/(x: 0.0, y: 1.0, z: 0.0)/*@END_MENU_TOKEN@*/)
.animation(.spring())
.onTapGesture{self.isJapanese.toggle()
}
Text(isJapanese ? japanese : cards[japanese]!)
.font(.largeTitle)
}.padding()
HStack {
Group{
Button(action:{self.isJapanese.toggle()
}) {
Image(systemName:"arrow.2.circlepath")
Text("裏返す")
}
Button(action: {
self.isJapanese = true
self.japanese = self.cards.randomElement()!.key
}) {
Image(systemName:"forward.fill")
Text("次へ")
}
}.padding()
.foregroundColor(.white)
.background(Color(red:0.86, green:0.45, blue: 0.03))
.cornerRadius(10)
}
}
}
}
}
