I have a UIScrollView in each UITableViewCell of my table view that lays out UIViews horizontally - kind of like the "Featured" section on Apple's App Store. When I'm setting up the UITableViewCell I call a function within the custom UITableViewCell to layout the scroll view. This loops through data assigned to that tableview cell's index path and then creates the custom views and adds them to the scroll view. However, these get mixed up when scrolling the tableview and when the tableview refreshes.
If I clear the subviews before laying them out, it does work. However, I'd like to keep the scroll position at the same point every time it shows the cells. How is this possible?
I've just added an external array that stores the current offset for each scrollview, and then manually set the offset on each scrollview everytime the tableview gets refreshed.
Related
Below attached image is representing my requirement:
In this image the yellow color UITableView will have list of different UITableViewCell items. In one of the UITableViewCell it has UICollectionView with its list of UICollectionViewCell items and the scroll direction for the UICollectionView is set to horizontal
Each UICollectionViewCell will have one UITableView (Highlighted in Red Color) and it will have its list of UITableViewCell (Highlited in Rose Color) items. Here, the UITableViewCell (Highlited in Rose Color) item can collapse/expand. Whenever the cell is collapse/expand the red table's content size is handled automatically. But, whenever the red table's content size is increased the collectionview size is not increasing.
I have added all relevant constraints to these UI elements. But, the content size or frame of the collectionview is not expanding when a tableview cell is expanded.
To understand better here i am breaking it down how the views are designed:
Yellow tableview embedded inside a UIViewController and it will have one simple UITableViewCell which has no custom class
To the cell programatically the UICollectionView will be added. This UICollectionView is placed in one xib file and it has embeded inside a UIView
UICollectionViewCell has been created in one xib and it will have UITableView element inside.
Also, UITableViewCell has its own xib to refer and this is the cell which will gets expand/collapse
I have tried modifying the intrinsicContentSize property to modify the UICollectionView property's height where it has embedded inside UIView element whenever the expand is happening. Please, refer the CardView.swift for the reference.
CardView.swift
I know the design is bit complex. But, what am i missing here?
Based on your requirement in the image, I just created a sample project here.
I did not use separate Xibs. However, I was able to achieve what you asked for.
You might have to handle the reload of the innermost tableView better based on your apps business logic.
Here's what I have implemented:
The top most view controller has a parent table view.
This table view cell consists of a child collection view.
The child collection view cell consists of a grand child table view.
The grand child table view is the one corresponding to the table view Highlited in Rose Color in the question.
To answer your question about the collection view not expanding: to expand the child collection view when the grandchild table view cell is tapped, I am reloading the parent table view by increasing the row height for the cell containing the collection view. Hence you don't have to worry about adjusting the constraints in auto layout
In case you want to add additional content into the child collection view cell, you can add a height constraint to the grand child table view with a low priority and modify that whenever you need to expand the content in the grand child table view.
if you want to achieve point 6, as suggested by #Ramy Al Zuhouri, you might have to call: collectionView.performBatchUpdates before collectionView.reloadData() to expand the cell size
Refer to the video below for better understanding
This doesn't necessarily solve your problem, but sometimes it's a matter of forcing the collection view to invalidate its layout and recalculating its size. I once received an answer to a TSI from an Apple enginner:
So this is old fashioned way of forcing a re-usable container (Collection || Table) to invalidate its layout. You may even be able to just call invalidate layout. There are oddities in the system with AutoLayout and animations that sometimes throw the system into an odd state. If we do the above the container and can invalidate its layout and make updates without need to re-calculate + incorporate animations. To summarize, calling performBatchUpdates with nil parameters can be useful if you need to force an update based on layout content (not necessarily datasource changes).
It looks like a hack to be used with caution, but it can be worth to give it a try. Whenever you need to recalculate the size of the collection view's cell to expand or shrink, you can do this:
UIView.setAnimationsEnabled(false)
collectionView.performBatchUpdates(nil, completion: nil)
UIView.setAnimationsEnabled(true)
collectionView.reloadData()
This forces a reload, and UIKit is able to recalculate the height of the cell given that you update the height. How? In my case I did by updating a height constraint, but there are multiple ways of doing this. However, it's intended that as the reload happens the collection view should be aware of the new cell height.
the good approach for this, you have to add collectionView in the tableViewHeader
then whenever you scroll up your tableView your collectionView section will also scroll up
to load cells on the specific indexes follow bellow steps:
if(indexpath.row == 0){
//load first tableView cell with collection view
}
else if (indexpath.row == 1){
//load second tableView cell with collection view
}
else{
//load table view cell here
}
I have UITableViewController with 1 section and header with UISegmentedControl inside.
If user presses first segment we should display UITableView cells
If user presses second segment we should display custom vertical scrolling collection grid with collection items below that header
possible solutions:
change UITableViewController to UICollectionViewController, and UITableViewCells to UICollectionViewCells. This should work but I'm trying to avoid this solution
UICollectionView embedded in UITableViewCell. Setting UICollectionView scrolling enabled to false, adjusting UITableViewCell's height to fit entire UICollectionView's contentSize.height. In systemLayoutSizeFitting(...) method of container (UITableViewCell) we call layoutIfNeeded on container and on contained UICollectionView and return UICollectionView's contentSize.
problem:
(re)calculation of entire UICollectionView contentSize requires a lot of work if we have hundreds of items (cellForItemAtIndexPath for every item). Want to avoid this somehow. Maybe we can increase container (UITableViewCell) height during scrolling UICollectionView which is embedded inside.
Same as 2 but we have fixed size container UITableViewCell (same height as view without header) with UICollectionView inside. When we scroll UITableView to the very bottom UICollectionView scroll should continue scrolling.
problem:
I don't understand how to deal with 2 instances of UIScrollView with scrollingEnabled = true for both. I think this could be solved with pan gesture recognizer delegates. If it is so I need help here.
I would personally opt for number 1 and completely avoid number 2. For number 3, you could set tableView.scrollingEnabled = false when the second segment is tapped. Set it to true when the first segment is tapped. That way, when it's false, the UICollectionView in your UITableViewCell can still scroll.
This tutorial may help with putting a UICollectionView in a UITableViewCell.
The setup
I have a rather complex view hierarchy which made me do terrible things with tableViews and collectionViews. Right now I'm having a regular grouped TableView with custom TableCells. TableCell itself contains a couple of views and a Collection View. The height of the table cell is calculated based on number of items in the data source. On its creation table cell creates a collection view with a calculated size to fit necessary data.
-- UITableView
---- UITableViewCell
------ UICollectionView
--------- UICollectionViewCell
The problem
I've encountered unusual problem with a custom collectionViewCell. I have a vertical single-column collectionView with dynamic amount of cells. Ideally tapping on the cell should call didSelectItemAt. The cell also has three buttons. Tapping on the button should trigger some action. All of the desired functions work only for a first cell. The rest of the cells are not responsive to any actions.
Things that look strange
By default the scrolling of a collectionView inside of the tableViewCell is disabled because it basically fits all the content based on calculated height and doesn't require scrolling. (Also I don't want it to interfere with tableView scrolling logic).
First
I've tried to hardcode some value for the height of collectionView and enable scrolling. What happened is a mystery for me.
Let's say that calculated height required for the collectionView to show all the content without scrolling is 740. When I manually set it to be 280 (this is enough for exactly 2 cells to fit) and enabled scrolling my first cell were still working, but also when I scrolled collection just a little bit my second cell started to act normally as well. When I scrolled back to the top of the collectionView it was disabled once again.
So it looks like when the scrolling is enabled and will actually occur because of insufficient height to fit the content, cells behave as they should. As soon as I set height of the collectionView to be enough to fit its content, things go wrong.
Second
In some cases I can actually tap on the second cell and it will call the delegate. But the weird thing is it works when I tap in the top area of the cell, like 10pts from the top. The other areas of the cell are unresponsive so are the rest of the cells in the collection.
The working delegates and buttons with enabled scrolling forces to think that this has nothing to do with delayed or canceled touches. The frame for collectionView and height of the table cell are calculated properly as well.
xCode 8.3, iOS9+
As it turned out when I was creating my tableViewCell, I hardcoded the height of the collection to value of 214. The reason for that is very simple. I create a cell programmatically and with tableViewCells created programmatically the height of the cell is always 44. When you override init(style: UITableViewCellStyle, reuseIdentifier: String?)
You need to either hardcore the height, or update it in cellForRowAtIndexPath. Even though I updated collection frame when it was filled with data, the container view of this collection wasn't updated resulting in some sort of clipping area for user interactions.
I have a tableView with 20 tableViewCells and within each cell I insert a collectionView (with 100 cells) which scrolls horizontally. I would like to scroll ALL collectionViews when any of the collectionViews is scrolled.
Implementation
I have subclassed the collectionView and have overridden scrollView delegates.
I have currently gotten this to work with the following approaches:
When ANY CollectionView is scrolled, I get all visible tableViewCells and grab the collectionsViews within each cell and set the collectionView contentOffsets iteratively or by using makeObjectsPerformSelector.
Had a CGPoint property with an observer which triggers when the property changes; then inside the collectionView subclass scrollViewDidScroll: I set the property, this will trigger the observer and set the collectionView accordingly. (the collectionView contentOffset is set inside observeValueForKeyPath:ofObject:change:context:)
I have also used NSNotificationCenter to broadcast any scroll and in-turn scroll every other listener
The problem I face is that the collectionViews scrolls are a bit glitch sometimes especially when the scroll is coming to a halt. currently there is no data in collectionView cells but it glitches.
Please does anyone know of a way to simultaneously scroll multiple collectionViews without glitches.
Thanks in advance.
I have tried looking for an answer to this question but so far I haven't got any luck.
Context
I have a UITableView inside a standard UIViewController (NOT a UITableViewController..). I have subclassed UITableViewCell and all the cells in the tableview are from the same class.
Requirement
I would like to find an efficient way to resize the cells based on the scrolling of the tableview. For example, when the cell is at the bottom of the visible list, the height is X. When the cell moves up on the screen, its height should proportionally increase to 2X.
Additional Info
I am close to just ditch the UITableView way and start making my own control that would implement such a feat by subclassing a UIScrollView. However, I would like to see if it is possible before going this path. I did see some very interesting SO posts but nothing that would put me on the right path.
Any hint or help would be highly appreciated.
You would need to respond to the scroll view delegate method scrollViewDidScroll: and implement it to record the cell at the top of the table view and reload the table view. Then your table view delegate method tableView:heightForRowAtIndexPath: sets the cell height by the relationship between the index path and the top cell index path.
Your main issue is performance while reloading the table view all the time.
If you wanted to roll your own solution it would be along the lines of the above description anyway, but you would be able to be more efficient than the table view as the table view will call the tableView:heightForRowAtIndexPath: method once for every row for every reload in order to calculate the total height of the table content.