Zenn
⌚

WatchOSアプリを開発しながらSwiftUIを理解する -基礎編①Control-

2023/10/26に公開
Xcode
SwiftUI
新人プログラマ応援
アプリ開発
watchOS
tech

はじめに

WatchOSアプリを作りたいが、アプリを個人開発した経験も、Swiftでの開発経験もまったくない。
その上、WatchOSに関する記事は残念ながらあまりない。

そこで、XCode上で色々と触りながら、SwiftUIに慣れることにしたので、その備忘録を残すことにする。

そのため、少しずつ追記するスタイルをとることになる。
必要性は感じないが、リクエストがあればGitHubなどでプロジェクト全体のコードについても公開することは吝かではない。

SwiftUIについての体系的な理解をしたい人や、アプリの開発方法が知りたい人は別記事を探すことをオススメする。

また、誤った情報や筋の悪い理解をしていることもあると考えられるので、もしそれに気づいたら、今後の閲覧者および私のためにコメントしてほしい。
そして、開発できる時間も限られていることから随時更新していくが、情報が古くなった場合に気づかないこともままあると思うので、その際はコメントいただければ最新化したいと思う。

環境

  • XCode: 15.0.1
  • Swift: 5.9

参考ドキュメント

さっそく始める

基本的にはContentView.swiftを更新していくのが最初の基本のようだ。

複数Viewの切替や、iPhoneアプリとの連動などは後で見ていくとして、今回はControlがどんなものがあって、どう編集できるかを見ていくことにする。
LayoutやPaint、Otherなどもあるが、順番に見ていければと思う。

Text

基本

最初なので全コードをそのまま貼り付けることにする。

ContentView.swift
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello,world!")
    }
}

#Preview {
    ContentView()
}

入力したコードによるプレビューは以下の通り。

自明に近いが、ここでいう以下の1行が、テキストを表示させている。

Text("Hello,world!")

文字スタイルの変更

上記の1行に続けて、以下のように記載すると文字スタイルを変更できる。
とりあえず、テキストをタイトルのフォーマットに変更してみる。

Text("Hello,world!")
  .font(.title)

ちなみにXCode上であれば.font(.と打ち込めば、以下のようにサジェストしてくれる。

他にも以下のようなフォーマットを含めたくさんのフォーマットが用意されていた。

  • .callout
  • .caption
  • .caption2
  • .footnote

大きなこだわりがなければ、程よいUIを実現することができそうだ。

ちなみに複数のプロパティをつけることも可能だ。
以下は、タイトルのフォーマットでかつ緑文字にした場合の例を示す。

Text("Hello,world!")
  .font(.title)
  .foregroundColor(.green)

TBD

Discussion