How to fix the Auto Layout issue on the official iOS app development tutorial?

Discussion in 'iOS Development' started by ugultopu, May 10, 2017.

Tags:
  1. ugultopu

    ugultopu Newbie

    NOTE: To see the images of this post, please see this Stack Overflow question: stackoverflow<dot>com/posts/43819187/edit

    At end of Implement Edit and Delete Behavior section (developer<dot>apple<dot>com/library/content/referencelibrary/GettingStarted/DevelopiOSAppsSwift/ImplementEditAndDeleteBehavior.html#//apple_ref/doc/uid/TP40015214-CH9-SW1) of the official iOS app development tutorial, it is mentioned that the layout has errors and fixing these errors using stack views is left as an exercise for the reader.
    To fix them, I have followed the following steps:

    1. Add a horizontal stack view, which will contain the UIImageView and a vertical stack view.
    2. Constrain the edges of the horizontal stack view to the edges of the superview.
    3. Add the label and Rating Control to the vertical stack view.
    4. Set Content Mode to Aspect Fit in UIImageView.
    5. Set CHCR properties of UIImageView to all 1000.



    However, the layout is still not to my liking. For example, I have started the app in iPhone 5 simulator and this is the situation:

    see link for the image

    The image views do not extend to cell top and bottom (with keeping the aspect ratio). Furthermore, when I tap "Edit", the image views shrink instead of the Rating Control and Label:

    see link for the image

    Similarly, when we slide a row left, instead of the label and Rating Control being shrank, the image view is slided out of the view:

    see link for the image

    I would like the image view stay there completely and Rating Control and Label to shrank as necessary.

    I have also tried replacing the Rating Control with a plain Horizontal Stack View, which contains 5 plain buttons. This is the result:

    see link for the images

    This time, the UIImageView covers the whole cell. I have expected:

    1. The UIImageView's height equal to the height of the cell.
    2. The UIImageView's width is proportional to its height (because I have set the Content Mode of UIImageView to Aspect Fit in the Interface Builder).
    3. The remaining space to be covered by the label and the new Rating Control. They should take up the remaining space, because I have set the CHCR of the UIImageView to all 1000.

    How can I achieve the desired layout?
     
  2. At end of Implement Edit and Delete Behavior part of the official iOS app development tutorial, it is mentioned that the layout has errors and fixing these errors using stack views is left as an exercise for the reader.

    To fix them, I have followed the following steps:

    Add a horizontal stack view, which will contain the UIImageView and a vertical stack view.
    Constrain the edges of the horizontal stack view to the edges of the superview.
    Add the label and Rating Control to the vertical stack view.
    Set Content Mode to Aspect Fit in UIImageView.
    Set CHCR properties of UIImageView to all 1000.
     

Share This Page