CODEWITHSUNDEEP
xcodeswiftui
Alex
Alex

Reputation: 111

How to use the minimumScaleFactor modifier on a SF Symbol image?

I have a VStack mixing texts and a SF Symbol image. The VStack height is not set, and results from external constraints. On small screens, the VStack height shrinks and text font size scale down accordingly thanks to the minimumScaleFactor modifier. But the SF Symbol image is not scaling down: while XCode accepts that I use the minimumScaleFactor modifier on the font definition for the Image, it does not seem to have effect.

 VStack (spacing:1){

                Text("10:00")
                    .font(.headline)
                    .minimumScaleFactor(0.5)
                Image(systemName:"arrow.down")
                    .renderingMode(.template)
                    .font(.body)
                    .minimumScaleFactor(0.5)
                Text("11:00")
                    .font(.headline)
                    .minimumScaleFactor(0.5)

        }

I wonder if there is a trick to use it effectively with a SF Symbol? If not, what would be the most efficient alternative?

thank you

Edit - Here are a few screenshots and things that I tried

when nothing needs to scale down

no downscaling

when height gets constrained: text is scaling down, but not the SF Symbol

enter image description here

adding .resizable()

adding .resizable()

adding .resizable() and .aspectRatio(contentMode: .fit): the symbol is not scaling down as the text is

.resizable() and .aspectRatio(contentMode: .fit)

Upvotes: 2

Views: 480

Answers (2)

Al Mustakim
Al Mustakim

Reputation: 549

Can You Try with This Way ?

    Text("your 1st text and design")
ZStack {
        Image(systemName: "arrow.down")
            .renderingMode(.template)
            .font(.body)
            .foregroundColor(.blue)
    }
    .frame(maxWidth: .infinity, alignment: .center)
    .scaleEffect(minimumScaleFactor(0.5))
Text("your last text and design")

Hope it helps.

Upvotes: 0

Ahmad
Ahmad

Reputation: 353

One way would be, instead of using font size, you can use max width and height. so when the parent view area will decrease the image will also adopt it.

 Image(systemName:"arrow.down")
       .resizable()
       .aspectRatio(contentMode: .fit)
       .frame(minWidth: 0, maxWidth: 100, minHeight: 0, maxHeight: 100)

Upvotes: 0

Related Questions