Consejos principales para Android UI Cómo alcanzar la magia en los tablets

MOTOROLA y el logotipo estilizado son marcas de fábrica o marcas registradas de Motorola Trademark Holdings, LLC. Todas las demás marcas comerciales son propiedad de sus respectivos dueños. © 2011 Motorola Mobility, Inc. Todos los derechos reservados.

Suzanne Alexandra Evangelista de la tecnología Android Motorola Mobility

Título de presentación Versión 1.0 24.02.09

Brasil - #appsum11br Argentina - #appsum11ar

México - #appsum11m    developer.motorola.com  

Estamos en un espacio

completamente nuevo.

Traiga abordo los elementos apropiados.

Alcance la magia

01 MANTENGA EL DETALLE ERGONÓMICO

02 INVOLUCRE LOS SENTIDOS

03 USE UNA ESTÉTICA FABULOSA

04 HÁGALO EVIDENTE

Alcance la magia 01 MANTENGA EL DETALLE ERGONÓMICO Diseños horizontales Notificaciones enriquecidas Tamaños de texto

02 INVOLUCRE LOS SENTIDOS Imágenes Palpabilidad

03 USE UNA ESTÉTICA FABULOSA Temas, temas, temas

04 HÁGALO EVIDENTE Barras de acción Fragmentos Función arrastrar y colocar

Haga de cuenta que sus usuarios usan la orientación horizontal

Diseños horizontales Los diseños horizontales por lo general requieren una distribución especializada, en cualquier dispositivo.

Diseños horizontales Mire lo que sucede en el tablet

Diseños horizontales ¿Qué salió mal?

alignParentLeft alignParentRight

Imagen pequeña

Nada en el centro

Diseños horizontales Diseño para el tamaño de la pantalla Y la orientación

Diseños horizontales El diseño ganador

centerHorizontal="true"

layout_alignLeft <RelativeLayout> layout_alignRight

Diseños horizontales Optimice la experiencia del usuario para pantallas panorámicas

Diseños horizontales Evite el efecto océano extra ancho

Tamaños de texto El texto pequeño (como las imágenes) no funcionará

Tamaños de texto Mejores prácticas

Escala con sp 18 sp y más Asegúrese de que los verdaderos usuarios puedan leer el texto

Notificaciones enriquecidas Un beneficio clave de Android sobre las demás plataformas móviles

Su notificación de aplicación

Notificaciones enriquecidas Ejemplos de cuándo usar notificaciones enriquecidas

Cuando llega contenido nuevo

Cuando se reproducen medios

Notificaciones enriquecidas En Honeycomb, dos pantallas de notificación

Bandeja

Emergente

Notificaciones enriquecidas Use el formato Notification.Builder

Notification.Builder builder = new Notification.Builder( this );

Como AlertDialog.Builder

Notificaciones enriquecidas Cree la notificación que desee

builder.setSmallIcon(R.drawable.icon) .setContentTitle(título) .setContentText(texto) .setContentIntent(pintent) // Un intento pendiente .setLargeIcon(myBitmap) ;

Notificaciones enriquecidas Codificación visual

setSmallIcon() setLargeIcon()

setContentText() setContentTitle()

Notificaciones enriquecidas Alcance la magia. Cree un botón interactivo

RemoteViews layout = new RemoteViews( getPackageName(), R.layout.notification);

layout.setTextViewText(R.id.notification_title, getString(R.string.app_name));

layout.setOnClickPendingIntent(R.id.notification_button, getDialogPendingIntent("Tapped") );

builder.setContent(layout);

Notificaciones enriquecidas Estrategia para compatibilidad con versiones anteriores

private static boolean isHoneycomb = android.os.Build.VERSION.SDK_INT > 10;

if (!isHoneycomb) // inicie un intento de actividad else // inicie otra

Alcance la magia 01 MANTENGA EL DETALLE ERGONÓMICO

02 INVOLUCRE LOS SENTIDOS Imágenes Palpabilidad

03 USE UNA ESTÉTICA FABULOSA

04 HÁGALO EVIDENTE

