Mas Información y Utiles

MONOGRAFIA




DESCARGAR MONOGRAFIA


DESCARGAR TRIPTICO

=

Video sobre los tipos de layout

DESCARGAR VIDEO

Conclusiones

Como resultado de la investigación estadística presentada, hemos concluido que los layouts son elementos que se utilizan en el diario vivir de un Desarrollador Android, sin embargo es necesario tener en claro cuál es la mejor opción ante un diseño particular.

En este artículo hemos visto layouts populares para crear la UI. Su uso depende de la experiencia de usuario que deseas proporcionar junto al nivel de rendimiento de tu app.

TIPOS DE LAYOUT

LinearLayout (Horizontal y Vertical)

El Linear Layout es el más sencillo. Dentro de él los elementos son ubicados en forma linear a través de columnas o filas. Posee un atributo que permite modificar su orientación, ya sea para presentar los elementos horizontal o Verticalmente.

Característica:

Realiza este proceso de forma secuencial y nunca coloca un elemento sobre otro. Además, también podemos aplicarle el parámetro gravity.

Funcionalidad:

Al utilizar LinearLayout este distribuye por defecto el espacio para cada uno de los elementos que agregamos. El peso permite variar este comportamiento si le asignamos a cada elemento de pantalla un nivel de importancia. Este se verá reflejado en el espacio ocupado.

Ejemplo Práctico:

LayoutVertical:                                                            

LayoutHorizontal: 

  

Grid Layout

El Gridlayout básicamente permite definir un grid con filas y columnas y los elementos en el contenedor se ubican en las ‘celdas’ especificando un numero de columna y fila (row).

Características

Funcion:

Gridlayout,  no es más q otro manejador de diseño, la cual su particularidad, consiste en crear una matriz, totalmente configurada.

La rejilla se compone de un conjunto de líneas infinitamente delgadas que separan el área de visualización en las células. A través de la API, las líneas de cuadrícula son referenciados por los índices de la cuadrícula. Una cuadrícula con N columnas tiene N + 1 índices de rejilla que van de 0 a través de N , ambos inclusive. Independientemente de cómo se configura GridLayout, índice de cuadrícula 0 se fija al borde de ataque del índice de contenedor y la red N se fija a su borde de salida (después de relleno se tiene en cuenta).

Ejemplo Práctico:

Relative Layout

El layout RelativeLayout es el que dispone el ADT por defecto cuando creamos un proyecto en Android. Hay varias posibilidades cuando empleamos el RelativeLayout. Primero podemos alinear un control con respecto al Layout que lo contiene.

Permite comenzar a situar los elementos en cualquiera de los cuatro lados del contenedor e ir añadiendo nuevos elementos pegados a estos.

Caracteristica:

Ejemplo Práctico:

 

FrameLayout

Diseño de trama está diseñado para bloquear un área en la pantalla para mostrar un solo elemento. Generalmente, FrameLayout debe usarse para mantener una vista de un solo hijo, porque puede ser difícil organizar las vistas de los niños de una manera que sea escalable a diferentes tamaños de pantalla sin que los niños se superpongan entre sí.

Funcionalidad:

Todos los objetos que se introduzcan se situarán en la esquina superior izquierda, por lo que si hay más de uno, se ocultarán total o parcialmente entre ellos, salvo que los declaremos como transparentes. Por este motivo, su uso ideal es el de mostrar una sola imagen que complete toda la pantalla.

Características:

Los componentes incluidos en un FrameLayout podrán establecer sus propiedades

android:layout_width y android:layout_height, que podrán tomar los valores

“fill_parent” (para que el control hijo tome la dimensión de su layout contenedor) o

“wrap_content” (para que el control hijo tome la dimensión de su contenido).

Ejemplos Prácticos:

FRAGMENT

