Search code examples
iosswiftswiftui

Scroll view pushes elements to the top of the screen

On my view, I have an image that I always with to display and some text below it which should be vertically scrollable. This text could be short or long.

If the text is short, I wish to have image and text centered on the screen, but if the text is long, image can be pushed to the top, so text can get more room.

This is my code below with which I am noticing that even for smaller text, scroll view pushes all the elements to the top of the screen.

struct ContentView: View {
    let longText: String = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."
    
    let shortText: String = "This is short text"
    
    var body: some View {
        VStack {
            Image(systemName: "photo").resizable().aspectRatio(contentMode: .fit).frame(width: 30, height: 20)

    /// Note: This shows both elements image and text in the center of the view.
//            Text(shortText).font(.body)
//                .foregroundStyle(Color.primary)
//                .multilineTextAlignment(.center)
//                .padding(.top, 20.0)
//                .padding([.leading, .trailing], 25.0)
            
    /// Note: Scrollview pushes the image and text on top.
            ScrollView(showsIndicators: false) {
                Text(shortText).font(.body)
                    .foregroundStyle(Color.primary)
                    .multilineTextAlignment(.center)
                    .padding(.top, 20.0)
                    .padding([.leading, .trailing], 25.0)
            }
        }
        .padding(.top, 20.0)
    }
}

Short text without scroll view (This is what I want the view to always look for short text i.e. even with scroll view):

enter image description here

This is how view looks currently with scroll view and short text (I want image and text to be centered just like above image, even when scroll view is present)

enter image description here

View with image and long text (This is as expected when long text is present)

enter image description here

How can I keep the image and text centered for smaller texts even with scroll view? Or is there any other way to achieve what I want?

Solution

  • You can use ViewThatFits to show the scroll view only if the text doesn't fit by itself.

    var body: some View {
    VStack {
        Image(systemName: "photo").resizable().aspectRatio(contentMode: .fit).frame(width: 30, height: 20)
        ViewThatFits(in: .vertical) {
            text
            ScrollView(showsIndicators: false) {
                text
            }
            
        }
    }
    .padding(.top, 20.0)
}

var text: some View {
    Text(longText /* or shortText */).font(.body)
        .foregroundStyle(Color.primary)
        .multilineTextAlignment(.center)
        .padding(.top, 20.0)
        .padding([.leading, .trailing], 25.0)
}