如何使用 UiActivityIndicator 正确设置自定义背景视图

Question

我的应用正在使用 WKWebView 加载我的网站。我需要一个具有自定义深灰色背景视图的 UiActivityIndicator，因为 UIActivityIndicator 与我网站的内容混合时可能很难发现。之前，我关注了 https://coderwall.com/p/su1t1a/ios-customized-activity-indicator-with-swift to programmatically create an indicator. However, the tutorial is using default white and mine is large white with custom orange color. All I need just a backgroundView with an indicator inside of the backgroundView. Somehow it works until I noticed that the indicator is not that center and it ran off a little bit to the top left. Please see this image,

在我的iPhone5等上很明显。因此，我使用了另一种使用自动布局的方法。背景视图仍然无法正常工作。这是我的自动布局设置

这是我的编程部分。

    loadingView.frame = CGRect(x: 0, y: 0, width: 60, height: 60)
    loadingView.center = self.view.center
    loadingView.backgroundColor = UIColor(red:211/255,green:211/255,blue:211/255, alpha: 1)
    loadingView.clipsToBounds = true
    loadingView.layer.cornerRadius = 10

    loadingIndicator.frame = CGRect(x: 0, y: 0, width: 30, height: 30)
    loadingIndicator.isOpaque = false
    loadingIndicator.center = CGPoint(x: loadingView.frame.size.width / 2.0, y: loadingView.frame.size.height / 2.0)
    loadingIndicator.backgroundColor = UIColor.gray
    loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.whiteLarge
    loadingIndicator.color = UIColor(red:232/255,green:126/255,blue:4/255,alpha:1.0)
    loadingIndicator.hidesWhenStopped = true
    loadingView.addSubview(loadingIndicator)
    self.view.addSubview(loadingView)

我更喜欢使用自动布局。

Answer 1

尝试更改此代码

let loadingView = UIView()
        let loadingIndicator = UIActivityIndicatorView()
        loadingView.frame = CGRect(x: 0, y: 0, width: 60, height: 60)
        loadingView.center = self.view.center
        loadingView.backgroundColor = UIColor(red:211/255,green:211/255,blue:211/255, alpha: 1)
        loadingView.clipsToBounds = true
        loadingView.layer.cornerRadius = 10

        loadingIndicator.frame = CGRect(x: 0, y: 0, width: 37, height: 37)
                loadingIndicator.isOpaque = false
        loadingIndicator.center = CGPoint(x: loadingView.bounds.size.width / 2, y: loadingView.bounds.size.height / 2)
                loadingIndicator.backgroundColor = UIColor.gray
        loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.whiteLarge
            loadingIndicator.color = UIColor(red:232/255,green:126/255,blue:4/255,alpha:1.0)
        loadingIndicator.hidesWhenStopped = true
        loadingView.addSubview(loadingIndicator)

        loadingIndicator.tag = 500
        for subView in loadingView.subviews{
            if subView.tag == 500{
                print(subView.frame)
                print("Bounds", subView.bounds)
            }
        }
        loadingIndicator.startAnimating()
        self.view.addSubview(loadingView)

根据指示器视图的样式为 whiteLarge，默认为 37，因此更改并检查。

对于自动布局：

拖动宽度和高度为 60*60 的 UIView。（为您的超级视图提供宽度、高度、水平中心、垂直中心。）
将指示器视图拖到您的 UIView 中。（为您的视图设置水平居中和垂直居中。）
select Indicator view 设置样式为 white large 并检查其框架。（默认为 37，其他样式为 20）。
像下图一样设置约束。

Answer 2

您的自动布局设置和您正在尝试的代码都没有问题。
在 UIActivityIndicatorView.

上设置自定义颜色时，off-center 问题实际上似乎是一个 iOS 错误

你可以自己看看。

基本拖一个UIActivityIndicatorView
设置背景颜色
将样式设置为"Large White"
现在设置颜色

当样式为 White 或 Gray

时不会发生这种情况

已在 Xcode 9.3 故事板以及带有调试 > 颜色混合层的模拟器中进行了测试 - ON

如何使用 UiActivityIndicator 正确设置自定义背景视图

How to set a custom background view properly with UiActivityIndicator

ios

uiactivityindicatorview

如何使用 UiActivityIndi​​cator 正确设置自定义背景视图

How to set a custom background view properly with UiActivityIndicator

ios

uiactivityindicatorview

如何使用 UiActivityIndicator 正确设置自定义背景视图