arquitectura de aplicacionesjtech.ua.es/dadm/restringido/android/traspas/sesion03-traspas.pdf•...

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-2013 Depto. Ciencia de la Computación e IA

Plataforma Android

Sesión 3: Introducción al diseño de interfaces gráficas en Android


© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 2

Puntos a tratar

• Vistas

• Layouts

• Uso básico de elementos

• Independencia del hardware



Introducción

• Terminología de interfaces gráficas en Android• Vistas

• Equivalentes a widgets o componentes gráficos• Subclases de View

• Grupos de vistas: • Contienen múltiples vistas• Subclases de ViewGroup

• Layouts• Grupos de vistas utilizados para organizar vistas en la

pantalla

• Actividad• Cada una de las pantallas de nuestra aplicación• Equivalente a un formulario



Vistas

• Asignar una interfaz gráfica a una actividad mediante recursos

• /res/layout/milayout.xml• setContentView(): asignación de la interfaz a la actividad

• Parámetro: identificador de recurso u objeto View

• findViewById(): acceso a las vistas desde el código• Parámetro: el atributo android:id de la vista en el archivo de recursos• android:id=”@+id/[IDENTIFICADOR]”

@Overridepublic void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.milayout); TextView miTexto = (TextView)findViewById(R.id.texto);}



Vistas

• Asignar una interfaz gráfica a una actividad mediante código:

@Overridepublic void onCreate(Bundle sagedInstaceState) { super.onCreate(savedInstanceState); textView texto = new TextView(this); setContentView(texto); texto.setText("Hola Mundo!");}



Vistas básicas de Android• TextView• EditText• ListView• Spinner• Button• CheckBox• RadioButton• SeekBar• ...

http://developer.android.com/guide/tutorials/views/index.html



Layouts

Layouts básicos de Android:• FrameLayout: coloca todos los elementos en la esquina superior

izquierda• LinearLayout: dispone todos los elementos en una única fila o

columna• TableLayout: organiza los elementos en forma de tabla con

varias filas y columnas• RelativeLayout: layout flexible para la colocación de elementos

en posiciones relativas a otros• Gallery: lista horizontal de vistas con scroll

http://developer.android.com/guide/topics/ui/layout-objects.html



Layouts como recursos

• Carpeta /res/layout/

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TextView android:id="@+id/textView1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Introduce un texto" /> <EditText android:id="@+id/editText1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Escribe el texto aquí" /></LinearLayout>



Layouts a partir de código

• Desaconsejado en general

LinearLayout ll = new LinearLayout(this);ll.setOrientation(LinearLayout.VERTICAL); TextView texto = new TextView(this);EditText edicion = new EditText(this); text.setText("Introduce un texto");edicion.setText("Escribe el texto aquí"); int lHeight = LinearLayout.LayoutParams.FILL_PARENT;int lWidth = LienarLayout.LayoutParams.WRAP_CONTENT; ll.addView(texto, new LinearLayout.LayoutParams(lHeight, lWidth));ll.addView(edicion, new LinearLayout.layoutParams(lHeight, lWidth)); setContentView(ll);



Optimización de layouts

• La creación de la interfaz gráfica es un proceso costoso computacionalmente

• Reglas para interfaces eficientes

• Evitar anidamientos innecesarios

• Evitar usar demasiadas vistas

• Evitar anidamientos profundos

• Comando layouopt

• Parámetro: nombre de fichero o carpeta de recursos



Vistas de texto

• TextView• Etiqueta de texto• Atributos

• android:text• android:textColor• android:textSize

• Métodos• setText()• appendText()

• getText()

• EditText• Hereda de TextView, editable



Button

public class MiActividad extends Activity { protected void onCreate(Bundle icicle) { super.onCreate(icicle); setContentView(R.layout.miLayout); TextView texto = (TextView)findViewById(R.id.texto); Button boton = (Button)findViewById(R.id.boton);

boton.setOnClickListener( new OnClickListener() { public void onClick(View v) { texto.setText("Botón pulsado"); } }); }}



Button

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TextView android:id="@+id/texto" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Texto" /> <Button android:id="@+id/boton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Púlsame" />

</LinearLayout>



Button

• Definición del manejador del evento OnClick en el archivo XML de layout:

• Manejador implementado en el código:

<Button android:layout_height="wrap_content" android:layout_width="wrap_content" android:text="@string/textoBoton" android:onClick="manejador" />

