//tips
//xcode/swiftを使用したアプリ作成
Xcodeのcreate a new Xcode projectから新規アプリ作成。
そうするとxcodeに下記のスクリプトが表示される。
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello, world!")
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
今回はiphone11proMaxでのプレビュー形状とする。
画面右上のプラスボタンを押してiphoneに設置するUIを検索する。
navigationを見つけたのでiPhoneテキスト上にcommandを押しながらドラッグアンドドロップする。
ドロップするタイミングはreplace text with navigation viewの表示が出たときでないとうまくいかないので注意。失敗した場合は、command+zで戻す。複数の手順戻りたい場合はメニューのeditからundoをクリックする。
これにより左記コードも下記のように変化する。
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Destination@*/Text("Destination")/*@END_MENU_TOKEN@*/) { /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Content@*/Text("Navigate")/*@END_MENU_TOKEN@*/ }
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Navigation link部分をcommand+クリックし、embed in listを選択する。
再度プラスボタンを押し、モディファイヤーライブラリからnavigation Bar TitleをNavigationViewの}の外に配置。
Xcode12で動作させていたが、なぜかnavigation Bar Titleが存在せず、なぜかうまく反映されないので、情報が多いXcode11に一旦ダウングレード。
こちらでもエラーになり、iosをダウングレードするのが嫌だったので、再度xcode12の方で挑戦。
Navigation bar titleというものがios12ではなくなり、navigation titleに変わっていた。似たものにnavigation bar title display modeというものがあったが、そちらと間違えないように注意する。
諸々の変更点が記載されている下記も参考になった。
https://note.com/kaigian/n/n0974b1b982dc#tFWbh
//swift playgrounds
以前まではXcodeに組み込まれていたget started with a playgroundがxcode12にはなくなり、代わりにswift playgroundsができたのでそちらでswiftを書いていく。
//テキスト表示の変更
Resumeボタンでcanvasに表示されたiPhoneのtext部分をクリックするとインスペクターにtextの中身が表示されているのでそこを自由に書き換えることができる。
インスペクターでの書き換えは、自動的にコードに反映されるので、記入が終わったら、コードの別の箇所をクリックすると反映がすぐに見れる。
編集した文字に編集を加えたい場合は、プラスボタンmodifiersからfont,foreground colorを表示させ、記入したテキストにドロップする。
import SwiftUI
struct ContentView: View {
var body: some View {
Text("こんにちは")
.font(/*@START_MENU_TOKEN@*/.title/*@END_MENU_TOKEN@*/)
.foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
このように私たちが編集するのはstruct ContentView: View 以下の部分で、struct ContentView_Previewsの部分は制作中のアプリをプレビューに表示するコードとなる。
import SwiftUIはappleがあらかじめ作ってくれているUI部品を利用できるようにするコードである。
このSwiftUIが記載されているのは、プロジェクト開始時にuser interfaceをSwiftUIとして設定しているから。
これらのフレームワークを使用することでかなり簡単にアプリを作成することが可能になる。
上記の中で、プラスボタンにmodifierとviewというカテゴリの違いが出てきたがそれは、文字の種類や色などの装飾を決める機能がmodifier、List,Buttonなどの部品そのものを導入するものをviewとしている。
なので、viewで導入した部品を、modifierで加工すると考えておけば良い。
//swiftでsliderを編集する
sliderを導入し、sliderの左右にimageを追加。
さらに、sliderの水平棒の色をaccent color、スライダー前面の色をforeground colorで調整、さらに部品周りの余白をpaddingで加える。
あとはimageの中身をappleが素材として持っているsystemName:"speaker.fill”などで指定してあげればsliderが完成する。
import SwiftUI
struct ContentView: View {
var body: some View {
HStack {
Image(systemName:"speaker.fill")
Slider(value: /*@START_MENU_TOKEN@*//*@PLACEHOLDER=Value@*/.constant(10)/*@END_MENU_TOKEN@*/)
Image(systemName: "speaker.3.fill")
}
.accentColor(/*@START_MENU_TOKEN@*/.gray/*@END_MENU_TOKEN@*/)
.foregroundColor(.gray)
.padding(/*@START_MENU_TOKEN@*/.all/*@END_MENU_TOKEN@*/)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Hstackとはhorizontal stackのことで、複数のUI部品を水平方向に並べるためのUI部品である。