Un Fragment representa un comportamiento o una porción de interfaz de usuario en una Activity . Puede combinar varios fragmentos en una sola actividad para crear una interfaz de usuario de varios paneles y reutilizar un fragmento en varias actividades. Se puede pensar en un fragmento como una sección modular de una actividad, que tiene su propio ciclo de vida, recibe sus propios eventos de entrada y que puede agregar o quitar mientras se está ejecutando la actividad (algo así como una "sub actividad" que puede Reutilización en diferentes actividades).

Función

Estas nuevas entidades permiten reusar código y ahorrar tiempo de diseño a la hora de desarrollar una aplicación. Los fragmentos facilitan el despliegue de tus aplicaciones en cualquier tipo de tamaño de pantalla y orientación.

Otra ventaja de usarlos es que permiten crear diseños de interfaces de usuario de múltiples vistas. ¿Qué quiere decir eso?, que los fragmentos son imprescindibles para generar actividades con diseños dinámicos, como por ejemplo el uso de pestañas de navegación, expand and collapse, stacking, etc.

 Ejemplos Prácticos:

Table Layout

Un TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo las filas y columnas necesarias, y la posición de cada componente dentro de la tabla.

Función

Utilizando esta opción, se consigue una distribución tabular de los elementos de nuestra interfaz. El comportamiento es similar al empleado en HTML: se definen las filas, y dentro de ellas, las columnas. La tabla tendrá tantas columnas como la fila con un mayor número de celdas. En cada casilla, se podrá introducir el objeto deseado (e incluso dejarla vacía). También existe la posibilidad de combinar celdas.

Características

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 ayudarán a modificar este comportamiento:

android:stretchColumns. Indicará las columnas que pueden expandir para absorver el espacio libre dejado por las demás columnas a la derecha de la pantalla.

android:shrinkColumns. Indicará las columnas que se pueden contraer para dejar espacio al resto de columnas que se puedan salir por la derecha de la palntalla.

android:collapseColumns. Indicará las columnas de la tabla que se quieren ocultar completamente.

Todas estas propiedades del TableLayout pueden recibir una lista de índices de columnas separados por comas (ejemplo: android:stretchColumns=”1,2,3″) o un asterisco para indicar que debe aplicar a todas las columnas (ejemplo: android:stretchColumns=”*”).

Otra característica importante es la posibilidad de que una celda determinada pueda ocupar el espacio de varias columnas de la tabla (análogo al atributo colspan de HTML). Esto se indicará mediante la propiedad android:layout_span del componente concreto que deberá tomar dicho espacio.

Ejercicio Práctico:

TABLEROW

TableRow es, a su vez, otra especialización de LinearLayout. Esta vez de un LinearLayout horizontal. Así que resulta evidente que, lo que se nos vende como una estructura de tabla, es en realidad un grupo de LinearLayout horizontales dentro de un LinearLayout vertical.

Esta organización tampoco resulta tan extraña. De hecho, es muy similar a la de las tablas en HTML, con las que este diseño comparte otras características, como veremos a continuación.

Resulta evidente que cada TableRow representa una fila de la tabla y que las vistas que contengan harán las veces de columnas. En concreto, cada vista que se añade a un TableRow va a parar a una columna diferente. Por ese motivo se suele decir que cada celda de un TableLayout sólo puede contener una vista. No obstante, nada impide que cualquiera de esas vistas sea un diseño y que contenga, a su vez otras vistas dentro.

Lo que diferencia a TableLayout de una estructura similar creada con varios LinearLayout es el tratamiento global que le da a las vistas que se incluyen en todos los TableRow. Para empezar, aunque cada TableRow tenga una cantidad diferente de vistas en su interior, el conjunto se representará como una tabla donde todas las filas tienen el mismo número de columnas. La cantidad total de columnas que tendrá la tabla la determina el TableRow que más vistas incluya. De forma similar, el ancho de cada columna también vendrá determinado por la vista con mayor anchura de todas las incluidas en esa columna, aún estando en diferentes TableRow.

Parámetros de TableRow

