How to dynamically size an image in SwiftUI for accessibility?

Question

I have an image that I'm hard coding the size, but realized it's not scaling for larger size categories. How can I set a preferred size and let it scale up to different sizes automatically?

This is what my code looks like:

HStack(alignment: .top, spacing: 4) {
    Text("Some text")
    Button(action: { showAlert = true }) {
        Image(systemName: "questionmark.circle.fill")
            .resizable()
            .frame(width: 12, height: 12)
            .foregroundColor(.secondary)
    }
}

I also have other scenario where it's not using a SF Symbol:

Button(action: action) {
    Label(
        title: {
            Text(title)
                .foregroundColor(Color(.label))
        },
        icon: {
            Image("twitter")
                .resizable()
                .frame(width: 24, height: 24)
        }
    )
}

This is how it looks in preview in different sizes, but the images are tiny in the larger scales. How do I handle this to achieve accessibility?

jtbandes · Accepted Answer · 2023-03-22 18:24:34Z

36

SwiftUI 2.0 provides ScaledMetric for this purpose.

Here is a demo of solution. Tested with Xcode 12.1 / iOS 14.1

Normal text:

Largest text:

struct TestScaledImage: View {
    @ScaledMetric var scale: CGFloat = 1     // << here !!
    var body: some View {
        HStack(alignment: .top, spacing: 4) {
            Text("Some text")
            Button(action: {  }) {
                Image(systemName: "questionmark.circle.fill")
                    .resizable()
                    .frame(width: 12 * scale, height: 12 * scale)  // << here !!
                    .foregroundColor(.secondary)
            }
        }
    }
}

edited Mar 22, 2023 at 18:24

jtbandes

119k38 gold badges244 silver badges282 bronze badges

answered Jan 7, 2021 at 6:27

Asperi

262k28 gold badges594 silver badges889 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TruMan1 Over a year ago

Wow so elegant!! Exactly what I was hoping for!! Thank you SwiftUI team and @Asperi for pointing this out!! It even works in preview

TruMan1 Over a year ago

Just to note in case it helps someone else.. in Xcode 12.3, I had to do: @ScaledMetric var imageSize: CGFloat = 12 instead of multiplying

Gary Makin Over a year ago

If your text was set to a non-default size (say .font(.largeTitle)), then use @ScaledMetric(relativeTo:), e.g. @ScaledMetric(relativeTo: .largeTitle) var imageSize: CGFloat = _x_

andrewbuilder · Accepted Answer · 2021-11-15 10:37:38Z

0

Wrap your code in a GeometryReader

for example

HStack(alignment: .top, spacing: 4) {
    GeometryReader { geo in 
        Text("Some text")
        Button(action: { showAlert = true }) {
            Image(systemName: "questionmark.circle.fill")
                .resizable()
                .frame(width: geo.size.width / 9, height: geo.size.height / 9)
                .foregroundColor(.secondary)
        }
    }
}

Then just adjust to whatever suits you

A GeometryReader reads whatever the current devices width and height info is and allows you adjust that instead of hard coding.

edited Nov 15, 2021 at 10:37

andrewbuilder

3,8242 gold badges27 silver badges48 bronze badges

answered Jan 6, 2021 at 22:12

Sergio Bost

3,4373 gold badges18 silver badges40 bronze badges

Comments

Mojtaba Hosseini · Accepted Answer · 2025-03-05 20:34:25Z

0

✅ In addition to the accepted answer:

You should use the .font modifier to size the system images:

@ScaledMetric var size: CGFloat = 12

var body: some View {
    Image(systemName: "questionmark.circle.fill")                
        .font(.system(size: size)) // 👈 Using `.font` instead of `.resizable` to keep the quality
}

Using .resizable modifier turns the image into a static raster format with less quality, but using the .font modifier prevents it

answered Mar 5 at 20:34

Mojtaba Hosseini

124k45 gold badges342 silver badges328 bronze badges

Collectives™ on Stack Overflow

How to dynamically size an image in SwiftUI for accessibility?

3 Answers 3

3 Comments

Comments

✅ In addition to the accepted answer:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

✅ In addition to the accepted answer:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related