SwiftUIで進捗用ProgressBarを実装する

はじめに

今回は、SwiftUIで進捗を表すProgressBarを実装してみます

コード

var progressBarView: some View {
        ZStack {
            GeometryReader { geometry in
                Capsule()
                    .fill(Color.White)
                    .overlay {
                        HStack {
                            Spacer()
                            Text("progress_template".localized(planValue))
                                .font(.bold12)
                                .foregroundStyle(Color.Black)
                                .padding(.trailing, 8)
                        }
                    }

                Capsule()
                    .fill(Color.Blue)
                    // 100を超えた時に突き抜けないようにminで制御
                    .frame(width: geometry.size.width * min(progress, 1.0))
                    .overlay {
                        HStack {
                            Spacer()
                            Text("progress_template".localized(value))
                                .font(.bold12)
                                .foregroundStyle(Color.White)
                                .padding(.trailing, 8)
                        }
                    }
            }
            .frame(height: 20)
        }
        .frame(maxWidth: .infinity)
    }

さいごに

今回はSwiftUIで進捗用ProgressBarを実装しました
Androidではデフォルトであるのですが、IOSでは自前で実装しないとなく、100を超えたときに表示が崩れるので多少面倒でした