【SwiftUI】よく使うモディファイアについて

はじめに

自分と同じようにSwiftUI学び始めの人に向けて書いてみました！
以下のモディファイアだけ知ってたらなんとかなります！多分。。。

モディファイアとは

SwiftのUIモディファイアは日本語で「修飾語」という意味があり、TextやVStackなどのView構造体の属性(プロパティ)を変更するための修飾子のことです。View構造体に対して「.(ドット)モディファイア名」の形式で指定でき、引数などを渡すことで様々な変化をさせることができます。

例えばテキストや画像などにモディファイアをつけることで、文字を太くしたり色を変えたり、画像を大きくしたり丸く切り取ったりすることができます。簡単にいうとメイクみたいなイメージですね。

テキストをそのまま使ってもメリハリがなくなったり、画像を表示してもサイズが荒ぶってしまうので必須で使うものとなってます。

よく使うモディファイア【テキスト】

.font

文字の大きさを変更することができます。
例えば引数.largeTitleだと大きく、.captionはかなり小さく表示されます。
一番下の引数systemだと文字の大きさを任意で変更することができるのでかなり便利です。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("Large Title").font(.largeTitle)
            Text("Title").font(.title)
            Text("Title2").font(.title2)
            Text("Title3").font(.title3)
            Text("Headline").font(.headline)
            Text("Subheadline").font(.subheadline)
            Text("Body").font(.body)
            Text("Callout").font(.callout)
            Text("Footnote").font(.footnote)
            Text("Caption").font(.caption)
            Text("Caption2").font(.caption2)
                        
            Text("system").font(.system(size: 30))
        }
    }
}

.foregroundColor

テキストの色を変えることができます。
（）の中の引数に色を入れるだけなので簡単です.

下記の形式で色の数値を指定する事も可能です。
.foregroundColor(Color(red: 0.0, green: 0.0, blue: 0.0, opacity: 0.0))

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("Statue of Liberty")
            //文字を大きくする
                .font(.largeTitle)
            //文字の色を変える
                .foregroundColor(.blue)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .foregroundColor(.green)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .foregroundColor(.red)
        }
    }
}

.fontWeight

文字の太さを変更することができます。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("Statue of Liberty")
            //文字を大きくする
                .font(.largeTitle)
            //文字の太さを変える
                .fontWeight(.ultraLight)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .fontWeight(.thin)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .fontWeight(.light)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .fontWeight(.regular)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .fontWeight(.bold)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .fontWeight(.heavy)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .fontWeight(.black)
        }
    }
}

.border

文字に枠線をつけることが出来ます。
Colorで色を、widthで太さを指定できます。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("Statue of Liberty")
            //文字を大きくする
                .font(.largeTitle)
            //文字に枠線をつける
                .border(Color.black)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .border(Color.red, width: 5)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .border(Color.yellow, width: 2)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .border(Color.green, width: 4)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .border(Color.purple, width: 2)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .border(Color.blue, width: 8)
        }
    }
}

.background

文字に背景をつけることが出来ます。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        VStack(spacing: 30) {
            Text("Statue of Liberty")
            //文字を大きくする
                .font(.largeTitle)
            //文字に背景をつける
                .background(.gray)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .background(.red)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .background(.yellow)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .background(.green)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .background(.purple)
            Text("Statue of Liberty")
                .font(.largeTitle)
                .background(.blue)
        }
    }
}

よく使うモディファイア【画像】

.resizable

画像ビューが親ビューのサイズに合わせて自動的にサイズを変更することを可能にします。
画像は元のサイズで表示されるのでビューからはみ出すことが多々あるのでこちらを使用します。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Image("statue")
            //画像をビューに対して自動でサイズ調整
            .resizable()
    }
}

.scaledToFill()

縦横比を維持しながら領域に画像が埋め尽くすように表示します。
枠いっぱいに表示するので画像がはみだすことがあります。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Image("statue")
        //画像をビューに対して自動でサイズ調整
            .resizable()
        //アスペクト比を維持しながら領域にオブジェクトが埋め尽くすように表示
            .scaledToFill()
    }
}

.scaledToFit()

縦横比を維持しながら領域に画像が収まるように表示します。
画像全体が表示され、枠の大きさにより空白が生まれます。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Image("statue")
        //画像をビューに対して自動でサイズ調整
            .resizable()
        //アスペクト比を維持しながら領域にオブジェクトが埋め尽くすように表示
            .scaledToFit()
    }
}

.frame

画像の大きさを指定することができます。
「width」は横幅、「height」は縦幅の大きさを表します。
コードの例は横幅：300、縦幅：400に指定しています。

さらに引数の「alignment」を指定することで、画像の位置を枠内の上下左右好きな位置に調整することも可能です。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Image("statue")
        //画像をビューに対して自動でサイズ調整
            .resizable()
        //横幅300、縦幅400に指定。alignmentは今回はなし
            .frame(width: 300,height: 400)
    }
}

.clipShape()

画像を切り抜くことができます。
コードの例では引数Circle()を指定することで、画像を丸く切り抜いてます。
他にも

Capsule - カプセル型
Ellipse - 楕円形
Path - 任意のパスに合わせて描画する
Rectangle - 四角
RoundedRectangle - 角丸四角
(cornerRadius: 50の数字を変更することで丸みを調節できます。)

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Image("statue")
        //画像をビューに対して自動でサイズ調整
            .resizable()
        //横幅300、縦幅400に指定。alignmentは今回はなし
            .frame(width: 300,height: 400)
        //画像を丸く切り抜く
            .clipShape(Circle())
    }
}

.mask

画像を任意の形に切り抜くことができます。
今回はテキストで切り抜いてみました。
システムアイコンを使って切り抜くこともできるのでハート型や星型も簡単です。

.maskには画像を使用することもでき、背景を透過させた画像を用意し作成可能です。
かなり応用が効きそうで無限の可能性があります。

import SwiftUI

struct SwiftUIView: View {
    var body: some View {
        Image("statue")
        //画像をビューに対して自動でサイズ調整
            .resizable()
        //横幅300、縦幅400に指定。alignmentは今回はなし
            .frame(width: 300,height: 400)
        //画像をテキストで切り抜く
            .mask(Text("SwiftUI"))
        //文字を任意の大きさに表示する
            .font(.system(size: 80))
        //文字を太くする
            .fontWeight(.bold)
    }
}

以上よく使うモディファイアをまとめてみました。
勉強中ですので至らぬ点があれば優しく教えてください！

最後に

弊社では、経験の有無を問わず採用を行っています。
興味のある方は是非カジュアル面談しましょう！