What is the proper way to implement contentview with constraints in a scrollview in xcode using autolayout? - xcode

Recently I'm testing to do a very complicated view in xcode using nothing but scrollview and programatically added imgviews. Like this
What I did is, I put a UIView called contentview in a scrollview and I then add a lots of ImageViews in the contentview. The real thing is much much complicated than the illustration so I can't use tableview. Sorry for the poor illustration but I think you will get the idea.
Everything is fine until I tried to add the last constraint in code, which marked red in the picture. When I did it, it breaks the entire chain of constraint.
In another word, this is working
V:|-[view1(30)]-[view2(30)]-[view3(30)]
This is not
V:|-[view1(30)]-[view2(30)]-[view3(30)]-|
And btw, what is the proper way to do it anyway? I tried to add imageviews directly into the scrollview itself but I can't make the view to use autolayout like this
H:|-[view]-| The superview here is a scrollview
The result, this view will be very narrow in width. I guess scrollview doesn't have a width value or sth? that's my guessing. That's why I added a contentview as a holder for all the imageviews.

Try this, it will work. - http://natashatherobot.com/ios-autolayout-scrollview/
To summarize -
Add scroll view to main view.
Add a UIView (lets call it content view) to scroll view.
Now add all your views to the above UIView.
For each of them set the constraints so as the separation on all sides is 0. And finally add equal height and equal width constraints between the content view and the main view.

Ok, finally I did my own work.
The key to make scrollview and contentview and everythin else inside work automatically using nothing but autolayout is this.
1, Manually add scrollview to self.view, and a contentview to scrollview. Set both scrollview and contentview to setTranslatesAutoresizingMaskIntoConstraints(false)
2, set scrollview to H:|[scrollview]| and V:|[scrollview]|, set contentview to be H:|[contentview]| and V:|[contentview]|
3, Now try to add Views to content view and set their constraints to the contentview. You should see that when the views are larger than the current window size, the scrollview started to scroll. IE, this setting will automatically set the scrollview.contentSize using autolayout

Related

UIScrollView contentInset is set to nonZero when using autolayout

So I have the following view hierarchy :
A full size scrollView in my viewController's view with the following constraints :
These are the constraints on containerView (ignore the second last one, its a hacky semi-fix for my problem):
I have the status bar, the navigation bar and the tab bar visible.
The thing is that when I set a breakpoint to check the scrollView's contentInset, it shows 64 on top and 49 on bottom, left and right are zero.
There is no way to set contentInset in IB, I tried setting it in an IBAction to UIEdgeInsetZeio, but that didn't fix it either. This is screwing up my scrollview by adding space above and below my contentView, how can I fix this?
By default the view controller extends the view under the top navigation bar so your content will blur under a translucent navigation bar. This is controlled by edgesForExtendLayout which is managed in Storyboard via the Extend Edges setting.
By default, the scrollview will automatically adjust its content inset so the content appears below the top layout guide. This is controlled by automaticallyAdjustsScrollViewInsets which is also managed in Storyboard.
What you did was constrain the top of your scroll view to the top layout guide instead of the top of its superview. By doing this, you manually offset it by 64 points. However, the scrollview is still automatically insetting its content by 64 points, which is why you're seeing additional space above and below your scroll view.
Either constrain your scrollview to its superview (so its content scrolls under the top/bottom bars), or disable the view controller from automatically adjusting the scroll view inset.

UIScrollview scroll not working

UIScrollview scroll is not working when i tested application in device (iPhone 5), But scroll is working properly in iPhone 5/5s/6/6 Plus simulator. I am developing application using Xcode 6 and UIStoryboard with AutoLayout.
I set the top, bottom, left and right constraints of UIScrollview with relative to Superview. And i also set the constraints of every UIControl which is in the UIScrollview.
Has any one have solution regarding this issue?
Please see below screenshot for reference.
It's probably easiest to have the scroll view contain a single view, which then contains all of your scrollable content. That single view should be anchored to all 4 sides of the scroll view, and if it's only meant to scroll vertically (which is what your screenshot makes it look like), then set the content view to be the same width as the parent of the scroll view.
To make sure an UIScrollView scroll, you have to check
Size
Your content View is bigger than your Scroll View. If you want it to be scrolled vertically, make sure its higher; horizontally, wider.
Constraints
Make sure your Scroll View is pinned to its super view, Top, Bottom, Leading, Trailing.
Make sure your Content view of Scroll View DOES NOT have CenterY constraint set to Scroll View, cause that'd make content view stuck with Scroll View and it'd never be able to scroll. (That happens to me the last time I was stuck)
Interface Builder settings
Make sure the check in Interface Builder under Scroll View is checked:
Scrolling section, Scrolling Enabled.

