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

SwiftUI – How to position text below an image, without moving the image? – Ios swift

I’ve attached an image showing what I want. The red circle in the example below represents the image:

Image

The image (red circle) must be vertically centered in its container. How can I make the text horizontally centered and below the image? If I use a VStack, the VStack will be centered and not the image — the image will move up. I do not know the size of the image.

Tags:

3

Answers


  1. 0

    You can use offset to set the text after circle .The following code may help you:

    struct ContentView: View {
    @State private var circleRadius: CGFloat = 0
    var body: some View {
        ZStack {
            LinearGradient(colors: [.blue, .blue], startPoint: .trailing, endPoint: .bottomTrailing)

            VStack(alignment: .center) {
                Circle()
                    .frame(width: 100, height: 100)
                    .foregroundColor(.red)
                    .overlay(GeometryReader { geometry in
                        Color.clear
                        .onAppear {
                        self.circleRadius = geometry.size.width / 2
                    }
                })
            }
            HStack(alignment: .center) {
                Text("Text")
                    .offset(y: circleRadius + 20)
                    .foregroundColor(.white)
            }
        }
    }
}
    Login or Signup to reply.
  2. 0

    I’m not really sure what you really trying to achieve here, but if you just want the text to be centred under the image, this should sort out your problem. However, if the text goes multiple lines, the y position of the text will move up, unless everything is fixed or the text font scaled down in a single line.

        struct CenteredImageView: View {
    let imageSize: CGSize = CGSize(width: 50, height: 50)
    let containerSize: CGSize = CGSize(width: 150, height: 150)
    var body: some View {
        ZStack(alignment: .center) {
            Circle()
                .fill(Color.red)
                .frame(width: imageSize.width, height: imageSize.height)
                .position(x: containerSize.width / 2, y: containerSize.height / 2)
            Text("Text")
                .foregroundColor(.white)
                .multilineTextAlignment(.center)
                .position(x: containerSize.width / 2, y: containerSize.height / 2 + (imageSize.height * 0.70))
        }
        .frame(width: containerSize.width, height: containerSize.height)
        .background(Color.blue)
        .cornerRadius(5)
    }
}
    Login or Signup to reply.
  3. 0

    This is a great use of an overlay combined with an alignment guide.

    Circle().fill(Color.red)
        .frame(width: 100, height: 100)
        .overlay(alignment: .bottom) {
            Text("Title")
                .foregroundColor(.white)
                .alignmentGuide(.bottom) { _ in
                    0 // + additiona padding
                }
        }
        //  The last two lines are just the "blue container
        .frame(width: 200, height: 200)
        .background(Color.blue)

    Notice how this is a simple and scaleable solution that doesn’t require any fancy code but a single alignment guide.

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

Back To Top
Search