public void manejador(View vista) { // Hacer algo}



CheckBox

• Botón con dos posibles estados

• Independientes unos de otros

• Atributos

• android:checked

• android:text

• Métodos

• isChecked

• setChecked



CheckBox

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

<TextView android:id="@+id/texto" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Texto" /> <CheckBox android:id="@+id/micheckbox" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Púlsame" android:checked="false" />

</LinearLayout>



CheckBoxpublic class MiActividad extends Activity { TextView texto; CheckBox miCheckbox;

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); texto = (TextView)findViewById(R.id.texto); miCheckbox = (CheckBox)findViewById(R.id.micheckbox); miCheckbox.setChecked( true );

miCheckbox.setOnClickListener(new OnClickListener() { public void onClick(View v) { // Acción a realizar si está pulsado o no if (miCheckbox.isChecked()) { texto.setText("activado"); } else { texto.setText("desactivado"); } } }); }}



RadioButton

• Botón con dos estados• Una vez seleccionado, no puede dejar de estarlo por

acción directa del usuario• Agrupados en elementos de tipo RadioGroup<RadioGroup android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical"> <RadioButton android:id="@+id/radio_si" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Sí" /> <RadioButton android:id="@+id/radio_no" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="No" /></RadioGroup>



RadioButtonpublic class MiActividad extends Activity { boolean valor = true; RadioButton botonSi, botonNo; protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); botonSi = (RadioButton)findViewById(R.id.radio_si); botonNo = (RadioButton)findViewById(R.id.radio_no); botonSi.setOnClickListener(new OnClickListener() { public void onClick(View v) { valor = true; } }); botonNo.setOnClickListener(new OnClickListener() { public void onClick(View v) { valor = false; } }); }}



Spinner

• Cuadro de selección múltiple

• Pasos:

• Añadir objeto Spinner al layout

• Recursos:

• Prompt – Título de la ventana

• Entries – Array de opciones

• Asignar array de opciones al Spinner



Spinner

• Añadir objeto Spinner al layout

• Cadena para el prompt en /res/values/strings.xml

<Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" android:drawSelectorOnTop="true" android:prompt="@string/eligeopcion" android:entries="@array/opciones" />

<string name="eligeopcion">Elige!</string>



Spinner

• Array de opciones en /res/values/arrays.xml

• Asociar opciones al Spinner desde código:

<resources> <string-array name="opciones"> <item>Mensual</item> <item>Trimestral</item> <item>Semestral</item> <item>Anual</item> </string-array></resources>

Spinner s = (Spinner) findViewById(R.id.spinner);ArrayAdapter adaptador = ArrayAdapter.createFromResource( this, R.array.opciones, android.R.layout.simple_spinner_item);adaptador.setDropDownViewResource( android.R.layout.simple_spinner_dropdown_item);s.setAdapter(adaptador);



Spinner

• Eventos:• No es posible asignar eventos a elementos individuales• Manejador de evento global:

spinner.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView parentView, View selectedItemView, int position, long id) { // Código } @Override public void onNothingSelected(AdapterView parentView) { // Código }});



LinearLayout

• Dispone los elementos en una fila o una columna• android:gravity• android:weight

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical|horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent">

[ELEMENTOS]

</LinearLayout>



TableLayout

• Organiza los elementos como una rejilla dividida en filas y columnas

• Compuesto por elementos de tipo <TableRow> representando las filas de la tabla• Cada fila contendrá un conjunto de vistas• Columnas

• Anchura dependiente del elemento más ancho de la columna

• android:layout_width=”match_parent”

• android:layout_height=”wrap_content”

• setColumnShrinkable: disminuir anchura

• setColumnStretchable: aumentar anchura

• setColumnCollapsed: ocultar columna



TableLayout

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent"> <TableRow> [ELEMENTOS] </TableRow> <TableRow> [ELEMENTOS] </TableRow> <View android:layout_height="2dip" android:background="#FF909090" /> <TableRow> [ELEMENTOS] </TableRow></TableLayout>



RelativeLayout <TextView android:id="@+id/etiqueta" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Escribe"/> <EditText android:id="@+id/entrada" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_below="@id/etiqueta"/> <Button android:id="@+id/ok" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/entrada" android:layout_alignParentRight="true" android:layout_marginLeft="10dip" android:text="OK" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_toLeftOf="@id/ok" android:layout_alignTop="@id/ok" android:text="Cancelar" />



Independencia del hardware

• Múltiples archivos de recursos:

Modificadores: small, normal, large, xlarge, land, port, long, notlong,

ldpi, mdpi, hdpi• Configuraciones de pantalla soportadas (en Manifest)

/res/layout-small-long//res/layout-large//res/drawable-hdpi/

<supports-screens android:smallScreens="false" android:normalScreens="true" android:largeScreens="true" android:anyDensity="true"/>



Independencia del hardware

• ¡Hacer todas las pruebas posibles!

• No utilizar nunca medidas absolutas (usar dp):



¿Preguntas...?

arquitectura de aplicacionesjtech.ua.es/dadm/restringido/android/traspas/sesion03-traspas.pdf•...

Documents