SwiftUIでボイスメモの録音ボタンをつくる

はじめに

ランダムでエフェクトがかかるレコーダーアプリを個人開発したときに､iPhone純正アプリのボイスメモ録音ボタンを再現したことがあるのでメモ

できるもの

ライト､ダークモードに対応してます｡

ボタンをタップして録音中は中央の赤い円が四角くなります｡

外側の円の設定

一番外側にある円を
ライトモード: グレー
ダークモード: ホワイト
にするためColor.xcassetsで下記画像のようにcircleという名前で設定します｡

これで下記のようにカラーを宣言できます｡

Color("circle")

SwiftUIで実装

import SwiftUI

struct SampleButton: View {

    @State var nowRecording = false
    @State var allowsHisTesthig = true
    var body: some View {
        VStack {
            VStack {
                if !nowRecording {
                    Button (action: {
                        nowRecording = true
                        allowsHisTesthig = false
                    }) {
                        ZStack {
                            Circle()
                                .stroke(Color("circle") ,lineWidth:3)
                                .frame(width: 60, height: 60)
                            RoundedRectangle(cornerRadius: 50)
                                .foregroundColor(.red)
                                .frame(width: 50, height: 50)
                                .padding()
                        }
                    }

                } else {
                    Button (action: {
                        nowRecording = false
                        allowsHisTesthig = true
                    }) {
                        ZStack {
                            Circle()
                                .stroke(Color("circle") ,lineWidth:3)
                                .frame(width: 60, height: 60)
                            RoundedRectangle(cornerRadius: 5)
                                .foregroundColor(.red)
                                .frame(width: 25, height: 25)
                                .padding(28)
                        }
                    }
                }
            }
            .padding()
        }
    }
}

#Preview {
    SampleButton()
}

これで録音ボタンがつくれます｡