SwiftUI入門
いつのまにやらUIKitではなくSwiftUIを使う時代に。
SwiftUIで文字出したりボタン出したり絵を出したり、業務アプリ開発に必要となる基本的な機能を説明します。
SwiftUIとは？
SwiftUIはiPhoneアプリ開発とかで用いることができるUI作成用のライブラリ。
それならUIKit使ってたよ、という人も多かもしれないですが、今はSwiftUI一択です。
(UIKitで作られたアプリのメンテナンスが〜とか、UIKitにしかない機能が〜とか仕方ない理由があれば別ですが)
今更Objective-Cでアプリ作る人いないのと一緒で、新規アプリを作るならSwiftとSwiftUIだけ勉強すればOKです。
HelloWorld
とりあえず画面に「Hello World」と文字をだすだけのショボアプリを作りましょう。
Xcodeを起動
Appを作成
空のアプリなので名前はEmptyにします。
コンパイルしてシミュレータで実行
この時、Signing&Capabilitiesで署名をしないと実機で動かせないかもしれないのですが、この辺り、既にApple Developerの契約をしている自分だとしていない場合どういう挙動になるのかがわからず。
Apple Developerに登録してなくても実機で同時に3個までは動かせるはずなので動くはずですが。
簡単！
ソースコードは大きくEmptyApp.swiftとContentView.swiftの２ファイルです。
(Xcode上では.swiftが省略されていますが）
EmptyAppがいわゆるメインですね。
このファイル内ではあんまり作業せず、トップページのコンテンツビューを表示するのみです。
ContentViewがいわゆるビューで、ここに文字などを出しています。
ContentViewのようにViewのクラスを継承している場合、大抵の場合ですが、プレビューを出すコードもセットで生成されます。
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView()
}
}
}
このコードがあるとプレビューが右側に出てきます。
表示されない？
その場合は resume というボタンを押しましょう。そうすればプレビューが表示されます。
文字を表示したい場合は、Viewの中のbodyの中にTextを書けば良いだけです。
では文字の色を変えたい場合は？大きさは？位置は？２つ表示したい場合は？などを次に説明します。
文字のフォントや太さ、色などの変更
画面中央にHello, World!と表示されるアプリができましたが文字の色や大きさをどのように変えたら良いのでしょうか？
Textクラスの属性にFontだのWeightだのColorだのAlignmentだの色々ある。
えぇ〜覚えるの面倒〜と思うかもしれないが、Xcodeで補完できる。
具体的にはTextにカーソルをあてると右側にいろいろ出てくるのでここで直接操作すればいい。
変更と同時にソースコードを自動で書き換えてくれる。
とても簡単。
しかしながら残念なことに全ての属性があるわけではなく、例えば背景色を変えたい場合、.background()という属性があるが、これはソースコードを直接書き換えないといけない。
ただまぁSwiftUIできて間もないし、そのうちXcodeのバージョンが上がった時に全属性に対応してくれているかもしれない。
文字の配置を変えた場合
文字の配置を変えた場合
文字が画面中央に
座標指定した位置合わせ
VStackやHStackやSpacerやなんかアバウトな位置合わせじゃなく、ピシャッと位置合わせしたい場合は座標していもできるっちゃできる。
が、知っての通りiPhoneの画面サイズはさまざまなので座標指定はかなりしんどい。画面サイズを取得してそれを基準に割合で位置決めするのも悪くないが。