Aplicaciones Móviles COMPONENTES DE LA INTERFAZ DE USUARIO

Ing. Emerson Garay

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

Introducción a las interfaces de usuario. La clase Activity (Contiene y maneja los controles) La clase TextView (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

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

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.

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

import android.app.Activity; Sintaxis: public class Ejemplo extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_ejemplo); } }

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

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

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

Propiedad Posible Valor 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 Nombre Variable 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

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

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);

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

<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hola Android!" android:id="@+id/labsaludo" … />

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

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);

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

<EditText android:layout_width="wrap_content" android:layout_height="wrap_content“ android:inputType="numberPassword" android:id="@+id/txtnombre" android:ems="10“ ….. />

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

android:inputType= "textPersonName" "textPassword“ "numberPassword“ “textEmailAddress” "phone“ "textPostalAddress“ “textMultiLine” “time” “date” “number” "numberSigned“ "numberDecimal"

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

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);

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

<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/strcalcular" android:id="@+id/btncalcular“ …. />

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

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 );

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

<RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text=“Femenino" android:id="@+id/radF" />

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

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);

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

<RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content">

…. //Aquí van los RadioButton

</RadioGroup>

http://www.slideshare.net/emergar

<CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/strterminos" android:id="@+id/chkterminos" android:layout_gravity="center_horizontal" />

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

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);

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

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.

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

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

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);

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

<string-array name="strtemas"> <item>Java</item> <item>XML</item> <item>SQLite</item> <item>JSON</item> </string-array>

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

opciones = (Spinner)findViewById(R.id.spitemas); ArrayAdapter<CharSequence> adaptador = ArrayAdapter.createFromResource(this, R.array.strtemas, android.R.layout.simple_spinner_item);

opciones.setAdapter(adaptador);

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