Elementos de Interfaz de Usuario (UI) para dispositivos wearables

Clases de la biblioteca UI para Wearables.

En esta publicación se comentarán las clases más relevantes, disponibles en la librería de UI (Interfaz de Usuario) para dispositivos wearables, que permitan un diseño personalizado de los diferentes layouts que forman la aplicación.

CardFragment

La clase CardFragment permite visualizar información a través de un sistema de tarjetas, proporcionando al usuario un diseño consistente, especialmente destinado para dispositivos wearables.

Ejemplo de su implementación:

• Asignar un ID al layout que define la tarjeta:
  
  1 2 3 4 5 6 7

• Añadir una instancia de CardFragment a la Activity:
  
  protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear_activity2); FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); CardFragment cardFragment = CardFragment.create(getString(R.string.cftitle), getString(R.string.cfdesc), R.drawable.p); fragmentTransaction.add(R.id.frame_layout, cardFragment); fragmentTransaction.commit(); }

  1 2 3 4 5 6 7 8 9 10 11 12 13

  protected void onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentView(R.layout.activity_wear_activity2);       FragmentManager fragmentManager = getFragmentManager();     FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();     CardFragment cardFragment = CardFragment.create(getString(R.string.cftitle),                                                     getString(R.string.cfdesc),                                                     R.drawable.p);     fragmentTransaction.add(R.id.frame_layout, cardFragment);     fragmentTransaction.commit(); }

ConfirmationActivity

Activity que define una animación de confirmación al realizar el usuario una determinada acción. Además, es posible asignar tiempos de espera para la cancelación de la acción realizada por el usuario.

Ejemplo de su implementación:

• Se añade a nivel de diseño el elemento DelayedConfirmationView:
  
  1 2 3

• Se implementa la interfaz DelayedConfirmationListener, que sobrescribe los métodos onTimerFinished(View view) y onTimerSelected(View view), que permiten definir un determinado tiempo para la cancelación de la acción realizada por el usuario. Una vez transcurrido el tiempo indicado se efectuará la acción iniciada:
  
  public class WearActivity extends Activity implements DelayedConfirmationView.DelayedConfirmationListener { private DelayedConfirmationView mDelayedView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear_activity); mDelayedView = (DelayedConfirmationView) findViewById(R.id.delayed_confirm); mDelayedView.setListener(this); } @Override public void onTimerFinished(View view) { //Implementar acción a realizar transcurrido el tiempo establecido. } @Override public void onTimerSelected(View view) { //Invocar método para cancelar acción realizada. } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

  public class WearActivity extends Activity implements DelayedConfirmationView.DelayedConfirmationListener {       private DelayedConfirmationView mDelayedView;       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_wear_activity);           mDelayedView = (DelayedConfirmationView) findViewById(R.id.delayed_confirm);         mDelayedView.setListener(this);     }       @Override     public void onTimerFinished(View view) {         //Implementar acción a realizar transcurrido el tiempo establecido.     }       @Override     public void onTimerSelected(View view) {         //Invocar método para cancelar acción realizada.     } }

DismissOverlayView

Permite implementar la opción de descartar mediante la pulsación prolongada de pantalla. Esta vista, a nivel de diseño de layout, debe situarse donde se anteponga al resto de vistas del diseño. Además debe cubrir el total de la pantalla.

Ejemplo de su implementación:

• Diseño de layout:
  
  <!-- Situar otras vistas en esta posición -->

  1 2 3 4 5 6 7

  <!-- Situar otras vistas en esta posición -->

• Implementación en Activity:
  
  public class WearActivity extends Activity { private DismissOverlayView mDismissOverlay; private GestureDetector mDetector; public void onCreate(Bundle savedState) { super.onCreate(savedState); setContentView(R.layout.wear_activity); //Se asigna el recurso definido en el layout. mDismissOverlay = (DismissOverlayView) findViewById(R.id.dismiss_overlay); mDismissOverlay.setIntroText(R.string.long_press_intro); mDismissOverlay.showIntroIfNecessary(); //Se define un detector de gestos mDetector = new GestureDetector(this, new SimpleOnGestureListener() { public void onLongPress(MotionEvent ev) { mDismissOverlay.show(); } }); } /*Por último, se implementa un evento que controlará la pulsación prolongada en la pantalla.*/ @Override public boolean onTouchEvent(MotionEvent ev) { return mDetector.onTouchEvent(ev) || super.onTouchEvent(ev); } }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

  public class WearActivity extends Activity {       private DismissOverlayView mDismissOverlay;     private GestureDetector mDetector;       public void onCreate(Bundle savedState) {         super.onCreate(savedState);         setContentView(R.layout.wear_activity);           //Se asigna el recurso definido en el layout.         mDismissOverlay = (DismissOverlayView) findViewById(R.id.dismiss_overlay);         mDismissOverlay.setIntroText(R.string.long_press_intro);         mDismissOverlay.showIntroIfNecessary();           //Se define un detector de gestos         mDetector = new GestureDetector(this, new SimpleOnGestureListener() {             public void onLongPress(MotionEvent ev) {                 mDismissOverlay.show();             }         });     }       /*Por último, se implementa un evento que controlará la     pulsación prolongada en la pantalla.*/     @Override     public boolean onTouchEvent(MotionEvent ev) {         return mDetector.onTouchEvent(ev) || super.onTouchEvent(ev);     } }

WearableListView

Muy similar al componente de tipo selección ListView, facilita el visionado de listas de datos en un dispositivo wearable.

Ejemplo de su implementación:

• Añadir componente ListView al layout definido:
  
  1 2 3 4 5 6 7 8 9

Otras clases que permiten diseños personalizados:

• GridViewPager: Controlador que permite al usuario distribuir la información en sentido vertical u horizontal. Para representar cada página como un fragmento, es necesaria la clase FragmentGridPagerAdapter.
• FragmentGridPagerAdapter: Implementación de GridPagerAdapter para representar cada página como un fragmento.
• WatchViewStub: Clase que posibilita el inflado de un layout específico, en función de la forma de la pantalla del dispositivo. Se tratara con mayor detenimiento en siguientes apartados.

Créditos: las imágenes provienen de Android Developers con licencia Creative Commons Attribution 2.5