IOS – Simple ‘loading’ animación

1 respuesta

Todas la aplicaciones en IOS en algún momento necesitan tiempo para realizar una operación, ya sea una petición request o descargar un archivo o guardar una gran cantidad de información, la cosa es que tenemos que dar una retroalimentación al usuario de que esta sucediendo algo y tenemos 2 opciones; o buscamos y bajamos una libreria para estas animaciones de ‘loading’ o creamos una nosotros mismo, y eso es lo que aremos aquí en este tutorial.

Este componente que estaremos creando sera una extension de la clase `View` de iOS y loq ue vamos a estar haciendo es llamar un metodo para que coloque a una vista en perticular el `LoadingSpiner` nativo de iOS y estaremos dandole el feedback al usuario de que algo esta cargando o siendo procesado y no podra seguir interactuando con dicha vista.

Este seria nuestro resultado final:

ios loading

Para crear una simple animación loading para IOS, lo unico que necesitamos son 2 vistas, una vista que se mostrara como contenedor  y otra que sera la de la animación.

extension UIView {
  func kHolderViewTag() -> Int {
    return self.hash
  }
  
  func kIndicatorViewTag() -> Int {
    return self.hash / 100;
  }
  
  func kProgressViewTag() -> Int {
    return self.hash / 1000
  }
  
  func showLoadingIndicator() {
    if (self.superview?.viewWithTag(self.kHolderViewTag()) != nil) {

      let overlayView = UIView(frame: self.frame)
      overlayView.backgroundColor = UIColor.blue.withAlphaComponent(0.6)
      overlayView.tag = self.kHolderViewTag()
      overlayView.layer.cornerRadius = self.layer.cornerRadius
      
      let indicator = UIActivityIndicatorView(frame: self.frame)
      indicator.tag = self.kIndicatorViewTag()
      
      self.superview?.addSubview(overlayView)
      self.superview?.addSubview(indicator)
      indicator.startAnimating()
    }
  }
  
  func hideLoadingIndicator() {
    if (self.superview != nil) {
      
      if let overlayView = self.superview?.viewWithTag(self.kHolderViewTag()) {
        overlayView.removeFromSuperview()
      }
      
      if let indicator = self.superview?.viewWithTag(self.kIndicatorViewTag()) {
        overlayView.removeFromSuperview()
      }
    }
  }
}

Funciona de esta manera, con cualquier instancia de UIView se podran llamar los metodos showLoadingIndicator y hideLoadingIndicator

La forma en como funciona es que toma a cualquier vista como referencia y crear una nueva vista que servira de fondo para el LoadingIndicator y le asigara una Tag el cual sera a partir del hash de cada vista, esto lo hago para cuando proceda a eliminar (Remover la animacion) tener una referencia mas clara de la vista que voy a eliminar y me da la opcion de poder tener varias animaciones corriendo al mismo tiempo.