Scribd
Cargar
55 vistas18 páginas

Jerarquía y Tipos de Layouts en Android

Este documento presenta una introducción a los conceptos básicos de diseño de interfaces de usuario en Android, incluyendo la jerarquía de clases, los componentes más utilizados como TextView y Button, el patrón Composite, las relaciones entre padres e hijos, las ventajas del diseño XML frente al código, la asignación de IDs a Views, parámetros importantes como layout_width y layout_height, y diferentes tipos de layouts como LinearLayout y ConstraintLayout. Explica conceptos clave como constraints, helpers y cadenas en ConstraintLayout.

Cargado por

victororue
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd
55 vistas18 páginas

Jerarquía y Tipos de Layouts en Android

Este documento presenta una introducción a los conceptos básicos de diseño de interfaces de usuario en Android, incluyendo la jerarquía de clases, los componentes más utilizados como TextView y Button, el patrón Composite, las relaciones entre padres e hijos, las ventajas del diseño XML frente al código, la asignación de IDs a Views, parámetros importantes como layout_width y layout_height, y diferentes tipos de layouts como LinearLayout y ConstraintLayout. Explica conceptos clave como constraints, helpers y cadenas en ConstraintLayout.

Cargado por

victororue
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PPTX, PDF, TXT o lee en línea desde Scribd

Universidad Nacional de La

Matanza
Prof. Fabio Negri
Prof. Sebastián Pardo
Agenda

Jerarquía de clases
Componentes más utilizados
Patrón Composite
Padres e hijos
XML vs Código
IDs de Views
Parámetros importantes
LinearLayout
ConstraintLayout
Jerarquía de clases
Componentes más utilizados

TextView
EditText
ImageView
Toolbar
Button / ImageButton
ConstraintLayout
LinearLayout
View
Patrón Composite
Padres e hijos

- Todos los objetos quedan contenidos en una estructura de árbol.

- El método setContentView() de la Actividad recibe la raíz de ese árbol.

- Cada layout debe tener una única raíz.

- Cada ViewGroup impone restricciones de posición y tamaño a sus hijos.

- Las hojas del árbol son las últimas en renderizarse, y pueden llegar a ser
XML vs código

Un layout puede crearse de dos maneras:

● En un archivo XML.
● Con código Kotlin: Instanciando los objetos View e insertándolos en
runtime dentro de su padre.

El XML permite separar la visualización del comportamiento.


Facilita la lectura de la composición de la pantalla.
En runtime puede variarse el XML que se utiliza en una Actividad en base a
propiedades del teléfono.
IDs de Views

El atributo android:id identifica al objeto View de manera unívoca dentro del árbol.

En el XML se define como un String

● android:id=”@+id/descripcion”
● La @ indica que se utiliza un recurso.
● El + indica que ese recurso es nuevo, y debe agregarse a [Link].

¿Cómo referencio a un View?

● Desde Kotlin: findViewById<>([Link]);


● Desde XML: android:below=”@+id/descripcion”
Parámetros importantes

Cada ViewGroup define ciertos parámetros que limitan la posición y tamaño de sus hijos.

Entre ellos, existen dos obligatorios:

● layout_width
● layout_height

Cuyos valores posibles son:

● wrap_content
● match_parent
● Tamaño explícito en dps
Layouts
FrameLayout

Es el layout más básico y sencillo de todos.

Ubica a todos sus hijos en la posición superior izquierda, uno por encima del
otro, salvo que se utilice el atributo layout_gravity.

Generalmente se utiliza para ocupar un espacio fijo en la pantalla, y suele tener


un único subview.
LinearLayout

Ubica a todos sus hijos en la misma dirección

● android:orientation=”horizontal”
● android:orientation=”vertical”

Soporta un atributo weightSum, el cual


permite definirle un weight a cada uno de sus
hijos. Esto es útil para definir qué proporción
de la pantalla debe ocupar cada uno de esos
View.
ConstraintLayout

- Nos permite crear layouts complejos sin necesidad de anidar demasiados


ViewGroups, lo que se traduce en una jerarquía de vistas más plana y por
ende performante

- Es un reemplazo natural de RelativeLayout (y PercentFrameLayout,


PercentRelativeLayout…)

- Es necesario agregar una dependencia para poder utilizarla


ConstraintLayout
¿Cómo funciona?

- Se definen relaciones (constraints) respecto a otras vistas hermanas, la vista


parent o helpers.
- layout_width y layout_height siguen siendo obligatorios y pueden tomar tres
valores:
- tamaño fijo en dps (ej: 150dp)
- wrap_content
- "Match constraints" -> Se representa con el valor 0dp NO se usa match_parent !
- Es obligatorio también definir al menos 1 constraint horizontal y 1 vertical.
ConstraintLayout
Helpers

- Son vistas cuya única función es ayudarnos a posicionar otras vistas


- No se dibujan en runtime

Ej:

- Guideline
- Space
- Barrier
- Group
ConstraintLayout
¿Qué otras cosas puedo ver?

- Bias
- Chains
- Percentage
- Dimension Ratio
- Circular position

Y próximamente MotionLayout
¿Preguntas?
Fin

También podría gustarte