Question about laying out text on a fairly static screen

Question

Created Mar ’21

Replies 2

Boosts 0

Participants 2

Hi there, I am using Swift and UIKit and I would like to make a UIViewController that contains a scrollable view. Inside the scrolling section there should be several sections. Each section has a header of grey extending from left safe margin to right and sized to contain a header label. The area below the header should expand to the size of the children, and the children should be a combination of aligned labels to the right describing data to the left, and some monospaced text.

Can anyone tell me how to make a layout like this? At first I tried to embed views in a stackview but I can't seem to get the constraints right for stackview in scrollview.

Boost

Answer 1

Malibu OP

Mar ’21

I got it done but I don't feel like I did it right. I used stackviews and views all in a scrollview, but I had to set the size of the scrollview.contentview programatically and my TextViews didn't resize on their own either (the height constraints had to be set programmatically). Also I had to set TONS of constraints. Felt like I was fighting UIKit more than anything else. Anyway, if anyone knows a way to do it through Interface Builder only I would appreciate it.

0

Answer 2

Claude31 OP

Mar ’21

Stackviews are really a pain to manage with constraints. I often avoid them.

the children should be a combination of aligned labels to the right describing data to the left, and some monospaced text.

Is the number of those children objects (labels and text) fixed or created dynamically ?
If fixed, I would try do proceed like this (You did not givet a precise description, so I cannot fully detail)

In the VC
Create a view which is as high as needed (even more than the screen) to contain all sections
declare a constraint for its height and create an IBOutlet for this constraint
create subviews for each section
create labels and text in this subview and set constraints for each object, notably vertical constraints with the top label constrained to the subview top and the bottom object constrained to the bottom of the view.
for the object that should have dynamic height, create a constraint on its height, with an IBOutlet

Adjust constraints as needed in code.
Note: setting constraints for ScrollView is a bit tricky.
I wrote a short notice for my own use and I always follow step by step.

Create a ScrollView
Define its dimensions by constraints relating to the Safe area
leading = 0
trailing = 0
top = maybe non zero if you scroll a part of the screen
bottom = 35 (here to leave room for some buttons below)
you can keep the content layout and frame layout ON

Create a UIView (this is the content View, named View here)
Place it inside the scrollView (appears inside Scroll in the object hierarchy)
Define the constraints with respect to the scrollView (Superview)
leading = 0
trailing = 0
equalWidth with Scroll: we don't want to scroll horizontally
top = 0
bottom = 0
Above all, do NOT make equal height with Scroll: there would be no more vertical scroll
Define the dimension constraints of the ContentView to correspond to the complete content above which we will scroll (here the 4 items and the 3 switches)
height = 262
width has been set equal to the width of the scrollView
Note: this is necessary to eliminate red warnings from IB
Place objects in the ContentView
for each
Define the constraints in relation to the ContentView.

0