02.2 - Interfaces de Usuario

8/12/2019 02.2 - Interfaces de Usuario

http://slidepdf.com/reader/full/022-interfaces-de-usuario 1/19

T EMA 2.2Interfaces de usuario



LO QUE VEREMOS…

AdaptadoresListasMenús



ADAPTADORES

Un adaptador es un objeto que convierte lainterfaz de una clase a otra que el cliente espera.En Android se usan los adaptadores para adaptarlos datos a otro formato para que se puedanmostrar en una vista.Existen diferentes tipos de adaptadores:

ListAdapter ArrayAdapter SpinnerAdapter SimpleCursorAdapter

También se pueden definir adaptadores propios.



ADAPTADORESEJEMPLO

public void onCreate(Bundle savedInstance) {adapter = new SimpleCursorAdapter(

this ,R.layout.main_item_two_line_row,cursor,new String[] { TITLE, TEXT },new int [] { android.R.id. text1 ,

android.R.id. text2 });listView.setListAdapter(adpater);

}



LISTAS

En Android podemos encontrar dos tipos de listasListas simplesListas desplegables (ComboBox)

Listas simplesListViewDerivar clase de ListActivity

Listas desplegables (Spinner)Spinner



LISTASLISTAS SIMPLES

Utilizando ListActivityCrear una clase derivada de ListActivityNo necesita Layout, ya muestra una lista por defectoMuestra únicamente una lista

public class main extends ListActivity { private String[] items = { "Orange" , "Apple" , "Pear" };

@Override public void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);ArrayAdapter<String> adp = new ArrayAdapter<String>( this ,

android.R.layout. simple_list_item_1 , items );setListAdapter(adp);

}

public void onListItemClick(ListView parent, View v, int position, long id) {Toast. makeText( this , items [position], Toast. LENGTH_LONG ).show();

}

}




Utilizando un ListViewClase derivada de ActivityEn el layout se incluye el ListViewÚtil para mostrar más elemento además de la lista

…<TextViewandroid:id ="@+id/textView"

android:layout_width ="fill_parent"android:layout_height ="wrap_content"android:text ="Selecciona un elemento"/>

<ListViewandroid:id ="@+id/listItem"android:layout_width ="fill_parent"android:layout_height ="fill_parent"/>

…




public class main extends Activity implements OnItemClickListener { private String[] items = { "Orange" , "Apple" , "Pear" };

TextView tv ;ListView lv ;@Override

public void onCreate(Bundle savedInstanceState) {super .onCreate(savedInstanceState);setContentView(R.layout. main );tv = (TextView)findViewById(R.id. textView );lv = (ListView)findViewById(R.id. listItem );ArrayAdapter<String> adp = new ArrayAdapter<String>( this ,

android.R.layout. simple_list_item_1 , items );lv .setAdapter(adp);lv .setOnItemClickListener( this );

}@Override

public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {tv .setText( items [arg2]);

}}



LISTASLISTAS DESPLEGABLES(SPINNER)

La vista Spinner nos de la funcionalidad de unComboBox Veamos el ejemplo anterior con un Spinner

Primero hay que escribir el layoutLuego el código fuente

…

<Spinnerandroid:id ="@+id/spinner"android:layout_width ="fill_parent"android:layout_height ="wrap_content"/>

…



public class main extends Activity implements OnItemSelectedListener { private String[] items = { "Orange" , "Apple" , "Pear" };

TextView tv ;Spinner sp ;@Override

public void onCreate(Bundle savedInstanceState) {super .onCreate(savedInstanceState);setContentView(R.layout. main );tv = (TextView)findViewById(R.id. textView );sp = (Spinner)findViewById(R.id. spinner );ArrayAdapter<String> adp = new ArrayAdapter<String>( this ,

android.R.layout. simple_spinner_dropdown_item , items );

sp .setAdapter(adp);sp .setOnItemSelectedListener( this );}

@Override public void onItemSelected(AdapterView<?> arg0, View arg1, int arg2, long arg3)

{tv .setText( items [arg2]);

}

@Override public void onNothingSelected(AdapterView<?> arg0)

{}

}



LISTAS

Asignar el origen de las listas a través de un recursoCrear un array de String como recurso y asignarlo a la listaEditar el archivo res/values/strings.xmlNo es necesario un adaptador

<resources ><string name ="hello" > Hello World, main! </ string > <string name ="app_name" > EjemploLIstView2Res </ string >

< string-array name = “ Items" > < item > Orange </ item > < item > Apple </ item > < item > Pear </ item >

