I added an UIActivityIndicatorView to a scene, and it worked fine. Then I tried to add a small container and show the activity indicator on top of that.
This is the code I have.
func showActivityIndicator(uiView: UIView) {
let container: UIView = UIView()
container.frame = CGRect(x: 0.0, y: 0.0, width: 80.0, height: 80.0);
container.center = uiView.center
container.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.5)
let activityIndicator = UIActivityIndicatorView()
activityIndicator.frame = CGRect(x: 0.0, y: 0.0, width: 40.0, height: 40.0);
activityIndicator.center = uiView.center
activityIndicator.hidesWhenStopped = true
activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.gray
container.addSubview(activityIndicator)
uiView.addSubview(container)
activityIndicator.startAnimating()
}
The container view is displayed in the middle of the screen, but there is no activity indicator. When I check the debug view hierarchy, I see the activity indicator is outside the view, in the lower right corner. Can any one please explain why it ended up there after I added the container? And how can I position it correctly?
Thanks.
there is an issue with below code
activityIndicator.center = uiView.center
please try this
activityIndicator.center = CGPoint(x: container.frame.size.width/2,y: container.frame.size.height/2)
This will work:
func showActivityIndicator(uiView: UIView) {
let container: UIView = UIView()
container.frame = CGRect(x: 0.0, y: 0.0, width: 80.0, height: 80.0);
container.center = uiView.center
container.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.5)
let activityIndicator = UIActivityIndicatorView()
activityIndicator.center = container.center
activityIndicator.hidesWhenStopped = true
activityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.gray
container.addSubview(activityIndicator)
uiView.addSubview(container)
activityIndicator.startAnimating()
}
Related
I am new in swift and I am trying to add shadow to UIView.
My code is like this
ViewPay.layer.masksToBounds = false
ViewPay.layer.shadowRadius = 2
ViewPay.layer.shadowOpacity = 1
ViewPay.layer.shadowColor = UIColor.red.cgColor
ViewPay.layer.shadowOffset = CGSize(width: 0 , height:2)
but it is adding shadow to all side
How can I add shadow like this
One solution is, put your ViewPay inside a container UIView.
Set your ViewPay to leading and trailing edges of container view, and for top and bottom add some padding to show shadow.
Also set container view clipsToBounds equals to true.
I hope to help with the solution of your question. In case you wanted something simple to understand, and also following the tips. You create a large container and add the required views. A vertical view of the purple color, another horizontal that would be gray color and in the middle put an image, as I did in the code:
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
//Big container
let container = UIView(frame: CGRect(x: self.view.bounds.width * 0.25, y: self.view.bounds.height * 0.5, width: 250, height: 290))
container.backgroundColor = .clear
self.view.addSubview(container)
//Purple view
let viewContainer = UIView(frame: CGRect(x: container.bounds.midX , y: 0, width: container.bounds.width * 0.89, height: container.bounds.height))
viewContainer.layer.anchorPoint.x = 1.0
viewContainer.backgroundColor = UIColor(displayP3Red: 158/255, green: 131/255, blue: 178/255, alpha: 1.0)
viewContainer.layer.cornerRadius = 8
viewContainer.clipsToBounds = true
container.addSubview(viewContainer)
//Gray view
let viewContainer2 = UIView(frame: CGRect(x: container.bounds.midX , y: container.bounds.midY, width: container.bounds.width * 0.93, height: container.bounds.height * 0.86))
viewContainer2.layer.anchorPoint.y = 1.0
viewContainer2.layer.anchorPoint.x = 1.0
viewContainer2.backgroundColor = UIColor(white: 0.5, alpha: 0.3)
viewContainer2.layer.cornerRadius = 5
viewContainer2.clipsToBounds = true
container.addSubview(viewContainer2)
//image
let imageView = UIImageView(frame: CGRect(x: container.bounds.midX, y: container.bounds.midY, width: container.bounds.width * 0.90, height: container.bounds.height * 0.90))
imageView.contentMode = .scaleToFill
imageView.layer.anchorPoint = CGPoint(x: 1.0, y: 1.0)
imageView.layer.cornerRadius = 10
imageView.clipsToBounds = true
imageView.image = UIImage(named: "image name")
container.addSubview(imageView)
}
}
I want to show the activity indicator on UIAlertViewController which contain the table view, So its working perfectly, but second case is when search controller appears on the Parent of UIAlertViewController then activity indicator not appears in center on UIAlertViewController.
Attaching image before attaching searchVC on Parent
And when searchVC added on Parent then
Following is code of activity indicator
var actInd: UIActivityIndicatorView = UIActivityIndicatorView()
func startActivityIndicator() {
self.view.isUserInteractionEnabled = false
let loadingView: UIView = UIView()
loadingView.frame = CGRect(x: 0, y: 0, width: 80.0, height: 80.0)
loadingView.center = self.view.center
loadingView.backgroundColor = UIColor(red: 44/255, green: 44/255, blue: 44/255, alpha: 0.7)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 10
actInd.frame = CGRect(x: 0, y: 0, width: 40.0, height: 40.0)
actInd.style = .whiteLarge
actInd.center = CGPoint(x: loadingView.frame.size.width / 2, y: loadingView.frame.size.height / 2)
loadingView.addSubview(actInd)
self.view.addSubview(loadingView)
actInd.startAnimating()
}
func stopActivityIndicator() {
self.view.isUserInteractionEnabled = true
actInd.stopAnimating()
let view = actInd.superview
view?.removeFromSuperview()
}
above code I have added in extension on UIViewController
Finally solved it by setting constraints by following way
func startActivityIndicator() {
self.view.isUserInteractionEnabled = false
let loadingView: UIView = UIView()
loadingView.translatesAutoresizingMaskIntoConstraints = false
actInd.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(loadingView)
loadingView.addSubview(actInd)
loadingView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
loadingView.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true
loadingView.widthAnchor.constraint(equalToConstant: 80.0).isActive = true
loadingView.heightAnchor.constraint(equalToConstant: 80.0).isActive = true
loadingView.center = self.view.center
loadingView.backgroundColor = UIColor(red: 44/255, green: 44/255, blue: 44/255, alpha: 0.7)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 10
actInd.leadingAnchor.constraint(equalTo: loadingView.leadingAnchor).isActive = true
actInd.trailingAnchor.constraint(equalTo: loadingView.trailingAnchor).isActive = true
actInd.topAnchor.constraint(equalTo: loadingView.topAnchor).isActive = true
actInd.bottomAnchor.constraint(equalTo: loadingView.bottomAnchor).isActive = true
actInd.style = .whiteLarge
actInd.center = CGPoint(x: loadingView.frame.size.width / 2, y: loadingView.frame.size.height / 2)
actInd.startAnimating()
}
Hello I want to show a UIActivityIndicatorView on my UIViewController exactly like this
How can I draw a UIViewIndicator like this above image
I have tried this
func showIndicatorView(){
let loadingIndicator = UIActivityIndicatorView(frame: CGRectMake(0, 0, 50, 50))
loadingIndicator.layer.cornerRadius = 05
loadingIndicator.opaque = false
loadingIndicator.backgroundColor = UIColor(white: 0.0, alpha: 0.6)
loadingIndicator.center = self.view.center;
loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
loadingIndicator.color = UIColor.whiteColor()
loadingIndicator.startAnimating()
self.view.addSubview(loadingIndicator)
}
You could put it in another view that has a black background color. Something like this. You could also add the 'Loading...' label in that view if you need it.
func showIndicatorView(){
let loadingIndicator = UIActivityIndicatorView(frame: CGRectMake(0, 0, 50, 50))
let backgroundView = UIView()
backgroundView.layer.cornerRadius = 05
backgroundView.clipsToBounds = true
backgroundView.opaque = false
backgroundView.backgroundColor = UIColor(white: 0.0, alpha: 0.6)
loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
loadingIndicator.color = UIColor.whiteColor()
loadingIndicator.startAnimating()
let loadingLabel = UILabel()
loadingLabel.text = "Loading..."
let textSize: CGSize = loadingLabel.text!.sizeWithAttributes([NSFontAttributeName: loadingLabel.font ])
loadingLabel.frame = CGRectMake(50, 0, textSize.width, textSize.height)
loadingLabel.center.y = loadingIndicator.center.y
backgroundView.frame = CGRectMake(0, 0, textSize.width + 70, 50)
backgroundView.center = self.view.center;
self.view.addSubview(backgroundView)
backgroundView.addSubview(loadingIndicator)
backgroundView.addSubview(loadingLabel)
}
Use MBProgressHud library .
This is what you need :-
https://github.com/jdg/MBProgressHUD
So What I am aiming for, is a UIActivityIndicator to position in the centre of the screen, with a background around the spinner, and then with a full background at half transparency. This image shows what I am trying to create:
I have no issues with the spinner etc, but getting the layers all positioned correctly. They all seem to sit below the centre. Please see the image below of what is actually happening:
The code is below:
var spinningActivityIndicator: UIActivityIndicatorView = UIActivityIndicatorView()
let container: UIView = UIView()
container.frame = self.view.frame
container.center = self.view.center
container.backgroundColor = UIColor(hue: 0/360, saturation: 0/100, brightness: 0/100, alpha: 0.4)
let loadingView: UIView = UIView()
loadingView.frame = CGRectMake(0, 0, 80, 80)
loadingView.center = self.view.center
loadingView.backgroundColor = UIColor(hue: 359/360, saturation: 67/100, brightness: 71/100, alpha: 1)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 40
spinningActivityIndicator.frame = CGRectMake(0, 0, 40, 40)
spinningActivityIndicator.hidesWhenStopped = true
spinningActivityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
spinningActivityIndicator.center = CGPointMake(loadingView.frame.size.width / 2, loadingView.frame.size.height / 2)
loadingView.addSubview(spinningActivityIndicator)
container.addSubview(loadingView)
view.addSubview(container)
spinningActivityIndicator.startAnimating()
UIApplication.sharedApplication().beginIgnoringInteractionEvents()
Can anyone help me fix this issue? Thanks!
Instead of adding it your view you can add it directly to application window. If you use window, your container can cover entire screen. Can you try this out?
var spinningActivityIndicator: UIActivityIndicatorView = UIActivityIndicatorView()
let window = UIApplication.sharedApplication().keyWindow
let container: UIView = UIView()
container.frame = UIScreen.mainScreen().bounds
container.backgroundColor = UIColor(hue: 0/360, saturation: 0/100, brightness: 0/100, alpha: 0.4)
let loadingView: UIView = UIView()
loadingView.frame = CGRectMake(0, 0, 80, 80)
loadingView.center = container.center
loadingView.backgroundColor = UIColor(hue: 359/360, saturation: 67/100, brightness: 71/100, alpha: 1)
loadingView.clipsToBounds = true
loadingView.layer.cornerRadius = 40
spinningActivityIndicator.frame = CGRectMake(0, 0, 40, 40)
spinningActivityIndicator.hidesWhenStopped = true
spinningActivityIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
spinningActivityIndicator.center = CGPointMake(loadingView.frame.size.width / 2, loadingView.frame.size.height / 2)
loadingView.addSubview(spinningActivityIndicator)
container.addSubview(loadingView)
window.addSubview(container)
spinningActivityIndicator.startAnimating()
UIApplication.sharedApplication().beginIgnoringInteractionEvents()
And for stopping indicator and removing view use
spinningActivityIndicator.stopAnimating()
UIApplication.sharedApplication().endIgnoringInteractionEvents()
container.removeFromSuperview()
This sort of thing is always wrong:
loadingView.center = self.view.center
The reason is that center is reckoned in terms of the view's superview's coordinate system. Since these two views are themselves to be subview and superview of one another, the two center values are in two different coordinate systems. Thus, trying to set them equal to one another can never get you the result you want.
Instead, understand the difference between frame and bounds. The frame (and center) of the subview is given in terms of the bounds of its superview. Thus, the way to center a view within its superview is to put its center at the point
CGPointMake(
CGRectGetMidX(theSuperview.bounds),
CGRectGetMidY(theSuperview.bounds))
So, decide what view you want your activity indicator to be at the center of, make your activity indicator that view's subview, and set its center in accordance with that formula, and you'll be spot on.
For others looking for a cleaner answer (Swift 4)
self.activityIndicatorView = UIActivityIndicatorView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
self.activityIndicatorView.hidesWhenStopped = true
self.activityIndicatorView.style = .whiteLarge
self.activityIndicatorView.backgroundColor = UIColor.darkGray.withAlphaComponent(0.75)
UIApplication.shared.keyWindow?.addSubview(self.activityIndicatorView)
self.activityIndicatorView.startAnimating()
i have created an activity window function which takes 3 inputs,
msg:String - the message which should show in the activity window
indicator:Bool - if the activity window should show or not
view:UIView - the uiview which should get the frame sizes etc from the View Controller which its called on
everything works fine, except the part where subview needs to be removed.if the same function is run on the main view controller. it works fine. just when i moved it to NSObject, it does not. please help
class UIDesignFunction: NSObject {
func progressBarDisplayer(msg:String, indicator:Bool, view:UIView) {
var activityIndicator = UIActivityIndicatorView()
var strLabel = UILabel()
var msgFrame = UIView()
if indicator{
//println(msg)
strLabel = UILabel(frame: CGRect(x: 50, y: 0, width: 200, height: 50))
strLabel.text = msg
strLabel.textColor = UIColor.whiteColor()
msgFrame = UIView(frame: CGRect(x: view.frame.midX - 90, y: view.frame.midY - 25 , width: 180, height: 50))
msgFrame.layer.cornerRadius = 15
msgFrame.backgroundColor = UIColor(white: 0, alpha: 0.7)
activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.White)
activityIndicator.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
activityIndicator.startAnimating()
msgFrame.addSubview(activityIndicator)
UIApplication.sharedApplication().beginIgnoringInteractionEvents()
msgFrame.addSubview(strLabel)
view.addSubview(msgFrame)
}else{
UIApplication.sharedApplication().endIgnoringInteractionEvents()
msgFrame.removeFromSuperview()
}
}
move the variables out of the function like below
class UIDesignFunction: NSObject {
var activityIndicator = UIActivityIndicatorView()
var strLabel = UILabel()
var msgFrame = UIView()
func progressBarDisplayer(msg:String, indicator:Bool, view:UIView) {
if indicator{
//println(msg)
strLabel = UILabel(frame: CGRect(x: 50, y: 0, width: 200, height: 50))
strLabel.text = msg
strLabel.textColor = UIColor.whiteColor()
msgFrame = UIView(frame: CGRect(x: view.frame.midX - 90, y: view.frame.midY - 25 , width: 180, height: 50))
msgFrame.layer.cornerRadius = 15
msgFrame.backgroundColor = UIColor(white: 0, alpha: 0.7)
activityIndicator = UIActivityIndicatorView(activityIndicatorStyle: UIActivityIndicatorViewStyle.White)
activityIndicator.frame = CGRect(x: 0, y: 0, width: 50, height: 50)
activityIndicator.startAnimating()
msgFrame.addSubview(activityIndicator)
UIApplication.sharedApplication().beginIgnoringInteractionEvents()
msgFrame.addSubview(strLabel)
view.addSubview(msgFrame)
}else{
UIApplication.sharedApplication().endIgnoringInteractionEvents()
msgFrame.removeFromSuperview()
}
}