I've a view controller with a UICollectionView on top (using the default grid layout) followed by other controls below it. As I add / remove cells to / from the collection view, I want it to expand / contract in the vertical direction (so it has enough rows to show all of the cells and no more), and all controls below it to move down / up the screen accordingly. If you imagine how email app UIs work when you add / remove addresses, that's the effect i'm trying to implement. Achieving this effect using constraints, though, is eluding me. Any help would greatly, greatly appreciated!
What I did:
removed all constraints in IB
added a height constraint on the collection view and connected it to an IBOutlet
had IB add missing constraints
add an observer for the collection view's contentSize property
Now, when I add a cell to the collection view and tell it to reload, i'm notified when the contentSize changes and can set the constant for the height constraint to the contentSize height. Result: a collection view that resizes to fill it's content, with the other controls moving up / down as needed :-)
Related
I am looking for a way to build a UICollectionView with a vertical flow layout that is embedded in a UIView. the UIView acts as the datasource/delegate for the containing collectionview. The behavior I am looking for is that the collectionview itself has its scroll disabled and the containing UIView grows as you add more rows to the collectionview. How can this be achieved?
I think you can achieve this by following steps,
Embed the UIView which you currently have into a UIScrollView(Make its constraint respective to its super view).
Then add height constraint to your UIView and create an outlet for that height constraint in our view controller, so as of now when the height of UIView gets increased the scrollView content size will also get increased.
Then place the UICollectionView inside the UIView and make its top, bottom, left & right constraints to UIView.
Now increase the height constraint constant value based on the number of collection view cells in the collection view.
I hope this will work for your scenario.
But if in case you are free to explain why you need to achieve this kind of behaviour it would be nice, because I cannot able to figure out the need for it.
This kind of scenario could be achieved. Here is rule of the thumb:
You should not specify height of you view, that will be contains unscrollable collection, pinned to it, and it should be embedded in UIScrollView using equals width, and pinned to all sides with margin. Auto layout makes things work.
Otherwise, is there any important reason to disable scrolling and make UIView delegate / data source for collection?
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 a real problem with detecting UIScrollView height. I searched a lot and found this solution:
So I dragged from Content View to View and made Equal Height. But I does not work for me.
I also tried to calculate scrollView height according to elements height in it, but I do not think that it's a right way.
How can I set UIScrollView height dynamically? What is the correct way for doing it?
Your ScrollView should add a ContentView like this:
select your scrollView and in size Inspector bottom, set the width like this:
for more details on how to handle scrollView in Interface Builder your can check out this AppleDoc Working with Scroll Views
Hope this help you!
You only way to set height of your scrollView is by calculating the height of individual objects added to scrollview.
Programatically, calculate the height of each UI object and at the end set content height to scrollview.
[scView setContentSize:CGSizeMake(300, height)];
In above line, 'height' is nothing but a sum of all heights of all UI objects calculated.
By doing the below stuff's, I was able to implement UIScrollView with Automatic height based on the contents inside.
Add scrollview to the main view.
Add one ContentView inside this container scroll view.
Give proper constraints inside this content
view to the container scroll view as well as to its internal UI
Components. Please note that you should not give fixed height to the
content View. The constraints of the content view should grow
according to the UI Components inside
This might give you a layout
warning as 'Unambigous.... '. To fix this, give 'Equal Heights' constraint relation between content view and scroll view
Try the above steps, and this will solve your issue :)
Do you want to add item (UIView, UILabel...) in your UIScrollView by auto layout? If so, just put these in it and create correct constraints for them.
The key point is each item which in UIScrollView have top, leading, bottom and trailing side constraints to their superview. Most important is Make Sure that your UIScrollView has top, leading, bottom and trailing Descendant Constraints to its sub-items. It will calculate correct content height of scroll view for you.
In your solution, if your contentView has zero frame, it will not give you any height for scroll view.
I can't figure out how to correctly position subviews in a Navigation Controller.
I am trying to position a view, table and another view.
If I turn off AutoLayout than top view and table are ok but my bottom view is pushed off the screen.
With autolayout I get both the table and bottom view in the wrong place:
I try to set frame in viewDidLoad as follows (calendarPicker is position at the top below navigation bar), I want the configPanel to be on the bottom, I hide bottom bar on Push.
self.eventsTable.frame = CGRectMake(0, CGRectGetMaxY(self.calendarPicker.frame),
self.eventsTable.bounds.size.width,
self.view.bounds.size.height - self.calendarPicker.bounds.size.height
);
self.configPanel.frame = CGRectMake(0, self.view.bounds.size.height,
self.configPanel.bounds.size.width,
self.view.bounds.size.height - self.configPanel.bounds.size.height
);
Should I rely on autolayout? How should I make my constraints?
I believe my problems arise due to autosizing of the table mostly, but given that I am setting its frame size why would it not change? I do not want to remove auto layout since it is used on other views designed in the storyboard and from what I understand it applies to all?
Is there something that I am missing that needs to be done on top of setting the frames of individual controls?
EDIT:
I think my biggest problem is autolayout and inability to size table appropriately. If I add constraint to the bottom view to be 0 from bottom of the view, it will originally appear correctly. However consequently when resizing table and top view, the table will push bottom view down sizing itself to occupy all available space.
I need to force UITableView to be no more than height between the bottom of the top view and lower view, but still not sure how to do this.
Somewhat closer
Removing code for frame change of the table fixes the issue of the bottom view being pushed off. However in this case top view overlapps table when it changes size at the same time not being drawn correctly:
Uncheck autolayout and then set frames of all three subviews.
Or
If you want constraints then you can use NSLayoutConstraint class to add constraint to your subviews.
I recommend against switching off autolayout, especially because you can't do it on a view by view basis. Autolayout is a must if you tend to do i18n or want to make sure your app does well in different screen resolutions/orientation.
Try This!
disable use Autolayout in storyboard. Place your three views on view controller(view1, view2, view3). Next go to size inspector and use autosizing masks for all three views. Check this, which will help you
http://www.raywenderlich.com/50317/beginning-auto-layout-tutorial-in-ios-7-part-1
The problem I am forcing is:
I have 1 big scrollView and I have to add to it 5 subviews programmatically
when I don't know what heights the sub views will have :(
Is there some API to do so ?
or I have to count the subviews heights manually and add them with CGRectMake
based by calculated sizes?
What I would do is use Auto Layout. If you add your subviews to the scroll view using internal constraints, then these constraints can determine not only the distance of the subviews from one another but also the distance from the imaginary content view that surrounds them. The scroll view then uses the size of the content view as its contentSize, and the whole thing becomes scrollable. And this works despite the fact that you don't know the heights of any of the views, which is exactly what you're after.