NSCollectionView inside NSTableCellView doesn't resize

I want to show a NSCollectionView inside a NSTableCellView. I have it setup correctly, and it works for the most part, but the collectionView's scrollview doesn't seem to resize properly against the NSTableCellView, even though I have auto-layout constraints setup for this.
Is there anything I can do to setup constraints in a way that the scrollview resizes against the NSTableCellView (which should also let the collectionView also resize itself)?
EDIT:
To elaborate, what I really want to do is have the collectionView expand and resize as the window is resized, and have it take up the same width as the tableViewCell, and depending on the number of items in the collection view, resize the height of the outlineView & hence determine the height of the outlineView's row. It works fine when the collectionView is part of an ordinary view, but I can't get it to resize itself inside a NSTableCellView.
Firstly, remove all of the constraints you've set for your collectionview/scrollview.
Now, you will need to make 4 constraints, one for each of the leading, trailing, top and bottom space from the scrollview to its superview. Make sure width and height are not constrained. I've done this in a recent app I've made and it worked rather well.
EDIT: Below in the comments we figured out the column wasn't resizing so the constraints were correctly set.

If a NSView uses autolayout, do all of its subviews also need to use autolayout for positioning?

I have a view in a window, the position and size of the view are calculated with autolayout. The view has a subview, a draggable NSView subclass. It is really easy to make a NSView "draggable" by overriding -mouseDown: and -mouseDragged: and changing the frame of the view directly.
The view hierarchy is as follows,
What is the best way of making the subview draggable in this case?
For example,
Is it possible for the subview to not use autolayout, so that it can be positioned by changing the frame directly? i.e. the window positions the main view, but then autolayout does not layout the subview inside the main view. Or do all views in the hierarchy need to use autolayout?
When I have used autolayout before, I have used it to make "fixed" layout that respond to resizing. But dragging a view with a mouse does't seems like a natural use-case for autolayout.
Is it possible for the subview to not use autolayout, so that it can be positioned by changing the frame directly?
Yes. If you keep translatesAutoresizingMaskIntoConstraints turned on, it automatically creates constraints from the values of frame and autoresizingMask.
In fact, this means it will use Auto Layout, but you can work with frame just like with manual positioning.
The best way is to not avoid auto layout.
Making a view draggable is pretty easy with auto layout constraint IBOutlets and getting the mouse delta from NSEvent short circuit mouse tracking.

How to stop interface builder resetting user constraints on UIScrollView?

I'm having trouble getting a UIScrollView to respect the constraints I put in interface builder.
All I need to be able to do is set the content size of the scroll view from within IB.
The UIScrollView contains a single UIView.
Constraints on the UIScrollView:
Constraints on the UIView:
I've read through the documentation, and so have set things up as follows:
the UIScrollView has constraints pinning it to its superview, thus defining its size from outside
the UIView (content) has a fixed size (through width and height constraints)
the UIView is pinned to the UIScrollView, thus defining the content size
However, IB won't let me enter these constraints. If I change the 'Bottom Space' constraint between the view and the scroll view, shown in the image as -2196, to 0 (thus pinning the lower edge of the scroll view), then the 'Top Space' constraint resets to a non-zero value. The same happens in reverse. (I haven't yet tried in Xcode 5, which has a far saner approach to invalid constraints in that it doesn't just throw yours away when it feels like it.)
What am I missing?
Every time I've tried to do something even mildly sophisticated with constraints in Xcode 4's Interface Builder, I've eventually given up and either written the constraints in code or switched back to springs'n'struts and layoutSubviews (usually after crashing Xcode a few times).
That said, there is another approach to laying out a scroll view with content in IB. Just make the scroll view as big as its content size, and rely on the view controller (or some containing view controller) to resize the scroll view (or its superview) and let the constraints shrink down the scroll view's frame at runtime. The window's root view controller will always set its view's frame to the screen size, regardless of its size in the nib or storyboard, and that resizing flows down the view hierarchy.
I described this approach in more detail in this answer.
If your scroll view's content size is really supposed to be 2196 points tall, this probably won't work so well. I don't have anything better to suggest in that case.

Resources