Como ya hemos comentado, TableRow es también una especialización de LinearLayout. Por lo tanto, es un diseño. Y como tal puede proporcionar parámetros para que se utilicen como atributos de las vistas que se incluyan en él.

En concreto, la clase TableRow.LayoutParams proporciona dos:

android:layout_column: sirve para colocar la vista a la que se aplica en una columna diferente a la que le correspondería según el orden en el que se ha incluido en el TableRow.

android:layout_span: permite que una vista ocupe más de una columna. Tiene que tener un valor numérico igual o superior a "1". El valor "1" es el predeterminado.

Ejercicio Práctico:

Space

El space es una subclase de vista ligera que se puede utilizar para crear espacios entre los componentes en los diseños de propósito general.

Include Other Layout

Si se refiere a la <include />, que sirve para incluir una "sub-árbol" en el lugar donde se declara. En general, se utiliza a menudo cuando se tiene un diseño que se puede reutilizar en otros diseños o declarada por separado para una mejor organización.

Cuenta con el atributo de diseño, donde se define la referencia a la disposición que desea incluir.

EjemploPractico:

Hablemos de Layouts

Definición

Un Layout es un elemento que representa el diseño de la interfaz de usuario de componentes gráficos como una actividad, fragmento o widget.

Ellos se encargan de actuar como contenedores de views para establecer un orden visual, que facilite la comunicación del usuario con la interfaz de la aplicación.

Un Layout es un recurso con el que puedes describir lo que quieres mostrar por pantalla y cómo lo quieres mostrar. La manera más común de crearlo es a través de un archivo XML.

El Layout es la interfaz de usuario que es la principal sección de interacción entre persona y dispositivo. A todas las funcionalidades disponibles se accede a través de la pantalla, que es por donde se muestra los controles. Es muy importante conseguir que el manejo sea intuitivo y sencillo, y que el aspecto visual sea atractivo y eso lo podemos lograr gracias a los tipos de Layouts.

Atributos

Todos los objetos View y ViewGroup admiten su propia variedad de atributos XML. Algunos atributos son específicos para un objeto View (por ejemplo, TextView admite el atributo textSize ), pero a esos atributos también los heredan otros objetos View que podrían extender esta clase. Algunos son comunes para todos los objetos View ya que se heredan desde la clase View raíz (como el atributo id). Otros atributos se consideran "parámetros de diseño" y son atributos que describen ciertas orientaciones de diseño del objeto View, tal como lo define el objeto principal ViewGroup de ese objeto.

ID

Cualquier objeto View puede tener un Id. con número entero asociado a él para identificar de forma exclusiva la vista en un árbol. Cuando se compila la aplicación, este ID se considera un número entero, pero el ID generalmente se asigna en el archivo XML del diseño como una string, en el atributo id. Este es un atributo XML común a todos los objetos View (definidos por la clase View) y lo usarás con mucha frecuencia. La sintaxis para un ID dentro de una etiqueta XML es la siguiente:

El símbolo arroba (@) al comienzo de la string indica que el analizador de XML debe analizar y expandir el resto de la string de ID e identificarla como un recursos de ID. El símbolo más (+) significa que es un nuevo nombre de recurso que se debe crear y agregar a nuestros recursos (en el archivo R.java). El framework de Android ofrece otros recursos de ID. Al hacer referencia a un ID de recurso de Android, no necesitas el símbolo más, pero debes agregar el espacio de nombres de paquete android de la siguiente manera:

Con el espacio de nombres de paquete android establecido, ahora hacemos referencia a un ID de la clase de recursos android.R, en lugar de la clase de recursos local.

Tamaño(width, height):

Para comprender este concepto vamos a guiarnos por un ejemplo. Supongamos que tenemos una serie de botones. Cada uno de estos botones tiene un tamaño natural basado en el largo del texto que contienen. La combinación de cada uno de los tamaños de los botones probablemente no coincidan exactamente con el ancho de la pantalla del dispositivo (tomando en cuenta que si hablamos de Android tenemos una amplia variedad de tamaños). De la misma forma, está el tema de qué hacer con el espacio restante de la pantalla que no está siendo utilizado.

