PDF de programación - Introducción a la Interfaz de usuario de Android - guia lab02

Imágen de pdf Introducción a la Interfaz de usuario de Android - guia lab02

Introducción a la Interfaz de usuario de Android - guia lab02gráfica de visualizaciones

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
  • Links de descarga
http://lwp-l.com/pdf13983

Comentarios de: Introducción a la Interfaz de usuario de Android - guia lab02 (0)


No hay comentarios
 

Comentar...

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad