Blog

  • Make Refresh Indicator Like Skype in IOS

    We are going to make a refresh indicator like Skype

     

     

    In Skype there is a bar to show when it is connected or disconnected with the network. We are to make same bar for showing updating data on refreshing the table.

     

     

    So for making this refresh Indicator we have to follow these steps:

     

    First we have to make a UIView and attach it to the top of tableview

        func updatingSubviews() {
            updateView.frame = CGRect(x: 0, y: 64, width: self.view.frame.width, height: 10)
            updateView.backgroundColor = ColorCode().greenColor
                   self.view.addSubview(updateView)
            updateView.hidden = true
        }

    Now we will add a text to this view to show its updating

         let label: UILabel = UILabel()
         label.frame.size = updateView.bounds.size
         label.text = "Updating..."
         label.textAlignment = .Center
         label.font = UIFont.systemFontOfSize(8)
         label.textColor = UIColor.whiteColor()
         updateView.addSubview(label)
         

        

    add these lines in the updatingSubviews(). Call this fund in viewDidLoad(). The bar is been created, now we have to hide and unhide it accordingly.

     

    Now we will UIRefreshControl to code. Put this on the top where variables are defined 

    var refreshControl:UIRefreshControl!
    

     

    Add this function in your code for displaying Refresh controller 

     

    //----- Function for displaying Refresh Controller
        func refreshControllerUI(){
            self.refreshControl = UIRefreshControl()
            self.refreshControl.backgroundColor = UIColor.whiteColor()
            self.refreshControl.attributedTitle = NSAttributedString(string: "Pull to refresh")
            self.refreshControl.addTarget(self, action: #selector(ViewController.refresh(_:)), forControlEvents: UIControlEvents.ValueChanged)
            self.tableView.addSubview(refreshControl)
        }     

     

    this func is defining the RefreshController and assigning an action refresh(_:) to be performed when refresh control is been refreshing.

     

    Now this the action we need to add:

     

           //------ Method for Refresh
        func refresh(sender:AnyObject){
            if self.refreshControl.refreshing == true {
                self.refreshControl.attributedTitle = NSAttributedString(string: “Please wait”)
            }
    
            // Perform task which has to be performed
            self.tableView.reloadData()
        }
         

    as table is been refreshed so we need to unhide the bar we created. So add this line to refresh(_:)

     

         updateView.hidden = false
    

     

    Now the final task is to hide the bar when table is been updated or when task has been performed. Then we need to add this line just

     

         updateView.hidden = true
         
    

    Now make the build and run the app. 

     

     

    Oops we got the view visible from starting, we missed to hide it. So for this we have to put this line in updatingSubviews() and Enjoy the build.

     
        updateView.hidden = true
         
    

    Thanks

     

Tags: ios

View All PostsLeave a Comment
comments powered by Disqus

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com