Mostrar una Vista de Cargando en mi App de iOS (Loading View)

Standard

Introducción.

Cuando estás esperando porque se carguen datos de internet, necesitas mostrar una vista que indique que está esperando por los datos. La recomendación sería utilizar un “spinner” básico (UIActivityIndicatorView) para asegurar que la aplicación continúa en ejecución, y se puede acompañar de algún texto como “Loading …”.
A pesar de que es un comportamiento común en las aplicaciones, no es un control estándar y debe ser construido manualmente.

Aplicación de Muestra

A continuación les comparto un ejemplo del uso que se le puede dar a LoadingView.
Loading View

Despegando la Vista de Cargando (Loading View)
Una vista de Cargando no es la cosa más complicada del mundo en lo que interfaces de usuario se refiere, pero se pueden incluir una serie de comportamientos comunes muy útiles y es buena idea tenerla en una clase reutilizable para este propósito.
Los comportamientos que se están manejando en este componente son:
  • Mostrar una vista en negro en el centro de la pantalla, con los borden redondeados.
  • Dicha vista es semi-transparente, y permite la vista por cargar.
  • Se muestra al centro con un mensaje y un indicador de actividad.
  • Bloquear la interacción con el resto de la app.
También se pudieran agregar animaciones para que aparezca y desaparezca el indicador, lo cual haría más robusto nuestro componente. (Fade in, Fade out)
LoadingView.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import UIKit
 
class LoadingView: UIView {
 
 var titleLabel: UILabel!
 
 var title: String! {
   get {
     return titleLabel.text
   }
 
   set(title) {
     titleLabel.text = title
   }
 }
 
 override init(frame: CGRect) {
   super.init(frame: frame)
   setup()
 }
 
 required init(coder aDecoder: NSCoder) {
   super.init(coder: aDecoder)!
   setup()
 }
 
 private func setup() {
   layer.cornerRadius = 20
   backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.75)
   let air = frame.size.height * 0.20
   let activity = UIActivityIndicatorView(activityIndicatorStyle: .WhiteLarge)
   activity.frame = CGRectMake((frame.size.width - 37) / 2, air, 37, 37)
   activity.startAnimating()
   addSubview(activity)
 
   titleLabel = UILabel(frame: CGRectMake(0, air + 37, frame.size.width, frame.size.height - 57))
   titleLabel.backgroundColor = UIColor.clearColor()
   titleLabel.textColor = UIColor.whiteColor()
   titleLabel.font = UIFont.systemFontOfSize(14)
   titleLabel.textAlignment = .Center
   titleLabel.lineBreakMode = .ByWordWrapping
   titleLabel.numberOfLines = 0
   addSubview(titleLabel)
 }
}
Dejar disponible nuestra Vista de Carga para todas las Vistas (UIView)
Swift ofrece un mecanismo muy dinámico para agregar extensiones a las clases, lo cual es muy conveniente para extender las clases estándar como la UIView. Vamos a agregar un par de métodos para iniciar y detener nuestra vista de cargando.
 
UIView-Additions.swift
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import Foundation
 
extension UIView {
 
  func setBorderForColor(color: UIColor, width: Float, radius: Float) {
    self.layer.cornerRadius = CGFloat(radius)
    self.layer.masksToBounds = true
    self.layer.borderColor = color.CGColor
    self.layer.borderWidth = CGFloat(width)
  }
 
  func startLoading(title: String) {
    let w = frame.size.width
    let h = frame.size.height
    let loadingView = LoadingView(frame: CGRectMake(w/2 - 75, h/2 - 75, 150, 150))
    loadingView.title = title
 
    addSubview(loadingView)
    userInteractionEnabled = false
  }
 
  func stopLoading() {
    for v in subviews {
      if v.isKindOfClass(LoadingView) {
        v.removeFromSuperview()
      }
    }
 
    userInteractionEnabled = true
  }
}

Comentarios finales

Desplegar una vista de cargando no es una tarea difícil, encontrarás varias implementaciones en internet, pero implementar todos los comportamientos esperados a veces te consume tiempo, por lo que mantener una versión reutilizable puede ahorrarte mucho tiempo.

Ya con esta clase y extensión puedes agregar a tus apps tu vista de cargando fácilmente.

Saludos y nos vemos en los próximos posts.

Leave a Reply

Your email address will not be published. Required fields are marked *