iOS - Expand UICollectionView height using Auto Layout as new cells are added - ios

I am building a collection view that will allow a user to add data as they want.
The collection view will start out small (screen width, 30px height), and I want it to grow in height as new cells/rows are added. It should stop growing when it hits the bottom of the view controller's view.
The collection view is the ONLY view in the view controller (just for testing purposes and starts out just below the top layout guide (below status bar).
I tried adding the following constraints to the collection view, but it doesn't grow (and I have constraint warnings in storyboard of "Inequality Constraint Ambiguity"):
Leading Space
Trailing Space
Top Space to Superview
Bottom Space to Bottom Layout Guide >= 0
Height >= 30
What am I doing wrong? What constraints (in storyboard) do I need to add/fix?

I think you should tweak it in your code. You need to calculate each row height in your collection view plus the internal spacing between each row, and after a cell was added you call these methods
collectionView.frame = CGRectMake(a,b,c,d) // Adapt new frame to expand height
collectionView

Related

Scrollview in storyboard does not scroll

I created a scrollview in storyboard with multiple views but the scrollview does not scroll. See the screenshot. I have a scrollview with images and another view embedded that spans outside the view area. I would like the scroll view to scroll down but it does not when I see the code in the simulator.
You need to add a UIView with 1000(or whatever you want) height constant to scrollView and make the UIView equal width to view
ScrollView needs to know its scrollable area, so you need to provide information about width and height for ScrollView's content:
width - you can create empty view (with height constraint equal to 1), place it inside scrollView, set its leading and trailing constraints to scrollView and set width constraint equal to main view. Then, scrollView will know that its scrollable area has the same width as screen.
height - you need to provide top and bottom constraints for first and last components inside scrollView (and all components should have specified height). I guess you forgot about setting bottom constraint for the last item.

Layout errors when pinning UIView edges to UITableViewCell contentView

Got a problem here which is driving me crazy.
In a storyboard I have a table view in a layout and I'm trying to pin the leading, top, trailing and bottom constraints of a UIView to the prototype cell's content view. Straightforward enough.
Whenever I do this I get these layout errors for the UIView in Xcode:
"Need constraints for: X position, width"
"Need constraints for : Y position, height"
Constraints on that view (Superview is contentView):
In the storyboard I have the following set on the table view:
Row Height: automatic
Estimate (row height): 50
And on the table view cell:
Row Height: 50
I've seen a few SO posts and other walkthroughs that state that pinning the edges is what to do, and as I understand Auto Layout, I've provided the necessary constraints and info.
How can I fix this?
(BTW: I'm running Xcode 11.3.1.)
Update: The cells of this table view will be fixed height. I'm looking for the cell to provide the height for its content.
UIView by itself has no intrinsicSize - so you are telling the cell's contentView to pin to a frame of 0 x 0.
If you are going to add content to the UIView, set the constraints on the content to control the size of the view and the errors will go away.
In the meantime, give the view a height constraint and that will resolve the issue.
Edit
For fixed-height cells... try starting fresh.
Add a table view - give it desired constraints
Add a table view cell prototype
Add a UIView to that cell (give it a background color to make it easy to see)
Constrain the view at Zero on all 4 sides (constrain to margins)
Set the cell Row Height to 50 (un-check Automatic)
Here's how it looks for me:
It turns out I had the table view and cell constraints and settings configured properly; the problem was further up the view hierarchy.
The table view was placed in a vertical stack view, and that stack view's Alignment property was set to center (for the benefit of other views in the stack). This was causing issues for Auto Layout in calculating the width of the table view.
The solution here was to add an Equal Widths constraint from the table view to the stack view. Et voila! The errors on the UIView within the table view cell's content view disappeared.

UIScrollView with Content View

I've been trying to create a UIScrollView for user registry but with no success. I'm using auto layout and all of the fields that go inside the scroll view are static. Because of the usual ambiguous height issue, I've added a UIView inside the scroll view, set the constraints to the margins of the scroll view and centered aligned it. After that I added all of the fields inside that Content View, in the storyboard.
The content fields have their constraints setup as you would expect, but when I get to the lowest field and set the bottom constraint to the bottom of the Content View then everything breaks.
I'm asked by Xcode to set the priority of some views, and when I do as is says, the Content View size stays the same and the views are shrunken.
I tried not to put the last bottom constraint and resize the Content View by code but the height is not resized as is should.
I'm looking for a good solution to do this in storyboards and auto layout.
Update: I added a bottom constraint with a low priority, but the content scroll view is not expanding to show all of the fields.
Add&Set ScrollView(UIScrollView)
Add&Set ContentView(UIView) with subviews
! Set ContentView Width equal to View Width
Set all subviews constraints
View1 should be tied to the top of the ContentView
View4 should be tied to the bottom of the ContentView
All SubView (View1, View2, View3, View4 ...) must have a height and distance between each other
P.s. In your case, if iOS > 9.0 you can replace ContentView with UIStackView
You are using auto layout so the size of the content view is determined by constraints. Follow the below steps to provide proper constraints:
Drag the Scroll View inside main view and provide constraints Top, Bottom, Leading and Trailing in align with Super View (Main View) as
per screenshot.
Take View which will contain your content and drag inside Scroll View. and provide the constraints Center X, Center Y, Top, Bottom,
Leading and Trailing in align with Scroll View as per screenshot
Put all the element inside content view which is a subview of scroll view and provide Top constraint relative to the element above
it, to make equal space between the elements (eg. label, button etc.)
(Make sure you provide required constraint for X-position)
Last element is "Register Account" button make sure you provide the Top Constraint relative to country and Bottom constraint relative to
superview (content view) and change the priority for Top or Bottom
constraint as per screenshot, otherwise it gives error.

Working with UIScrollViews

I've watched many Youtube videos on UIScrollView. Here, here and here. However nothing there is solving my issue.
Here I've a sample storyboard that I'm working with.
What I require:
The ViewController must be embedded in a Navigation Controller.
BlueView and CyanView will adjust its height accordingly to screen size based on aspect ratio.
YellowView will have a variable height as it contains a ContainerView with embedded UITableView or UICollectionView. Meaning my users can switch between views to look at similar data, with different format. Its information is grabbed from server side. This means that if there is no content, it doesn't require any scrolling. If there are many rows of data to fetch, scrolling should work to display all my information.
Problem faced
If I do not set specific heights to each of my views, IB will complain about the need for constraints on height or Y position.
When I try specifying the height in IB (so as to avoid the complain), during runtime, I attempt to change the height of my yellowView and myScrollView, the scrolling doesn't happen at all.
Inside the UIScrollView add a container View. That will contain rest of your views. So the heirarchy becomes like this:
|---UIScrollView
|----UIView
|---Blue View
|---Cyan View
|---Yellow View
This container view will have a leading, trailing and bottom and top to the UIScrollView. Also add a equal width and equal height constraint to your UIViewControllers main view. Give a priority of 250 to the equal height constraint. And then:
To the blue view, add a leading, trailing and top constraint to its superView and add the aspect ratio constraint. Tinker with the values till you see a UIView which looks nice to you.
To the cyan view, add a leading and trailing to its superView and add a top spacing to the blue view. Add the same aspect ratio as the blue view.
Now for your yellow view, add a top to the cyan view, and leading, trailing and bottom spacing to its superView.
Now your UITableView will have a leading, trailing, bottom and top to the container view or just directly use a UITableView.
If you wish to embed a UITableView inside the yellow view or just use a UITableView directly and expect the main UIScrollView to be scrollable, you will have to manually get a height constraint outlet for your UITableView and update it accordingly depending on the number of rows of the UITableView and height of each row so that the yellow view can increase its height based on the height of the embedded UITableView and hence update the content view accordingly which will in turn update the total content size of the UIScrollView.

Xcode 6 ScrollView with Universal Layout

With Xcode 6, w:Any and H:Any, i want to make a view that can be scrolled horizontally, there is 4 view in the scrollview placed horizontally, and one is take full width, (see picture)
How to achieve this with Xcode 6 new universal layout paradigm?
i mean, i am confused with what constraints i should use for each element to make it work
As in Xcode 5 you need to make the contents of the scroll view a multiple of the outside of the scroll view, and both the scroll view and content view need there bounds to be fully constrained.
To do this for different width screens:
Make the scroll view and constrain its bounds.
Add a UIView into the scroll view to constrain the contents size of the Scroll view, we'll call it a content view.
Add constraints to the outside of the content view so that the contents of the scroll view is bounded by it.
Make the content view equal widths to the scroll view.
Edit the equal widths constraint so the content views width is a multiple of the scroll views widths (the multiple needs to be the number of pages)
Add relevant height constraint to the content view (probably equal height with the scroll view).
Here's a sample project that does this. For a more detailed explanation there is a blog post here

Resources