-
7/22/2019 Layouts 1
1/32
COMPONENTES DE UNA PANTALLA
Ing. Gustavo Ivan Vega Olvera
-
7/22/2019 Layouts 1
2/32
View
Es la unidad bsica de la interfaz grafica de
usuario y representa un widget que tiene una
apariencia en la pantalla
-
7/22/2019 Layouts 1
3/32
Clasificacin
Basic views
TextView
EditText EditText
Button BotnImageButton ImageButton
CheckBox CheckBox
ToggleButton ToggleButtonRadioButton RadioButton
RadioGroup RadioGroup
-
7/22/2019 Layouts 1
4/32
Clasificacin
Picker Views
TimePicker
DatePicker
List views
ListView
Spinner View
-
7/22/2019 Layouts 1
5/32
Clasificacin
Display views
ImagenSwitchwer
Menus
Gallery
Additional Views
AnalogClock
DigitalClock views
-
7/22/2019 Layouts 1
6/32
ViewGroup
Es un objeto especial de view cuya funcin es
contener y controlar la lista de views y de
otros viewgroups. Los viewgroups permiten
aadir estructuras a la interfaz y acumular
complejos elementos en la pantalla que son
diseccionados por una sola entidad.
-
7/22/2019 Layouts 1
7/32
La clase viewgroup es til como base de la
clase layouts, que son subclases
implementadas que proveen los tipos ms
comunes de los layouts de pantalla. Los
layouts proporcionan una manera de construir
una estructura para una lista de views.
-
7/22/2019 Layouts 1
8/32
Eficiencia
Hay un lmite de Views que puede tener una
actividad. Si se sobrepasa, se cierra la
actividad
La UI de la aplicacin dibuja un rbol, donde
la idea es que ste sea todo lo ancho que
queramos, pero lo ms bajo posible
-
7/22/2019 Layouts 1
9/32
Layouts Android organiza las componentes visuales (Button,
EditText, TextView
etc.) en pantalla mediante contenedores llamados Layout.
Un layout define la estructura visual de una interfaz de
usuario
(actividades o widgets).
Maneras de declarar un layout:
Declarar elementos UI en un XML Instanciar elementos UI en
tiempo de ejecucin
Android permite utilizar una de ellas o ambas para la declaracin
y gestin de la
interfaz de usuario de la aplicacin.
Declarar una interfaz de usuario con un XML permite separar
la
presentacin del cdigo de aplicacin que controla su
comportamiento.Esto significa que la UI se puede modificar o
adaptar sin tener que
modificar cdigo fuente y recompilar. Por ejemplo se pueden
crear
diseos en XML para diferentes orientaciones, tamaos de pantalla
y
diferentes idiomas.
-
7/22/2019 Layouts 1
10/32
Layouts Escribir el cdigo XML
Un archivo XML se construye de la misma manera que se creauna
pagina web.
Cada interfaz de usuario debe contener un elemento raz
(View o ViewGroup).
Definido el elemento raz se pueden ir anidando
elementossecundarios para construir gradualmente una jerarqua,
la
cual definir un recurso layout.
-
7/22/2019 Layouts 1
11/32
Layouts Cargar el recurso XML
LosLayouts deben ser almacenados con la extensin xml enen el
directorio res/layout/ que se encuentra dentro del
proyecto android.
Cuando la aplicacin es compilada los Layouts XML son
compilados en un recurso View. El recurso Layout debe ser
cargado en el cdigo de la activity dentro del mtodo
onCreatecomo se muestra a continuacin:
-
7/22/2019 Layouts 1
12/32
Atributos
Cada objeto View y ViewGroup soportan una variedad deatributos.
Algunos atributos son especficos de cada objeto.
IDtodo objetoViewpuede tener un id entero asociado con l,
de tal manera que este pueda ser identificado de manera
nica dentro del rbol. Cuando se compila la aplicacin, este
id ser referenciado como un entero. Este ID se asigna
tpicamente en el archivo XML como una cadena en el
atributo ID. Sintaxis dentro del XML.
El@al inicio de la cadena indica que el analizador XML debe
expandir
el entero ID a una cadena e identificarlo como un ID de los
recursos.
El simbolo (+)significa que se trata de un nuevo nombre de
recurso
que debe ser creado y aadido a nuestros recursos (en el
archivo
R.java).
-
7/22/2019 Layouts 1
13/32
Definir y referenciar objeto View
1. Definir un View/widget en el archivo Layout y asignarle
unidentificador nico.
2. Crear una instancia (referencia) del objeto View
(Tpicamentese realiza dentro del mtodoonCreate()de la
actividad).
-
7/22/2019 Layouts 1
14/32
Parmetros del Layout Los atributos del XML Layout con nombre
layout_[algo]definen los
atributos apropiados para elVIEWque esta dentro de
unViewGroup.
Cada clase ViewGroup implementa una subclase que hereda de
ViewGroup.LayoutParams. Esta subclase contiene los tipos de
propiedades que definen el tamao y la posicin de cada View
hijo,
segn sean apropiados para elViewGroup.
-
7/22/2019 Layouts 1
15/32
Parmetros del Layout
Todos los VIewGroup incluyen un ancho y un alto(layout_width y
layout_height), y cada View es
necesario definirlas. Muchos LayoutParams incluyen
mrgenes y bordes opcionales.
Se puede especificar el ancho y alto con unidadesexactas. Pero
si no se desea se pueden utilizar las
siguientes contantes para determinar ancho y alto
delView. wrap_content:Ajusta al contenido del View.
match_parent: Ajusta al tamao delView o ViewGroup padre.
-
7/22/2019 Layouts 1
16/32
Ubicacin de View en Layout
Una View tiene una ubicacin, expresado como un par decoordenadas
izquierda y superior, y dos dimensiones,
expresada como un ancho y un altura. La unidad para la
ubicacin y las dimensiones es el pxel.
Para recuperar la ubicacin de un View invocamos los
mtodos getLeft() y getTop(). Los mtodos devuelven la
ubicacin delViewcon respecto a su View padre.
Existe tambin los metodosgetRight()ygetBottom().
-
7/22/2019 Layouts 1
17/32
LinearLayout Linear layout es un contenedor que establece
los
componentes visuales uno junto al otro, ya sea
horizontal o verticalmente.
Se crea una barra de desplazamiento si la longitud de
la ventana excede la longitud de la pantalla.
-
7/22/2019 Layouts 1
18/32
LinearLayout
Linear layout es un contenedor que establece los
componentesvisuales uno junto al otro, ya sea horizontal o
verticalmente.
Se crea una barra de desplazamiento si la longitud de la
ventanaexcede la longitud de la pantalla.
Para configurar un LinearLayout, es indispensable conocer cinco
reasprincipales de control adems el contenido del contenedor:
La orientacin
El modelo de relleno
El peso
La gravedad
El relleno.
-
7/22/2019 Layouts 1
19/32
Orientacin
La orientacin (orientation) nos ayudara indicar si el
LinearLayout representauna columna o una fila.
Es decir si se establecern loscomponentes de manera vertical o
demanera horizontal.
android:orientation=vertical
android:orientation=horizontal
-
7/22/2019 Layouts 1
20/32
El modelo de relleno A todos los elementos contenidos en un
LinearLayout
debemos definirles un valor para los
atributosandroid:layout_widthyandroid:layout_height.
Tenemos 3 posibles opciones:
Asignar una dimensin especfica, por ejemplo:150px
Definir el valor wrap_content: con este indicamos a la
aplicacin que el elemento slo deber ocupar lo
correspondiente a su tamao natural.
Definir el valor fill_parent:indica que el elemento es libre
de utilizar todo el espacio disponible del contenedor en elque
se encuentra.
-
7/22/2019 Layouts 1
21/32
Peso (Weight)
LinearLayout es compatible con laasignacin de peso para cada
Viewhijo
con el atributolayout_weight.
Este atributo asigna un valor de"importancia" a unViewen trminos
de
la cantidad de espacio que se debe
ocupar en la pantalla. Un valor de peso
ms grande permite que se expanda
para llenar cualquier espacio restante en
la vista padre.
-
7/22/2019 Layouts 1
22/32
Gravedad Por default, los elementos se alinean a partir
de la esquina superior izquierda.
Para cambiar este flujo natural utilizamos el
atributo: android:layout_gravity paraindicarle al elemento y a
su contenedor cmodeber alinearse en la pantalla.
Tambin se puede realizar en tiempo deejecucin llamando el
mtodosetGravity().
-
7/22/2019 Layouts 1
23/32
Para una columna de widgets, los valoresque le podemos asignar a
este atributo
son:left, center_horizontalyright.
Para una fila de elementos, se toman encuenta los textos que los
acompaan demodo que queden alineados en la lneade base, pero se
puede indicar un valor
de gravedad de center_verticalpara loselementos queden centrados
de maneravertical.
-
7/22/2019 Layouts 1
24/32
Relleno El relleno es un valor que indica el espacio
existente entre los lmites que ocupa el
widget en s y la lnea que marca el inicio
del contenedor. La propiedad android:paddingnos permite
definir un slo valor de relleno para los
cuatro lados del widget.
-
7/22/2019 Layouts 1
25/32
Si queremos que el relleno aplique
nicamente a alguno de los lados del
elemento o definir valores distintos paracada lado, podemos
utilizar las
propiedades:
android:paddingLeft
android:paddingRight
android:paddingTop
android:paddingBottom.
-
7/22/2019 Layouts 1
26/32
Para definir el valor de este atributo tenemos unaserie de
unidades de medidas que podemos utilizar:
dp
pxeles independientes de la densidad:es una
unidad abstracta que se basa en la densidad depxeles de la
pantalla. Sirve para garantizar que lascosas tengan las mismas
medidas fsicas en cualquierpantalla. Ejemplo 63dp
sppxeles independientes de la escala:es igual quela unidad dp,
pero escalada segn el tamao defuente escogido por el usuario. Es la
unidadrecomendada para definir el tamao de los textos quese
muestran en pantalla.
ptpuntos: representan 1/72 partes de una pulgada(o, ms o menos,
1/28 de un centmetro) en cualquierpantalla.
-
7/22/2019 Layouts 1
27/32
pxpxeles: no se recomienda utilizar esta
unidad, porque las pantallas tienen diferentesdensidades y
tamaos.
mm
milmetros: medida directa del elemento
en pantalla, en unidades ms internacionales.
in
pulgadas: medida directa del elemento enpantalla, en unidades
anglosajonas
-
7/22/2019 Layouts 1
28/32
Practica
Realizar la siguiente
interfaz de usuario
utilizando un
contenedorLinearLayout con sus
parmetros
apropiados.
-
7/22/2019 Layouts 1
29/32
AbosluteLayout
Definicin
AbsoluteLayout: aade las
vistas dando coordenadas
absolutas. Esto quiere decirque nunca variarn sus
coordenadas.
Ejemplo Visual
-
7/22/2019 Layouts 1
30/32
AbsoluteLayout
Los layouts son subclases de ViewGroup,
establecen de qu manera son repartidos los
elementos visuales en la pantalla.
-
7/22/2019 Layouts 1
31/32
AbsoluteLayout
Este layout es una capa donde se utilizan
coordenadas X e Y para indicar dnde colocar
los elementos dentro del diseo. En cada
elemento del cdigo se le indicar el valor deX y de Y.
-
7/22/2019 Layouts 1
32/32
FIN