Por esta razón, a todos los elementos contenidos en un LinearLayout debemos definirles un valor para los atributos android:layout_width y android:layout_height. Tenemos tres posibles opciones:

Se puede asignar una dimensión específica, por ejemplo: 150px que se deberá mostrar de esta forma sin importar la resolución de la pantalla que se tenga.

Se puede utilizar el valor wrap_content, por medio del cual le indicamos a la aplicación que el elemento sólo deberá ocupar lo correspondiente a su tamaño natural.

Por último, se puede utilizar el valor fill_parent (hasta la API 8) o match_parent (API 8 y superiores), que indica que el elemento es libre de utilizar todo el espacio disponible del contenedor en el que se encuentra.

Posición del diseño

Es posible recuperar la ubicación de una vista al invocar los métodos getLeft() y getTop(). El primero devuelve la coordenada izquierda, o X, del rectángulo que representa la vista. El segundo devuelve la coordenada superior, o Y, del rectángulo que representa la vista. Ambos métodos devuelven la ubicación de la vista respecto de su elemento primario. Por ejemplo, cuando getLeft() devuelve 20, significa que la vista se encuentra a 20 píxeles a la derecha del borde izquierdo de su elemento primario directo.

Además, se ofrecen varios métodos convenientes para evitar cálculos innecesarios, y se denominan getRight() y getBottom(). Estos métodos devuelven las coordenadas de los bordes derecho y superior del rectángulo que representa la vista. Por ejemplo, llamar a getRight() es similar al siguiente cálculo: getLeft() + getWidth().

Tamaño, relleno y márgenes

El primer par se conoce como ancho medido y altura medida. Estas dimensiones definen cuán grande quiere ser una vista dentro de su elemento primario. Las dimensiones medidas se pueden obtener llamando a getMeasuredWidth() y a getMeasuredHeight().

El segundo par se conoce simplemente como ancho y altura, o algunas veces ancho de dibujo y altura de dibujo. Estas dimensiones definen el tamaño real de la vista en la pantalla, al momento de dibujarlas y después del diseño. Estos valores pueden ser diferentes del ancho y la altura medidos, pero no necesariamente. El ancho y la altura se pueden obtener llamando a getWidth() y getHeight().

Para medir estas dimensiones, una vista considera su relleno. El relleno se expresa en píxeles para las partes izquierda, superior, derecha e inferior de la vista. El relleno se puede usar para desplazar el contenido de la vista una determinada cantidad de píxeles. Por ejemplo, un relleno izquierdo de 2 empuja el contenido de la vista 2 píxeles hacia la derecha del borde izquierdo. El relleno se puede ajustar usando el método setPadding(int, int, int, int) y se puede consultar llamando a getPaddingLeft(), getPaddingTop(), getPaddingRight() y getPaddingBottom().

Gravedad (gravity)

Hay un parámetro que nos permite controlar el alineamiento de las vistas contenidas en el diseño: la gravedad. Este parámetro, definido en LinearLayout.LayoutParams, y que se corresponde con el atributo android:Layout_gravity no es exclusivo de LinearLayout, FrameLayout también lo proporciona y, por herencia también TableLayout, TableRow e incluso RadioGroup. Los valores disponibles para el parámetro y el resultado obtenido con cada uno de ellos son comunes para todos estos diseños, por lo que les será de aplicación en los demás Layout.

Por defecto, los elementos se alinean a partir de la esquina superior izquierda. Por lo tanto, si creamos una fila de widgets de forma horizontal dentro de un contenedor de tipo LinearLayout, todos ellos se empezarán a alinear a partir de este punto y seguirá ese flujo hasta que todos los widgets aparezcan en la interfaz.

