Apple Watch Complication with SF Symbols slightly off-center

Question

schech1 OP

Created 20h

Replies 3

Boosts 0

Participants 2

I have some simple circular complications, that use a ZStack with SFSymbols.

On high contrast Watch Faces, I noted that the circle is slightly off to the top leading side.

I tried to set the ZStack alignment to center, fiddled around with Spacers, but I could not get it centered.

Is that a bug or am I missing something?

struct CircularWidgetDashed: View {
    var entry: Provider.Entry
    
    var body: some View {
        ZStack {
            Image(systemName: "circle.dashed")
                .resizable()
                .scaledToFit()
                .foregroundColor(.green)
                
                Text("\(entry.online)/\(entry.total)")
                    .foregroundStyle(.primary)
                    .font(.caption)
                    .fontWeight(.semibold)
        }
        .widgetAccentable()
    }
}

Answered by darkpaw in 885221022

Yeah, definitely wrong. I've just recreated this myself.

You should raise this as a bug at https://feedbackassistant.apple.com/ then post the FB number here.

I managed to get a normal dashed line to work, but the trade-off is that you have to get the right values for the circle size, or the dash where the line ends will be the wrong length when it hits the part where it started (if that makes sene?).

// Looks correct for Accessory Circular:
Circle()
				.stroke(.green, style: StrokeStyle(lineWidth: 10, dash: [12.5, 7.25]))

// Looks correct for Accessory Corner:
Circle()
				.stroke(.green, style: StrokeStyle(lineWidth: 7, dash: [11, 6.5]))

// Neither of those two looks right for Accessory Rectangular

You'll have to play around with the values for the different Accessory types if you decide to go with this option.

Boost

Answer 1

darkpaw OP

17h

Accepted Answer

Yeah, definitely wrong. I've just recreated this myself.

You should raise this as a bug at https://feedbackassistant.apple.com/ then post the FB number here.

I managed to get a normal dashed line to work, but the trade-off is that you have to get the right values for the circle size, or the dash where the line ends will be the wrong length when it hits the part where it started (if that makes sene?).

// Looks correct for Accessory Circular:
Circle()
				.stroke(.green, style: StrokeStyle(lineWidth: 10, dash: [12.5, 7.25]))

// Looks correct for Accessory Corner:
Circle()
				.stroke(.green, style: StrokeStyle(lineWidth: 7, dash: [11, 6.5]))

// Neither of those two looks right for Accessory Rectangular

You'll have to play around with the values for the different Accessory types if you decide to go with this option.

1

Answer 2

darkpaw OP

6h

I had another think about this. How about using .position(x:, y:) to move the image?

Just tried this code, and it looks good for AccessoryCircular, AccessoryInline, AccessoryRectangular, Smart Stack Circular and Smart Stack Rectangular, but is slightly off for AccessoryCorner, so again, you'll have to fiddle with the numbers for at least one of the types:

GeometryReader { g in
	ZStack {
// I added this circle to show where it is in the view
		Circle()
			.foregroundColor(Color.blue)

		Image(systemName: "circle.dashed")
			.resizable()
			.scaledToFit()
			.foregroundColor(.green)
			.position(x: g.size.width / 2 + 0.5, y: g.size.height / 2 + 0.5)  // The 0.5 is the part that moves it to the right and down a little

		Text("9/9")
			.foregroundStyle(.primary)
			.font(.caption)
			.fontWeight(.semibold)
	}
	.widgetAccentable()
}

0

Answer 3

schech1 OP

3h

Hey, thank you.

I used it only or the circular accessory and your first solution worked so far. I also noted that the dash starting point is weird (also the Xcode preview of the dashed circle differs from the actual device)

But with your numbers it looks fine. I'll use that as a workaround for now.

I opened FB22566148

0