Skip to main content

Custom Activity Indicator with String title in Swift/iOS?

 How to create an Activity Indicator with String title in Swift/iOS?

Activity Indicator is the spinning wheel with a custom background view that indicates a task is in progress. Apple has provided a basic activity indicator view for UIActivityIndicator Class, but that doesn’t provide appearance customisation view. In this post share custom Activity Indicator in which you can edit your message and image


Activity Indicator with String title


Let’s start customise design a activity indicator

Create a swift class => CAVProgressHud.swift


import UIKit

let SCREEN_WIDTH = UIScreen.main.bounds.size.width

let SIZE_CONSTANT = 375.0

let SCREEN_HEIGHT = UIScreen.main.bounds.size.height

 

@available(iOS 13.0, *)

class CAVProgressHud {

    static let sharedInstance = CAVProgressHud()

    

    var container = UIView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT))

    var subContainer = UIView(frame: CGRect(x: 0, y: 0, width: 300, height: 110))

    var textLabel = UILabel()

    var activityIndicatorView = UIActivityIndicatorView()

    var blurEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .dark))

    

    init() {

        //Main Container

        container.backgroundColor = UIColor.clear

        

        //Sub Container

        subContainer.layer.cornerRadius = 5.0

        subContainer.layer.masksToBounds = true

        subContainer.backgroundColor = UIColor.clear

        

        //Activity Indicator

        activityIndicatorView.hidesWhenStopped = true

        

        //Text Label

        textLabel.textAlignment = .center

        textLabel.numberOfLines = 0

        textLabel.font = UIFont.systemFont(ofSize: 14.0, weight: .medium)

        textLabel.textColor = UIColor.darkGray

        

        //Blur Effect

        //always fill the view

        blurEffectView.frame = container.bounds

        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]

    }

 

    //MARKS:-  A Simple Activity Indicator

 

    func show() -> Void {

        container.backgroundColor = UIColor.black.withAlphaComponent(0.50)

        activityIndicatorView.style = UIActivityIndicatorView.Style.large

        activityIndicatorView.center = CGPoint(x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT / 2)

        activityIndicatorView.color = UIColor.white

        

        activityIndicatorView.startAnimating()

        container.addSubview(activityIndicatorView)

       if let window = getKeyWindow() {

            window.addSubview(container)

        }

        container.alpha = 0.0

        UIView.animate(withDuration: 0.5, animations: {

            self.container.alpha = 1.0

        })

    }

 

//MARKS:-  Activity Indicator With A String Message

 

    func show(withTitle title: String?) {

        container.backgroundColor = UIColor.black.withAlphaComponent(0.50)

        subContainer.backgroundColor = UIColor.white

        subContainer.center = CGPoint(x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT / 2)

        container.addSubview(subContainer)

        activityIndicatorView.style = UIActivityIndicatorView.Style.large

        activityIndicatorView.color = UIColor.init(red: 33/250, green: 150/250, blue: 243/250, alpha: 1)

        activityIndicatorView.frame = CGRect(x: 0, y: 20, width: subContainer.bounds.width, height: subContainer.bounds.height / 3.0)

        activityIndicatorView.center = CGPoint(x: activityIndicatorView.center.x, y: activityIndicatorView.center.y)

        subContainer.addSubview(activityIndicatorView)

        

        let height: CGFloat = subContainer.bounds.height - activityIndicatorView.bounds.height - 10.0

        textLabel.frame = CGRect(x: 5, y: 10 + activityIndicatorView.bounds.height, width: subContainer.bounds.width - 10.0, height: height - 5.0)

        

        textLabel.font = UIFont.init(name: "Lato-Bold", size: 18.0)

        textLabel.text = title

        subContainer.addSubview(textLabel)

        

        activityIndicatorView.startAnimating()

        if let window = getKeyWindow() {

            window.addSubview(container)

        }

        container.alpha = 0.0

        UIView.animate(withDuration: 0.5, animations: {

            self.container.alpha = 1.0

        })

    }

 

      //MARKS:-  Activity Indicator With A String Message and Dark Background View

 

    func showDarkBackgroundView(withTitle title: String?) {

        container.backgroundColor = UIColor.black.withAlphaComponent(0.85)

        subContainer.backgroundColor = UIColor.systemGroupedBackground

        subContainer.center = CGPoint(x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT / 2)

        container.addSubview(subContainer)

        activityIndicatorView.style = UIActivityIndicatorView.Style.medium

        activityIndicatorView.color = UIColor.black

        activityIndicatorView.frame = CGRect(x: 0, y: 10, width: subContainer.bounds.width, height: subContainer.bounds.height / 3.0)

        activityIndicatorView.center = CGPoint(x: activityIndicatorView.center.x, y: activityIndicatorView.center.y)

        subContainer.addSubview(activityIndicatorView)

        

        let height: CGFloat = subContainer.bounds.height - activityIndicatorView.bounds.height - 10.0

        textLabel.frame = CGRect(x: 5, y: 10 + activityIndicatorView.bounds.height, width: subContainer.bounds.width - 10.0, height: height - 5.0)

        textLabel.text = title

        subContainer.addSubview(textLabel)

        

        activityIndicatorView.startAnimating()

        if let window = getKeyWindow() {

            window.addSubview(container)

        }

        container.alpha = 0.0

        UIView.animate(withDuration: 0.5, animations: {

            self.container.alpha = 1.0

        })

    }

 

    //MARKS:-  Activity Indicator With A String Message and Blur View

 

    func showBlurView(withTitle title: String?) {

        

        //only apply the blur if the user hasn't disabled transparency effects

        if !UIAccessibility.isReduceTransparencyEnabled {

            container.backgroundColor = UIColor.clear

            container.addSubview(blurEffectView)

        } else {

            container.backgroundColor = UIColor.black.withAlphaComponent(0.85)

        }

        

        subContainer.backgroundColor = UIColor.systemGroupedBackground

        activityIndicatorView.color = UIColor.black

        subContainer.center = CGPoint(x: SCREEN_WIDTH / 2, y: SCREEN_HEIGHT / 2)

        container.addSubview(subContainer)

        

        activityIndicatorView.style = UIActivityIndicatorView.Style.medium

        activityIndicatorView.frame = CGRect(x: 0, y: 10, width: subContainer.bounds.width, height: subContainer.bounds.height / 3.0)

        activityIndicatorView.center = CGPoint(x: activityIndicatorView.center.x, y: activityIndicatorView.center.y)

        subContainer.addSubview(activityIndicatorView)

        

        let height: CGFloat = subContainer.bounds.height - activityIndicatorView.bounds.height - 10.0

        textLabel.frame = CGRect(x: 5, y: 10 + activityIndicatorView.bounds.height, width: subContainer.bounds.width - 10.0, height: height - 5.0)

        textLabel.text = title

        subContainer.addSubview(textLabel)

        

        activityIndicatorView.startAnimating()

        if let window = getKeyWindow() {

            window.addSubview(container)

        }

        container.alpha = 0.0

        UIView.animate(withDuration: 0.5, animations: {

            self.container.alpha = 1.0

        })

    }

    

    func updateProgressTitle(_ title: String?) {

        textLabel.text = title

    }

 

 //MARKS:-  Hide & Stop Activity Indicator 

 

    func hide() {

        UIView.animate(withDuration: 0.5, animations: {

            self.container.alpha = 0.0

        }) { finished in

            self.activityIndicatorView.stopAnimating()

            self.activityIndicatorView.removeFromSuperview()

            self.textLabel.removeFromSuperview()

            self.subContainer.removeFromSuperview()

            self.blurEffectView.removeFromSuperview()

            self.container.removeFromSuperview()

        }

    }

    private func getKeyWindow() -> UIWindow? {

        let window = UIApplication.shared.connectedScenes

            .filter({$0.activationState == .foregroundActive})

            .map({$0 as? UIWindowScene})

            .compactMap({$0})

            .first?.windows

            .filter({$0.isKeyWindow}).first

        

        return window

    }

}


