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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 3
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 4
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);}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 5
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!");}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 6
Vistas básicas de Android• TextView• EditText• ListView• Spinner• Button• CheckBox• RadioButton• SeekBar• ...
http://developer.android.com/guide/tutorials/views/index.html
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 7
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 8
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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 9
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);
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 10
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 11
Vistas de texto
• TextView• Etiqueta de texto• Atributos
• android:text• android:textColor• android:textSize
• Métodos• setText()• appendText()
• getText()
• EditText• Hereda de TextView, editable
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 12
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"); } }); }}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 13
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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 14
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}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 15
CheckBox
• Botón con dos posibles estados
• Independientes unos de otros
• Atributos
• android:checked
• android:text
• Métodos
• isChecked
• setChecked
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 16
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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 17
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"); } } }); }}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 18
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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 19
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; } }); }}
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 20
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 21
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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 22
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);
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 23
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 }});
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 24
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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 25
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
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 26
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>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 27
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" />
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 28
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"/>
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 29
Independencia del hardware
• ¡Hacer todas las pruebas posibles!
• No utilizar nunca medidas absolutas (usar dp):
Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
© 2012-2013 Depto. Ciencia de la Computación e IAPlataforma Android Diseño de UIs - 30
¿Preguntas...?
Top Related