UNIVERSIDAD POLITÉCNICA AMAZÓNICA
"Año del Diálogo y Reconciliación Nacional"
"Año del Diálogo y Reconciliación Nacional"
CARRERA:
INGENIERÍA DE SISTEMAS Y TELEMÁTICA
CURSO:
CURSO:
ELECTIVO_403
TEMA:
LAYOUTS
LAYOUTS
INTEGRANTES:
CHUQUIHUANGA GUERRERO LENABITH.
FLORES CHINGUEL LUZ ISELA.
FLORES CHINGUEL LUZ ISELA.
PEREZ DIAZ LUZ CLARITA.
DOCENTE:
MARCO A.PORRO CHULLI
DOCENTE:
MARCO A.PORRO CHULLI
2018
Bagua grande-Utcubamba
1.-CONTENIDO
Desde la propia guía de desarrollador de Android Studio, se define un layout como una estructura visual para una interfaz de usuario, es decir, aquello que hace de intermediario entre el terminal móvil y el usuario. Un elemento de una interfaz de usuario (widgets o layouts) se puede declarar desde un fichero XML o en tiempo de ejecución de la aplicación.
Editar un layout en Android Studio
En el panel de la izquierda encontramos el navegador de los archivos del proyecto, que detallaremos más adelante. De momento, nos llega con saber que dentro de la carpeta Res > layout se encuentran los layouts de nuestro proyecto. Podemos crear tantos layouts como deseemos y editar cada uno por separado. El principal layout (o main layout) se crea al inicializar el proyecto con el nombre que le hayamos asignado, el nuestro en concreto se llama activity_main.xml.
La visualización en modo Design
Como podemos ver en la anterior imagen, existen dos modos de visualizar los layouts, en modo Design o en modo Text. En modo Desing podremos añadir elementos al layoutsimplemente arrastrándolos sobre él. En el panel de la derecha encontraremos las propiedades del propio layout y de los elementos que contiene.
La visualización en modo Text
Desde la visualización en modo Text podremos editar directamente el fichero XML en texto plano. Android Studio nos permite editar directamente los layouts, modificando a nuestro gusto su contenido. Cada atributo de cada elemento que se puede editar de manera visual en el modo Design, tiene su correspondencia en texto plano en modo Text. Más adelante veremos los diferentes tipos de layout en Android Studio.
Tipos FrameLayout, LinearLayout, RelativeLayout, TableLayout y
WebView
Esta entrada va a ser un
poco teórica, pero creo que es importante dar un conocimiento general de los
diferentes Layouts que disponemos para trabajar en Android, así
cuando nos llegue el momento de llevar a cabo el diseño de una aplicación nos
resulte un poco más sencillo elegir el Layout que necesitamos para
realizar nuestro diseño.
Un Layout es
un fichero XML y se encarga de establecer el diseño de la interfaz de usuario
(en inglés user interfaz (UI)). En la paleta de elementos que nos
ofrece Android Studio se encuentran los elementos disponibles para insertar en
nuestra aplicación. Para insertar estos elementos en nuestro dispositivo basta
con arrastarlos. El primer desplegable que nos ofrece la paleta de elementos
son los Layouts, estos Layouts se pueden definir como un
contenedor padre y según el tipo de Layout que empleemos los
elementos que insertemos se comportaran de una manera u otra.
Antes de empezar, os
recomiendo hacer lo que muestro en la siguiente imagen y así simplemente podéis
probar arrastrando elementos al azar y ver como van actuando en cada tipo de Layout.
Crear los ficheros XML manualmente, botón secundario sobre Layout, New,
File.
FrameLayout: generalmente este Layout suele usarse para
mostrar un único elemento en la UI. Android Stuido nos permite posicionar hasta
9 elementos, pero si posicionamos dos elementos en el mismo recuadro verde
veréis que se sobreponen y no son legibles.
LinearLayout: coloca los elementos unos detrás de otros de
manera lineal, o bien de forma vertical o bien de forma horizontal.
Tanto el Layout vertical
como el horizontal pueden ser padres e hijos unos de otros. El elemento
padre es capaz de contener uno o mas hijos, es decir tenemos un LinearLayout(Vertical) y
dentro de éste un LinearLayout(Horizontal), es decir, el
primero es el padre y el segundo es el hijo, porque el padre contiene al hijo.
TableLayout: dentro de este Layout podemos
definir filas y columnas para situar los elementos. En Android Studio,
directamente al arrastrar un elemento nos aparecerá una cuadricula verde en la
que podremos ir situando los distintos elementos. Básicamente, es una matriz de
elementos.
TableRow: debe ser usado como hijo de un TableLayout.
Básicamente éste Layout es una tabla de columnas.
GridLayout: es un elemento similar al TableLayout ya
que sus elementos se distribuyen en filas y columnas pero con el inconveniente
de que solo se puede utilizar a partir de la API 14.
RelativeLayout: nos permite colocar cada elemento de forma
relativa a cualquier elemento dentro del propio RelativeLayout.
Una vez que ya tenemos
una idea general de cada uno de los Layouts, os recomiendo que probéis a
diseñar pequeñas User Interface (UI) arrastando diferentes elementos y
distintos Layoutssimplemente arrastrándolos.
Para terminar, puede que
esto suene un poco aburrido y que no sea la mejor entrada hasta ahora, solo
decir que de mi poca experiencia programando en Android los Layouts que
mas he utilizado han sido los LinearLayout. Otra cosa importante es
que según el tipo de Layout que utilicemos los elementos pueden
tener distintos atributos. Los atributos más comunes son los que vamos a
conocer en la próxima entrada.
Ejemplos
Layout
FrameLayout
Éste es el más simple de todos los layouts de Android. Un FrameLayout coloca todos sus controles hijos alineados con su esquina superior izquierda, de forma que cada control quedará oculto por el control siguiente (a menos que éste último tenga transparencia). Por ello, suele utilizarse para mostrar un único control en su interior, a modo de contenedor (placeholder) sencillo para un sólo elemento sustituible, por ejemplo una imagen.
Los componentes incluidos en un FrameLayout podrán establecer sus propiedadesandroid: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).
Ejemplo:
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
LinearLayout
El siguiente layout Android en cuanto a nivel de complejidad es el LinearLayout. Este layout apila uno tras otro todos sus elementos hijos de forma horizontal o vertical según se establezca su propiedad android:orientation.
Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout pueden establecer sus propiedades android:layout_width y android:layout_height para determinar sus dimensiones dentro del layout. Pero en el caso de un LinearLayout, tendremos otro parámetro con el que jugar, la propiedad android:layout_weight.
Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout pueden establecer sus propiedades android:layout_width y android:layout_height para determinar sus dimensiones dentro del layout. Pero en el caso de un LinearLayout, tendremos otro parámetro con el que jugar, la propiedad android:layout_weight.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</LinearLayout>
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</LinearLayout>
Esta propiedad nos va a permitir dar a los elementos contenidos en el layout unas dimensiones proporcionales entre ellas. Esto es más dificil de explicar que de comprender con un ejemplo. Si incluimos en un LinearLayout vertical dos cuadros de texto (EditText) y a uno de ellos le establecemos un layout_weight=”1″ y al otro un layout_weight=”2″ conseguiremos como efecto que toda la superficie del layout quede ocupada por los dos cuadros de texto y que además el segundo sea el doble (relación entre sus propiedades weight) de alto que el primero.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtDato1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<EditText android:id="@+id/TxtDato2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2" />
</LinearLayout>
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtDato1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1" />
<EditText android:id="@+id/TxtDato2"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="2" />
</LinearLayout>
Así pues, a pesar de la simplicidad aparente de este layout resulta ser lo suficiente versátil como para sernos de utilidad en muchas ocasiones.
TableLayout
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.
La estructura de la tabla se define de forma similar a como se hace en HTML, es decir, indicando las filas que compondrán la tabla (objetos TableRow), y dentro de cada fila las columnas necesarias, con la salvedad de que no existe ningún objeto especial para definir una columna (algo así como un TableColumn) sino que directamente insertaremos los controles necesarios dentro del TableRow y cada componente insertado (que puede ser un control sencillo o incluso otro ViewGroup) corresponderá a una columna de la tabla. De esta forma, el número final de filas de la tabla se corresponderá con el número de elementos TableRowinsertados, y el número total de columnas quedará determinado por el número de componentes de la fila que más componentes contenga.
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:
La estructura de la tabla se define de forma similar a como se hace en HTML, es decir, indicando las filas que compondrán la tabla (objetos TableRow), y dentro de cada fila las columnas necesarias, con la salvedad de que no existe ningún objeto especial para definir una columna (algo así como un TableColumn) sino que directamente insertaremos los controles necesarios dentro del TableRow y cada componente insertado (que puede ser un control sencillo o incluso otro ViewGroup) corresponderá a una columna de la tabla. De esta forma, el número final de filas de la tabla se corresponderá con el número de elementos TableRowinsertados, y el número total de columnas quedará determinado por el número de componentes de la fila que más componentes contenga.
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:
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.
Veamos un ejemplo con varios de estos elementos:<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" >
<TableRow>
<TextView android:text="Celda 1.1" />
<TextView android:text="Celda 1.2" />
</TableRow>
<TableRow>
<TextView android:text="Celda 2.1" />
<TextView android:text="Celda 2.2" />
</TableRow>
<TableRow>
<TextView android:text="Celda 3"
android:layout_span="2" />
</TableRow>
</TableLayout>
RelativeLayout
Este layout permite especificar la posición de cada elemento de forma relativa a su elemento padre o a cualquier otro elemento incluido en el propio layout. De esta forma, al incluir un nuevo elemento X podremos indicar por ejemplo que debe colocarse debajo del elemento Y y alineado a la derecha del layout padre. Veamos esto en el ejemplo siguiente:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/TxtNombre"
android:layout_alignParentRight="true" />
</RelativeLayout>
En el ejemplo, el botón BtnAceptar se colocará debajo del cuadro de texto TxtNombre(android:layout_below=”@id/TxtNombre”) y alineado a la derecha del layout padre (android:layout_alignParentRight=”true”), además de dejar un margen a su izquierda de 10 pixeles (android:layout_marginLeft=”10px”).
Al igual que estas tres propiedades, en un RelativeLayout tendremos un sinfín de propiedades para colocar cada control justo donde queramos. Veamos las principales [creo que sus propios nombres explican perfectamente la función de cada una]:
Posición relativa a otro control:
Posición relativa al layout padre:
Opciones de margen (también disponibles para el resto de layouts):
Opciones de espaciado o padding (también disponibles para el resto de layouts):
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/TxtNombre"
android:layout_alignParentRight="true" />
</RelativeLayout>
En el ejemplo, el botón BtnAceptar se colocará debajo del cuadro de texto TxtNombre(android:layout_below=”@id/TxtNombre”) y alineado a la derecha del layout padre (android:layout_alignParentRight=”true”), además de dejar un margen a su izquierda de 10 pixeles (android:layout_marginLeft=”10px”).
Al igual que estas tres propiedades, en un RelativeLayout tendremos un sinfín de propiedades para colocar cada control justo donde queramos. Veamos las principales [creo que sus propios nombres explican perfectamente la función de cada una]:
Posición relativa a otro control:
Posición relativa al layout padre:
Opciones de margen (también disponibles para el resto de layouts):
Opciones de espaciado o padding (también disponibles para el resto de layouts):
El diseño de la interfaz de usuario cobra cada día más importancia en el desarrollo de una aplicación. La calidad de la interfaz de usuario puede ser uno de los factores que conduzca al éxito o al fracaso de todo el proyecto.
Si has realizado alguna aplicación utilizando otras plataformas, advertirás que el diseño de la interfaz de usuario en Android sigue una filosofía muy diferente. En Android la interfaz de usuario no se diseña en código, sino utilizando un lenguaje de marcado en XML similar al HTML.
A lo largo de este capítulo mostraremos una serie de ejemplos que te permitirán entender el diseño de la interfaz de usuario en Android. Aunque no será la forma habitual de trabajar, comenzaremos creando la interfaz de usuario mediante código. De esta forma comprobaremos que cada uno de los elementos de la interfaz de usuario (las vistas) realmente son objetos Java. Continuaremos mostrando cómo se define la interfaz de usuario utilizando código XML. Pasaremos luego a ver las herramientas de diseño integradas en Android Studio. Se describirá el uso de layouts, que nos permitirá una correcta organización de las vistas, y el uso de recursos alternativos nos permitirá adaptar nuestra interfaz a diferentes circunstancias y tipos de dispositivos.
En este capítulo también comenzaremos creando la aplicación de ejemplo desarrollada a lo largo del curso, Asteroides. Crearemos la actividad principal, donde simplemente mostraremos cuatro botones, con los que se podrán arrancar diferentes actividades A continuación aprenderemos a crear estilos y temas y los aplicaremos a estas actividades. Para terminar el capítulo propondremos varias prácticas para aprender a utilizar diferentes tipos de vistas y layouts.
3. Summary
The design of the user interface becomes more and more important in the development of an application. The quality of the user interface can be one of the factors that leads to the success or failure of the entire project.
If you have made an application using other platforms, you will notice that the design of the user interface on Android follows a very different philosophy. In Android, the user interface is not designed in code, but using an XML markup language similar to HTML.
Throughout this chapter we will show a series of examples that will allow you to understand the design of the user interface in Android. Although it will not be the usual way to work, we will start by creating the user interface through code. In this way we will verify that each of the elements of the user interface (the views) are really Java objects. We will continue showing how the user interface is defined using XML code. We will go on to see the design tools integrated in Android Studio. The use of layouts will be described, which will allow us to correctly organize the views, and the use of alternative resources will allow us to adapt our interface to different circumstances and types of devices.
In this chapter we will also begin by creating the example application developed throughout the course, Asteroids. We will create the main activity, where we will simply show four buttons, with which you can start different activities. Next we will learn to create styles and themes and apply them to these activities. To finish the chapter we will propose several practices to learn how to use different types of views and layouts.
4. Recomendaciones
- Los Layouts son medios por los que organizar vistas en la pantalla del dispositivo. Existen diferentes tipos de layout que nos permitirán disponer los elementos de la pantalla de diversas maneras.
- Que nos permite crear tantos layouts como deseemos y editar cada uno por separado.
- Que el programa es facil de ejecutarse en el teléfono móvil.
los layouts son elementos no visuales destinados a controlar la distribución, posición y dimensiones de los controles que se insertan en su interior. Estos componentes extienden a la clase base ViewGroup, como muchos otros componentes contenedores, es decir, capaces de contener a otros controles.
6. Apreciación del Equipo
podemos decir que se desarrollamos una sencilla aplicaciónAndroid desde cero, ya que los layouts tienen diferetes tipos. Como ya indicamos, los layouts son elementos no visuales destinados a controlar la distribución, posición y dimensiones de los controles que se insertan en su interior.
7. Glosario de Términos
MÓVIL
También llamado (teléfono) celular en algunos países de América Latina, es un artefacto electrónico de tamaño variable donde funcionan las aplicaciones y estamos casi seguros de que tienes uno en tu mano o bolsillo ahora mismo.
ORIENTACIÓN
Es la manera en que se muestra el contenido en pantalla, dependiendo de la forma en que el usuario sostiene su tableta o teléfono. Puede ser vertical u horizontal.
PERSONA
Personificación de los usuarios que surge como resultado de estudios basados en su comportamiento y características etnográficas. Esta investigación está basada en los patrones comunes que se detectan en los usuarios. El concepto de «Persona» fue creado por Cooper y es una herramienta habitual en el diseño de interacción.
PÍXEL O PX
Unidad física mínima formada por puntos de color que se reparten a lo largo de la superficie de una pantalla. En diseño también suele usarse como unidad de medida para los componentes gráficos de la interfaz en los diferentes programas de edición.
RANKING
Clasificación ordenada que se da a las aplicaciones en cada una de las tiendas, dependiendo de factores como cantidad de descargas o cantidad de valoraciones positivas.
RESOLUCIÓN DE PANTALLA
Es la cantidad de píxeles que puede ser mostrada en la pantalla de un dispositivo y consiste en una relación entre el ancho y alto de la misma.
SDK
El Software Development Kit o «Kit de desarrollo de software» provee a los programadores herramientas necesarias para desarrollar el código de una aplicación. Tanto Android, como iOS y Windows Phone, ofrecen uno diferente.
SIMULADOR
Un simulador permite probar la aplicación sin necesidad de contar con un móvil. De esta forma, se puede ejecutar el código en el ordenador y ver los resultados en la pantalla, con el fin de realizar comprobaciones preliminares sobre el funcionamiento de la app.
SISTEMA OPERATIVO O SO
Es el software que contiene cada uno de los teléfonos y sobre el cual se ejecutan las aplicaciones. Las distintas versiones de Android, iOS y Windows Phone, son ejemplos de sistemas operativos.
SP
En Android se llama así a los Scale-independent pixels o «píxeles independientes de la escala», usados para textos. En diseño, estos tienen el mismo comportamiento que los DP, con la diferencia que el tamaño medido en sp también puede ser afectado por las preferencias del usuario.
TAMAÑO DE PANTALLA
Es el tamaño físico que tiene la pantalla de un extremo al otro, en forma diagonal y medido, generalmente, en pulgadas.
TEMA
Combinación de colores que usan Android y Windows Phone de forma preestablecida. En Windows Phone, el usuario puede elegir entre una serie de temas que afectan el color de fondo y elementos destacados a través de las pantallas de todo el sistema operativo.
TIENDA
Es el canal de distribución y comercialización de aplicaciones, desde donde pueden descargarse de forma gratuita o paga. Cada uno de los sistemas operativos móviles mencionados en este libro tiene una tienda oficial; sin embargo, en el caso de Android, existen varias opciones alternativas además de Google Play; cómo la tienda de apps de Amazon o Samsung.
USABILIDAD
En su sentido más amplio, está relacionada con la eficacia y eficiencia de la interfaz de una aplicación para permitir a un usuario determinado realizar una tarea o cumplir un objetivo. La usabilidad no puede analizarse de forma aislada, ya que está vinculada con un contexto particular y un usuario específico; por tanto, está directamente asociada a la experiencia de usuario.
USUARIO
El usuario es quien realiza interacciones con la aplicación a través de su interfaz. Es el foco del llamado «diseño centrado en el usuario» que tiene como eje sus necesidades, para proponer soluciones que resuelvan los problemas, considerando sus emociones y expectativas.
8. Bibliografía o Linkografía
http://appdesignbook.com/es/contenidos/glosario/
Los dejo el link de mi diapositivas
https://es.slideshare.net/LUZCLARITAPEREZDIAZ/layouts-98344967
Los dejo el link de mi diapositivas
https://es.slideshare.net/LUZCLARITAPEREZDIAZ/layouts-98344967
Comentarios
Publicar un comentario