Componentes Interfaz ANDROID BellaMena
Componentes Interfaz ANDROID BellaMena
Componentes Interfaz ANDROID BellaMena
Informtica y Electrnica
Ingeniera en Electrnica Control y redes Industriales
Desarrollo de Aplicaciones Mviles
Octavo
Ing. Javier Romero
Bella Mena
Fecha:
09 de Diciembre de 2015
Calificacin
Sello
Pgina 1 de 17
MARCO TERICO
Componentes de una aplicacin Android
Existe una serie de elementos clave que resultan imprescindibles para desarrollar aplicaciones
en Android. En este apartado vamos a realizar una descripcin inicial de algunos de los ms
importantes. A lo largo del curso se describirn con ms detalle las clases Java que implementan
cada uno de estos componentes.
Activity.- Las actividades (activities) representan el componente principal de la interfaz grfica
de una aplicacin Android. Se puede pensar en una actividad como el elemento anlogo a una
ventana o pantalla en cualquier otro lenguaje visual.
View.- Las vistas (view) son los componentes bsicos con los que se construye la interfaz grfica
de la aplicacin, anlogo por ejemplo a los controles de Java o .NET. De inicio, Android pone a
nuestra disposicin una gran cantidad de controles bsicos, como cuadros de texto, botones,
listas desplegables o imgenes, aunque tambin existe la posibilidad de extender la
funcionalidad de estos controles bsicos o crear nuestros propios controles personalizados.
Service.- Los servicios (service) son componentes sin interfaz grfica que se ejecutan en segundo
plano. En concepto, son similares a los servicios presentes en cualquier otro sistema operativo.
Los servicios pueden realizar cualquier tipo de acciones, por ejemplo actualizar datos, lanzar
notificaciones, o incluso mostrar elementos visuales (p.ej. actividades) si se necesita en algn
momento la interaccin con del usuario.
Content Provider.- Un proveedor de contenidos (content provider) es el mecanismo que se ha
definido en Android para compartir datos entre aplicaciones. Mediante estos componentes es
posible compartir determinados datos de nuestra aplicacin sin mostrar detalles sobre su
almacenamiento interno, su estructura, o su implementacin. De la misma forma, nuestra
aplicacin podr acceder a los datos de otra a travs de los content provider que se hayan
definido.
Broadcast Receiver.- Un broadcast receiver es un componente destinado a detectar y
reaccionar ante determinados mensajes o eventos globales generados por el sistema (por
ejemplo: Batera baja, SMS recibido, Tarjeta SD insertada, ) o por otras aplicaciones
(cualquier aplicacin puede generar mensajes (intents, en terminologa Android) broadcast, es
decir, no dirigidos a una aplicacin concreta sino a cualquiera que quiera escucharlo).
Widget.- Los widgets son elementos visuales, normalmente interactivos, que pueden mostrarse
en la pantalla principal (home screen) del dispositivo Android y recibir actualizaciones
peridicas. Permiten mostrar informacin de la aplicacin al usuario directamente sobre la
pantalla principal.
Intent.- Un intent es el elemento bsico de comunicacin entre los distintos componentes
Android que hemos descrito anteriormente. Se pueden entender como los mensajes o
peticiones que son enviados entre los distintos componentes de una aplicacin o entre distintas
aplicaciones. Mediante un intent se puede mostrar una actividad desde cualquier otra, iniciar
un servicio, enviar un mensaje broadcast, iniciar otra aplicacin, etc.
Pgina 2 de 17
OBJETIVOS
1. Conocer los componentes de interfaz de una aplicacin Android
2. Aprender las estructuras de cdigo de los componentes de Android.
3. Comprender el funcionamiento de las diferentes estructuras de los componentes de
interfaz de Android.
DESARROLLO
INTERFAZ DE USUARIO ANDROID
LAYOUTS:
Son elementos no visuales destinados a controlar la distribucin, posicin y dimensiones de los
controles que se insertan en su interior. Estos componentes extienden a la clase base
ViewGroup, como muchos otros componentes contenedores, es decir, capaces de contener a
otros controles. A continuacin se describe los Layouts ms utilizados en Android.
1. FrameLayout.
ste es el ms simple de todos los layouts de Android. Un FrameLayout coloca todos sus
controles hijos alineados con su esquina superior izquierda, de forma que cada control quedar
oculto por el control siguiente. Por ello, suele utilizarse para mostrar un nico control en su
interior, a modo de contenedor (placeholder) sencillo.
Los componentes incluidos en un FrameLayout podrn establecer sus propiedades
android:layout_width y android:layout_height, que podrn tomar los valores match_parent
o wrap_content.
Ejemplo:
1 <FrameLayout
2 xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent">
5
6 <EditText android:id="@+id/TxtNombre"
7
android:layout_width="match_parent"
8
android:layout_height="match_parent"
9
android:inputType="text" />
10
11</FrameLayout>
Pgina 3 de 17
2. LinearLayout
Este layout apila uno tras otro todos sus elementos hijos en sentido horizontal o vertical segn
se establezca su propiedad android:orientation.
Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout pueden
establecer sus propiedades android:layout_width y android:layout_height para determinar
sus dimensiones dentro del layout.
1 <LinearLayout
2 xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical">
6
7 <EditText android:id="@+id/TxtNombre"
8
android:layout_width="match_parent"
9
android:layout_height="match_parent" />
10
11 <Button android:id="@+id/BtnAceptar"
12
android:layout_width="wrap_content"
13
android:layout_height="match_parent" />
14
15</LinearLayout>
Pero en el caso de un LinearLayout, tendremos otro parmetro con el que jugar, la
propiedad android:layout_weight. Esta propiedad nos va a permitir dar a los elementos
contenidos en el layout unas dimensiones proporcionales entre ellas. Si incluimos en un
LinearLayout vertical dos cuadros de texto (EditText) y a uno de ellos le establecemos
un layout_weight=1 y al otro un layout_weight=2conseguiremos como efecto que toda la
superficie del layout quede ocupada por los dos cuadros de texto y que adems el segundo sea
el doble (relacin entre sus propiedades weight) de alto que el primero.
1.
2.
3.
4.
5.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
Pgina 4 de 17
6. <EditText android:id="@+id/TxtDato1"
7. android:layout_width="match_parent"
8. android:layout_height="match_parent"
9. android:inputType="text"
10. android:layout_weight="1" />
11. <EditText android:id="@+id/TxtDato2"
12. android:layout_width="match_parent"
13. android:layout_height="match_parent"
14. android:inputType="text"
15. android:layout_weight="2" />
16. </LinearLayout>
Con el cdigo anterior conseguiramos un layout como el siguiente:
3. TableLayout
Un TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo las filas y
columnas necesarias, y la posicin de cada componente dentro de la tabla.
La estructura de la tabla se define de forma similar a como se hace en HTML, es decir, indicando
las filas que compondrn la tabla (objetos TableRow), y dentro de cada fila las columnas
necesarias, con la salvedad de que no existe ningn objeto especial para definir una columna
sino que directamente insertaremos los controles necesarios dentro del TableRow y cada
componente insertado corresponder a una columna de la tabla. De esta forma, el nmero final
de filas de la tabla se corresponder con el nmero de elementos TableRow insertados, y el
nmero total de columnas quedar determinado por el nmero de componentes de la fila que
ms componentes contenga.
Por norma general, el ancho de cada columna se corresponder con el ancho del mayor
componente de dicha columna, pero existen una serie de propiedades que nos ayudarn a
modificar este comportamiento:
4. GridLayout
GridView es un ViewGroup que muestra elementos de una, rejilla desplazable de dos
dimensiones. Los elementos de la cuadrcula se insertan automticamente al trazado utilizando
Pgina 6 de 17
un ListAdapter. Para una introduccin a cmo se puede insertar de forma dinmica vistas
utilizando un adaptador.
5. RelativeLayout
Este layout permite especificar la posicin de cada elemento de forma relativa a su elemento
padre o a cualquier otro elemento incluido en el propio layout. De esta forma, al incluir un nuevo
elemento X podremos indicar por ejemplo que debe colocarse debajo del elemento Y ya lineado
a la derecha del layout padre.
1 <RelativeLayout
2
xmlns:android="http://schemas.android.com/apk/res/android"
3
android:layout_width="match_parent"
4
android:layout_height="match_parent" >
5
6
<EditText android:id="@+id/TxtNombre"
7
android:layout_width="match_parent"
8
android:layout_height="wrap_content"
9
android:inputType="text" />
10
11
<Button android:id="@+id/BtnAceptar"
12
android:layout_width="wrap_content"
13
android:layout_height="wrap_content"
14
android:layout_below="@id/TxtNombre"
15
android:layout_alignParentRight="true" />
16</RelativeLayout>
Pgina 7 de 17
android:layout_above
android:layout_below
android:layout_toLeftOf
android:layout_toRightOf
android:layout_alignLeft
android:layout_alignRight
android:layout_alignTop
android:layout_alignBottom
android:layout_alignBaseline
android:layout_alignParentLeft
android:layout_alignParentRight
android:layout_alignParentTop
android:layout_alignParentBottom
android:layout_centerHorizontal
android:layout_centerVertical
android:layout_centerInParent
Pgina 8 de 17
WIDGETS
Los widgets son una parte esencial de la personalizacin de la pantalla de inicio. Puedes
imaginarlos como vistas de un vistazo de los datos ms importantes de tu app y que es
fundamental que sea accesible desde la pantalla de inicio del usuario.
CONTROLES DE ENTRADA
Los controles de entrada son los componentes interactivos de la interfaz de usuario de su
aplicacin. Android ofrece una amplia variedad de controles que puede utilizar en la interfaz de
usuario, como botones, campos de texto, buscar bares, casillas de verificacin, botones de
zoom, botones de conmutacin, y muchos ms.
Pgina 9 de 17
3. BUTTON
Un botn consiste en texto o un icono (o texto y un icono) que comunica lo que se produce la
accin cuando el usuario toca.
En funcin de si desea un botn con el texto, un icono, o ambos, puede crear el botn en su
diseo de tres maneras:
o
<Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "@string/button_text"
... />
o
<ImageButton
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:src = "@drawable/button_icon"
... />
o
Con texto y un icono, usando el Button clase con el androide: drawableLeft atributo:
<Button
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "@string/button_text"
android:drawableLeft = "@drawable/button_icon"
... />
Pgina 10 de 17
4. RADIO BUTTONS
Los Radio Buttons permiten al usuario seleccionar una opcin de un conjunto. Usted debe
utilizar los botones de opcin para conjuntos opcionales que son mutuamente excluyentes si
usted piensa que el usuario necesita para ver todas las opciones disponibles de lado a lado.
Para crear cada opcin de botn de opcin, cree un RadioButton en su diseo. Sin embargo, ya
que los botones de radio son mutuamente excluyentes, debe agruparlos dentro de un
RadioGroup. Al agrupar juntos, el sistema asegura que slo un botn de opcin se puede
seleccionar a la vez.
5. CHECKBOXES
Las CHECKBOXES permiten al usuario seleccionar una o ms opciones de un conjunto. Por lo
general, usted debe presentar cada opcin casilla en una lista vertical.
Para crear cada opcin casilla, crear un CheckBox en su diseo. Debido a una serie de opciones
de casilla de verificacin permite al usuario seleccionar varios elementos, cada casilla se gestiona
por separado y debe registrar un clic de escucha para cada uno.
6. TOGGLE BUTTONS
Un Toggle Buttons permite al usuario cambiar un ajuste entre dos estados. Se puede agregar un
botn bsica de palanca a su disposicin con el ToggleButton objeto. Android 4.0 (nivel de API
14) introduce otro tipo de botn de activacin llama un SWITCH que proporciona un control
deslizante, que puede agregar con un interruptor de objeto.
Si necesita cambiar el estado de un botn usted mismo, usted puede utilizar los
CompoundButton.setChecked () o CompoundButton.toggle () mtodos.
Pgina 11 de 17
7. SPINNERS
Spinners proporcionan una manera rpida para seleccionar un valor de un conjunto. En el estado
por defecto, una ruleta muestra su valor seleccionado. Al tocar el spinner muestra un men
desplegable con todos los valores disponibles, de las cuales el usuario puede seleccionar uno
nuevo
Usted puede agregar un control de giro a su diseo con la Spinner objeto. Por regla general
deber hacerlo en su diseo de XML con un <Spinner> elemento. Por ejemplo:
<Spinner
android:id
android:layout_width
android:layout_height = "wrap_content" />
=
=
"@+id/planets_spinner"
"fill_parent"
Para rellenar la ruleta con una lista de opciones, entonces usted necesidad de especificar un
SpinnerAdapter en su Activity o Fragment de cdigo fuente.
8. IMAGEVIEW
Muestra una imagen arbitraria, tal como un icono. La clase ImageView puede cargar imgenes
de diversas fuentes (por ejemplo, los recursos o los proveedores de contenido), se encarga de
calcular su medicin de la imagen para que pueda ser utilizado en cualquier controlador de
distribucin, y ofrece diversas opciones de visualizacin, como la escala y tintado.
9. PROGRESSBAR
Indicador visual del progreso de alguna operacin. Muestra una barra para el usuario que
representa hasta qu punto ha avanzado la operacin; la aplicacin puede cambiar la cantidad
de progreso (modificacin de la longitud de la barra) a medida que avanza. Tambin hay un
progreso en el boton secundario en una barra de progreso que es til para mostrar el progreso
intermedio, tales como el nivel de amortiguacin durante una barra de progreso de la
reproduccin en streaming.
Pgina 12 de 17
utilizado por las aplicaciones cuando se desconoce la duracin de la tarea. La barra de progreso
indeterminada puede ser una rueca o una barra horizontal.
Otros estilos de barra de progreso que ofrece el sistema son:
o
Widget.ProgressBar.Horizontal
Widget.ProgressBar.Small
Widget.ProgressBar.Large
Widget.ProgressBar.Inverse
Widget.ProgressBar.Small.Inverse
Widget.ProgressBar.Large.Inverse
10. RATINGBAR
Un RatingBar es una extensin de SeekBar y ProgressBar que muestra una clasificacin de
estrellas. El usuario puede tocar / arrastre o utilizar las teclas de flecha para ajustar la calificacin
cuando se utiliza el RatingBar tamao predeterminado. El estilo ms pequeo RatingBar
(ratingBarStyleSmall) y el estilo del indicador slo ms grande (ratingBarStyleIndicator) no son
compatibles con la interaccin del usuario y slo deben utilizarse como indicadores.
Cuando se utiliza un RatingBar que soporta la interaccin del usuario, la colocacin de widgets
a la izquierda o a la derecha del RatingBar se desanime.
11. SEEKBAR
Un SeekBar es una extensin de ProgressBar que aade un pulgar pueda arrastrar. El usuario
puede tocar el pulgar y arrastre hacia la izquierda o la derecha para ajustar el nivel de progreso
actual o utilice las teclas de flecha. La colocacin de los widgets enfocables a la izquierda oa la
derecha de un SeekBar no se recomienda.
Clientes del SeekBar puede adjuntar una SeekBar.OnSeekBarChangeListener para ser
notificados de las acciones del usuario
12. WEBVIEW
Una visin que muestra las pginas web. Esta clase es la base sobre la que se puede rodar su
propio navegador web o simplemente mostrar algunos contenidos en lnea dentro de su
actividad. Utiliza el motor de renderizado WebKit para mostrar las pginas web e incluye
mtodos para navegar hacia adelante y hacia atrs a travs de una historia, acercar y alejar,
realizar bsquedas de texto y ms. Tenga en cuenta que, para que su actividad para acceder a
las pginas web de Internet y de carga en un WebView, debe agregar los permisos de Internet a
su archivo de Android Manifiesto:
<uses-permission android:name="android.permission.INTERNET" />
Pgina 13 de 17
TEXT FIELDS
Un campo de texto le permite al usuario escribir texto en su aplicacin. Puede ser una sola lnea
o de varias lneas. Si toca un campo de texto coloca el cursor y muestra automticamente el
teclado. Adems de escribir, los campos de texto permiten una variedad de otras actividades,
como la seleccin de texto (cortar, copiar, pegar) y datos de consulta a travs de autorealizacin.
Entre los text fileds que podemos encontrar estn: Plain Text, Person Name, Password,
Password(Numeric), E-mail, Phone, Postal Address, Multiline Text, Time, Date, Number,
Number(Signed), Number(decimal).
CONTAINERS
1. RADIOGROUP.
Esta clase se utiliza para crear un mbito mltiple exclusin de un conjunto de botones de radio.
Aunque al principio, todos los botones de radio son sin marcar. Si bien no es posible desactivar
un botn de radio en particular, el principal grupo radial se puede borrar para eliminar el estado
marcada.
La seleccin se identifica por el identificador nico del botn de radio como se define en el
archivo de diseo XML.
2. LISTVIEW
Es un grupo view que muestra una lista de elementos desplazables. Los elementos de la lista se
insertan automticamente a la lista utilizando un adaptador que tira el contenido de una fuente,
como una consulta de matriz o base de datos y convierte cada elemento resulta en una vista
que se coloca en la lista.
3. GRIDVIEW
Es un ViewGroup que muestra elementos de una, rejilla desplazable de dos dimensiones. Los
elementos de la cuadrcula se insertan automticamente al trazado utilizando un ListAdapter.
4. EXPANDABLELISTADAPTER
Los artculos vienen de la ExpandableListAdapter asociado con este punto de vista. Listas
ampliables son capaces de mostrar un indicador al lado de cada elemento para mostrar el estado
actual del tema. Utilice setChildIndicator (Disponibles) o setGroupIndicator (Disponibles) para
establecer estos indicadores. El estilo predeterminado para una ExpandableListView ofrece
indicadores que se muestran junto a Vistas dadas al ExpandableListView. Los diseos
android.R.layout.simple_expandable_list_item_1
y
android.R.layout.simple_expandable_list_item_2
(que
debe
ser
usado
con
SimpleCursorTreeAdapter) contienen la informacin de posicin preferida para los indicadores.
Pgina 14 de 17
5. SCROLLVIEW
Contenedor de diseo para una jerarqua de vistas que se pueden desplazar por el usuario,
permitiendo que sea ms grande que la pantalla fsica. Un ScrollView es un FrameLayout, lo que
significa que debe colocar a un nio en ella que contiene todo el contenido para desplazarse;
este nio puede ser en s mismo un controlador de distribucin con una compleja jerarqua de
objetos. Un nio que se utiliza a menudo es un LinearLayout en una orientacin vertical,
presentando un conjunto vertical de elementos de nivel superior que el usuario puede
desplazarse por.
6. HORIZONTALSCROLLVIEW
Contenedor de diseo para una jerarqua de vistas que se pueden desplazar por el usuario,
permitiendo que sea ms grande que la pantalla fsica. Un HorizontalScrollView es un
FrameLayout, lo que significa que debe colocar a un hijo en ella que contiene todo el contenido
para desplazarse; este hijo puede ser en s mismo un controlador de distribucin con una
compleja jerarqua de objetos. El TextView clase tambin se encarga de su propio
desplazamiento, por lo que no requiere una HorizontalScrollView, pero utilizando los dos juntos
es posible lograr el efecto de una vista de texto dentro de un contenedor ms grande.
HorizontalScrollView slo es compatible con el desplazamiento horizontal. Para el
desplazamiento vertical, utilice uno ScrollView o ListView.
7. SEARCHVIEW
Un widget que proporciona una interfaz de usuario para que el usuario introduzca una consulta
de bsqueda y presentar una solicitud a un proveedor de bsqueda. Muestra una lista de
sugerencias de consulta o resultados, si est disponible, y permite al usuario seleccionar una
sugerencia o resultado para lanzarse. Cuando se utiliza el SearchView en una Barra de acciones
como una vista de accin para un elemento de men plegable, tiene que ser ajustado a iconizada
por defecto usando setIconifiedByDefault (verdadero). Este es el valor por defecto, as que nada
hay que hacer. Si desea que el campo de bsqueda para ser siempre visible, a continuacin,
llamar setIconifiedByDefault (falso).
8. TABHOST
Recipiente para una vista de la ventana con pestaas. Este objeto tiene dos hijos: un conjunto
de etiquetas de la ficha que el usuario hace clic para seleccionar una ficha especfica, y un objeto
FrameLayout que muestra el contenido de esa pgina. Los elementos individuales se controlan
normalmente el uso de este objeto contenedor, en lugar de establecer los valores de los propios
elementos secundarios.
9. VIDEOVIEW
La clase VideoView puede cargar imgenes de diversas fuentes, se encarga de calcular su
medicin del video para que pueda ser utilizado en cualquier controlador de distribucin, y
ofrece diversas opciones de visualizacin, como la escala y tintado.
Pgina 15 de 17
Pgina 16 de 17
Le recomendamos que use DialogFragment para acoger cada vez o selector de fechas. El
DialogFragment gestiona el ciclo de vida de dilogo para usted y le permite mostrar los
recolectores en diferentes configuraciones de diseo, como en un dilogo bsico en telfonos o
como una parte incorporada de la disposicin en las pantallas grandes.
CONCLUSIONES
1. En Android podemos encontrarnos con una variedad de componentes para realizar el
interfaz, la cual es de mucha importancia para poder empezar a desarrollar de una app
mvil.
2. Es esencial conocer las estructuras y ms que todo comprender el porqu del cdigo
que aplicaremos al momento de desarrollar nuestra app.
3. Todos y cada uno de los componentes estudiados tienen sus propias caractersticas
siendo algunas subclases de otras la cual nos facilita saber su funcin.
RECOMENDACIONES
Es importante tomar en cuenta cuales son los componente que van de la mano para no tener
problemas en nuestro desarrollo al momento de querer realizar una actividad.
BIBLIOGRAFA
Pgina 17 de 17