Question 69084 in IOS Swift Question posted in
The official documentation can be found here.

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

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

Tags:

2

Answers


  1. 0 
    @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)
    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search