Chapter 05無料公開

【Part4】色々なオブジェクトと色々なモディファイアを覚えよう！

2022.10.30に更新

このチャプターの目次

色々なオブジェクトを使ってみる
モディファイアとは？
1. モディファイアのルール
色々なモディファイアを使ってみる

このPartでは、オブジェクトとモディファイアの使い方について解説していきたいと思います。

色々なオブジェクトを使ってみる

SwiftUIには、たくさんのオブジェクトがあります。
例えば、前回のPart3で作った四角は、Rectangleというオブジェクトです。VStack、HStack、ZStackもオブジェクトの一つです。
他にもたくさんのオブジェクトがあるので、今回はできるだけたくさんのオブジェクトを触ってみましょう。

プロジェクト作成

まずは新しくプロジェクトを作成しましょう。

新規作成

Create a new Xcode projectを選択してください。
もしこの画面が開かない場合は、command + shift + 1を押してください。
テンプレートを選択

①iOSを選択
②Appを選択
③Nextをクリック
プロジェクトの設定

①プロジェクト名にPart4と入力
②InterfaceはSwiftUI
③LanguageはSwift
④全てチェックなし
⑤Nextをクリック
プロジェクトの保存先
プロジェクトの保存先は、Part2で作ったフォルダに入れてください。

上のところがPracticeフォルダになっていることを確認してNextをクリック

これで、プロジェクトの作成ができました。
では、いよいよ色々なオブジェクトを実装していきましょう。

Text

Textは最初から配置されているオブジェクトですね。

Text("Hello, world!")

Button

Buttonの書き方は、いくつか書き方があります。

1. 省略しない書き方

Button(action: {
    // 押したらここが呼ばれる
}, label: {
    Text("ボタン")
})

2. labelを省略する形

Button(action: {
    // 押したらここが呼ばれる
}) {
    Text("ボタン")
}

3. actionを省略する形

Button {
    // 押したらここが呼ばれる
} label: {
    Text("ボタン")
}

4. シンプルな書き方

Button("ボタン") {
    // 押したらここが呼ばれる
}

色々とありますが、自分は基本的にactionを省略する形で書くことが多いです。この講座では、全てlabelを省略する形で記載します。

Image

画像を表示させるオブジェクトです。

まずは、適当な画像を用意して、jpg・pngの画像をAssets.xcassetsにドラッグ&ドロップしてください。

そして、以下のようにその名前をImage("")の中に記載すると画像が画面に表示されます。

Image("satoriku")

画像だけではなく、以下のようにsystemNameというふうに記述すると、Appleが用意していくれている画像を使うことができます。こちらのアイコンは、command + shift + Lを押して星マークを押すとアイコン一覧が確認できます。

Image(systemName: "car")

List

たった以下のように記述するだけでリストが作れちゃいます。

List {
    Text("りんご")
    Text("みかん")
    Text("スイカ")
}

TextField

TextFieldは、文字入力するオブジェクトです。TextFieldを実装するには、以下のように@Stateで変数を宣言しないといけません。

struct ContentView: View {
    @State var inputText = ""
    
    var body: some View {
        TextField("ここに文字を入力します。", text: $inputText)
    }
}

Toggle

Toggleはオンオフを切り替えるオブジェクトです。TextFieldと同じく変数が必要です。

struct ContentView: View {
    @State var isOn = false
    
    var body: some View {
        Toggle("スイッチ", isOn: $isOn)
    }
}

Rectangle

これは、Part3で使ったオブジェクトですね。
※ただ、Rectangle()と書くだけでは、画面いっぱいに黒の四角ができますので幅と高さを指定しなければなりません。

Rectangle()

Circle

四角があれば丸もあります。

Circle()

このようにSwiftUIには色々なオブジェクトがあります。今回は基本的なオブジェクトしか紹介していませんが、もっともっと色々なオブジェクトがありますので、興味がある方は調べて色々と実装してみてください。

モディファイアとは？

色々なオブジェクトを使ってみたので、今度は色々なモディファイアを使ってみましょう。
まず、モディファイアというのはなんなのかというと、簡単にいうと、オブジェクトを装飾できるコードだと思ってください。
オブジェクトの下に.〇〇という風雨にぶら下げてつけるコードのことです。
例えば、文字色を変更したい場合は、

Text("Hello, world!")
    .foregroundColor(.red)

と記述します。そうすると、以下のように文字が赤くなります。

さらに背景色を黄色にしたいとなったら、チェーンして、

Text("Hello, world!")
    .foregroundColor(.red)
    .background(.yellow)

と記述します。そうすると、背景色が黄色に変わります。

というふうに、.〇〇をどんどん重ねて装飾していきます。

モディファイアのルール

モディファイアの2つのルールについて解説します。

1. モディファイアの優先順位

同じモディファイアをつけた場合、一番上に書いた方が優先されます。
以下のTextは、一番上のモディファイアが優先されるので緑色になります。

Text("Hello, world!")
    .foregroundColor(.green)
    .foregroundColor(.red)
    .foregroundColor(.yellow)
    .foregroundColor(.blue)

2. 上から実行される

モディファイアは、上から実行されます。
例えば、.paddingをつけると、Textの周りに余白がつくのですが、背景色を変更して余白をつけるのと、余白をつけてから背景色を変更するのとでは、挙動が違ってきます。

// 背景色をつけてから余白をつける
Text("Hello, world!")
    .background(.red)
    .padding()

// 余白をつけてから背景色をつける
Text("Hello, world!")
    .padding()
    .background(.red)

上記の場合だと、余白をつけてから背景色をつけるのが良いかと思います。
なので、モディファイアをつけるときは順番をしっかりと意識しましょう。

3. モディファイアが対応しているかどうか

全てのモディファイアが、全てのオブジェクトに対応しているわけではありません。
つけれるモディファイアとつけれないモディファイアがあります。
まぁこれは、慣れなので、開発しながら学んでいきましょう。

以上、この3つのルールを意識しながら、基本的なモディファイアを使っていきましょう。

色々なモディファイアを使ってみる

今回はTextに対して使えるモディファイアを紹介します。

.background

背景色を変更できます。

Text("Hello, world!")
    .background(.green)

.foregroundColor

文字の色を変更できます。

Text("Hello, world!")
    .foregroundColor(.red)

.padding

内側に余白をつけられます。白だと見づらいので背景色をつけています。.paddingはたくさんのオブジェクトにつけることができます。

Text("Hello, world!")
    .padding()
    .background(.green)

もう少し余白をつけたい時は、.pdding(50)というように、()内に数字を入れると、余白の幅を調整できます。
上だけ余白をつけたい時は、.padding(.top)というように、()内に.topと入れると上だけに余白をつけられます。
左だけもう少し余白をつけたい時は、1と2の応用で.padding(.left, 50)というように記述するとつけられます。

.frame

幅と高さと位置を変更できます。

Text("Hello, world!")
    .frame(width: 200, height: 100, alignment: .trailing)
    .background(.green)

alignmentは、左が.leadingで、右が.trailingで、上が.topで、下が.bottomです。
.frame(width: 200)というように、widthだけ指定することも可能です。

.cornerRadius

角を丸くできます。()内の数字で丸みを調整できます。

Text("Hello, world!")
    .padding()
    .background(.green)
    .cornerRadius(10)

今回は、Textにつけられる基本的にモディファイアを紹介しましたが、もっともっとたくさんあります。
ちなみに、前回のPart3で作ったミニオンをRectangle以外を使ってちゃんと書くと、ここまで再現することができます。