{"id":2021,"date":"2021-03-08T18:52:12","date_gmt":"2021-03-08T18:52:12","guid":{"rendered":"https:\/\/sezeromer.com\/?p=2021"},"modified":"2023-03-04T13:33:57","modified_gmt":"2023-03-04T10:33:57","slug":"swift-loading-screen","status":"publish","type":"post","link":"https:\/\/sezeromer.com\/en\/swift-loading-screen\/","title":{"rendered":"Swift Loading Screen"},"content":{"rendered":"<p>Hello friends, in this article, we will talk about how we can create a common waiting screen with Swift in our iOS projects. Actually, there are many ways to do this. These;<\/p>\n<ul>\n<li>Using a pod<\/li>\n<li>Writing extension to UIView<\/li>\n<li>Writing a class<\/li>\n<\/ul>\n<h2>Using Pod<\/h2>\n<p>Using a pod for the loading screen is one of the simplest and easiest ways. The pod we use the most for this job is <strong>SVProgressHud<\/strong>. You can view it <a href=\"https:\/\/github.com\/SVProgressHUD\/SVProgressHUD\">here<\/a>. You can simply load loading on your screen. Its output is as follows.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2024\" src=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36-607x1024.png\" alt=\"\" width=\"607\" height=\"1024\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36-607x1024.png 607w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36-178x300.png 178w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36-768x1296.png 768w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36-500x844.png 500w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36-800x1350.png 800w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36-910x1536.png 910w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.11.36.png 1141w\" sizes=\"(max-width: 607px) 100vw, 607px\" \/><\/p>\n<h2>Writing Extension to UIView<\/h2>\n<p>This is one of the most logical ways if you want to put a separate view yourself here. Here, when you call the showLoading function in the View at the top of your ViewController, you will see a Loading icon with a blurred backside.<\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;swift&quot;,&quot;mime&quot;:&quot;text\/x-swift&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:true,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">\/\/\r\n\/\/  UIView+Extension.swift\r\n\/\/  OSMovie\r\n\/\/\r\n\/\/  Created by Omer Sezer on 8.03.2021.\r\n\/\/\r\n\r\nimport UIKit\r\n\r\nextension UIView {\r\n    func showLoading() {\r\n        let blurLoader = BlurLoader(frame: frame)\r\n        self.addSubview(blurLoader)\r\n    }\r\n    \r\n    func hideLoading() {\r\n        if let blurLoader = subviews.first(where: { $0 is BlurLoader }) {\r\n            blurLoader.removeFromSuperview()\r\n        }\r\n    }\r\n}\r\n\r\nclass BlurLoader: UIView {\r\n\r\n    var blurEffectView: UIVisualEffectView?\r\n\r\n    override init(frame: CGRect) {\r\n        let blurEffect = UIBlurEffect(style: .dark)\r\n        let blurEffectView = UIVisualEffectView(effect: blurEffect)\r\n        blurEffectView.frame = frame\r\n        blurEffectView.autoresizingMask = [.flexibleWidth, .flexibleHeight]\r\n        self.blurEffectView = blurEffectView\r\n        super.init(frame: frame)\r\n        addSubview(blurEffectView)\r\n        addLoader()\r\n    }\r\n\r\n    required init?(coder aDecoder: NSCoder) {\r\n        fatalError(\"init(coder:) has not been implemented\")\r\n    }\r\n\r\n    private func addLoader() {\r\n        guard let blurEffectView = blurEffectView else { return }\r\n        let activityIndicator = UIActivityIndicatorView()\r\n        if #available(iOS 13.0, *) {\r\n            activityIndicator.style = .large\r\n        } else {\r\n            activityIndicator.style = .gray\r\n        }\r\n        activityIndicator.frame = CGRect(x: 0, y: 0, width: 50, height: 50)\r\n        blurEffectView.contentView.addSubview(activityIndicator)\r\n        activityIndicator.center = blurEffectView.contentView.center\r\n        activityIndicator.startAnimating()\r\n    }\r\n}<\/pre>\n<\/div>\n<p>The screen output is as follows.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-2025\" src=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-473x1024.png\" alt=\"\" width=\"473\" height=\"1024\" srcset=\"https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-473x1024.png 473w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-139x300.png 139w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-768x1662.png 768w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-500x1082.png 500w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-800x1731.png 800w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-710x1536.png 710w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44-946x2048.png 946w, https:\/\/sezeromer.com\/wp-content\/uploads\/2021\/03\/Simulator-Screen-Shot-iPhone-12-2021-03-08-at-21.21.44.png 1170w\" sizes=\"(max-width: 473px) 100vw, 473px\" \/><\/p>\n<h2>Writing Class<\/h2>\n<p>Another method we use is to create a class, define it with a static variable and display it at the top layer of the screen. Just write the code below for this.<\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;swift&quot;,&quot;mime&quot;:&quot;text\/x-swift&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:true,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">public class LoadingOverlay{\r\n\r\n    var overlayView = UIView()\r\n    var activityIndicator = UIActivityIndicatorView()\r\n\r\n    class var shared: LoadingOverlay {\r\n        struct Static {\r\n            static let instance: LoadingOverlay = LoadingOverlay()\r\n        }\r\n        return Static.instance\r\n    }\r\n    \r\n    public func showOverlay() {\r\n        if  let appDelegate = UIApplication.shared.delegate as? AppDelegate, let window = appDelegate.window {\r\n            overlayView.frame = CGRect(x: 0, y: 0, width: 80, height: 80)\r\n            overlayView.center = CGPoint(x: window.frame.width \/ 2.0, y: window.frame.height \/ 2.0)\r\n            overlayView.backgroundColor = .blue\r\n            overlayView.clipsToBounds = true\r\n            overlayView.layer.cornerRadius = 10\r\n\r\n            activityIndicator.frame = CGRect(x: 0, y: 0, width: 40, height: 40)\r\n            activityIndicator.style = .whiteLarge\r\n            activityIndicator.center = CGPoint(x: overlayView.bounds.width \/ 2, y: overlayView.bounds.height \/ 2)\r\n\r\n            overlayView.addSubview(activityIndicator)\r\n            window.addSubview(overlayView)\r\n\r\n            activityIndicator.startAnimating()\r\n        }\r\n    }\r\n    public func hideOverlayView() {\r\n        activityIndicator.stopAnimating()\r\n        overlayView.removeFromSuperview()\r\n    }\r\n}<\/pre>\n<\/div>\n<p>After that, just run the following line of code where you want to use it.<\/p>\n<div class=\"wp-block-codemirror-blocks code-block \">\n<pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;swift&quot;,&quot;mime&quot;:&quot;text\/x-swift&quot;,&quot;theme&quot;:&quot;default&quot;,&quot;lineNumbers&quot;:true,&quot;lineWrapping&quot;:false,&quot;styleActiveLine&quot;:true,&quot;readOnly&quot;:true,&quot;align&quot;:&quot;&quot;}\">LoadingOverlay.shared.showOverlay()<\/pre>\n<\/div>\n<p>You can reach the project <a href=\"https:\/\/github.com\/omersezer\/MovieListProject\">here<\/a>. If you have questions, you can ask by mail or comment. Good work.<\/p>","protected":false},"excerpt":{"rendered":"<p>Hello friends, in this article, we will talk about how we can create a common waiting screen with Swift in our iOS projects. Actually, there are many ways to do this. These; Using a pod Writing extension to UIView Writing a class Using Pod Using a pod for the loading screen is one of the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2024,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[327],"tags":[785,786,314,784,665,681,783,328],"class_list":["post-2021","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-swift","tag-blur","tag-blurred","tag-loading","tag-overlay","tag-pod","tag-static","tag-svprpgresshud","tag-swift"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/2021"}],"collection":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/comments?post=2021"}],"version-history":[{"count":6,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/2021\/revisions"}],"predecessor-version":[{"id":2668,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/posts\/2021\/revisions\/2668"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media\/2024"}],"wp:attachment":[{"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/media?parent=2021"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/categories?post=2021"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sezeromer.com\/en\/wp-json\/wp\/v2\/tags?post=2021"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}