IOS autolayout - moving a view located inside a tableviewcell to the center of the screen

Question

I have a table view with cells containing text views as well as images. My project is currently using AutoLayout. My goal is to display the image in full screen while listening to it. One option is to use the modal view manager, but I want this work to be similar to how touching images in the facebook application works, the application centers the image and fades the background.

Since I use autolayout, I cannot just set the image frame to fill the screen. Instead, I need to use autodetection restrictions. In my view of the image there are 5 restrictions, a restriction that sets the distance from the bottom of the cell, as well as the left right sides and one that controls the height of the image. The latter is a vertical limitation of the space between textual supervision of the image and the upper part of the image. Although this would seem to be contrary to the height and lower level restrictions, for some reason, the constructor interface makes me have this. To avoid problems, I set this restriction priority to less than 1000 (the image should never overlap the text image in any case, since the height of the table cell is set so that everything will fit perfectly).

To center the image, I set the distance on the left and right to zero and remove the restriction on vertical space. To center the image, I replace the lower space constraint with the center y alignment constraint on UIWindow , and not on tableviewcell. I want it to be in the center of the screen, not in the camera.

To get the main window, I use this:

AppDelegate* myDelegate = (((AppDelegate*) [UIApplication sharedApplication].delegate)); //access main window using myDelegate.window 

Then, to set the limit:

 //currently sets the distance from the bottom of the cell to 14 //changing it... [cellselected removeConstraint:cellselected.imagebottomspace]; cellselected.imagebottomspace = [NSLayoutConstraint constraintWithItem:cellselected.viewimage attribute:NSLayoutAttributeCenterY relatedBy:NSLayoutRelationEqual toItem:myDelegate.window attribute:NSLayoutAttributeCenterY multiplier:0 constant:0]; [cellselected addConstraint:cellselected.imagebottomspace]; 

However, this does not work. Changing the width and height of the image is very simple. However, when reading the restriction on the image limit, I get an unsatisfactory layout - apparently, the restriction conflicts with another restriction, which sets the distance between the bottom and the image representation to 14, this is the very restriction that I just deleted. Thus, it seems that this does not actually eliminate the restriction.

When I continue and let the application violate the restriction, the image is viewed, but in the wrong place. It does not center on the screen. It moves up and down the screen.

Obviously what I'm doing wrong. What am I doing wrong?

Answer 1

So, I think you want something like this:

First, you need to know that with Xcode 4.6.3, the nib editor ("Interface Builder") has an error setting limits in the table view cell. It should create restrictions between the subzones and the presentation of the contents of the cell, but instead, it creates restrictions between the subzones and the cell itself. This tends to ruin the layout at runtime. (This bug has been fixed in Xcode 5 and later.)

The consequence of this is that you must either remove all the restrictions that were in nib, or recreate them in the code, or just get rid of nib and create a whole hierarchy of the representation in the code.

Secondly, there is an easier way to do image scaling. Here is the basic procedure when a cell is selected:

• Convert the selected cell image image to CGRect in the top-level coordinate system.
• Create a new image view only for scaling and set its frame to CGRect . Set userInteractionEnabled to YES . Set autoresizingMask to flexible width and height. Add a gesture recognizer.
• Add a new kind of image as a subview of the top level view.
• Set the image property of the hidden cell to YES .
• In the animation block, set a new frame for the image representation in the top-level frames.
• Disable the panGestureRecognizer table panGestureRecognizer .

When viewing a new image, review the procedure:

• Convert the selected cell image image to CGRect in the top-level coordinate system.
• In the animation block, set the viewing frame of the enlarged image to CGRect .
• In the animation completion block:
  • Remove the enlarged view of the image from its supervisor.
  • Set the hidden cell image view property to NO .
  • Enable panGestureRecognizer table panGestureRecognizer .

Since you are not moving the original image, you do not need to mess with your limitations. Hidden views are still involved in the layout.

Since you are creating a new kind of image in the code, by default it will translatesAutoresizingMaskIntoConstraints set to YES . This means that you can simply set its frame. Auto-layout will automatically turn a frame into a constraint.

You can find the full source code in this github repository .

Answer 2

I ran into a similar problem. I think the reason for these problems is that the views embedded in UIScrollViews exist in a different border system than the views outside it. This is effective, as scrolling works in the first place, think of it as applying a variable offset to the views it contains. Autolayout does not know how to translate between these different coordinate systems, so any restrictions that intersect will not apply as you expect.

To quote from Erica Sadun the excellent iOS Auto Layout Demystified book (from the section "Constraints, Hierarchies, and Boundary Systems"):

"Remember border systems. You shouldn’t indicate a button on some of them, for example, with a text field inside a separate collection. View. If there is some kind of content with its own system of restrictions (for example, viewing a collection, viewing scrolling and presenting tables), don’t hop from this into a completely different border system in a different view. "