Llegamos al momento de comenzar a trabajar en el diseño de la interfaz dentro de nuestro curso de programación en Android. El diseño de la interfaz se hace en el fichero main_activity.xml, para lo cual se hace uso del lenguaje XML, el cual como sabemos sigue las mismas reglas que HTML.
En XML, usaremos etiquetas, las cuales se encierran entre signos de «<» y «>», a las etiquetas, les puede corresponder una etiqueta de apertura y una de cierre, la cual se diferencia por incluir una diagonal, como en el siguiente ejemplo:
<LinearLayout> </LinearLayout>
Otras etiquetas no poseen etiquetas de cierre, por lo que antes del signo de «>» deberán incluir la diagonal como vemos a continuación
<TextView />
La etiquetas tienen atributos, con los cuales especificamos características del objeto que estamos colocando en la interfaz, estas suelen comenzar con » android:» como vemos a continuación
<TextView android:layout_width=»wrap_content» />
Los atributos deben tener un valor asignado, el cual es encerrado entre comillas, como en el ejemplo que vemos el atributo es android:layout_width y el valor asignado a través del signo igual para este atributo es rap_content, una etiqueta puede tener muchos atributos.
Las etiquetas pueden contener a otras etiquetas, como lo vemos en la imagen con que comenzamos el post en el que la etiqueta LinearLayout encierra a la etiqueta TextView, en este punto debemos observar que ex importante el uso de las mayusculas y las minúsculas en los nombres de las etiquetas y los atributos.
A continuación veremos algunos atributos que son comunes a la mayoría de la etiquetas, ya de definen su tamaño y posición dentro de la interfaz.
layout_width y layout_height
Estos dos atributos van a establecer la anchura y la altura de una vista o contenedor, los valores para estos atributos pueden ser:
- wrap_content : Este valor indica que el tamaño del objeto se ajustara al contenido del mismo.
- match_parent: Este valor indica que el objeto tendrá el mismo tamaño (ancho y/o alto) que su contenedor.
A continuación vemos un ejemplo en el que la altura del botón se ajusta al contenido y la anchura se ajusta al tamaño del contenedor.
- tamaño fijo: Se puede indicar también el tamaño del objeto en varias medidas como:
- dp o dip: es la medida relativa a la densidad de pixeles.
- px : indica la medida de un elemento en pixeles.
- pt: indica una medida en puntos.
- sp: significa escala independiente de pixeles, es ideal para definir tamaños de texto.
margin y padding
Estos dos atributos funcionan igual que en CSS, funcionan de la siguiente forma:
- Margin: Se usa para establecer un espacio o margen que el objeto tendrá a su alrededor, se mide del borde del objeto hacia afuera.
- Padding: Se usa para definir un espacio o margen interior, que el objeto aplicara a su contenido, se mide del borde del objeto hacia adentro.
Ambas medidas pueden ser generales o especificas, de tal forma que podemos especificar una medida general para todos los lados de la figura o se puede especificar por cada lado, de tal forma que margin_top o padding_top, especificaran el margen superior, veamos un ejemplo de su uso a continuación
gravity y layout_gravity
Estos atributos determinan la alineación vertical y horizontal en el objeto, si se usa gravity es que nos referimos a la alineación del contenido del objeto y si usamos layout gravity nos referimos a la alineación del objeto dentro de su contenedor
Para terminar les dejamos el video en donde mostramos de una forma mas practica los temas tratados
Sistemasumma.com 