I know there are a couple of questions around but I could not figure out how to do this (none of the answers there helped me), so here is my version of the question.
I have an UICollectionView which is set to scroll horizontally. Each cell has an UIScrollView inside and inside the UIScrollView I have an UIImageView.
Now, the images displayed by the UIImageView are loaded from the internet and I can't figure out a way to make the zooming work correctly using storyboards and autolayout.
If I set constraints that tie my UIScrollView to it's container everything is ok. The moment I tie the UIImageView to the UIScrollView XCode starts to complain that the UIScrollView's size is ambiguous.
If I don't make any constraints in InterfaceBuilder the images are not the displayed in the correct size (doh!).
So, I'm stuck. I don't know what kind of constraints to make and which view needs to be tied to what. I know that my perfect world result is a view controller that behaves like the native iOS Photos app. That is, the image is displayed as large as the screen (with a black band at top and bottom or left & right depending on image's orientation) and that you can zoom it in and pan it around.
Help please!
Note
I did read these posts before posting my own question
UIScrollView zooming with Auto Layout
UIScrollView Zoom Does Not Work With Autolayout
“Pinch to Zoom” using AutoLayout
I don't know if it'll help you with your zooming problem but Apple provided a technical note about using scroll views with auto layout: Technical Note TN2154, UIScrollView And Autolayout
The important part with scroll views is, that the constraints of the subviews inside the scroll view are not bound to the scroll view itself, but to the scroll view's parent (in your case the collection view cell)
It works
You can easily do it. Well not really easily, i have been struggling for quite a while!
I managed to implement auto layout within the scrollable area. Just it is vertical only
Set intrinsic size to a "placeholder" (to scrollable view)
Don't set contentSize at all
Attach right constraints to the wrapper (so it will be relative to the parent view)
self.view.addConstraint(NSLayoutConstraint(
item:self.view, attribute:.Trailing,
relatedBy:.Equal, toItem:contentView,
attribute:.Trailing, multiplier:1, constant:0))
scrollView.setTranslatesAutoresizingMaskIntoConstraints(false)
So, in your case, your contentView right side should be attached the right side of the image
Try it out, certainly you will have your zooming to work
Here is an example, it may help you
https://github.com/nchanged/swift-content-manager/tree/master
Related
I have a simple screen, with a slider and a label positioned next to each other horizontally. I have embedded these inside a UIScrollView (I set this to fill the screen and used 'Add missing constraints'), because I will need vertical scrolling later down the line. I don't however, want horizontal scrolling. I have seen numerous posts on here and other sources about people wanting to disable horizontal scrolling, however I'm not sure that's what I want to do, I think I need to restrict the UISlider from causing the horizontal scrolling; I think it is trying to take up more width than the screen. I have added what I think are the necessary horizontal constraints:
Leading space to container for the UISlider
Horizontal spacing to the UILabel, and
Trailing space to container for the UILabel
But this still causes horizontal scrolling, and the UISlider's are the cause, they are taking up more room than I want, as seen below:
I have tried disabling horizontal scrolling in the code using a few techniques, one being:
func scrollViewDidScroll(scrollView: UIScrollView) {
if scrollView.contentOffset.x>0 {
scrollView.contentOffset.x = 0
}
}
but this does not seem to stop the horizontal scrolling.
Can anyone offer any suggestions?
Thanks in advance.
My suggestion is to never use Add missing constraints. It never does what you really want.
Here's the problem. You are laying out your UI on a ViewController in the Storyboard that is square. Apple did this to remind you that you need to be flexible in your design, but it doesn't match the size of any device. When you Add missing constraints, it uses the absolute dimensions of that square to create the constraints which are certainly wrong.
In your specific case, it is giving the slider a width that is too wide, which is why the slider goes off the right side of your screen.
Here's the trick about scroll views. If the contents inside of a scroll view are wider than the scroll view itself, then that content will scroll. The same applies vertically: if the contents inside of a scroll view are taller than the scroll view, then the contents will scroll.
In order to design this to work on all phones, you need to make sure that the contents of the scroll view are laid out correctly for each phone size. Which certainly means you don't want to use specific widths for both the label and the slider because you'll end up with the wrong width for some device, if not all of them.
The best way to do this is to:
Drag out the scroll view and add it to your ViewController. Add constraints to make sure it is properly sized on all phones, such as attaching it on all sides to its superview with a fixed distance.
Drag out a new UIView and drop it on the scroll view. Drag its edges until it exactly matches the size of the scroll view. This will be your content view. Pin all four edges of this content view to the scroll view with offsets of 0.
Here's a tricky bit. Even though you've pinned the content view to the scroll view, its size of free to grow because that is what allows it to be bigger than the scroll view itself and allow there to be content to scroll over. To keep your scroll view from scrolling horizontally, you need to make sure the content view has the same width as the scroll view on all devices. To do that, find the scroll view and the content view in the Document Outline to the left of the Storyboard. Control-drag from the content view to the scroll view and select Equal Widths from the pop-up.
You still haven't told your content view how tall it should be. For now, give it an explicit height constraint of 1000. That will be enough to scroll.
Now, add your label and slider to the content view. In addition to constraining them to each other and to the edges of the content view, you will need to give your label a width constraint. Then Auto Layout will have all of the information it needs to compute the width of your slider. Auto Layout knows how wide the content view is (which will be different on different devices), it knows how wide your label is, and how far everything is from everything else, so it will just stretch the slider to fill in the rest.
If you do all of this, you will have a UI that is properly sized for all devices in all orientations that scrolls vertically.
Just embed all view in your UIScrollView in a UIView, give it the required constraints then the slider and label will stay.
That worked for me just now.
UIScrollView is special when you want use AutoLayout with it, subviews can not be added directly, it needs a container view to constraint the contentSize of UIScrollView, Auto Layout Guide:Working with Scroll Views explains the detail reason, and you can find many solutions to solve UIScrollView's auto layout on Google, Such as this answer.
To be honest, it's confused and complicated to understand UIScrollView's auto layout, but if you overcome this, others auto layout question is easy to resolve.
I have been trying to get ScrollView to work for 2 days now, and it doesn't work at all. Most of the suggestions here on SO and other websites say that you need to pin the ScrollView to the root view and then place a ContentView (UIView) inside ScrollView and then pin it to all sides of the ScrollView (so that the scroll size can determine the contentSize... However this does nothing). There's also conflicting information out there, one video says that there needs to be a constraint from the bottom of the ScrollView to the ContentView. Neither solution has worked for me. Here is what I've been doing in most of the combinations I've tried:
UIView -> UIScrollView
Pin all sides of the UIScrollView to the UIView
Create a UIView (name it content view) and place it inside UIScrollView
Pin all sides of the UIView to the UIScrollView
Problem at this point: UIScrollView needs constraints for X or width AND Y or width. The only thing that seems to solve the complaint is setting the UIView inside the scroll view centered horizontally and vertically, but this does nothing to make scrolling work. Another option is setting the UIView equal height and width to scroll view, but again, that does nothing other than remove the complaint.
I don't understand. Isn't pinning the sides, setting the constraints? IB seems to think that this is not the case.
What are the correct constraints needed? All I need is a simple view with stacked controls (to fill out a form) and the screen needs to be able to scroll if the form is longer than the screen.
I'm using iOS for the first time, and building purely from IB for now... minimal code solution would be best.
You are half way there. First you need to decide what you are going to display in the scrollview, you have placed a content view, that needs to have an intrinsic size. You can choose to put there static or dynamic views. Static views will have their size defined at design time, and that will resolve the UIScrollView AutoLayout constraints. If instead you are doing it at runtime with dynamic views you will need to choose a default size for your content view, create an IBOutlet for the width and/or height of your views and then resize them at runtime altering the outlet in viewDidLayoutSubviews. The video you linked explains that quite clearly.
I am facing a very strange problem. Trying to implement constraints to my view controller makes my button inactive.
My view hierarchy is
UIVIew
UISCrollView
UIView
UIView
UIButton
There are many other views but just for simplicity. One thing is that there is an UIImageView object, which I am stretching to the view according to size but not objects are overlapping or similar, but might be related.
Basically all the constraints are in storyboard. Only for the image view I am using manual setting.
self.imageViewHeight.constant=imgHeight;
when I disable auto layout the button works just fine.
EDIT: Latest observation :Just found out that simulator iPhone 6+ works fine with the constraints. The same is happening with a similar view, which is smaller so all iPhone works just 4S.
So it is definitely issue related to screen size and manipulating with constraints.
Looks like all objects that are bellow screen view itself after creation, so you have to scroll it to see them are inactive.
Any help will be greatly appreciated.
It seems you need to increase the frame Width or Height (whatever you need) of container view. The contentSize of scrollView only affects how it will scroll, which is irrelevant here.
If the button is outside the container view, it will still show up. However, it can't respond to any touch event.
HERE WHAT WE NEED TO DO FOR TOUCH RESPONSE
All you need to do is set bunch of constraints for CONTAINER VIEW of scrollview. Start from adding leading, trailing, bottom, top, width equal and height equal. Now in my case, I need fixed contentSize of Scrollview, so i change priority of equal width constraints to 750. For dynamic contentSize, you need to set priority programmatically.
Comment below if you have any query..
Thanks
I have been struggling for days with this implementation, and even though I have tried to do every tutorial I found on the web, I still cannot make things work the way I want.
Basically, I am trying to put my login form in a scrollview, so that it takes the whole screen at first (and on all iPhones / iPads), and if the keyboard appears everything should move. The problem IS, my view doesn't take the whole screen... Either it is too large, or too high, even though in Interface Builder everything seams correct (from layout to constraints). Below and image of the layout I want to achieve (I am using an universal storyboard, with Size Classes and Autolayout enabled):
http://img4.hostingpics.net/pics/829115app.png
Can someone point me out on achieving this layout ?
Thanks in advance.
I would suggest pinning top, leading and trailing spaces of your scroll view to its superview. And set a bottom space constraint less or equal to the keyboard's height if you set it to 0, the scroll view won't be able to resize.
With your form layout set vertical center constraints and top space to superview constraints for your top label being more or equal than the distance you set in the IB, and then you can set relative space constraints between each of the components.
Hope I answered your question.
Edit: Just the provided project and got it working. I think the problem is caused by it being a containerView inside a scrollView. And both the container and the scrollViews content view adapt to the size of its subviews. Because of that, setting relative constraints won't help.
What I did was to set an explicit size (screen's size) to the containerView and setting setTranslatesAutoresizingMaskIntoConstraints(true) to it.
I modified your project and uploaded it here
I am having a very frustrating issue. I know there are all kinds of issues with UIScrollView in iOS7 and XCode 5. I need to implement a scrollview and there are all kinds of tutorials showing you how to do it by switching off auto layout but that then messes with the rest of the views in my app.
I tried the fix of putting my subviews into a container UIView and placing that in the UIScrollView and setting the scrollview's content size to the size of the contained UIVIew. That didn't work. Now I am working with placing everything in the scrollview and it all works with one exception. When I load the view on the simulator or a device the content view is moved down but somewhere around 60 points or so. See image below.
That white space below the title bar on the right is still the scroll view as I can press and drag within it. Adjusting the contentOffset doesn't do any good as that just scrolls the view down slightly. I have no idea what to do here.
Just a little more info: I setup the scrollview and all the subviews in storyboard and the connected them up. Not sure if that has any bearing on it.
Thanks in advance for any help you can provide.
I think your Scrollview top space constraint have 64 pixels. That's a problem. So, set your top space constraint value to 0.
You need to add the constraints before view displayed then contentsize will be set automatically.
Check UIScrollView's autoresizing mask. It has to be set like this.