Share
UIKit proporciona a los desarrolladores UIActivityIndicatorView, que no es más que un spinner. Sin embargo, esta simple subclase UIView le dice al usuario que algo está en progreso, una consideración vital de UX. En este tutorial, les contaré todo sobre UIActivityIndicatorView y, como bono adicional, les presentaré MBProgressHUD, una clase de indicador de actividad sobre esteroides.!
Cuando un usuario interactúa con su aplicación, es importante que el usuario esté al tanto de lo que está haciendo su aplicación. Si su aplicación está actualizando una gran base de datos en segundo plano y desea evitar que el usuario interactúe con su aplicación hasta que finalice este proceso, no es suficiente con solo evitar que el usuario interactúe con su aplicación. Cuando un proceso lleva más de unos pocos milisegundos, puede ser útil mostrar los comentarios de los usuarios. La gente ama los comentarios, ya que les dice lo que está pasando. Si no me crees, te sugiero que pases una hora leyendo reseñas en la App Store..
No necesitamos una configuración compleja para este consejo rápido. Inicie Xcode y cree un nuevo proyecto usando la plantilla "Aplicación de vista única".
Nombra tu aplicación SpinnerDemo, ingrese un identificador de compañía, configure "iPhone" para la familia de dispositivos y desmarque "Usar guiones gráficos". Puedes dejar el resto sin tocar. Dile a Xcode dónde quieres guardar este proyecto y pulsa "Guardar".
Como su nombre lo indica, UIActivityIndicatorView es una subclase UIView. UIActivityIndicatorView es fácil de configurar y usar, así que hagámoslo ahora mismo. En el Project Navigator a la izquierda, seleccione ViewController.m y busque el - viewDidLoad método. Reemplace la implementación por defecto con la siguiente.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [self.view addSubview: ai];
Solo se requieren tres líneas de código para mostrar un UIActivityIndicatorView. En la primera línea, inicializamos el indicador de actividad con un estilo. Tenemos disponibles tres estilos: (1) UIActivityIndicatorViewStyleWhiteLarge, (2) UIActivityIndicatorViewStyleWhite, y (3) UIActivityIndicatorViewStyleGray. Los nombres de los estilos hablan por sí mismos, es decir, los estilos difieren solo en color y tamaño. En la segunda línea, colocamos el indicador de actividad en el centro de nuestra vista del controlador de vista y en la última línea agregamos nuestro UIActivityIndicatorView como una subvista a la vista del controlador de vista.
Cuando construya y ejecute su aplicación, se sorprenderá de que no se vea ningún indicador de actividad. ¿Porqué es eso? Por defecto, la propiedad. cuerosCuando se detuvo se establece en SÍ. Esto significa que el UIActivityIndicatorView se ocultará cuando no esté animando (girando). Animemos nuestro indicador de actividad agregando una línea adicional a nuestro archivo de implementación.
- (void) viewDidLoad [super viewDidLoad]; UIActivityIndicatorView * ai = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle: UIActivityIndicatorViewStyleWhite]; ai.center = self.view.center; [ai startAnimating]; [self.view addSubview: ai];
Cree y ejecute su aplicación una vez más y ahora debería ver su indicador de actividad girando como nunca antes lo había hecho. Tómese un momento para cambiar el estilo de UIActivityIndicatorView para tener una idea de cómo se ven los diferentes estilos. En iOS 5, también puede cambiar el color del indicador de actividad configurando color propiedad del indicador de actividad.
Detener el indicador de actividad es sencillo. Simplemente llamas - paradaAnimando en el UIActivityIndicatorView. Como mencioné antes, si cuerosCuando se detuvo se establece en SÍ, El indicador de actividad se ocultará automáticamente. En la mayoría de los casos de uso, este es el comportamiento que desea.
Un indicador tiene un valor cuando indica algo, pero si no indica algo, no debería estar allí. -Jony Ive, Objectified (2009)
Hay un método más del que me gustaría hablar, ya que puede ser útil cuando se trabaja con UIActivityIndicatorView. Vocación - isAnimating en un UIActivityIndicatorView le dirá si el indicador de actividad está animando actualmente.
Antes de continuar, me gustaría señalar algo que es muy importante y algo con lo que se encuentran muchos desarrolladores de iOS nuevos. No quiero entrar en demasiados detalles y antecedentes hoy en día, pero lo esencial es que siempre debe asegurarse de no bloquear el hilo principal de su aplicación. Es posible que haya escuchado esto antes y es especialmente cierto para UIActivityIndicatorView. La actualización de la interfaz de usuario se realiza en el subproceso principal y esto significa que cuando bloquea el subproceso principal realizando una tarea de larga ejecución en el subproceso principal, la aplicación no solo no responderá al usuario, sino que también evitará su actividad. Indicador de aparecer o animar. Como dije, escribiré sobre esto un poco más en una publicación futura..
Ahora echemos un vistazo a MBProgressHUD. Si ha estado desarrollando aplicaciones de iOS por algún tiempo, definitivamente verá los beneficios de esta increíble clase de código abierto. Puede encontrar MBProgressHUD en https://github.com/jdg/MBProgressHUD. Felicitaciones a Matej Bukovinski por desarrollar y mantener MBProgressHUD.
Notará que MBProgressHUD (HUD significa pantalla de visualización superior) parece familiar y se debe a que se parece mucho al progreso de HUD que Apple utiliza en algunas de sus propias aplicaciones. Sin embargo, el HUD de progreso que utiliza Apple es privado y, por lo tanto, no está disponible para desarrolladores externos.
Agregar MPProgressHUD a su aplicación es tan fácil como un pastel. Descargue el proyecto de GitHub, descomprima el archivo y arrastre tanto MBProgressHUD.h como MBProgressHUD.m a su proyecto de Xcode. Asegúrese de marcar "Copiar elemento en la carpeta del grupo de destino (si es necesario)" y también agregue MBProgressHUD a su destino, SpinnerDemo.
MBProgressHUD fue diseñado para proporcionar al usuario retroalimentación cuando se realizan tareas en segundo plano que requieren mucho tiempo. Toma nota de esa última palabra - fondo. Como mencioné anteriormente, no desea bloquear su hilo principal realizando una tarea que consume mucho tiempo en el hilo principal. No puedo enfatizar esto lo suficiente.
Usar MBProgressHUD es casi tan simple como UIActivityIndicatorView. Se necesita un poco más de trabajo para configurar todo, pero se obtiene mucho a cambio de ese esfuerzo. Primero, comente las cuatro líneas de código que agregamos para configurar nuestro indicador de actividad. Ya no necesitaremos eso. A continuación, agregaremos una nueva variable de instancia (ivar) al archivo de encabezado de nuestra clase ViewController. No olvide agregar también la declaración de clase hacia adelante de MBProgressHUD para que su clase ViewController sepa acerca de MBProgressHUD.
#importar@class MBProgressHUD; @interface ViewController: UIViewController MBProgressHUD * HUD; @final
Vuelva a cambiar a ViewController.m e importe el archivo de encabezado de MBProgressHUD agregando la siguiente línea justo debajo de la primera declaración de importación.
#importar "MBProgressHUD.h"
Si has seguido los pasos anteriores, el - viewDidLoad El método de su clase ViewController ahora solo debe contener una llamada a la superclase ' - viewDidLoad Método y cuatro líneas de código que han sido comentadas. Ahora iniciemos nuestro MBProgressHUD cambiando el - viewDidLoad Método al que se muestra a continuación (el código que está comentado no se muestra).
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloc] initWithView: self.view]; [self.view addSubview: HUD]; [Demostración de HUD: SI];
La inicialización de MBProgressHUD difiere ligeramente de la de UIActivityIndicatorView. En lugar de pasar un estilo, pasa una vista como argumento de su - en eso método. Esta vista es la vista que MBProgressHUD bloqueará (el usuario no podrá interactuar con esta vista) cuando el HUD de progreso esté visible. La segunda línea debe ser familiar y en la tercera línea le decimos al HUD que se muestre como está oculto por defecto. Listo? Cree y ejecute su aplicación en el simulador de iOS y observe el HUD de progreso que aparece.
A primera vista, podría pensar que esto es menos útil que UIActivityIndicatorView. Se salpica en el centro de la pantalla y parece que no hay manera de posicionar el progreso HUD. Esto se debe a que MBProgressHUD tiene un propósito diferente como lo dije anteriormente. Pretende mostrar al usuario que una tarea está en progreso y también evita que el usuario interactúe con la vista a la que se agrega el progreso HUD.
MBProgressHUD tiene muchas más funciones que solo mostrarse y ocultarse. Puede asignar un delegado, por ejemplo, que recibe una notificación cuando el progreso que HUD ha ocultado. Además, puede personalizar el HUD de progreso en gran medida con un identificador de progreso, una o dos etiquetas que le dicen al usuario qué está haciendo su aplicación y también se puede usar para mostrar un mensaje. En serio, MBProgressHUD es muy útil y le sugiero que eche un vistazo a la aplicación de demostración que viene con el proyecto que descargó para tener una idea de lo que puede hacer por usted..
Para finalizar este tutorial, me gustaría mostrarle un ejemplo de cómo podría usar MBProgressHUD en un escenario más avanzado. Vamos a realizar una tarea que consume mucho tiempo en segundo plano, mientras que nuestro progreso HUD muestra el progreso de esa tarea. Para ser honesto, realmente no vamos a realizar una tarea en segundo plano. Lo imitaremos con una solución inteligente que también es utilizada por la aplicación de demostración incluida con MBProgressHUD. Edite el código de configuración de su MBProgressHUD para que se vea como el de abajo.
- (void) viewDidLoad [super viewDidLoad]; HUD = [[MBProgressHUD alloc] initWithView: self.view]; HUD.labelText = @ "Haciendo cosas funky ..."; HUD.detailsLabelText = @ "Simplemente relájate"; HUD.mode = MBProgressHUDModeAnnularDeterminate; [self.view addSubview: HUD]; [HUD showWhileExecuting: @selector (doSomeFunkyStuff) onTarget: self withObject: nil animated: YES];
En la segunda y tercera línea, establecemos el texto de la etiqueta principal y secundaria del HUD de progreso para brindar al usuario alguna información sobre lo que está sucediendo. La cuarta línea establece el modo de nuestro HUD. MBProgressHUD viene con varios modos diferentes y el modo que elegimos, MBProgressHUDModeAnnularDeterminate, mostrará un indicador de progreso circular que muestra el progreso de nuestra tarea en segundo plano. Con la última línea, no solo mostramos el HUD, sino que mostramos el HUD y le decimos que estamos realizando una tarea y debería mostrarse siempre que la tarea se esté ejecutando. ¿No te dije que MBProgressHUD es fácil de usar? Veamos ahora - doSomeFunkyStuff.
- (void) doSomeFunkyStuff float progress = 0.0; mientras < 1.0) progress += 0.01; HUD.progress = progress; usleep(50000);
Declaramos un flotador llamado Progreso y configurarlo a 0.0. Usando un bucle while, incrementamos Progreso y establezca la propiedad de progreso de MBProgressHUD a ese valor. Esto dará como resultado que el indicador de progreso de nuestro HUD avance. La última línea del bucle while es un truco ingenioso para asegurarse de que este método demore más que unos pocos milisegundos en ejecutarse. Usando la funcion tu duerme, La ejecución del subproceso principal se suspende por la cantidad que pasamos como argumento (en microsegundos). Finalmente, el bucle while se ejecuta mientras progreso es menor que 1.0. El HUD desaparecerá automáticamente cuando finalice nuestro método. Crea y ejecuta tu aplicación para ver todo esto en acción..
Como puede ver, tanto UIActivityIndicatorView como MBProgressHUD tienen sus casos de uso y ambos son tremendamente útiles si desea crear una aplicación fácil de usar. No olvide echar un vistazo a la aplicación de demostración de MBProgressHUD para ver qué puede hacer por usted..
Accentsconagua