I'm building something as shown in the image below:
I'll try to explain a bit more what my goal is. I have a UITableView. One UITableViewCell (1) in here will contain a title (left out in this image) and a UICollectionView (2) (same width as tableview/screen). This collectionview uses a subclass of UICollectionViewLayout to make it horizontally scrollable, evenly spacing the items.
Each UICollectionViewCell (3) in here contain a title and description, both with dynamic heights. Also, this cell contains a new collectionview (4). This new collectionview contains a number of items (5). In this most inner collectionview a row can contain a maximum of 5 items.
Currently I have a tableviewcell (1) with horizontally scrollable collectionview (2), putting the items (3) next to each other. I also have the most inner collectionview (4) putting the items (5) in the correct way.
The difficulty I'm facing now is:
To dynamically size the height of collectionview (4), depending on how many rows for the items are needed, so depending on the number of items.
To dynamically size the height of collectionviewcell (3), depending on the height of the title, description and collectionview (4).
If possible, to dynamically size the height of the collectionview (2) and the tableviewcell (1) containing this, as high as the biggest cell (3).
I hope someone would have an idea how to do this, if it is even possible. I do hope so, while keeping the code 'easy' to follow.
I can do a lot with constraints / autolayout, but this I can't get my head around.
Related
I searched a lot about collectionView, but I did find a simple one, as the below,
My collectionView has 2 columns when Compact, 3 columns when
Regular,
There are many cells, all the cells' height are the
same, but not a fix number, which depends on some contents, but each
cell's height are equal.
I am trying to build a UITableView similar to this. There are some regular cells and I want one cell to be a grid like this. There should be exactly 20 columns, and cells should be square. So they need to have a width and height of UITableView's width / 20. Also UITableViewCell containing all this items should have the height 5 times of this. How do I make this happen?
If you know the exact number of columns and rows, this is easy to achieve without any code, using a storyboard.
Using nested 5 x 4 UIStackViews, each inner stack view containing 20 alternately coloured UIViews, with all stack views Distribution to Fill Equally, and a single cell's Aspect Ratio constraint to 1:1…
Et voila…
Of course, knowing this technique you could easily create the same in code.
So i have four sections and one cell in each one of the sections in my static tableview. One of them is displaying a picture and for that one i manually calculate the ration and multiply it by the width and that way i get the correct height. I do that using the "heightForRowAtIndexPath".
I also have three other cells and each one has a label in it. The labels content is different each time since i'm segueing to it from a different cell so sometimes the cell should be big enough for 1 row of text and sometimes for more. How do i calculate/set that to happen automatically?
Also in my storyboard i have the constrains for the label set to be 8 point away from the right left and top, thats all the constrains that are on the label. I already tried setting the tableView.rowHeight to UITableViewAutomaticDimensions but that doesn't do anything. The rows just stay at the same height as they were set in the "heightForRowAtIndexPath" or the same as in the storyboard if that function is not implemented. Been trying to solve that for probably more then an hour now and still cant figure it out. Thanks for the help. Also i'm doing all of this in swift.
If you implement heightForRowAtIndexPath it will also override any value for the table view's rowHeight. So, in heightForRowAtIndexPath return UITableViewAutomaticDimension, and do the same in estimatedHeightForRowAtIndexPath too.
As long as your cell has a solid Auto Layout configuration, that's all it takes to make auto-sizing cells work.
I'm trying to figure out how to limit a UICollectionView to display a horizontal scrollable list in a single row.
Any Ideas?
I just used something that is working for me:
Set the Scroll direction to Horizontal.
Set the size of your Cells using sizeForItemAt indexPath method.
Set a constraint to your CollectionView making its height equal to (or a bit greater than) the Cell's height which you specified above.
The logic behind it:
When the height of CollectionView is equal to the height of it's items and it is set to horizontal scroll, then it can only show them in one row. I said "or a bit greater than cell's height" because if you set the height of your CollectionView twice bigger than cell's height then it can fit 2 rows of cells and it will show them in 2 rows instead of one.
I have 3 labels in a UITableViewCell and have the labels set so they will wordwrap. If they word wrap the text goes into the next cell. How do I get AutoLayout to expand the cell based on the content without having to write code in the heightForRowAtIndex method? Isn't there a constraint I can use to automatically adjust the cell based on the contentView?
The cell looks fine if the text doesn't wrap in the label. Once it wraps that is when the problem occurs and I would like to have the cell resize to fit the content and have the same spacing between the bottom label and the bottom as there is between the top and top label.
Unfortunately no, you can't do this. A table view calculates its own total height first and has a fixed idea of the size of each cell as they load, it won't determine it's height from the outside in and it won't let layout constraints change the height of a cell.
If you think about how tables work, with cell reuse, then you couldn't really size the table from its cells without loading in every cell and adding it to the scrollview, and performing a layout pass on the whole thing. That would probably lead to quite poor performance.
You could experiment with populating a "free" cell (i.e a cell you've just instantiated, not added to a table) and laying it out for each row in your datasource when calculating heightForRow.
As you are loading the individual cells, after you fill the labels, but before you load the instance of the cell, check the label height.
Something like:
cell.frame.size.height
If the height is large enough that you know the label has wrapped to two lines, then increase the height of the cell you are about to load.