controles básicos de interfaz en android
TRANSCRIPT
![Page 1: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/1.jpg)
Aplicaciones Móviles COMPONENTES DE LA INTERFAZ DE USUARIO
Ing. Emerson Garay
![Page 2: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/2.jpg)
2017 www.slideshare.net/emergar Ing. Emerson E. Garay Gómez
![Page 3: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/3.jpg)
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
![Page 4: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/4.jpg)
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
![Page 5: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/5.jpg)
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
![Page 6: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/6.jpg)
2017 www.slideshare.net/emergar Ing. Emerson E. Garay Gómez
![Page 7: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/7.jpg)
2017 www.slideshare.net/emergar Ing. Emerson E. Garay Gómez
![Page 8: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/8.jpg)
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
![Page 9: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/9.jpg)
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
![Page 10: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/10.jpg)
<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
![Page 11: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/11.jpg)
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
![Page 12: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/12.jpg)
<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
![Page 13: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/13.jpg)
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
![Page 14: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/14.jpg)
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
![Page 15: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/15.jpg)
<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
![Page 16: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/16.jpg)
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
![Page 17: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/17.jpg)
<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
![Page 18: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/18.jpg)
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
![Page 19: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/19.jpg)
<RadioGroup android:layout_width="wrap_content" android:layout_height="wrap_content">
…. //Aquí van los RadioButton
</RadioGroup>
http://www.slideshare.net/emergar
![Page 20: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/20.jpg)
<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
![Page 21: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/21.jpg)
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
![Page 22: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/22.jpg)
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
![Page 23: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/23.jpg)
<Spinner android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/spitemas" />
![Page 24: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/24.jpg)
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
![Page 25: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/25.jpg)
<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
![Page 26: Controles Básicos de Interfaz en Android](https://reader031.vdocuments.us/reader031/viewer/2022021923/5a6570687f8b9af13a8b4a0b/html5/thumbnails/26.jpg)
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