CODEWITHSUNDEEP
iosswiftswiftuiwidgetlockscreenwidget
Deno
Deno

Reputation: 63

SwiftUI lockscreen widget Gauge accessoryCircular modifier how to set value to empty like weather 0% Precipitation probability

I tried set value to 0, -1, and 999999, and didn't work. My code:

Gauge(
   value: -1,
   label: { Text("label") },
   currentValueLabel: { Text("4") },
   minimumValueLabel: { Text("9") },
   maximumValueLabel: { Text("30") }
)
.gaugeStyle(.accessoryCircular)

Result: enter image description here

And I want to: enter image description here

Upvotes: 0

Views: 902

Answers (2)

JanApotheker
JanApotheker

Reputation: 1906

Here's a more flexible solution that does not use GeometryReader and has the correct insets so the circles are not cut off on the sides. Plus, it uses the tint color.

enter image description here

struct CustomProgressGaugeStyle: GaugeStyle {
    let lineWidth: CGFloat = 6
    
    func makeBody(configuration: Configuration) -> some View {
            ZStack {
                Circle()
                    .trim(from: 0, to: 0.75)
                    .stroke(
                        .tint.opacity(0.4),
                        style: .init(lineWidth: lineWidth, lineCap: .round, lineJoin: .round)
                    )
                    .rotationEffect(.degrees(135))

                Circle()
                    .trim(from: -0.3, to: 0.75 * configuration.value)
                    .stroke(
                        .tint,
                        style: .init(lineWidth: lineWidth, lineCap: .round, lineJoin: .round)
                    )
                    .rotationEffect(.degrees(135))
                
                configuration.currentValueLabel
                    .padding(.horizontal, lineWidth)
            }
            .padding(lineWidth/2)
            .overlay(alignment: .bottom) {
                configuration.label
                    .padding(.horizontal, lineWidth * 2)
            }
    }
}

Usage:

var body: some View {
        Gauge(
            value: 0.25,
            label: {
                Label(
                    title: { Text("Umbrella") },
                    icon: { Image(systemName: "umbrella.fill") }
                )
                .labelStyle(.iconOnly)
                .bold()
                .foregroundStyle(tintColor)
                .font(.caption)
            },
            currentValueLabel: {
                Text("50%")
                    .font(.title)
                    .lineLimit(1)
                    .minimumScaleFactor(0.33)
            }
        )
        .gaugeStyle(CustomProgressGaugeStyle())
        .labelStyle(.iconOnly)
        .tint(.blue)
    }

Upvotes: 0

fish
fish

Reputation: 11

struct CustomGaugeStyle: GaugeStyle {
    let lineWidth: Double = 5.5
    func makeBody(configuration: Configuration) -> some View {
        GeometryReader { geometry in
            ZStack {
                Circle()
                    .trim(from: 0, to: 0.75)
                    .stroke(Color(.lightGray).opacity(0.5), style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round))
                    .rotationEffect(.degrees(135))
                
                Circle()
                    .trim(from: -0.3, to: 0.75 * configuration.value)
                    .stroke(Color.orange.gradient, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round, lineJoin: .round))
                    .rotationEffect(.degrees(135))
                configuration.currentValueLabel
                configuration.label
                    .offset(y: 20)
            }
        }
        .aspectRatio(contentMode: .fit)
    }
}

struct CustomCircleView: View {
    @State private var innerRingFill = 50.0
    var body: some View {
        ZStack {
            Gauge(value: innerRingFill, in: 0...100) {
                Image(systemName: "gauge.medium")                    .resizable()
                    .scaledToFit()
                    .frame(width: 20, height: 15)
            } currentValueLabel: {
                Text("\(innerRingFill.formatted(.number))")
                    .font(.system(size: 17))
            }
            .frame(width: 53, height: 53)
            .gaugeStyle(CustomCircleView())
        }
    }
}

Result of code running

Upvotes: 0

Related Questions