Definición, estructura y uso de los controles de Interfaz gráfica en Android.

1. Aplicaciones Móviles
COMPONENTES DE LA INTERFAZ DE USUARIO
Ing. Emerson Garay

2. 2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

3.  Introducción a las interfaces de usuario.
 La clase Activity (Contiene y maneja los controles)
 La claseTextView (Etiqueta)
 La clase EditText (Campo de texto)
 La clase Button (Botón de acción)
 La clase Radio (Botón de Opción)
 La clase RadioGroup (Grupo para las Opciones)
 La clase CheckBox (Casilla de verificación)
 La clase Spinner (Desplegable de opciones)
 La clase ListView (Lista de elementos)
 Eventos
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

4. Activity – es un componente de la aplicación que
contiene una pantalla con la que los usuarios pueden
interactuar para realizar una acción, como marcar un
número telefónico, tomar una foto, enviar un correo
electrónico o ver un mapa. A cada actividad se le
asigna una ventana en la que se puede dibujar su
interfaz de usuario. La ventana generalmente abarca
toda la pantalla, pero en ocasiones puede ser más
pequeña que esta y quedar "flotando" encima de otras
ventanas.
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

5. import android.app.Activity;
Sintaxis:
public class Ejemplo extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ejemplo);
}
}
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

6. 2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

7. 2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

8. Propiedad PosibleValor Descripción
layout_width wrap_content Ajustar el ancho al contenido
match_parent Ajustar el ancho al padre contenedor
layout_height wrap_content Ajustar el alto al contenido
match_parent Ajustar el alto al padre contenedor
text Texto Una cadena o variable String
id NombreVariable Identificador(nombre) del elemento
hint Texto Texto por defecto que desaparece al
obtener el enfoque la caja de texto
onClick Nombre del método Indica el método que se ejecutará al
dar clic
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

9. import android.widget.TextView;
TextView – Un tipo de control que soporta la
visualización de texto
Sintaxis en Java:
//Define una variable
TextView labsalida;
//Obtener el control desde la vista
labsalida = (EditText)findViewById(R.id.labsalida);
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

10. <TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hola Android!"
android:id="@+id/labsaludo"
…
/>
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

11. import android.widget.EditText;
EditText – Un tipo de pantalla que soporta la
visualización y edición de texto
Sintaxis en Java:
//Define una variable
EditText txtnombre;
//Obtener el control desde la vista
txtnombre = (EditText)findViewById(R.id.txtnombre);
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

12. <EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content“
android:inputType="numberPassword"
android:id="@+id/txtnombre"
android:ems="10“
…..
/>
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

13. android:inputType= "textPersonName"
"textPassword“
"numberPassword“
“textEmailAddress”
"phone“
"textPostalAddress“
“textMultiLine”
“time”
“date”
“number”
"numberSigned“
"numberDecimal"
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

14. import android.widget.Button;
Button – Un tipo de control que se usa para
ejecutar una acción al dar clic
Sintaxis en Java:
//Define una variable
Button btncalcular;
//Obtener el control desde la vista
btncalcular = (Button)findViewById(R.id.btncalcular);
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

15. <Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/strcalcular"
android:id="@+id/btncalcular“
….
/>
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

16. sobre la Activity
implements View.OnClickListener
Debe sobrescribir el método abstracto:
@Override
public void onClick(View view) {
…
}
Adicionar a cada control el oyente:
btn.setOnClickListener( this );
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

17. <RadioButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=“Femenino"
android:id="@+id/radF"
/>
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

18. import android.widget.RadioButton;
RadioButton – Un tipo de control que se
seleccionar una opción
Sintaxis en Java:
//Define una variable
RadioButton radF;
//Obtener el control desde la vista
radF = (RadioButton)findViewById(R.id.radF);
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

19. <RadioGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content">
…. //Aquí van los RadioButton
</RadioGroup>
http://www.slideshare.net/emergar

20. <CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/strterminos"
android:id="@+id/chkterminos"
android:layout_gravity="center_horizontal" />
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

21. import android.widget.CheckBox;
CheckBox – Un tipo de control que se permite activar
o no una opción
Sintaxis en Java:
//Define una variable
CheckBox chkterminos;
//Obtener el control desde la vista
chkterminos = (CheckBox)findViewById(R.id.chkterminos);
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

22. Un Spinner es un
elemento que al tocarlo,
aparece un menú
desplegable con todos los
demás valores
disponibles, de los cuales
el usuario puede
seleccionar uno.
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

23. <Spinner
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/spitemas"
/>

24. private final static String[] temas =
{ “Java", “XML", “SQLite", “JSON" };
opciones = (Spinner)findViewById(R.id.spitemas);
ArrayAdapter<String> adaptador =
ArrayAdapter.createFromResource(this,
android.R.layout.simple_spinner_item,
temas);
opciones.setAdapter(adaptador);
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

25. <string-array name="strtemas">
<item>Java</item>
<item>XML</item>
<item>SQLite</item>
<item>JSON</item>
</string-array>
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez

26. opciones = (Spinner)findViewById(R.id.spitemas);
ArrayAdapter<CharSequence> adaptador =
ArrayAdapter.createFromResource(this,
R.array.strtemas,
android.R.layout.simple_spinner_item);
opciones.setAdapter(adaptador);
2017www.slideshare.net/emergar Ing. Emerson E. Garay Gómez