Gauge View text size of standard template not achievable in SwiftUI

Question

Created Sep ’20

Replies 2

Boosts 0

Views 1.3k

Participants 2

I'm unable to achieve anything like the font size used in the stock templates when trying to create a Circular Gauge in Swift UI. Here is my code for simply displaying three labels. The maximum value label ("101") clips. I can't set a minimumFontScaleFactor on the Text because it's not a proper view. Here is my current code:

Code Block struct GaugeSample: View {
    var body: some View {
        Gauge(value: currentHR, in: minHR...maxHR) {
            Image(systemName: "heart.fill")
        } currentValueLabel: {
            Text("66").complicationForeground()
        } minimumValueLabel: {
            Text("59")
        } maximumValueLabel: {
            Text("101")
        }
        .gaugeStyle(CircularGaugeStyle(tint: Gradient(colors: getGradientColors())))
    }

If I just use a previous style complication like this I get the full size text fonts:

Code Block let template = CLKComplicationTemplateGraphicCircularOpenGaugeRangeText()
 template.centerTextProvider = CLKSimpleTextProvider(text: "99")
template.leadingTextProvider = CLKSimpleTextProvider(text: "40")
template.trailingTextProvider = CLKSimpleTextProvider(text: "120")
template.gaugeProvider = CLKSimpleGaugeProvider(style: .ring, gaugeColors: [UIColor.blue,UIColor.red], gaugeColorLocations: [0.3,0.9], fillFraction: 0.4)

But I want to use the new SwiftUI complications so I can better customize for things like the rendering mode. Any suggestions?

Boost

Answer 1

Frameworks Engineer OP

Apple

Sep ’20

Hi Simon!

I tried your sample, and applied a minimumScaleFactor on the value label Texts. The "101" does scale to fit in the Complication.

Code Block Gauge(value: 66, in: 59...101) {
    Image(systemName: "heart.fill")
} currentValueLabel: {
    Text("66").complicationForeground()
} minimumValueLabel: {
    Text("59")
        .minimumScaleFactor(0.25)
} maximumValueLabel: {
    Text("101")
        .minimumScaleFactor(0.25)
}
    .gaugeStyle(CircularGaugeStyle(tint: Gradient(colors: [.red, .orange, .yellow, .green, .blue, .purple])))

0

Answer 2

simonfromhelix OP

Sep ’20

Thanks for the quick response!

So previously I was unable to get the minimumScaleFactor to work. This is good. However, I still took your exact code and put it in a complication template. The text labels don't have spacing between them as with the stock complication.

It won't let me post an image here or link to one, but either way, take the exact Gauge you had above, and wrap it in a preview and compare with the stock one shown in the preview, the text sizes and positions are significantly different.

Code Block @available(watchOSApplicationExtension 7.0, *)
struct GaugeSample_Previews: PreviewProvider {
    static var previews: some View {
        CLKComplicationTemplateGraphicCircularView(TestGauge())
                .previewContext()
		}
}

Also, completely separately, what's the purpose of the Image(systemName: "heart.fill") in your code, this has no effect for me?

0