如何在 UICollectionViewCell 中将 UIActivityIndi​​catorView 居中？

Posted 2023-02-23

【中文标题】如何在 UICollectionViewCell 中将 UIActivityIndi​​catorView 居中？

【英文标题】：How can I center a UIActivityIndicatorView in a UICollectionViewCell?

【发布时间】：2017-07-25 21:05:38

【问题描述】：

我正在尝试在每个集合视图单元格中放置一个 UIActivityIndi​​catorView，因为它会下载其图像。我让它出现在每个单元格中，但它拒绝居中。它停留在左上角。我怎样才能让它正确地居中？

这是我的做法：

extension UIView 

    func showActivityIndicator(onView: UIView, withIndicator: UIActivityIndicatorView) 
        withIndicator.frame = CGRect(x: onView.frame.midX - 20, y: onView.frame.midY - 20, width: 40, height: 40)
        withIndicator.activityIndicatorViewStyle = .whiteLarge
        withIndicator.center = onView.center
        onView.addSubview(withIndicator)
        withIndicator.startAnimating()
    

我在 cellForItemAtIndexPath 中调用该函数，例如：

showActivityIndicator(onView: cell.contentView, withIndicator: activityInd)

但我所做的一切都不会将它从左上角移动。有什么建议吗？

【问题讨论】：

为什么要将视图传递给作为UIView 扩展的方法？你应该把它称为cell.contentView.showActivityIndicator(activityInd)，方法签名应该是func showActivityIndicator(_ indicatorView: UIActivityIndicatorView)。那么方法中对onView的所有引用都应该替换为self。

我发现网上真的很快，但是好点，我改了。谢谢！

【参考方案1】：

试试这个

withIndicator.center = CGPointMake(self.frame.size.width/2, self.frame.size.height/2);

【讨论】：

谢谢@CodyLucas 很高兴我能帮上忙，你介意接受正确的答案吗:)

是的，我只需要一分钟就可以了。

这对于给定的方法是不正确的。 self 应替换为 onView。

它正在工作，但不知道为什么 onView.center 不会成功，而 CGPointMake 会。

【参考方案2】：

您需要添加约束以使其居中。例如使用NSLayoutAnchor。

您需要将translatesAutoresizingMaskIntoConstraints 设置为false，以设置您的约束。并在将其添加到视图后设置约束（代码 cmets 中的提示）：

extension UIView 

    func showActivityIndicator(onView: UIView, withIndicator: UIActivityIndicatorView) 
        withIndicator.frame = CGRect(x: onView.frame.midX - 20, y: onView.frame.midY - 20, width: 40, height: 40)
        withIndicator.activityIndicatorViewStyle = .whiteLarge

        // set translatesAutoresizingMaskIntoConstraints to false to set your constraints
        withIndicator.translatesAutoresizingMaskIntoConstraints = false
        onView.addSubview(withIndicator)
        withIndicator.startAnimating()

        // add the constraints to center the indicator
        withIndicator.centerXAnchor.constraint(equalTo: onView.centerXAnchor).isActive = true
        withIndicator.centerYAnchor.constraint(equalTo: onView.centerYAnchor).isActive = true
    

【参考方案3】：

我建议使用约束（又称自动布局）：

indicator.translatesAutoresizingMaskIntoConstraints = false
"your cell".addSubview(indicator)

let widthConstraint = NSLayoutConstraint(item: indicator, attribute: .Width, relatedBy: .Equal,
                                                 toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 250)

let heightConstraint = NSLayoutConstraint(item: indicator, attribute: .Height, relatedBy: .Equal,
                                                  toItem: nil, attribute: .NotAnAttribute, multiplier: 1.0, constant: 100)

let xConstraint = NSLayoutConstraint(item: indicator, attribute: .CenterX, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterX, multiplier: 1, constant: 0)

let yConstraint = NSLayoutConstraint(item: indicator, attribute: .CenterY, relatedBy: .Equal, toItem: self.tableView, attribute: .CenterY, multiplier: 1, constant: 0)

NSLayoutConstraint.activateConstraints([widthConstraint, heightConstraint, xConstraint, yConstraint])