Consejos de diseño de aplicaciones móviles para iOS

Uno de los programas para desarrollar una aplicación en iOS es Xcode mediante el lenguaje de programación Swift 4.2.

Xcode es un conjunto de herramientas de desarrollo que trabaja de manera conjunta con Interface Builder y que ofrece todo lo necesario para crear aplicaciones para Mac, iPad y iPhone.

A continuación, mostraremos algunas recomendaciones en el diseño para poder gestionar una aplicación sencilla.

Diferencias de diseño entre iOS y Android

Los iPhone no presentan los botones típicos de ir hacia atrás por lo que debemos determinar la mejor forma de implementar el botón “Atrás”.

Podemos ignorarlo y retroceder navegando por el menú o con el efecto deslizante que nos ofrece Apple por defecto. Pero si queremos mostrarlo, hay una manera muy sencilla de conseguirlo y sería mediante el uso de una barra de navegación añadiendo botones para el menú o para el logotipo de la app.

En ambos casos se debe utilizar un controlador de navegación cuya función más técnica sería empujar nuevos controladores de vista en la pantalla mediante una animación, por lo que al volver hacia atrás revela el controlador de vista que había debajo. Todo este proceso se conoce como la pila de navegación.

Ahora te vamos a enseñar cómo crear una pila de navegación:

Para crear un controlador de navegación, tan sólo haría falta elegir la primera vista desde la que empezará la pila de navegación.

Podemos configurar la navegación a nuestro gusto, el equipo de desarrollo de aplicaciones móviles de digitalDot ha optado en hacerlo como en la siguiente imagen. Mostrando solo navegación en la parte de arriba de las vistas.

Cada una de las vistas puede mostrar su estilo personalizado, en nuestro caso, se ha optado por dejarla oscura para ponerle el botón BACK de color blanco.

Un consejo importante si tienes una tabla de elementos que no se desplace hacia arriba, en la configuración debes marcar la sección Layout Adjust Scroll View Insets.

Aquí tienes un ejemplo de código para insertar en la barra de navegación el botón de menú y su función cuando hacemos clic en él:

let button: UIButton = UIButton(type: UIButton.ButtonType.custom)

button.setImage(UIImage(named: "menu"), for: .normal)

button.addTarget(self, action: #selector(irMenu(sender:)), for: .touchUpInside)

button.frame = CGRect(x: 0, y: 0, width: 30, height: 44)

let barButton = UIBarButtonItem(customView: button)

self.navigationItem.leftBarButtonItem = barButton

En dicha función se usa la llamada presentViewController que es otra forma de mostrar controladores de vista para dejar la vista anterior debajo de fondo claro:

@objc func irMenu(sender: UIButton) {

let storyboard = UIStoryboard(name: "Main", bundle: nil)

let vc = storyboard.instantiateViewController(withIdentifier: “menu”)

vc.modalPresentationStyle = .overCurrentContext

vc.modalTransitionStyle = .crossDissolve

present(vc, animated: true, completion: nil)

}

De igual modo para cerrar el menú, por ejemplo, cuando pulsamos el botón se mostrará la última vista:

@objc func cerrarMenu(_ sender: Any) {

self.dismiss(animated: true, completion: nil) }

Otro ejemplo es este código para insertar en la barra de navegación un logotipo de la app y su función cuando hacemos clic:

let button1: UIButton = UIButton()

button1.setImage(UIImage(named: "logotipo"), for: .normal)

self.navigationItem.titleView = button1

button1.addTarget(self, action: #selector(irPrincipal(sender:)), for: .touchUpInside)

self.navigationItem.titleView?.frame =  CGRect(x: 65, y: 12, width: 200, height: 46)

Entre el resto de vistas aparecerá automáticamente < Atrás característico de iOS que podremos personalizar.

Para acceder al resto de vistas se realiza mediante la función pushViewController() tal y como se aprecia en el ejemplo:

@IBAction func prueba(_ sender: Any) {

let storyboard = UIStoryboard(name: "Main", bundle: nil)

  let vc = storyboard.instantiateViewController(withIdentifier: “nextVC”)

self.navigationController?.pushViewController(vc, animated: true)

 }

Identificadores de vistas

Para identificar a qué vista queremos ir, en la sección Identidad del inspector de cada vista, podemos definir un nombre único para llamarla desde nuestro código como hemos hecho en el apartado anterior. Un ejemplo de las dos vistas creadas son las siguientes imágenes en donde se pueden ver que también declaramos el fichero .swift al que corresponde.

¿Cómo crear un menú sencillo y rápido?

Para crear una barra lateral de menú hay varias formas, una de ellas es usar un UITableView para que así queden todos los ítems del menú alineados junto a su icono. Para seguir con la idea anterior de la navegación, os mostramos un ejemplo de cómo quedaría la vista principal y la vista del menú.

Imágenes en iOS

La mejor manera de guardar las imágenes en iOS es en la carpeta de Assets.xcassets añadir (+) ’New Image Set’ en el cual nos aparecerá 3 formatos de imagen de modo Universal, se puede personalizar y poner sólo para iPhone o iPad haciendo clic derecho en el recuadro.

Hay que tener en cuenta una pantalla de resolución estándar tiene una densidad de píxeles de 1:1 (@1x) donde un pixel es igual a un punto. Tenemos 3 tipos @1x,@2x y @3x. De esta manera podríamos poner una imagen de 64x64, 128x128 y 256x256 respectivamente. A modo de recomendación es preferible una imagen grande pues luego escalará si tiene menor resolución.

Para establecer el icono de la aplicación en la misma carpeta Assets.xcassets encontraremos un archivo llamado AppIcon generado automáticamente por Xcode donde es condición necesaria que estén en su tamaño adecuado para que Apple permita subir la aplicación sin ningún problema. Cabe citar que el icono de nombre App Store tendrá que tener obligatoriamente fondo blanco.

Y, ahora que ya tenéis estos sencillos consejos para el diseño de aplicaciones móviles, lo mejor es que los pongáis en marcha y desarrolléis una gran app. En digitalDot, nos encantan las buenas ideas, si lo que tienes es una idea sobre la aplicación móvil que revolucionará el mercado, no lo dudes, contacta con nosotros y juntos haremos que tu idea se haga realidad, el equipo de diseño de aplicaciones móviles, te está esperando.