How to set a custom background view properly with UiActivityIndicator - ios

Question

My app is using WKWebView to load my website. I need a UiActivityIndicator with a custom dark gray background view due to the UIActivityIndicator might be difficult to spot when it mixed up with my website's content. Previously, I followed 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,
It is very obvious on my iPhone 5 and so on. So, I used another approach which is using auto layout. The background view is still not working as well. Here is my auto layout setup
This is my programmatically part.
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)
I would prefer using auto layout.

Answer 1

There is no issue in either your auto layout setup nor the code you are trying.
The off-center issue actually seems to be an iOS bug when setting a custom color on a UIActivityIndicatorView.
You can see this for yourself.
Drag a basic UIActivityIndicatorView
Set a background color
Set it's style to "Large White"
Now set a color
This doesn't happen when the style is White or Gray
Tested it in Xcode 9.3 Storyboard as well as Simulator with Debug > Color Blended layers - ON

Answer 2

Try to change this code
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)
As per style of indicator view is whiteLarge, by default its 37 so change and check.
For auto layout :
Drag UIView with 60*60 width and height.(Give width,height, horizontal center, vertical center to your super view.)
Drag Indicator view into Your UIView.(Give horizontal center, vertical center to your view.)
select Indicator view set style to white large and check its frame.(37 by default and other style 20).
set constraints like below image.