如何在 iOS 的 CollectionView 的页脚中添加加载指示器答案

【问题标题】：How to add loading Indicator in Footer of CollectionView in iOS如何在 iOS 的 CollectionView 的页脚中添加加载指示器
【发布时间】：2016-08-06 22:50:43
【问题描述】：

当为下一页加载数据时，如何在集合视图的页脚中添加加载指示器..？

我想在集合视图的页脚中加载指示器，与上图相同。但我不能这样做。

所以有没有可能..？否则，我必须使用 tableview 创建这种类型的列表视图。因为我们可以很容易地将这些东西管理到tableview中。

任何帮助将不胜感激。

【问题讨论】：

ios - add loading indicator at the bottom of uicollectionview的可能重复
@Vizllx ：是的，我也已经检查过这个答案。我想要简单和最好的方法来做到这一点。否则我会使用 Tableview。
您的问题中没有提到您已经完成了这个问题，并且现在使用集合视图进行此操作的最佳解决方案就是我的方式。因此，下次您在 SO 中发布任何问题时，请提及您到目前为止所做的工作以及您遵循的参考资料。

标签： ios objective-c swift uitableview uicollectionview

【解决方案1】：

最简单的解决方案是将活动指示器添加到视图并将该视图添加到 UICollectionReusableView。

在集合视图中：

private let footerView = UIActivityIndicatorView(style: UIActivityIndicatorView.Style.white)


  override func viewDidLoad() {
        super.viewDidLoad()

        collectionView.register(CollectionViewFooterView.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "Footer")
        (collectionView.collectionViewLayout as? UICollectionViewFlowLayout)?.footerReferenceSize = CGSize(width: collectionView.bounds.width, height: 50)
        
    }

   override func collectionView(_ collectionView: UICollectionView, viewForSupplementaryElementOfKind kind: String, at indexPath: IndexPath) -> UICollectionReusableView {
        if kind == UICollectionView.elementKindSectionFooter {
            let footer = collectionView.dequeueReusableSupplementaryView(ofKind: kind, withReuseIdentifier: "Footer", for: indexPath)
            footer.addSubview(footerView)
            footerView.frame = CGRect(x: 0, y: 0, width: collectionView.bounds.width, height: 50)
            return footer
        }
        return UICollectionReusableView()
    }

自定义类：如果需要，请在此处添加自定义

public class CollectionViewFooterView: UICollectionReusableView {
    override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

只需使用：footerView.startAnimating() & footerView.stopAnimating() 来启动或停止动画

*****希望你喜欢它。******

【讨论】：

简直太棒了。谢谢！
感谢这个解决方案，如果我们需要 tableview 怎么办？分组表视图和普通表视图？

【解决方案2】：

在CCBottomRefreshControl 的帮助下，我找到了一个非常简单的解决方案你只需要像简单的 UIRefreshController 一样对待它

let bottomRefreshController = UIRefreshControl()
bottomRefreshController.triggerVerticalOffset = 50
bottomRefreshController.addTarget(self, action: #selector(ViewController.refreshBottom), forControlEvents: .ValueChanged)

collectionView.bottomRefreshControl = bottomRefreshController

func refreshBottom() {
     //api call for loading more data
     loadMoreData() 
}

以及您认为应该在哪里简单地停止加载器

collectionView.bottomRefreshControl.endRefreshing()

【讨论】：

【解决方案3】：

在 ViewController 底部添加 UIView 的最简单方法是向该视图添加一个 ActivityIndicator 并将视图的属性设置为 hidden 为选中，创建该视图的 IBOutlet，同时从服务器设置插座的属性 hidden=NO 加载数据之后数据再次加载隐藏视图。我在一些使用 UICollectionViews 或 UITableView 的应用中做过同样的事情

编辑

另一种方法是在 CollectionView 或 tableview 的页脚中添加加载指示器，然后在下面的方法中进行网络调用

对于集合视图：

- (void)collectionView:(UICollectionView *)collectionView willDisplaySupplementaryView:(UICollectionReusableView *)view forElementKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;

对于 TableView：

- (void)tableView:(UITableView *)tableView willDisplayFooterView:(UIView *)view forSection:(NSInteger)section;

斯威夫特 4.2

对于集合视图：

func collectionView(_ collectionView: UICollectionView, willDisplaySupplementaryView view: UICollectionReusableView, forElementKind elementKind: String, at indexPath: IndexPath)

对于表格视图：

func tableView(_ tableView: UITableView, willDisplayFooterView view: UIView, forSection section: Int)

【讨论】：

你为什么要在这些方法中进行网络调用？
@userx 感觉就像是无限的。跟踪网络调用很重要，它不会被重复调用

【解决方案4】：

表单界面构建器，

在Attribute inspector 中选择Collection View 检查Section Footer 中的Accessories。因此，它将在您的收藏视图中添加页脚视图，您可以轻松地将活动指示器拖放到此 footerView。

希望这可以帮助你。 :)

【讨论】：

是的，我试过了。但没有成功。请给我一个代码示例。所以我很容易理解这一点。

【解决方案5】：

开源库MJRefresh是个不错的选择，可以轻松添加刷新脚。如果您想使用相同的图像动画，也许您应该使用带有 gif 图像的 MJRefreshAutoGifFooter 类。该项目包含相同的示例，您可以下载并在您的设备上试用。

【讨论】：