SwiftUIのボタンをカスタマイズする

対象者

• icon & title があるボタンを作りたい
• 方法がよく分からない人向け

こちらの海外のサイトを参考に作ります！

iOSのアイコンはこちらのソフトを使って探します

using

こちらが完成品

プロジェクトの説明

よく使いそうなデザインのボタンを作っていこうと思います。

1. labelを使ってアイコンを設定
2. foregroundColorでアイコンの色を設定
3. backgroundで、アイコンの背景色を設定

Icon Button

BookMark(お気に入りボタン)を作ってみましょう。Buttonに、labelをつけると、Iconを指定することができます。

import SwiftUI

struct BookmarkButton: View {
    var body: some View {
        Button {
                    
                } label: {
                    Image(systemName: "bookmark.fill")
                        .frame(width: 52, height: 52)
                        .foregroundColor(.white)
                        .background(.blue)
                        .cornerRadius(15)
                }
            }
}

#Preview {
    BookmarkButton()
}

Icon Only Button

Iconだけの小さいボタンを作ってみましょう！
.cornerRadius(15)にすると丁度良い角丸のボタンを作れます。

import SwiftUI

struct BookMarkIconButton: View {
    var body: some View {
        Button {
                    
                } label: {
                    Image(systemName: "bookmark.fill")
                        .frame(width: 52, height: 52)
                        .foregroundColor(.white)
                        .background(.green)
                        .cornerRadius(15)
                }
    }
}

#Preview {
    BookMarkIconButton()
}

Circle Icon Button

丸のアイコンボタンを作成したいときは、.cornerRadius(26)に設定します。

import SwiftUI

struct BookMarkIconButton: View {
    var body: some View {
        Button {
                    
                } label: {
                    Image(systemName: "pin.fill")
                        .frame(width: 52, height: 52)
                        .foregroundColor(.white)
                        .background(.red)
                        .cornerRadius(26)
                }
    }
}

#Preview {
    BookMarkIconButton()
}

Icon & Text Button

アイコン付きのテキストがあるボタンを作るには、HStackを使って、Image, Textのオブジェクトを横向きで重ねる必要がありました。

import SwiftUI

struct TextLabelButton: View {
    var body: some View {
        Button{

                } label: {
                    HStack {
                        Image(systemName: "apple.logo")
                        Text("Appleでサインアップ")
                    }
                    .foregroundColor(.white)
                    .font(.system(size: 16, weight: .semibold))
                    .frame(maxWidth: .infinity, minHeight: 52)
                    .background(.black)
                    .cornerRadius(15)
                    
                }
    }
}

#Preview {
    TextLabelButton()
}

感想

今回は、SwiftUIで、アイコンを使ったカスタマイズされたボタンを作ってみました。使う機会が多いと思うので、是非是非ご活用ください。