Programación Android 4: Introducción a XML


Captura de pantalla 2015-03-31 a las 4.15.32 p.m.

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.

wrap_content

 

  • tamaño fijo: Se puede indicar también el tamaño del objeto en varias medidas como:
  1. dp o dip: es la medida relativa a la densidad de pixeles.
  2. px : indica la medida de un elemento en pixeles.
  3. pt: indica una medida en puntos.
  4. 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

margin

 

 

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

garvity

 

Para terminar les dejamos el video en donde mostramos de una forma mas practica los temas tratados

 

Anuncios

Acerca de sistemasumma

Blog dedicado a la tecnología y a todos los estudiantes de sistemas, informatica, computación y afines
Vídeo | Esta entrada fue publicada en Android y etiquetada , , , , , , , , , . Guarda el enlace permanente.

¿Qué estas pensando?

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s