How do I make an Image in Swift the same height as the text next to it?

user_17584245 0
Viewed 517

I'm brand new to Swift and am making an iOS Minesweeper app. At the top of the screen I want to have an image of a bomb next to a Text() object displaying the number of bombs remaining.

I'd like to have the image and/or HStack resize to whatever the height of the adjacent text is without having to hard-code it's dimensions.

Can/how this be achieved?

The code so far looks like this:

HStack(alignment: .center, spacing: 10) {
    Image("top_bomb")
        .resizable()
        .aspectRatio(contentMode: .fit)
    Text(String(game.bombsRemaining))
        .font(.system(size: 30, weight: .bold, design: .monospaced))
}
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 0.1, alignment: .trailing)

And it looks like: Minesweeper App

swiftui swift ios
2 Answers

You just need to fix it by size, like

HStack(alignment: .center, spacing: 10) {
    Image("top_bomb")
        .resizable()
        .aspectRatio(contentMode: .fit)
    Text(String(game.bombsRemaining))
        .font(.system(size: 30, weight: .bold, design: .monospaced))
}
.fixedSize()                                        // << here !!
.frame(maxWidth: .infinity, alignment: .trailing)   // << !!

Note: also pay attention that you don't need to hardcode frame to screen size

user_122990300 
@State var labelHeight = CGFloat.zero

HStack(alignment: .center, spacing: 10) {
    Image("top_bomb")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(maxHeight: labelHeight)
    Text(String(game.bombsRemaining))
        .font(.system(size: 30, weight: .bold, design: .monospaced))
        .overlay(
            GeometryReader(content: { geometry in
                Color.clear
                    .onAppear(perform: {
                        self.labelHeight = geometry.frame(in: .local).size.height
                    })
            })
        )
}
.frame(width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height * 0.2, alignment: .trailing)
user_173545890
Related