Laboratorio de Tecnologías Móviles

Sesión 2:
Interfaz de usuario

I. OBJETIVOS

• Conocer la interfaz de usuario de Android

• Conocer las vistas y diseños para las aplicaciones.
• Personalizar los controles.

II. TEMAS A TRATAR

• Vistas
• Controles
• Layout (diseño)
• Widgets

III. MARCO TEORICO

INTRODUCCIÓN A LAS VISTAS

En una aplicación Android, la interfaz de usuario se construye a través de los objetos View y
ViewGroup. Los objetos View son las unidades básicas de la interfaz de usuario. La clase View
sirve como base para las subclases llamadas “widgets” los cuales ofrecen objetos IU plenamente
implementados, tales como campos de texto y botones. La clase ViewGroup sirve como base para
las subclases llamadas “layouts” las cuales ofrecen diferentes tipos de arquitecturas de diseño,
como lineal, tabular y relativo.
Un objeto View es una estructura de datos cuyas propiedades almacenan los parámetros de
diseño y contenido para un área rectangular específica de pantalla. Este tipo de objeto gestiona su
propia medición, diseño, dibujo, cambio de foco, desplazamiento e interacciones claves. De esta
manera, todos los componentes visuales descienden de la clase View.

VISTA JERÁRQUICA

En la plataforma Android, se define la interfaz de usuario de una actividad usando una jerarquía de
nodos View y ViewGroup, tal como se muestra en el diagrama inferior. Este árbol jerárquico
puede ser tan simple o complejo según se requiera, y se construye usando el conjunto de widgets
y layouts predefinidos o con las vistas personalizadas que se puedan crear.

La clase ViewGroup de una extensión de la clase View diseñado para contener múltiples vistas.

1 José Sulla Torres

 Laboratorio de Tecnologías Móviles

Con el fin de adjuntar la vista del árbol jerárquico a la pantalla para la interpretación, la actividad
debe llamar al método setContentView() y pasar una referencia al objeto nodo raíz. El sistema
recibe esta referencia y la usa para validar, medir y dibujar el árbol.

CONTROLES

Android proporciona una caja de herramientas de vistas estándar para ayudar a crear interfaces
simples. Los más importantes controles son listados a continuación:
• TextView: Etiqueta de texto de solo lectura
• EditText: Una caja de entrada de texto editable. Acepta entradas de varias líneas
• ListView: Crea y gestiona una lista vertical de vistas, mostrándolas como filas dentro de la
lista
• Spinner: Muestra una vista texto y una asociada ListView que permite seleccionar un ítem
de la lista y mostrarlo en una caja de texto
• Button: Un botón estándar.
• Checkbox: Un botón de doble estado.
• ViewFlipper: permite definir una colección de vistas como una fila horizontal en la cual solo
una vista es visible a la vez, y la transición entre vistas es animada

LAYOUT

Son extensiones de la clase ViewGroup usada para posicionar los controles en la interfaz de
usuario. Los layouts pueden anidarse, permitiendo ello crear complejas interfaces usando una
combinación de layouts. El SDK de Android incluye algunos layouts para ayudar en la construcción
de las interfaces de usuario. Estos son:
• FrameLayout: sujeta cada vista hijo a la esquina superior izquierda
• LinearLayout: alinea cada vista hijo en una línea vertical u horizontal
• RelativeLayout: permite definir las posiciones de cada vista hijo relativa a las otras y a los
límites de la pantalla
• TableLayout: permite distribuir vistas usando una grilla de filas y columnas
• Gallery: muestra una fila de ítems en una lista horizontalmente desplazable

La manera más común de definir un layout y expresar la vista jerárquica es a través del archivo de
diseño XML. Cada elemento en XML es un objeto View o ViewGroup. Los objetos View son las
hojas en el árbol, y los objetos ViewGroup son las ramas en el árbol.
El nombre de un elemento XML es establecido según la clase Java que representa. De esta
manera, el elemento <TextView> crea un TextView en la interfaz de usuario, y un elemento
<Linear Layout> crea un grupo vista LinearLayout.

WIDGETS

Un Widget es un objeto vista que sirve como una interfaz para la interacción con el usuario. Un
amplio conjunto de widgets son provistos por Android, tales como Buttons, Checkboxes,
TextFields. Algunos widgets más complejos provistos son por ejemplo date picker, clock, y
controles zoom.

2 José Sulla Torres

 Laboratorio de Tecnologías Móviles

IV. ACTIVIDADES (La práctica tiene una duración de 2 horas)

Crear un nuevo proyecto Android

1. En Android Studio, crea un nuevo proyecto de Nombre de la aplicación: Moneda

2. En los siguientes cuadros de diálogos deje todas las opciones por omisión y al final haga click
en el botón Finalizar.

3. Si en el diseño sale un mensaje de problemas de renderización como se aprecia en la figura

3 José Sulla Torres

 Laboratorio de Tecnologías Móviles

en el archivo styles.xml modifique el código como se indica a continuación y luego y luego

guarde su archivo.

4. Vuelva al modo diseño y deberá desaparecer ese problema.

5. Cambie la disposición en la interfaz al modo LinearLayout (Vertical). Para ello en el archivo

actvity_main.xml en modo Text cambie la etiqueta RelativeLayout por LinearLayout y
modifique el código para que se vea como en la figura:

6. Para crear atributos seleccione el archivo res/values/string.xml y agregue el siguiente código

enmarcado
<resources>
<string name="app_name">Moneda</string>

<color name="nuevoColor">#C5e2f0</color>
<string name="Dolares">A soles</string>
<string name="Soles">A dólares</string>
<string name="Calc">calcular</string>
<string name="miClicManejador">miClicManejador</string>

</resources>