La vista triunfa sobre los demás sentidos.

Brain Rules Dr. John Medina

Imágenes Expréselo visualmente, hágalo atractivo

Imágenes Las pantallas para dispositivos distintos requieren tamaños de imágenes diferentes

Imágenes Seleccione una estrategia de imagen

  ¿Una serie de imágenes y deje que Android gradúe automáticamente el tamaño?   ¿Personalizar una serie de recursos según los distintos tamaños y densidades?   ¿Captar la densidad más usada?   ¿Recuperar dinámicamente imágenes en el tiempo de ejecución y la graduación para el dispositivo?

Imágenes Memoria frente a tamaño de archivo: un ejemplo

Ampliación automática 32 MB de memoria

324 KB de tamaño

Conjuntos de imágenes 23 MB de memoria

728 KB de tamaño

La ampliación automática consume memoria.

Las configuraciones de imágenes personalizadas aumentan el tamaño

del archivo.

Imágenes Imágenes grandes de prueba en el tiempo de ejecución para ahorrar memoria

BitmapFactory.Options options = new BitmapFactory.Options();

options.inJustDecodeBounds = false; options.inSampleSize = 4; options.inScaled = true; options.inTargetDensity = screenDensity; Bitmap bitmap =

BitmapFactory.decodeResource( getResources(), R.drawable.clover, options);

Imágenes Dónde colocar las imágenes y los iconos

Graduadas previamente para la densidad Hacer coincidir

estilo con 3.0

Iconos de alta resolución

Predeterminado, graduado automáticamente

Palpabilidad Las tabletas están diseñadas para el tacto

Palpabilidad Asegúrese de poder pulsar todos los objetivos

Palpabilidad Asegúrese de poder pulsar todos los objetivos

public View getView( int position, View convertView, ViewGroup parent) {

ImageView i = new ImageView(mContext); i.setImageResource(mImageIds[position]);

i.setLayoutParams(new Gallery.LayoutParams( 300, 200));

i.setScaleType(ImageView.ScaleType.FIT_XY); i.setBackgroundResource(

mGalleryItemBackground);

return i; }

Palpabilidad Observe cómo se transfieren las imágenes a través de los dispositivos

160 dpi - medio 16:9 relación de aspecto

Alcance la magia 01 MANTENGA EL DETALLE ERGONÓMICO

02 INVOLUCRE LOS SENTIDOS

03 USE UNA ESTÉTICA FABULOSA Temas, temas, temas

04 HÁGALO EVIDENTE

Temas Encuádrelos en el dispositivo o destáquelos

Theme.Holo

Theme.Holo.Light

Temas Honeycomb tiene dos temas holográficos nuevos

Temas Pero requieren aceleración del hardware

<application android:icon="@drawable/icon" android:label="@string/app_name"

android:hardwareAccelerated="true" >

Sólo disponibles con Honeycomb

Temas Pero usted podría apuntar a varias versiones Android

<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="11" />

Temas Cree varios temas para las versiones Android

<style … parent= "@android:style/Theme.Holo">

<style … parent= "@android:style/Theme">

Asegúrese de que todas las llamadas de API que usa

funcionen con todas las versiones de API que soporta.

Alcance la magia 01 MANTENGA EL DETALLE ERGONÓMICO

02 INVOLUCRE LOS SENTIDOS

03 USE UNA ESTÉTICA FABULOSA

04 HÁGALO EVIDENTE Barras de acción Fragmentos Función arrastrar y soltar

Barra de acción Apronte sus características de aplicación

Elementos de acción

Icono de aplicación

Vista de acción

Diálogo de cuadro desplegable

Barras de acción Códigos visuales

onCreateOptionsMenu()

<item android:showAsAction="true" … >

onOptionsItemSelected() android:actionLayout android:actionViewClass

Barras de acción Paso 1. Apuntar a API nivel 11

<uses-sdk android:minSdkVersion="8" android:targetSdkVersion="11" />

Barras de acción Paso 2. Colocar los elementos del menú en la barra de acción