</ string-array > </ resources >

res/values/strings.xml<ListView

android:id ="@+id/listItem"android:layout_width ="fill_parent"android:layout_height ="fill_parent"android:entries ="@array/Items"/>

res/layout/main.xml



LISTAS

public class main extends Activity implements OnItemClickListener {TextView tv ;ListView lv ;String [] items ;@Overridepublic void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);setContentView(R.layout. main );tv = (TextView)findViewById(R.id. textView );lv = (ListView)findViewById(R.id. listItem );lv .setOnItemClickListener( this );items =getResources().getStringArray(R.array. Items );

}@Overridepublic void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) {

tv .setText( items [arg2]);}

}



MENÚS

Permiten exponer funcionalidad sin sacrificarespacio en pantallaDos tipos

Asociados a actividad (Options Menu)Se activan cuando el usuario presiona el botón hardwareMenu

Contextuales (Context Menu)Se asignan a cualquier vista

Se muestra cuando el usuario mantiene pulsado el D-pad, eltrackball o pulsa sobre la vista 3 seg.



MENÚS ASOCIADOS A ACTIVIDAD

Los elementos se definen como recursosPor ejemplo,res/menu/main_menú.xml

<menu xmlns:android ="http://schemas.android.com/apk/res/android" > <item android:title ="Nuevo"

android:id ="@+id/itemNuevo"android:icon ="@android:drawable/ic_menu_add" />

<item android:id ="@+id/itemOpciones"android:title ="Opciones"android:icon ="@android:drawable/ic_menu_preferences" />

<item android:id ="@+id/itemAyuda"

android:title ="Ayuda"android:icon ="@android:drawable/ic_menu_help" /> <item android:id ="@+id/itemSalir"

android:title ="Salir"android:icon ="@android:drawable/ic_menu_close_clear_cancel" />

</ menu >




Para asociar el menú a una actividad hay quedefinir el métodoonCreateOptionsMenu

public class main extends Activity {@Overridepublic void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);setContentView(R.layout. main );

}

public boolean onCreateOptionsMenu(Menu menu) {

this .getMenuInflater().inflate(R.menu. main_menu , menu);return true ;}

}




Para añadir funcionalidad a cada elemento hay queescribir el métodoonOptionsItemSelected

public boolean onMenuItemSelected( int featureId, MenuItem item) { boolean result = super .onMenuItemSelected(featureId, item);

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

Toast. makeText( this , "Nuevo" , Toast. LENGTH_LONG ).show(); break ;case R.id. itemOpciones :

Toast. makeText( this , "Opciones" , Toast. LENGTH_LONG ).show();

break ;case R.id. itemAyuda :Toast. makeText( this , "Salir" , Toast. LENGTH_LONG ).show();

break ;case R.id. itemSalir :

Toast. makeText( this , "Salir" , Toast. LENGTH_LONG ).show(); break ;

}return result;

}



MENÚS ASOCIADOS A VISTAS

Para asociar un menú contextual a una vistase hace por medio de su métodosetOnCreateContextMenuListener

Hay que implementar el métodoonCreateContextMenuEn él se asocia qué menú es que se debe mostrar

A través del métodoonContextItemSelected

añadimos funcionalidad a cada elemento delmenú



public class main extends ListActivity {private String[] contactos = { "Juan" , "Ana" , "Róger" };

@Overridepublic void onCreate(Bundle savedInstanceState) {

super .onCreate(savedInstanceState);ArrayAdapter<String> adp = new ArrayAdapter<String>( this ,android.R.layout. simple_list_item_1 , contactos );setListAdapter(adp);this .getListView().setOnCreateContextMenuListener( this );

}

public void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo){

if (v == this .getListView()){

menu.setHeaderTitle( "Acciones" );getMenuInflater().inflate(R.menu. context_menu , menu);

}}




@Override public boolean onContextItemSelected(MenuItem item)

{ boolean result = super .onContextItemSelected(item);

switch (item.getItemId()){

case R.id. itemAbrir :Toast. makeText( this , "Abrir contacto" , Toast. LENGTH_LONG ).show();

break ;case R.id. itemEditar :

Toast. makeText( this , "Editar contacto" , Toast. LENGTH_LONG ).show(); break ;

case R.id. itemEliminar :Toast. makeText( this , "Eliminar contacto" , Toast. LENGTH_LONG ).show();

break ;}return result;

}}


02.2 - Interfaces de Usuario

Documents