7. Guarde los cambios.

4 José Sulla Torres

 Laboratorio de Tecnologías Móviles

8. Adicione controles a la interfaz de usuario: para ello seleccione el archivo activity_main.xml.

En el modo Diseño, desde la vista Palette, dentro del grupo de controles Text Fields
seleccione el objeto Plain Text y arrástrelo dentro del diseño de la interfaz.

9. De la sección Containers, arrastre un objeto RadioGroup hacia el diseño. Cambie su

propiedad de ancho:
layout:width fill_parent

10. De la sección Widgets agregue dos controles RadioButton dentro del contenedor RadioGroup
y configure las siguientes propiedades (doble click sobre cada RadioButton)

Primer RadioButton:
text: Dólares
checked: true
id: radio0
Segundo RadioButton:
text: Soles
checked: false
id: radio1

5 José Sulla Torres

 Laboratorio de Tecnologías Móviles

11. Agregue un objeto Button al diseño de la interfaz, con las siguientes propiedades:
text: Calc
id: button1

12. Al objeto editText agregue las siguientes propiedades:

Input Type: numberSigned y numberDecimal

13. Ejecute su actividad.

14. Al objeto button1 agregue el método click para ello en la propiedad OnClick busque y
seleccione el nombre miClicManejador.

6 José Sulla Torres

 Laboratorio de Tecnologías Móviles

15. Modifique la propiedad de backgroud de cada control para elegir el color como se muestra en
la figura

16. Agregue el siguiente código enmarcado en el archivo MainActivity.java:

import android.os.Bundle;

import android.view.View;
import android.widget.EditText;
import android.widget.RadioButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private EditText text;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
text = (EditText) findViewById(R.id.editText);
}
public void miClicManejador(View view) {
switch (view.getId()) {
case R.id.button1:
RadioButton dolaresButton = (RadioButton)
findViewById(R.id.radio0);
RadioButton solesButton = (RadioButton)
findViewById(R.id.radio1);
if (text.getText().length() == 0) {
Toast.makeText(this, "Ingresa un número válido",
Toast.LENGTH_LONG).show();
return;
}
float inputValue = Float.parseFloat(text.getText().toString());
if (dolaresButton.isChecked()) {
text.setText(String
.valueOf(convierteDolaresASoles (inputValue)));
dolaresButton.setChecked(false);
solesButton.setChecked(true);
} else {
text.setText(String
.valueOf(convierteSolesADolares(inputValue)));
solesButton.setChecked(false);
dolaresButton.setChecked(true);
}
break;
}
}

7 José Sulla Torres

 Laboratorio de Tecnologías Móviles

// Convierte a dólares
private double convierteSolesADolares(float soles) {
return (soles/3.5);
}

// Convierte a soles
private double convierteDolaresASoles(float dolares) {
return (dolares*3.5);
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is

17. Guarde los cambios y ejecute

GridView

18. Agregue un control GridView debajo del botón Calc y configure las propiedades como sigue:

19. Copie en la carpeta drawable una serie de imágenes para que sea visualizado por el gridview.

20. Luego, en el archivo de java agregue el siguiente código:

8 José Sulla Torres

 Laboratorio de Tecnologías Móviles

private double convierteDolaresASoles(float dolares) {

return (dolares*3.5);
}

public class ImageAdapter extends BaseAdapter{

private Context mContexto;

public ImageAdapter (Context c){

mContexto = c;
}
public int getCount(){
return mListaIds.length;
}
public Object getItem(int posicion){
return null;
}
public long getItemId(int posicion){
return 0;
}
public View getView(int posicion, View converVista, ViewGroup padre){
ImageView imgVista = new ImageView(mContexto);
imgVista.setImageResource(mListaIds[posicion]);
return imgVista;
}

private Integer[] mListaIds ={

R.drawable.cel1,
R.drawable.cel2,
R.drawable.cel3,
R.drawable.cel4,
R.drawable.cel5,
R.drawable.cel6,
R.drawable.cel1,
R.drawable.cel2,
R.drawable.cel3,
R.drawable.cel4,
R.drawable.cel5,
R.drawable.cel6
};
}
}

21. En la función OnCreate agregue el siguiente código enmarcado para el GridView

22. Seleccione el método a implementar

9 José Sulla Torres

 Laboratorio de Tecnologías Móviles

23. Luego escriba el siguiente código enmarcado:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
text = (EditText) findViewById(R.id.editText);

GridView gridView = (GridView) findViewById(R.id.gridView);

gridView.setAdapter(new ImageAdapter(this));

gridView.setOnItemClickListener(new AdapterView.OnItemClickListener(){

@Override
public void onItemClick(AdapterView<?> parent, View view, int
position, long id) {

Toast.makeText(MainActivity.this, "" + position,

Toast.LENGTH_SHORT).show();

}
});

24. Ejecute la actividad

10 José Sulla Torres

 Laboratorio de Tecnologías Móviles

V. Ejercicios

1. Cree una aplicación que permita realizar conversiones entre distintos tipos de monedas.
Considere divisas como: Euro (Europa), Libra (Inglaterra), Rupia (India), Real (Brasil), Peso
(México), Yuan (China) y Yen (Japón), además del dólar y nuevo sol.
2. Elabore una aplicación que implemente un objeto GridView para que muestre una grilla de
imágenes sobre los distintos tipos de pizzas y que muestre el nombre de la pizza al hacer click.

VI. Cuestionario

1. ¿Cómo se vincula métodos a los controles?

2. ¿Para qué sirve la función findViewById?
3. ¿Cómo funciona el control GridView?

VII. Bibliografía y referencias

1. Wei-Meng Lee - Android 4 Application Development, 2012.

11 José Sulla Torres