“Año del Diálogo y
Reconciliación Nacional”
Tema : Layouts
Autores
: Encina lopez Nohelia Cinthia
Ramos
Zambora Belisa
Carrera : Ingeniería de Sistemas y Telemática.
Asignatura : Electivo.
Docente
: Ing. Marco Aurelio Porro Chulli.
Periodo
académico : Semestre 2018-I.
1. CONTENIDO
1.1.
DEFINICIÓN
La noción de layout suele utilizarse para nombrar al esquema
de distribución de los elementos dentro un diseño. Puede ser una especie de
plantilla que presenta tablas o espacios en blanco. La idea es que, a partir
del layout, la página web comience a desarrollarse con sus contenidos
específicos.
Todas las características de un
ViewGroup o un View son representadas a través de atributos que determinan algún aspecto. Encontrarás
atributos para el tamaño, la alineación, padding, bordes, backgrounds, etc.
Cada atributo XML descrito para un
componente tiene una referencia en la clase Java que lo representa. Esto quiere
decir que al usar un elemento <TextView>,
nos estamos refiriendo a la clase TextView.
Identificador
de un view— Existe un atributo que heredan todos los elementos
llamado id. Este representa un identificador
único para cada elemento. Lo que permite obtener una referencia de cada objeto
de forma específica.
1.2.
TIPOS
1.2.1. 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.
1.2.2. 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 más 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.
a. La orientación (orientation): nos ayudará a indicar si el LinearLayout representa una columna o una fila.
Para definirla, hay que agregar la propiedad android:orientation en
el elemento <LinearLayout> del XML, y los valores que podemos escribir
son horizontal o vertical; si es horizontal entonces trabajaremos el layout a
modo de fila y si es vertical lo trabajaremos a modo de columna. También hay
que saber que la orientación puede ser modificada en tiempo de ejecución
utilizando el método setOrientation() de la clase LinearLayout, pasando como
parámetro HORIZONTAL o VERTICAL según sea el caso.
b. Llenado del modelo: Para comprender este concepto vamos a guiarnos por un ejemplo. Supongamos
que tenemos una serie de radio buttons. Cada uno de estos elementos tiene un
tamaño natural basado en el largo de su texto. La combinación de cada uno de
los tamaños del radio buttons 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.
Peso: Definamos
otro escenario. Supongamos que tenemos dos campos de varias líneas en una
columna y queremos que ocupen el espacio sobrante después de acomodar otros
controles que ya han ocupado su respectivo espacio. Para hacer esto, además de
definir las propiedades android:layout_height (para columnas) y
android:layout_width (para filas),habrá que definir un valor para el atributo
android:layout_weight. Esta propiedad indica la proporción del espacio libre
que le corresponde a ese widget.
Gravedad: Por default,
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 tipoLinearLayout, 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.
Relleno: Por default,
los widgets se apilan de manera seguida una junto a otro, cosa que algunas
veces no resulta muy agradable visualmente. Por ello, para aumentar el espacio
en blanco entre cada uno de ellos utilizamos el atributo android:padding o
directamente en el código Java en tiempo de ejecución con el método
setPadding().
El relleno
es un valor que indica el espacio existente entre los límites que ocupa el
widget en sí y la línea que marca el inicio del contenedor. El relleno equivale
al margen que se define en un documento de procesador de textos.
1.2.3. 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.
Características:
Ø
Las filas se declaran con la etiqueta “<TableRow>”, luego, no existe
un objeto para crear columnas, simplemente se insertan los objetos gráficos o
controles necesarios dentro del TableRow.
Ø
El número de columnas de la tabla depende del número máximo de celdas de
una de las filas.
Ø
Un controlador u objeto gráfico puede ocupar varias columnas, dado que
existe una propiedad que lo permite; pero no existe una propiedad que permita a
un controlador ocupar varias filas.
Ø
Todas las columnas tienen un número que las identifica, inicialmente es
cero, pero este aumenta de uno en uno conforme se van agregando más celdas
dentro de una fila específica.
Ø
Este tipo de layout a diferencia de una tabla convencional como las de
HTML, no contempla bordes, por lo que es considerado un simple arreglo de filas
y columnas, sin embargo, existen técnicas de diseño que le dan a la tabla la
apariencia de tener bordes.
1.2.4.
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) arrastrando diferentes elementos
y distintos Layouts simplemente arrastrándolos.
1.2.
EJEMPLOS
FrameLayout
|
1.1.1.1 Código de FrameLayout
|
|
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.frame_.MainActivity" >
<FrameLayout
android:layout_width="368dp"
android:layout_height="495dp"
tools:layout_editor_absoluteY="8dp"
android:orientation="vertical">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@drawable/tiger" />
<TextView
android:id="@+id/Text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="80dp"
android:background="#993"
android:padding="16dp"
android:text="Frame
layout"
android:textColor="#990099"
android:textSize="20sp" />
</FrameLayout>
</RelativeLayout>
|
LinearLayout
LinearLayout (Vertical)
|
1.1.1.1.1 Código de
LinearLayout (Vertical)
|
|
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un checkBox"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botón" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" LinearLayout (Vertical)"/>
</LinearLayout>
|
LinearLayout
(Horizontal)
|
1.1.1.1.1 Código de
LinearLayout (Horizontal)
|
|
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal" >
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un checkBox"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botón" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=" LinearLayout (Horizontal"/>
</LinearLayout>
|
TableLayout
|
1.1.1.1 Código de TableLayout
|
|
<TableLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="match_parent"
android:layout_width="match_parent">
<TableRow>
<AnalogClock
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
<CheckBox
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un
checkBox"/>
</TableRow>
<TableRow>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un botón"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TableLayout"/>
</TableRow>
</TableLayout>
|
RelativeLayout
|
Código de RelativeLayout
|
|
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.relativelayout.MainActivity" >
<AnalogClock
android:id="@+id/AnalogClock01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"/>
<CheckBox
android:id="@+id/CheckBox01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/AnalogClock01"
android:text="Un
checkBox"/>
<Button
android:id="@+id/Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Un
botón"
android:layout_below="@id/CheckBox01"/>
<TextView
android:id="@+id/TextView01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="RelativeLayout"/>
</RelativeLayout>
|
2.
RESUMEN
La noción de layout
suele utilizarse para nombrar al esquema de distribución de los elementos
dentro un diseño.
Puede ser una especie
de plantilla que presenta tablas o espacios en blanco. La idea es que, a partir
del layout, la página web comience a desarrollarse con sus contenidos
específicos.
TIPOS
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 más 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.
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) arrastrando diferentes elementos
y distintos Layouts simplemente arrastrándolos.
3.
SUMMARY
The notion of layout is often used to name the
distribution scheme of the elements within a design.
It can be a kind of template that presents tables or
blank spaces. The idea is that, from the layout, the web page begins to develop
with its specific contents.
TYPES
FrameLayout: generally this
Layout is usually used to show a single element in the UI. Android Stuido
allows us to position up to 9 elements, but if we put two elements in the same
green box you will see that they are superimposed and are not legible.
LinearLayout: places the
elements one behind the other linearly, either vertically or horizontally. Both
the vertical and horizontal Layout can be parents and children of each other.
The parent element is able to contain one or more children, that is, we have a
LinearLayout (Vertical) and within it a LinearLayout (Horizontal), that is, the
first is the father and the second is the son, because the father contains the
son.
TableLayout: within this Layout
we can define rows and columns to place the elements. In Android Studio,
directly when dragging an element we will see a green grid in which we can go
placing the different elements. Basically, it is an array of elements.
RelativeLayout: allows us to place
each element relative to any element within the RelativeLayout itself. Once we
have a general idea of each of the Layouts, I recommend that you try to
design small User Interface (UI) by dragging different elements and different
Layouts simply by dragging them.
4.
CONCLUSIONES
En esta
monografía hemos aprendido a crear diferentes tipos de layout, desde el más
simple al más complejo, cada uno nos da una forma diferente de organizar,
distribuir y dimensionar los objetos gráficos que coloquemos en nuestra
aplicación de Android.
También hemos
logrado entender y manejar las propiedades y formatos que ofrecen, por ello
estamos preparados para realizar nuestras aplicaciones con una distribución de
elementos más organizada y un mejor diseño.
5.
LINKOGRAFÍA
Comentarios
Publicar un comentario