Your SlideShare is downloading. ×
Interfaces increibles en Android
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Interfaces increibles en Android

3,663

Published on

Este es un pequeño ejemplo de cómo enfrentarse al problema de las múltiples dimensiones y proporciones en los dispositivos Android

Este es un pequeño ejemplo de cómo enfrentarse al problema de las múltiples dimensiones y proporciones en los dispositivos Android

Published in: Education
1 Comment
7 Likes
Statistics
Notes
No Downloads
Views
Total Views
3,663
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
1
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Vistas impresionantes en Android Resolviendo el problema de la múltiples resoluciones http://yezika-butterfly.blogspot.mx
  • 2. Dudas? @Yezika_InkAndroid establece algunos perfiles de configuración de las interfaces deacuerdo al tamaño del dispositivo Y te recomienda que generes imágenes para múltiples resoluciones, y que seas minimalista, y que uses distintos layouts para distintos tipos de dispositivo, Etc etc etc etc .... http://yezika-butterfly.blogspot.mx
  • 3. El problema de la densidad y las dimensiones de las pantallasEl problema es que cada fabricante tiene libertad de diseñar su hardware comoquiera, por lo tanto tenemos distintas calidades de imagen, resolución, ytamaños http://yezika-butterfly.blogspot.mx
  • 4. El ejemplo típico: La vista de inicio (alias SplashScreen)Hagamos un diseño rápido usando GIMP: lienzo de 400x600 px http://yezika-butterfly.blogspot.mx
  • 5. El ejemplo típico: La vista de inicio (alias SplashScreen)¡Genial! mi vista de inicio esta completa, ahora como se verá en la aplicación Realmente no se ve bien, en términos de identidad corporativa deformar las proporciones de un logotipo ES INCORRECTO http://yezika-butterfly.blogspot.mx
  • 6. El ejemplo típico: La vista de inicio (alias SplashScreen)Hay muchas soluciones para este problema, una de ellas es diseñar el logotipoen varias proporciones para tratar de equilibrar la deformación...¿Cuántos gráficos tendremos que elaborar e incluir en el apk?Hay una mejor solución: Recrear la vista desde cero usando los componentesvisuales de Android (Layouts y Widgets)Por propiedades● Simplicidad● Vista previa al momento de diseñar la interfaz (ej. Eclipse IDE)● Se necesita buen conocimiento de los elementos de la interfazPor código (Custom Views & Activities)● Complejidad para visualizar la solución y se necesita mayor conocimiento de la plataforma● Posibilidad de incorporar efectos de transicionesVeamos un ejemplo usando propiedades http://yezika-butterfly.blogspot.mx
  • 7. El ejemplo típico: La vista de inicio (alias SplashScreen)Generamos los elementos gráficos en proporciones deseadas.Tip: Podemos tomar algún teléfono popular como referencia y luego elaborarversiones escaladas para las distintas resoluciones 600x800 px 600x400 px http://yezika-butterfly.blogspot.mx
  • 8. El ejemplo típico: La vista de inicio (alias SplashScreen)Exportamos pensando en transparencias, detalles, etc... http://yezika-butterfly.blogspot.mx
  • 9. El ejemplo típico: La vista de inicio (alias SplashScreen)Vamos a trabajar en un proyecto de pruebaUsaremos el layout default que se creaCopiamos los elementos en sus respectivas carpetas http://yezika-butterfly.blogspot.mx
  • 10. El ejemplo típico: La vista de inicio (alias SplashScreen)También tenemos que prepara la guía de colores, lo que sea sólido loagregamos a string.xml http://yezika-butterfly.blogspot.mx
  • 11. El ejemplo típico: La vista de inicio (alias SplashScreen)No es conveniente asignar una imagen directamente como background si esque vamos a necesitar que se preserve alguna forma o composición.Nuestro layout padre será de tipo framelayout. <ImageView android:id="@+id/imageView1" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="centerCrop" android:src="@drawable/fondo_mariposa" /> La propiedad centerCrop hace que una imagen se escale sin perder su proporción hasta llenar el espacio aunque algunas áreas de la imagen ya no sean visibles. http://yezika-butterfly.blogspot.mx
  • 12. El ejemplo típico: La vista de inicio (alias SplashScreen)A continuación pondremos otra imagen, la cual por propiedades delframelayout, se colocará sobre la anterior <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitCenter" android:src="@drawable/degradado_patron" /> La propiedad fitCenter hace que una imagen se escale sin perder su proporción hasta llenar el espacio en alguna de las dimensiones. http://yezika-butterfly.blogspot.mx
  • 13. El ejemplo típico: La vista de inicio (alias SplashScreen)Ahora para ajustar el logotipo al área de la imagen 2, envolveremos la imagenun relativelayout y el logotipo centrado en medio y un texto alineado justodebajo del logotipo Un relativelayout usa un lenguaje de posicionamiento de sus nodos hijos en base a referencias: al lado de, arriba de, abajo de, centrado, etc... http://yezika-butterfly.blogspot.mx
  • 14. <RelativeLayout android:id="@+id/wraper" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageView2" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:scaleType="centerCrop" android:src="@drawable/degradado_patron" /> <ImageView android:id="@+id/imageView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignTop="@+id/imageView2" android:layout_centerHorizontal="true" android:layout_marginLeft="10dp" android:layout_marginRight="10dp" android:layout_marginTop="10dp" android:src="@drawable/mylogo" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/imageView3" android:layout_centerHorizontal="true" android:text="Bienvenido a mi app" android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="@color/texto_blanco" /> </RelativeLayout> http://yezika-butterfly.blogspot.mx
  • 15. El ejemplo típico: La vista de inicio (alias SplashScreen)Así es como se verá en múltiples dispositivos http://yezika-butterfly.blogspot.mx
  • 16. El ejemplo típico: La vista de inicio (alias SplashScreen)Finalmente tenemos una vista muy distinta al primer resultadoPreserva de manera interesante las proporciones de todo el diseño en generalHay muchas formas de jugar con las propiedades de los layouts, textos, eimágenesPROSEs un diseño más conformado y que puede sacar provecho a la plataforma demanera muy profesionalSe pueden resolver todos los problemas de deformaciónSe pueden agregar transicionesCONTRASEs más costoso en cuanto a procesamientoEs más laboriosoSe necesitan personas con aptitud estética y con un buen conocimiento deAndroid (una combinación muy peculiar en un desarrollador) http://yezika-butterfly.blogspot.mx
  • 17. Que tan bien funciona esta técnica? ¡Intenta preservar este diseño con el menor grado de deformación! Por ejemplo: Sony Xperia Mini vs Samsung Galaxy Tab ....Cortesía dehttp://congresouniversitariomovil.com http://yezika-butterfly.blogspot.mx
  • 18. ¿EN DONDE PUEDO APRENDER MAS?Todo lo relacionado con diseño en Androidhttp://developer.android.com/design/index.htmlLa documentación completa de los elementos visuales y layoutshttp://developer.android.com/guide/topics/ui/index.htmlhttp://developer.android.com/reference/android/view/package-summary.html¿Te interesa saber aun más?Laboratorio de investigación, innovación y desarrollo en tecnologías móviles dela Facultad de Ingeniería, UNAMhttp://unam.mobi@Yezika_Ink(Ingeniera de Software, Arquitecto de sistemas web|iOS|Android y artista)Y si vives en el DF no olvides asistir al Congreso Universitario Móvil en laFacultad de ingeniería, UNAM la primera semana de septiembre :Dhttp://congresouniversitariomovil.com http://yezika-butterfly.blogspot.mx

×