<item android:id="@+id/favorite" android:title="@string/favorite" android:icon="@drawable/ic_menu_star" android:showAsAction="ifRoom" />

Barras de acción Paso 3. Manejar la selección de opciones de la manera habitual

@Override public boolean onOptionsItemSelected(MenuItem item) {

switch (item.getItemId()) { case R.id.favorite:

// do something return true; … }

Barras de acción En XOOM y smartphone

Barras de acción Alcance la magia, dé estilo

<style name="MyTheme" parent="android:style/Theme.Holo" >

<item name="android:actionBarStyle"> @style/ActionBar</item>

</style>

<style name="ActionBar" parent="android:style/Widget.Holo.ActionBar">

<item name="android:background"> @drawable/my_background</item>

</style>

Barras de acción Alcance la magia, agregue un cuadro de diálogo

Use AlertDialog.Builder Cree un cuadro de diálogo personalizado en XML Use un DialogFragment

Barras de acción Pero ejecute los elementos Honeycomb sólo en Honeycomb

private static boolean isHoneycomb = android.os.Build.VERSION.SDK_INT > 10;

if (isHoneycomb) { // cree el cuadro de diálogo personalizado aquí }

Fragmentos Úselos para mostrar más contendido y características, más fluidamente

Fragmentos Puede usar varios diseños

Los más comunes

Fragmentos La distribución del fragmento inicial es el misma a lo largo de las orientaciones

Fragmentos Pero puede mostrar u ocultar vistas

Fragmentos En su Activity principal, encuentre sus fragmentos

Fragment gridFrag = getFragmentManager().

findFragmentById(R.id.photogrid);

Fragment photoFrag = getFragmentManager(). findFragmentById(R.id.the_frag);

Fragmentos Verifique la orientación y ajuste las vistas

private boolean photoInline = false;

photoInline = (photoFrag != null && getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE);

if (photoInline) { // haga algo } else if ( photoFrag != null ) { getView().setVisibility(View.GONE); }

Fragmentos Mejor todavía

Transición animada

Fragmentos Alcance la magia: anime la pantalla del fragmento – paso 1

<set> <objectAnimator

xmlns:android= http://schemas.android.com/apk/res/android

android:propertyName="x" android:valueType="floatType" android:valueFrom="-1280" android:valueTo="0" android:duration="500" />

</set>

Fragmentos Alcance la magia: anime la pantalla del fragmento – paso 2

FragmentTransaction ft = getFragmentManager().beginTransaction();

ft.setCustomAnimations( R.anim.slide_in_left, R.anim.slide_out_right );

DetailsFragment newFrag =DetailsFragment.newInstance();

ft.replace(R.id.details_fragment_container, newFrag, "detailFragment");

ft.commit();

Arrastre y solte Crea participación física inmediata, directa

Arrastre y solte Tiene varios estados de eventos

ACTION_DRAG_STARTED

ACTION_DRAG_ENTERED

Arrastre y solte Tiene varios estados de eventos

ACTION_DROP ACTION_DRAG_ENDED

Arrastre y solte Observe cómo funciona a lo largo de los fragmentos

  Seleccionar un gesto que inicie un arrastre: ¿clic largo?   Crear un oyente: OnLongClickListener()   Crear objetos de ClipData y DragShadowBuilder   Iniciar el arrastre

Arrastre y solte Para comenzar, llame a startDrag()

public boolean onLongClick(View v) { ClipData data = ClipData.newPlainText("foo","bar"); DragShadowBuilder shadowBuilder = new DragShadowBuilder(v); v.startDrag(data, shadowBuilder, v, 0); return true; }

  Crear un listener de arrastre (implementar OnDragListener)   Sobrecargue onDrag y maneje los eventos

Arrastre y solte Luego continúe con un listener y onDrag()

class BoxDragListener implements OnDragListener {

public boolean onDrag(View self, DragEvent event) { if (event.getAction() ==

DragEvent.ACTION_DRAG_STARTED) { // haga algo

} // maneje otros eventos }

¿Desea  formular  alguna  pregunta?

Brasil - #appsum11br Argentina - #appsum11ar México - #appsum11mx

community.developer.motorola.com

gracias

LEGAL

INFORMACIÓN DE LA LICENCIA

Con excepción de dónde se especifique, el código de fuente de muestra escrito por Motorola Mobility Inc. y a usted suministrado tiene la licencia que a continuación se describe.

Copyright © 2010-2011, Motorola, Inc. Todos los derechos reservados, salvo que se indique explícitamente lo contrario. Se permite la redistribución y el uso en formas de fuente y binaria, con o sin modificación, siempre y cuando se cumpla con las siguientes condiciones: Las redistribuciones del código fuente deben conservar el aviso de derechos de autor arriba mencionado, la presente lista de condiciones y el siguiente descargo de

responsabilidad. Las redistribuciones en forma binaria deben reproducir el aviso de derechos de autor arriba mencionado, la presente lista de condiciones y el siguiente descargo de

responsabilidad en la documentación y/u otros materiales suministrados con la distribución.

Ni el nombre de Motorola, Inc. ni los nombres de sus distribuidores pueden usarse para avalar o promover productos que deriven de este software sin previa autorización específica por escrito.

EL PRESENTE SOFTWARE SE SUMINISTRA POR LOS TITULARES DE LOS DERECHOS DE AUTOR Y CONTRIBUYENTES EN EL ESTADO "EN QUE SE ENCUENTRA" Y SE RENUNCIA A TODA RESPONSABILIDAD DE GARANTÍA IMPLÍCITA O EXPLÍCITA, A TÍTULO ENUNCIATIVO, LAS GARANTÍAS IMPLÍCITAS DE COMERCIALIZACIÓN Y DE APTITUD PARA UN PROPÓSITO PARTICULAR. EN NINGÚN CASO PODRÁ EL TITULAR DE LOS DERECHOS DE AUTOR NI LOS CONTRIBUYENTES SER RESPONSABLE POR NINGÚN DAÑO Y PERJUICIO DIRECTO, INDIRECTO, INCIDENTAL, ESPECIAL, PUNITIVO, O CONSECUENCIAL (A TÍTULO ENUNCIATIVO DE ABASTECIMIENTO DE BIENES O SERVICIOS DE SUSTITUCIÓN; PÉRDIDA DE USO, DATOS O GANANCIAS O INTERRUPCIÓN DE ACTIVIDADES) INDEPENDIENTEMENTE DE SU ORIGEN Y DE TODA TEORÍA DE RESPONSABILIDAD, YA SEA EN EL CONTRATO, RESPONSABILIDAD ESTRICTA O POR LESIÓN JURÍDICA (INCLUSO NEGLIGENCIA O DE OTRO MODO) QUE SURJAN DE ALGUNA MANERA DEL USO DE ESTE SOFTWARE, INCLUSO SI SE ADVIRTIÓ DE LA POSIBILIDAD DE DICHO DAÑO.

Otro código fuente mostrado en la presentación podrá ofrecerse bajo otras licencias.

Apache 2.0 Copyright © 2010, Proyecto Código Abierto Android. Todos los derechos reservados, salvo indicación expresa en contrario.

Con licencia de Apache, Versión 2.0 (la "Licencia"); no podrá usar este archivo, salvo que cumpla con lo que establece la licencia. Puede obtener una copia de la licencia en http://www.apache.org/licenses/LICENSE-2.0.

Salvo que lo exija la legislación vigente o se preste conformidad por escrito, el software se distribuye bajo licencia, "EN EL ESTADO EN QUE SE ENCUENTRA" SIN GARANTÍAS DE NINGÚN TIPO, explícitas o implícitas. Consulte la Licencia para ver los permisos y las limitaciones que rigen para la Licencia según el idioma específico.

Creative Commons 3.0 Attribution License Partes de esta presentación se reprodujeron de un trabajo creado y compartido con Google (http://code.google.com/policies.html) y se usaron conforme a los

términos descritos en Creative Commons 3.0 Attribution License (http://creativecommons.org/licenses/by/3.0/).