Used to CAVProgressHud.swift class anywhere UIController your project


Start Activity Indicator and Stop


Start:-

CAVProgressHud.sharedInstance.show(withTitle: "Please wait...")

 

Stop:-

CAVProgressHud.sharedInstance.hide()

Labels:

Comments

Post a Comment

Popular posts from this blog

Add a Scene Delegate to your existing project with Storyboard in Swift

To add a scene delegate, first, create a new Swift file that you’ll call "SceneDelegate" containing a subclass of UIResponder, just like the AppDelegate, and that conforms to UIWindowSceneDelegate.  As your app might supports other versions than iOS 13, make this class only available for iOS 13. This is what you should have : If you are working a project that is storyboard based, please set storyboard  initial view controller SceneDelegate.swift import UIKit @available ( iOS 13.0 , *) class SceneDelegate : UIResponder , UIWindowSceneDelegate {     var window : UIWindow ?     func scene ( _ scene: UIScene , willConnectTo session: UISceneSession , options connectionOptions: UIScene . ConnectionOptions ) {                  let storyboard = UIStoryboard (name: "Main" , bundle: nil )         let initialViewController = storyboard. instantiateViewController (withIdentifier: "ViewController" )         let mainNavigationController = UINavigationControlle
4 comments
Read more

How Create Animated Circle Progress Bar iOS 11 Swift 4

  Animated Circle Progress Bar iOS 11 Swift 4 With MBCircularProgressBa r - https://github.com/MatiBot/MBCircularProgressBar A circular, animatable & highly customizable progress bar from the Interface Builder Swift, Using pod fite MBCircularProgressBar Installation Cocoapods terminal. pod "MBCircularProgressBar" That - A Simple Steps to installed pod file -        Open terminal        Command on terminal go to project folder Cd path        set your project path on terminal.        command : pod init        open pod file - open -e podfile        added in pod file with in : pod "MBCircularProgressBar"        Command : Pod install        Close project of Xcode        open your Project from terminals        Command : open PodDemos.xcworkspace After opern StoryBoard and Now drag a UIView over the viewController in storyboard Or set UIView Constraint width, height or verticle or horzentail space and set a class MBCircul
1 comment
Read more

How to Use Multiple Sections in UITableView iOS Swift !

Multiple sections in UITableView iOS Swift. UITableView is very important part of iOS ecosystem. So we split tableviews in sections. Then its easier to find right information.  1. First let’s create a project as usual. Create a new single view application X code project. Set project name to UIViewController.  2. Go to main storyboard & select view controller & use UITableView 3. Select tableview & make it initial view controller  4 Create a custom Sections Class like Name => TableSections, create register cell static return “ getCellNibs ” method. Then create  4 section enum “TableItems” then after append all sections to an array model. import UIKit struct CellNib {      static func getCellNibs () -> [ String ] {          return [ "Cell1" , "Cell2" , "Cell3" , "Cell4" ]     } } enum TableItems : Int {      case TableSections1      case TableSections2      case TableSections3      case TableSections4 } class TableSec
1 comment
Read more