0

Environment: Xcode + Swift 4

I following the tutorial Start Developing iOS Apps (Swift) to create a app that using UITableView to show the meals, entering editing mode to delete meals, and other functions.

My problem is when I enter editing mode, the right-most star is overlapped by the delete button:

enter image description here

The tutorial says

To fix this, you need to lay out the cell using nested stack views and Auto Layout constraints; however, that is left as an exercise for the reader.

The five stars are embedded in a custom horizontal stack view. And the horizontal stack view and a label are embedded in a vertical stack view.

The image view has following constraints:

enter image description here

And the vertical stack view has following constraints:

enter image description here

I try to add a new constraint on the vertical stack view to solve the problem:

enter image description here

But the right-most star will be shrunk:

enter image description here

How to prevent the right-most star from being overlapped or shrunk by the delete button?

Many thanks.

Nestarneal
  • 205
  • 1
  • 2
  • 12

1 Answers1

1

Adding a trailing constraint to the horizontal stack view should work. You just need to adjust the stars.

First, set the stack view's distribution to .fillEqually so that all the stars in it has the same width.

Then, set the stars' contentMode to .scaleAspectFit so that they don't look stretched and will only shrink in size while preserving the aspect ratio.

Sweeper
  • 213,210
  • 22
  • 193
  • 313