UITableView 显示动画

Posted 2023-03-11

【中文标题】UITableView 显示动画

【英文标题】：UITableView Display Animation

【发布时间】：2020-10-23 13:56:48

【问题描述】：

我正在使用 UITableView 来显示带有图像和标题的横幅。

https://youtu.be/4CnfZLWE3VI

youtube 链接显示过滤横幅的动画。当我按下“fav”按钮时，动画不流畅。 我想让动画流畅。

这是我的快速代码UITableView。

extension HomeViewController: UITableViewDelegate, UITableViewDataSource 
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int 
        return filteredTournamentlist.count
    
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat 
        return UITableView.automaticDimension
    
    
    func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat 
        return UITableView.automaticDimension
    
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
        if let cell = tableView.dequeueReusableCell(withIdentifier: "entryCell", for: indexPath) as? TournamentEntryCell 

            cell.usernameLabel.text = filteredTournamentlist[indexPath.row].master_info.name
            cell.titleTabel.text = self.filteredTournamentlist[indexPath.row].name
            cell.dateLabel.text = DatetimeHelper.StringFromString(
                string: self.filteredTournamentlist[indexPath.row].eventDate,
                fromFormat: DatetimeHelper.DBDateFormat,
                toFormat: DatetimeHelper.JPStringFormat
            )
            cell.gameInfoLabel.text = self.filteredTournamentlist[indexPath.row].gameName
                
            self.tournamentModel.getThumbnail(path: self.filteredTournamentlist[indexPath.row].thumbnail_path)  image in
                cell.thumbnailView.image = image
            
            self.profileInfoModel.getIcon(path: self.filteredTournamentlist[indexPath.row].master_info.icon_path)  icon in
                cell.iconView.image = icon
            
                
            let selectedView = UIView()
            selectedView.backgroundColor = Colors.plain
            cell.selectedBackgroundView = selectedView
            
            return cell
        
        
        return UITableViewCell()
    

它只是围绕横幅设置一些信息。而这个↓是collectionview的代码，显示了“fav”和“plan”等过滤按钮。

extension HomeViewController: UICollectionViewDataSource, UICollectionViewDelegate 
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return 2
    
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "buttonCell", for: indexPath) as! PlainSquareButtonCollectionViewCell
        
        cell.button.setTitle(fileterButtonLabels[indexPath.row], for: .normal)
        
        let input = HomeViewModel.Input(
            getHomeTournamentsTrigger: Driver.never(),
            getUserInfo: Driver.never(),
            filter: cell.button.rx.tap
                .map  [unowned self] in
                    return self.fileterButtonLabels[indexPath.row]
                
                .asDriverOnErrorJustComplete(),
            down: cell.rx.downButton
                .map  b in
                    return b
                .asDriverOnErrorJustComplete()
        )
        let output = homeViewModel.transform(input: input)

        output.filteredTournamentList
        .drive(onNext:  [unowned self] tournamentList in
            self.filteredTournamentlist = tournamentList
            self.cardTableView.reloadData()
        )
        .disposed(by: disposeBag)
        
        return cell
    

tableView 显示filteredTournamentlist 中的所有信息，filteredTournamentlist 的内容由过滤器按钮更改。

我不知道如何使动画流畅... 帮帮我！

【参考方案1】：

.drive(onNext:  [unowned self] tournamentList in
            self.filteredTournamentlist = tournamentList
            self.cardTableView.reloadData() // <<---------  RELOAD DATA
        )

调用reloadData() 不会给你预期的动画。当您点击 fav 按钮时会发生什么变化，您需要首先确定，然后您可以在 beginUpdates() 和 endUpdates() 块内应用这些更改。

您似乎在表格视图中有单个部分显示项目，如果是这样，那么我解释如何实现表格视图重新加载动画会更简单。

第 1 步：确定更改

计算点击数据源中的fav 或plan 按钮前后的行数。 确定要更改的IndexPaths（重新加载、添加、删除）。

第 2 步：通过动画在表格视图上应用更改

在cardTableView.beginUpdates() & cardTableView.endUpdates() 中应用更改。

这是示例代码

// ONLY CONSIDERING SINGLE SECTION, CALCULTION WILL BE COMPLEX FOR MULTI SECTION TABLEVIEW


// 1. Calculation of IndexPaths which are going to be impacted
let oldCellCount = dataSource.numberOfRowsInSection(0) // Get cell count before change
let newCellCount = dataSource.numberOfRowsInSection(0) // Get cell count after the change

var indexPathsToReload: [IndexPath] = []
var indexPathsToInsert: [IndexPath] = []
var indexPathsToDelete: [IndexPath] = []

if oldCellCount > newCellCount 
    // Need to delete and reload few cells
    indexPathsToReload = (0..<newCellCount).map  IndexPath(row: $0, section: 0) 
    indexPathsToDelete = (newCellCount..<oldCellCount).map  IndexPath(row: $0, section: 0) 
 else if oldCellCount < newCellCount 
    // Need to add and reload few cells
    indexPathsToReload = (0..<oldCellCount).map  IndexPath(row: $0, section: 0) 
    indexPathsToInsert = (oldCellCount..<newCellCount).map  IndexPath(row: $0, section: 0) 
 else 
    // No change in cell count
    indexPathsToReload = (0..<newCellCount).map  IndexPath(row: $0, section: 0)


// 2. Reload with animation
tableView.beginUpdates()
tableView.deleteRows(at: indexPathsToDelete, with: .none) <<--- Use your expected animation here `fade`, `right`, `top`, `left` & more
tableView.reloadRows(at: indexPathsToReload, with: .none)
tableView.insertRows(at: indexPathsToInsert, with: .none)
tableView.endUpdates()