Para cambiar este flujo natural utilizamos el atributo android:layout_gravity en el archivo XML o desde el código Java con el método setGravity(). Al atributo android:layout_gravity se le asigna una cadena de texto que contiene uno o más de estos valores. Si hay más de uno se deparan mediante |. Para cada uno de estos valores existe una constante de igual nombre que se puede utilizar para asignar la gravedad mediante código Java. De forma similar, si en Java se usa más de una constante, se agregan mediante el operador lógico:

top y bottom: alinean el borde superior/inferior de la vista con el del área útil del diseño, sin alterar el tamaño de la vista.

left y right: alinean el borde izquierdo/derecho de la vista con el del área útil del diseño, sin alterar el tamaño de la vista.

center_horizontal y center_vertical: centran la vista horizontal o verticalmente en el área útil del diseño sin alterar su tamaño.

center: centra la vista vertical y horizontalmente, de forma simultánea, en el área útil del diseño sin alterar su tamaño

Definicion de Android

Android es un sistema operativo basado en el núcleo Linux. Fue diseñado principalmente para dispositivos móviles con pantalla táctil, como teléfonos inteligentes, tablets o tabléfonos; y también para relojes inteligentes, televisores y automóviles.

Historia de android

Android fue creado y diseñado por la empresa registrada como Android Inc, fundada en 2003 en Palo Alto, California. Es un sistema operativo basado en Linux que desde sus inicios fue un sistema creado y enfocado únicamente a sistemas dotados de pantalla táctil. La historia del androide verde, logo que representa a este sistema operativo, puede catalogarse de muy peculiar.

La empresa Android. Inc  en el año 2005 entro en una situación económica un poco delicada y cuando estaba al borde de su cierre, Google adquirió la compañía. Dos años después de que Google.Inc se hiciera con la compañía la presentó en la fundación "Open Handset Alliance". Este es un consorcio de compañías que fabrican hardware y software, y que promueven los "Open Source" (Código Abierto), que es gratuito y de libre modificación siempre que poseas conocimientos de desarrollo y programación. Google este mismo año lanzó al mercado su primer smartphone dotado de Android, el HTC DREAM.

Empezemos

En la actualidad la masificación y constante crecimiento de la tecnología para dispositivos móviles, ha generado la necesidad de desarrollar sistemas operativos independientes con capacidad de procesamiento de información,  conexión constante con la web y el poder para personalizar cada uno de ellos acomodándose así a los gustos de sus usuarios.

La interfaz de usuario es la principal sección de interacción entre persona y dispositivo. A todas las funcionalidades disponibles se accede a través de la pantalla, que es por donde se muestra los controles. Es muy importante conseguir que el manejo sea intuitivo y sencillo, y que el aspecto visual sea atractivo y eso lo podemos lograr gracias a los tipos de Layouts.

Android es un sistema operativo y una plataforma software,  basado en Linux para teléfonos móviles.  Android permite programar en un entorno de trabajo (framework) de Java, aplicaciones sobre una máquina virtual. Además, lo que le diferencia de otros sistemas operativos, es que cualquier persona que sepa programar puede crear nuevas aplicaciones, widgets, o incluso, modificar el propio sistema operativo, dado que Android es de código libre, por lo que sabiendo programar en lenguaje Java, va a ser muy fácil comenzar a programar en esta plataforma.

Es por ello que en el siguiente trabajo se emplea el programa Eclipse para desarrollar una serie de ejercicio de acuerdo se va avanzando en el tema.

El presente informe busca cumplir con los siguientes objetivos:

-Establecer las definiciones de los tipos de Layouts para mejorar la comprensión de los  estudiantes interesados en el tema.

-Desarrollar una serie de ejercicios para involucrarse con las aplicaciones ya sea Android Estudio o Eclipse.

-Facilitar la comprensión de los tipos de Layouts a los que recién están aprendiendo la aplicación.

-Desarrollar una guía de consulta acerca de los tipos de Layouts, sus características y funcionalidad para dispositivos móviles.

Asi comienza todo :v