I am working on expanding and collapsing table view cell. The current situation works well , where assume Row-0 is tapped a new row is added at index-1 and shown as expanded and when again Row-0 is tapped the expanded index-1 is collapsed. If Row-0 is in expanded state and even if I tap on another Row, the row will expand keeping both open at the same time.
Here is what I want to change, I want to contract any other row which is open when I tap on another row. i.e. One row should be open at a time. Please see the below code for ref which I tried using an array to detect which row is currently expanded, this works only if we go sequentially else it starts deleting the contracted rows. Any help will be highly appreciated.
Thank You !
public func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath)
{
if expandCellArray.object(at: indexPath.row) as! String == "contract"
{
for i in 0 ..< self.expandCellArray.count
{
if expandCellArray.object(at: i) as! String == "expanded"
{
self.contractCell(tableView: tableView, index: i)
self.expandCellArray.replaceObject(at: i, with: "contract")
print("Updated Expand Cell array",expandCellArray)
}
}
self.expandCell(tableView: tableView, index: indexPath.row)
self.expandCellArray.replaceObject(at: indexPath.row, with: "expanded")
print("Updated Expand Cell array",expandCellArray)
}
else
{
self.contractCell(tableView: tableView, index: self.selectedIndexPath.row)
}
}
Function to Expand Row
private func expandCell(tableView: UITableView, index: Int)
{
if (dataArray[index]?.title) != nil {
dataArray.insert(nil, at: index + 1)
myTableView.insertRows(at: [IndexPath(row: index + 1, section: 0)], with: .none)
}
}
Function to Contract row
private func contractCell(tableView: UITableView, index: Int)
{
if (dataArray[index]?.title) != nil {
dataArray.remove(at: index + 1)
myTableView.deleteRows(at: [IndexPath(row: index + 1, section: 0 )], with: .none)
}
}
Adding or removing cells is tricky because you have to handle the indexes. Alternatively, a simpler implementation of this is to use expandable sections.
Instead of adding and deleting, you just simply showing and hiding them with animation. If you want to keep only one section open, when user click on another section, simply collapse the opened section and do section reload on both sections(The one that user clicked and the one that is currently open)
Related
My app uses a UITableView to implement a TikTok-style UX. Each cell is the height of the entire screen. Pagination is enabled, and this works fine for the first batch of 10 records I load. Each UITableViewCell is one "page". The user can "flip" through the pages by swiping, and initially each "page" fully flips as expected. However when I add additional rows by checking to see if the currently visible cell is the last one and then loading 10 more rows, the pagination goes haywire. Swiping results in a partially "flipped" cell -- parts of two cells are visible at the same time. I've tried various things but I'm not even sure what the problem is. The tableView seems to lose track of geometry.
Note: After the pagination goes haywire I can flip all the way back to the first cell. At that point the UITableView seems to regain composure and once again I'm able to flip correctly through all of the loaded rows, including the new ones.
func tableView(_ tableView: UITableView, didEndDisplaying cell: UITableViewCell, forRowAt indexPath: IndexPath) {
// Pause the video if the cell is ended displaying
if let cell = cell as? HomeTableViewCell {
cell.pause()
}
if let indices = tableView.indexPathsForVisibleRows {
for index in indices {
if index.row >= self.data.count - 1 {
self.viewModel!.getPosts()
break
}
}
}
}
In order to create a "Tik Tok" style UX, I ended up using the Texture framework together with a cloud video provider (mux.com). Works fine now.
I was facing the same issue and as I couldn't find a solution anywhere else here's how I solved it without using Texture:
I used the UITableViewDataSourcePrefetching protocol to fetch the new data to be inserted
extension TikTokTableView: UITableViewDataSourcePrefetching {
func tableView(_ tableView: UITableView, prefetchRowsAt indexPaths: [IndexPath]) {
viewModel.prefetchRows(at: indexPaths)
}
}
prefetchRows will execute the request if the visible cell is the last one, as in my case
func prefetchRows(at indexPaths: [IndexPath]) {
if indexPaths.contains(where: isLastCell) {
getPosts(type: typeOfPosts, offset: posts.count, lastPostId: lastPost)
}
}
private func isLastCell(for indexPath: IndexPath) -> Bool {
return indexPath.row == posts.count - 1
}
I have a weak var view delegate type TikTokTableViewDelegate in my view model to have access to a function insertItems implemented by my TikTokTableView. This function is used to inform the UITableView where to insert the incoming posts at
self.posts.append(contentsOf: response.posts)
let indexPathsToReload = self.calculateIndexPathToReload(from: response.posts)
self.view?.insertItems(at: indexPathsToReload)
private func calculateIndexPathToReload(from newPosts: [Post]) -> [IndexPath] {
let startIndex = posts.count - newPosts.count
let endIndex = startIndex + newPosts.count
print(startIndex, endIndex)
return (startIndex..<endIndex).map { IndexPath(row: $0, section: 0) }
}
and this is the insertItems function implemented in TikTokTableView and here is the key: If we try to insert those rows, the pagination of the table will fail and leave that weird offset, we have to store the indexPaths in a local property and insert them once the scroll animation has finished.
extension TikTokTableView: TikTokTableViewDelegate {
func insertItems(at indexPathsToReload: [IndexPath]) {
DispatchQueue.main.async {
// if we try to insert rows in the table, the scroll animation will be stopped and the cell will have a weird offset
// that's why we keep the indexPaths and insert them on scrollViewDidEndDecelerating(:)
self.indexPathsToReload = indexPathsToReload
}
}
}
Since UITableView is a subclass of UIScrollView, we have access to scrollViewDidEndDecelerating, this func is triggered at the end of a user's scroll and this is the time when we insert the new rows
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
if !indexPathsToReload.isEmpty {
tableView.insertRows(at: indexPathsToReload, with: .none)
indexPathsToReload = []
}
}
I have a tableview with two sections.
var categories = ["a", "b", "c"]
var items = ["1" , "2", "3"]//will be different based on category selection
var selectedCategory: String?
Initially first section only visible. After the user selects any row in 0th section section 1 will have 3 rows and section 0 will have only selected row.
For ex. if category "b" is selected "a","c" rows should be removed and "1","2","3" rows should be added.
Now if the "b" is deselected "a","c" rows should be added and "1","2","3" rows should be removed.
//UITableViewDataSource
func numberOfSections(in tableView: UITableView) -> Int {
return selectedCategory == nil ? 1 : 2
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return section == 0 ? categories.count : items.count
}
I've done this using tableView.reloadData(). It does't show any animation. I'm trying to achieve this using the following methods
tableView.deleteRows(at: [IndexPath], with: UITableViewRowAnimation)
tableView.insertRows(at: [IndexPath], with: UITableViewRowAnimation)
I'm struggling to get indexpaths to insert and delete
instead of reload whole tableView do this:-
tableView.beginUpdates()
tableView.deleteRows(at: [IndexPath], with: UITableViewRowAnimation.top)
tableView.insertRows(at: [IndexPath], with: UITableViewRowAnimation.top)
tableView.endUpdates()
You need to wrap the deleteRows and insertRows call in tableView.beginUpdates and tableView.endUpdates.
https://developer.apple.com/documentation/uikit/uitableview/1614908-beginupdates?language=objc
Or use performBatchUpdates:completion:.
https://developer.apple.com/documentation/uikit/uitableview/2887515-performbatchupdates?language=objc
Edit
Ok, let me explain some things in detail. :-)
First I think you need to modify numberOfRowsInSection, because you said section 0 should show all categories as long as none is selected and after selecting one, it should display only that one row.
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
switch section {
case 0:
// If no category is selected, we display all categories, otherwise only the selected one.
return selectedCategory == nil ? categories.count : 1
case 1:
return items.count
default:
return 0
}
}
Second, this is an example of how didSelectRowAt could look like. I changed selectedCategory to Int? to store the index of the selected category and not its name.
As you can see, in section 0 the rows that are not the selected category are deleted, while section 1 is added completely, as it did not exist before.
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if selectedCategory == nil {
// Save index on selected category
selectedCategory = indexPath.row
// set items array
…
// Animate change
var indexPaths = [IndexPath]()
for (index, _) in categories.enumerated() {
if index != selectedCategory {
indexPaths.append(IndexPath(row: index, section: 0))
}
}
tableView.performBatchUpdates({
// delete rows from section 0
tableView.deleteRows(at: indexPaths, with: .automatic)
// insert section 1
tableView.insertSections(IndexSet(integer: 1), with: .automatic)
}, completion: nil)
}
}
I have a question about making a table view section expand/collapse. There are many pieces of information on the web about this topic, but my question is a little bit different.
My question is, how can I make an additional section when the user taps on another section?
The following images may help you understand my situation.
At the top of the table view we have one small section (section 0).
If I tap it...
Section 1 and 2 should be created between section 0 and 3.
How can I do this? Is there any way or code? Please help me.
Also, I tried this code but got a sigabrt error :(
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
self.tableView.beginUpdates()
let indexSet = NSMutableIndexSet()
indexSet.add(indexPath.section + 1)
indexSet.add(indexPath.section + 2)
if indexPath.section == 0 {
if expandCol == true {
self.tableView.deleteSections(NSIndexSet(index: 1) as IndexSet, with: .automatic)
self.tableView.deleteSections(NSIndexSet(index: 2) as IndexSet, with: .automatic)
expandCol = !expandCol
} else {
self.tableView.insertSections(NSIndexSet(index: 1) as IndexSet, with: .automatic)
self.tableView.insertSections(NSIndexSet(index: 2) as IndexSet, with: .automatic)
expandCol = !expandCol
}
}
self.tableView.endUpdates()
self.tableView.reloadData()
}
You can keep a flag variable on view-controller for selectedSection.
var selectedSection: Int = -1
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return section == selectedSection ? <section-row-count> : 0
}
Set the flag value in section header action method:
func actionSectionHeader(tag: Int) {
selectedSection = tag
self.tableView.reloadData()
}
To add a new section into UITableView, you need
1 - Update your data. For example, insert your sections in a data array, or change their visibility flags.
2 - Call the following method.
tableView.insertSections([1, 2], with: .automatic)
or
tableView.reloadData()
The first method will update your UITableView with an animation. The second one will update it instantly. For better UX I'd recommend you to use the first one.
Update on your code
At first, you can pass all sections indices at once using a simple array. Like that
if expandCol {
self.tableView.deleteSections([1, 2], with: .automatic)
} else {
self.tableView.insertSections([1, 2], with: .automatic)
}
expandCol = !expandCol
The second problem is that you're calling reloadData after you call the animated update of your table.
And the most important, you need to change the data. You UITableView has a dataSource and it returns a number of sections and cells. After user interacts with your trigger cell, you need to make changes at that data before calling the update.
Background
The story is come from the second example of the book IOS apprentice (Ed. 6 2016)
A UItableView with two section is created. In storyboard the following content had been designed: section 0 has one row fulfilled with one static cell, section 1 has two row full filled with two static cell.
What to achieve
When tap the last row of section 1 (ie, the dueDate row in picture A) a new cell with a UIDatePicker will be inserted into the tableView (please see picture B)
How does the author solve the problem
A UITableViewCell filled with a UIDatePicker is added in to the scene dock in storyBoard (please see picture C), the new tableCell will be added into the table when dueDate row is tapped
Table view with static cells does not have a data source and therefore does not use the function like “cellForRowAt”. In order to insert this cell into the table the following data source functions had been overridden
tableView(_:numberOfRowsInSection:)
tableView(_:cellForRowAt:)
tableView(_:heightForRowAt:)
tableView(_:indentationLevelForRowAt:)
Problem
the function tableView(_:indentationLevelForRowAt:) really confuse me a lot! And here is the full code
override func tableView(_ tableView: UITableView, indentationLevelForRowAt indexPath: IndexPath) -> Int {
var newIndexPath = indexPath
if indexPath.section == 1 && indexPath.row == 2 {
newIndexPath = IndexPath(row: 0, section: indexPath.section)
}
return super.tableView(tableView, indentationLevelForRowAt: newIndexPath)
}
Question
What is the meaning of this function? What's the purpose of it? I've read the document, but I didn't get much information.
When the third row/datePicker cell is inserted (indexPath.section == 1 && indexPath.row == 2) why the function will indent the first row newIndexPath = IndexPath(row: 0, section: indexPath.section) ?
Implementing tableView(_:indentationLevelForRowAt:) allows you to display the table rows in a hierarchal / tree-view type format. As in:
Level 1
Sub-Level 1a
Sub-Level 1b
Level 2
Sub-Level 2a
Sub-sub-level 2aa
Sub-sub-level 2ab
etc...
Commonly, one might use:
override func tableView(_ tableView: UITableView, indentationLevelForRowAt indexPath: IndexPath) -> Int {
if let myObj = myData[indexPath.row] as? MyObject {
return myObj.myIndentLevel
}
return 0
}
For the example you present, without reading the book...
It would appear the author decided that the new row (2) that contains the UIDatePicker should have the same indent level as the first row (0) in the section. If it's not the row 2, then return the default / current indentation level.
Although, the intent of
var newIndexPath = indexPath
if indexPath.section == 1 && indexPath.row == 2 {
newIndexPath = IndexPath(row: 0, section: indexPath.section)
}
return super.tableView(tableView, indentationLevelForRowAt: newIndexPath)
might seem a little more obvious / clear with
newIndexPath = IndexPath(row: 0, section: 1)
since it is already limiting this to section == 1.
I have a table view controller with static cells in 5 sections. I would like to add a second row to one of the sections when a UISegmentedControl object in the first row of that section is tapped (value change action function). I do not have a data source for this as I only intend to use the new row to display a text field. At this time I am only looking to see an empty row appear with animation, so that I may add the text field programmatically later on.The iOS simulator crashes whenever I tap the segmented control. No error message. Xcode 7 iOS 9. I've looked up other responses to similar queries but unable to identify the issue. Any help appreciated. My code is below. Thanks!
class MyTableViewController: UITableViewController, UITextFieldDelegate {
// init with 1 row in section 3 of table view. This row contains the segment
// control object
var rowsInMySection = 1
// index path for new row (second row) to be added to section 3
var indexPath1 = NSIndexPath(forRow: 1, inSection: 3)
override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
return 5
}
override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
var rows = 1
if section == 3 {
rows = rowsInMySection
}
else {
rows = 1
}
return rows
}
#IBAction func segmentControlTapped(sender: UISegmentedControl) {
if(segmentControl.selectedSegmentIndex == 1)
{
self.tableView.beginUpdates()
self.tableView.insertRowsAtIndexPaths([indexPath1],
withRowAnimation : UITableViewRowAnimation.Automatic)
self.rowsInMySection = 2
self.tableView.endUpdates()
}
}
You answered your own question. You have a static tableView so by definition it can't be added to or removed from.