Keep UIDatePicker from Growing too Wide

1
votes

I have a view hierarchy on iOS arranged like this:

UIViewController
  - UIView
    - UIButton
    - UIButton
    - UIScrollView
      - UIStackView
        - UILabel
        - UIDatePicker
        - UILabel
        - UIDatePicker

The scroll view is pinned to 20 from leading and trailing space on the superview, 0 from the bottom of one of the buttons, and 0 to the bottom layout guide.

The stack view has 0 leading, trailing, top, and bottom space to the superview (the scroll view).

I like how this looks in vertical orientation: Vertical screenshot

But in horizontal orientation, I think the long lines extending beyond the main content of the UIDatePicker are kinda ugly: Horizontal screenshot

I've tried many permutations of constraints (max width + center X on the UIDatePickers, increasing various content hugging priorities, no width constraints on the UIScrollView and center X on it), but all have resulted in ambiguous layouts or conflicting constraints. How can I do what I'm aiming for here?

EDIT: With the constraints as suggested below (ScrollView pinned to container, StackView pinned with 0 Trailing, Leading, Bottom, and Top space to the ScrollView, and a width equal constraint on the date pickers) the StackView refuses to expand its width and stays pinned to the left of its parent.

StackView stuck to the side StackView stuck to the side, with view rectangles

This happens even though there are leading and trailing constraints set to 0 on the StackView.

1
iosxcodeuiscrollviewuistackview
Also, having now tested this a bit on a physical device, having the UIDatePicker extending to the edge of the screen makes it quite difficult to scroll. – Scott Colby
You have added constant Leading and Trailing space that will keep it on same dimensions all the time. (In Portrait or Landscape mode). – SNarula
Indeed. The issue is I don't know what constraints to replace the leading/trailing constraints with. Everything I've tried so far has resulted in ambiguous or conflicting layouts. – Scott Colby
How do you want to dispay both pickers in Landscape mode? – SNarula
I'm the same orientation and position, just not as wide. If I limit their width, though, other constraints break. – Scott Colby

1 Answers

1
votes

Change the Alignment of UIStackView to Center.

enter image description here

Add a width constraint to DatePicker = 315

Now the stackview will keep the DatePicker to Center with width 315 in both potraite and landscape

enter image description here