CODEWITHSUNDEEP
swiftuiwatchos
Luca Bartoletti
Luca Bartoletti

Reputation: 2447

Fit UI in WatchOS using SwiftUI

I’m struggling getting the grasp of how build a fitting UI for a Watch App using SwiftUI

What I mean by fitting is that I wanna create a screen that shows some informations without resorting to scrolling.

The UI should be adaptive to the screen size and fit the UI elements and I would also like to be able to drop low priority UI elements when the space is not enough.

I tried to create a sample VStack of Text elements and than use properties like layoutPriority(...) and .minimumScaleFactor(...) to let the content fit the container but with no luck.

Given the following code. The result I see on screen is a list of big Texts overflowing the available space. Doesn’t matter what combination of layoutPriority(...) /.minimumScaleFactor(...) methods I use

struct ContentView: View {
    var body: some View {
        VStack() {
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
            Text("Hello World").font(.title)
        }
    }
}

The result is:

WatchOS Result

Is there a way in swiftUI to build a fitting UI that can scale the contents to fit the available space rather than just relay on what space the contained View wants to use? Also is there a way to drop UI elements if the space available is not enough?

Upvotes: 4

Views: 984

Answers (1)

Ashish
Ashish

Reputation: 3137

Using GeometryReader you can get a flexible preferred size to its parent layout.

This view returns a flexible preferred size to its parent layout.

struct ContentView: View {

    var arr = ["Hello World 1",
               "Hello World 2",
               "Hello World 3",
               "Hello World 4",
               "Hello World 5",
               "Hello World 6",
               "Hello World 7",
               "Hello World 8",
               "Hello World 9"]

    var body: some View {
        GeometryReader { geometry in
                VStack(alignment: .leading) {
                    Group {
                        ForEach(self.arr, id:\.self){ text in
                                Text(text)
                         }
                        }.lineLimit(nil)
                        .frame(height: geometry.size.height/CGFloat(self.arr.count))
                        .font(.custom("HelvaticaNeue", size: 20.0))
                 }
             }.edgesIgnoringSafeArea(.bottom)

     }
}

Upvotes: 2

Related Questions