Publicado el 22 de Octubre del 2018
784 visualizaciones desde el 22 de Octubre del 2018
2,2 MB
46 paginas
Creado hace 6a (12/03/2018)
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Ciclo I-2018
Guía de Laboratorio N°02
(para desarrollarse en dos semanas)
“Introducción a la Interfaz de usuario de Android”
Objetivos:
Que el estudiante:
Aprenda la declaración e implementación de los controles básicos en la programación
Android haciendo uso de layouts para realizar el diseño de la interfaz y el uso de java para
definir el manejo de estos.
Aprenda a Incorporar nuevos controles de forma intuitiva siguiendo la lógica de controles
de similar comportamiento.
Descripción:
Esta práctica consistirá en crear un programa que contendrá una serie de Activities que mostrarán
el uso de cada uno de los controles básicos de Android (Button, TextView, EditText, CheckBox, etc)
con su respectiva interfaz de usuario (usando XML). Cada Activity será llamada por medio de otra
Activity adicional que usaremos para mostrar un “Menú” por medio del componente ListView.
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Índice
Ciclo I-2018
Creación de Proyecto ......................................................................... 1
Menú (Activity principal) ................................................................... 3
ListView(capa de presentación o vista) ..........................................................................................3
ListView (Aplicación o controlador) ................................................................................................7
Primera opción del menú(activity del botón) ................................... 9
Button (presentación o vista) .........................................................................................................9
Button (Aplicación o controlador) ................................................................................................11
Forma Alternativa de creación de Vista(xml) y controlador(java) .. 14
Segunda opción del menú(activity del TextView) ........................... 14
TextView(presentación o vista) ....................................................................................................16
TextView(Aplicación o controlador) .............................................................................................17
Tercera opción del menú(activity del EditText) .............................. 18
EditText (presentación o vista) .....................................................................................................18
EditText (Aplicación o controlador) ..............................................................................................19
Cuarta opción del menú(activity del CheckBox).............................. 21
CheckBox (presentación o vista) ..................................................................................................21
CheckBox(Aplicación o controlador) ............................................................................................23
Quinta opción del menú(activity del RadioButton) ......................... 27
RadioButton(presentación o vista) ...............................................................................................27
RadioButton(Aplicación o controlador) ........................................................................................28
Sexta opción del menú(activity de Galery) ...................................... 30
Gallery(presentación o vista)........................................................................................................30
Gallery(Aplicación o controlador).................................................................................................31
Septima opción del menú(activity de Spinner) ............................... 37
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Ciclo I-2016
Spinner(presentación o vista).......................................................................................................37
Spinner(Aplicación o controlador) ................................................................................................38
Tarea opcional ................................................................................. 41
Anexos ............................................................................................. 42
2018
Página 3
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Ciclo I-2016
Creación de Proyecto
Proyecto con menú(base un activity llamado listview que invoca otros activities)
Crea un nuevo proyecto, desde el menú de eclipse en File->New->Other, luego Android
Application Project ubicado dentro de la subcarpeta Android y presione el botón Next>.
Para este ejercicio escribe como nombre de la aplicación será Carnet02, El proyecto será:
sv.ues.fia.eisi.carnet02 . selecciona next y busca las carpeta donde almacenas tus
proyectos(carnet) .
Página 1
2018
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Selecciona la API 22 y presiona Next.
Selecciona Empty Activity y luego Next
Ciclo I-2016
.
presiona Finish.
2018
Página 2
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Menú (Activity principal)
ListView(capa de presentación o vista)
Ciclo I-2016
Dentro del Proyect Explorer navega por el directorio Carnet02->res-> y dentro de la carpeta
layout, Presiona clic en activity_main y clic en la pestaña de text
Sustituye el código por el que se muestra a continuación:
Elimina el control EditView(HelloWord) e incorpora una lista, ponle el atributo id como se
muestra(listv)
2018
Página 3
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Ciclo I-2016
Nota: No olvide poner los puntos de fijación a los extremos (anclas).
Con lo anterior en formato xml el layout quedara asi:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="eisi.fia.ues.sv.carnet02.MainActivity">
<ListView
android:id="@+id/listv"
android:layout_width="368dp"
android:layout_height="431dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Esta lista tiene un identificador llamado listv, este nombre lo utilizaremos en el controlador.
En la lista se tienen como atributos más relevantes los siguientes:
ATRIBUTOS RELEVANTES
DESCRIPCIÓN
android:background=""
android:entries=""
android:clickable=""
Permite colocar el color de fondo a la lista
Permite agregar un Array que contenga los
componentes de la lista
Permite agregar un evento que realice un
conjunto de Acciones y esto se hace colocando
un nombre
2018
Página 4
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
Color del layout (opcional)
Ciclo I-2016
Aunque el color de fondo del layout está bien, puedes probar cambiar la propiedad background
De la siguiente forma.
a) agrega a string.xml el color que tendrá el layout(lista)
b) cambia la propiedad background de la lista en la ventana de diseño
2018
Página 5
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
En la vista Text en xml se vera asi:
Ciclo I-2016
Si miras oscuro el color, puedes cambiarlo por otro como:FFFFFF o 8FBC8B u otro
(Consulta sitios como este si quieres ver más opciones http://roble.pntic.mec.es/apuente/nombre.html )
2018
Página 6
UNIVERSIDAD DE EL SALVADOR
FACULTAD DE INGENIERIA Y ARQUITECTURA
ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
PROGRAMACION PARA DISPOSITIVOS MOVILES
PDM115
ListView (Aplicación o controlador)
Ahora abra la Activity MainActivity.java, ubicada dentro la carpeta src->sv.ues.fia.carnet02.
Ciclo I-2016
Usaremos dentro de ella, la clase predeterminada ArrayAdapter como adaptador para nuestro
ListView y un diseño predefinido para mostrar la lista que ya viene incluido en el SDK de Android.
El código que deberá contener es el siguiente:
package eisi.fia.ues.sv.carnet02;
import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import an
Comentarios de: Introducción a la Interfaz de usuario de Android - guia lab02 (0)
No hay comentarios