Consejos principales para Android UI Cómo alcanzar la magia en los tablets
-
Upload
motorola-mobility-motodev -
Category
Technology
-
view
2.024 -
download
0
Transcript of Consejos principales para Android UI Cómo alcanzar la magia en los tablets
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/).