How do I fix a view size when content will vary?

Question

Created Aug ’20

Replies 2

Boosts 0

Participants 1

Three SwiftUI views walk into a bar... well, into an HStack.

I have a requirement for this arrangement of controls:
[Symbol] [--------Slider--------][Text]
[Symbol] [--------Slider--------][Text]

The Text views display derived values set by the slider they are next to. At this stage I have put HStacks inside List elements and specified a centre alignment on the stack, which makes everything look nice in the vertical axis. However in the horizontal axis I have two related problems.

First, the two sliders are different lengths and not aligned vertically. This is because both the Symbol (Image) and Text views will vary in width between the two List rows.

Second, when the sliders are moved, the Text views change size as the content changes, making the sliders also change size.

At the same time, I want to allow for Dynamic Type, so using fixed sizes is out of the question.

I have toyed with alignment guides and had some success (in other variations of this layout using VStacks and HStacks) and I reckon I could at least get the sliders to start in the same place, but I could not manage to get a second guide working in the same stack, and even if I could, the changing size of the Text views would push this around.

I need a way of "reserving" the maximum size for the Text views (I can easily provide the widest string value) from the outset, allowing for Dynamic Type, and also doing the same for the Symbol views.

Most of the examples I've seen on this sort of thing use a single alignment guide or rely on leading and trailing alignment, which does not work for more than two elements. This seemed like such a simple example for my first SwiftUI exercise.

Any ideas welcome.

Boost

Answer 1

zkarj735 OP

Aug ’20

For those wanting to experiment easily, here's my current layout (though my fStop text is in reality more complex with helper functions):

Code Block       List {
         HStack(alignment: .center) {
            Image(systemName: "camera.aperture")
               .imageScale(.large)
               .padding(.horizontal)
            Slider(value: $fStop, in: 0...13)
            Text("\(Int(fStop))")
               .padding(.horizontal)
         }
         HStack(alignment: .center) {
            Image(systemName: "circle.tophalf.fill")
               .imageScale(.large)
               .padding(.horizontal)
            Slider(value: $focalLength, in: 15...600)
            Text("\(Int(focalLength))")
               .padding(.horizontal)
         }
      }

0

Answer 2

zkarj735 OP

Aug ’20

I figured out a bit of a hack to achieve this. For the Text views, I've embedded each in a ZStack where the first element is this:

Code Block Text(labelFiller).foregroundColor(.init(white: 1.0, opacity: 0.0))

The labelFiller variable is a String with suitable text that is the width of the widest possible value for any of my actual Text views that sit on top. By including the same invisible text on all rows, the sliders all line up, and this will adapt to Dynamic Type and system theme changes.

1