TEAM LICENSES: Save money and learn new skills through a Hacking with Swift+ team license >>

SOLVED: Aligning sf symbol images in a bottom toolbar

Forums > SwiftUI

Hi i see that there are variations between the sizes of sf symbol images. Its only a couple of pixels but its enough that the labels in the tool bar are not perfectly alighed. How can I fix that? Thanks for any advice

here is a screenshot of the issue im having

https://imgur.com/a/xubBhlN

2      

Is this a ToolbarItem(placement: .bottomBar) or a TabView?

If ToolbarItem(placement: .bottomBar) then make the images resizable to a fixed frame

Image(systemName: "plus")
    .resizable()
    .frame(width: 15, height: 15)

or try using a Tabview for this?

If using a TabView then file a feedback

2      

Thanks @NigelGee. I should have included code but I was on public transport :).

That helped thanks.

In fact i'm using a ToolbarItemGroup and I didn't have a frame around the image. So to fix that, and also to refine the image display I created a custom style.

struct CustomVerticalLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            configuration.icon
                .font(.system(size: 18, weight: .light, design: .rounded))
                .foregroundColor(.secondary)
                .frame(width: 22, height: 22)

            configuration.title
                .font(.system(size: 13, weight: .medium, design: .rounded))
                .foregroundColor(.secondary)
        }
    }

2      

Hacking with Swift is sponsored by Blaze.

SPONSORED Still waiting on your CI build? Speed it up ~3x with Blaze - change one line, pay less, keep your existing GitHub workflows. First 25 HWS readers to use code HACKING at checkout get 50% off the first year. Try it now for free!

Reserve your spot now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.