Los
layouts son elementos o contenedores que no se pueden ver pero que permiten indicar la distribución,
posicionamiento y dimensión de los diferentes controles que se encuentran en su
interior.
LOS TIPOS DE LAYOUT SON:
I.
FRAMELAYOUT
Es el más sencillo o simple de todos los layouts de Android. El FrameLayout no
realiza ninguna distribución de las vistas, simplemente las coloca unas encima
de otras, 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
solo elemento sustituible, por ejemplo una imagen. Es decir si disponemos dos o
más controles los mismos se apilan.
Los componentes incluidos en un FrameLayout
podrán establecer sus propiedades android:layout_width y android:layout_height,
que podrán tomar los valores “match_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).
NOTA: Si se está utilizando una versión de la
API de Android inferior a la 8 (Android 2.2), en vez de “match_parent” se debe
de utilizar su equivalente “fill_parent”.
Por ejemplo si disponemos dentro de un
FrameLayout un ImageView y un Button luego el botón se superpone a la imagen:
Seleccionamos el control ImageView y fijarmos
la propiedad Visibility con el valor invisible (esto hace que la imagen no se
muestre en pantalla)
Luego inicializamos la propiedad On click del
control Button indicando el nombre del método que se ejecutará al ser
presionado:
El código fuente de la clase es:
package
com.example.framelayout;
import
android.support.v7.app.ActionBarActivity;
import
android.os.Bundle;
import
android.view.Menu;
import
android.view.MenuItem;
import
android.view.View;
import
android.widget.Button;
import
android.widget.ImageView;
public class
MainActivity extends ActionBarActivity {
Button b1;
ImageView iv1;
@Override
protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
b1 =
(Button) findViewById(R.id.button1);
iv1 =
(ImageView) findViewById(R.id.imageView1);
}
@Override
public boolean
onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar
if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean
onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will
// automatically handle clicks on the Home/Up button,
so long
// as you specify a parent activity in
AndroidManifest.xml.
int id =
item.getItemId();
if (id ==
R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
public void
ocultarBoton(View v) {
b1.setVisibility(View.INVISIBLE);
iv1.setVisibility(View.VISIBLE);
}
}
Cuando se presiona el botón procedemos a
ocultar el botón y hacer visible la imagen:
public void ocultarBoton(View v) {
b1.setVisibility(View.INVISIBLE);
iv1.setVisibility(View.VISIBLE);
}
II. RELATIVELAYOUT
Define un layout donde la ubicación de un elemento en la
pantalla depende de la de otro componente por ejemplo debajo de , a la derecha
de . RelativeLayout es una herramienta muy poderosa para el diseño de una
interfaz de usuario, ya que puede eliminar ViewGroups anidados. Si usted se
encuentra con varios grupos de LinearLayout anidadas, usted puede ser
capaz de reemplazar con una sola RelativeLayout.
Conceptos y propiedades
Cabe mencionar que además de posicionar un elemento con respecto a otro
del mismo nivel también podemos hacerlo con respecto al área que corresponde
al RelativeLayout.
Este tipo de contenedor es una
herramienta muy poderosa para cumplir con la tarea de diseñar interfaces de
usuario ya que permite eliminar ViewGroups anidados, lo cual
es útil para reemplazar un diseño en el que tenemos una gran cantidad de grupos
dentro de un contenedor de tipo LinearLayout y hacerlo más
eficiente utilizando un RelativeLayout.
Entre los atributos que nos
sirven para posicionar los elementos con respecto a otros están:
Ejemplos Prácticos:
Para aterrizar los conceptos vistos y tener claro cómo se
comporta un contenedor de tipo RelativeLayout vamos a poner en marcha un proyecto
llamado AndroideityRelativeLayout.
1. Haremos un sencillo formulario utilizando un TextView para desplegar un mensaje, un EditText que abarcará todo el ancho del
contenedor y abajo dos botones alineados a la derecha del contenedor.
El TextView se posiciona tomando el flujo natural
que va desde el punto superior izquierdo. El EditText ya se posiona tomando en cuenta el TextView,
de manera que indicamos que deberá aparecer debajo de él. Para el botón Aceptar,
indicamos que aparecerá debajo del EditText y que su alineación será a la derecha
con respecto al contenedor, el botón Cancelar está definido para que aparezca a la izquierda
del botón Aceptar y que además su borde superior se
encuentre alienado con el borde superior del botón Aceptar.
- Ejecutamos el proyecto y vemos el resultado visual descrito
hace un momento:
III.
LINEARLAYOUT
Es un contenedor que utiliza
el modelo de caja para desplegar los elementos que están dentro de él. Los
widgets y contenedores secundarios que se declaren dentro de un elemento <LinearLayout> se alinearán en una columna o en una
fila, uno detrás de otro.
Orientación
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.
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 de los 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.
Codifiquemos
un ejemplo…
Para
aterrizar los conceptos expuestos en este artículo, vamos a realizar un
proyecto que mostrará las propiedades del contenedor LinearLayout desde
la definición en XML y su posterior modificación en tiempo de ejecución, es
decir, desde el código Java.
1.
Creamos un nuevo proyecto Android llamado AndroideityLinearLayout con
la versiónAndroid 2.1 update 1.
2.
En el archivo main.xml del directorio res > layout vamos
a definir lo siguiente:
El
contenedor principal de nuestro layout es un elemento <LinearLayout> que
tiene una orientación vertical. Dentro de él, tenemos dos elementos RadioGroup,
el primero con orientación horizontal y el segundo vertical. Esta primera
definición nos hará ver cómo es que cambia la disposición de los elementos a la
hora de mostrarse en pantalla.
Hemos
definido 5 radio buttons en total con los textos correspondientes a los cambios
que ejecutarán sobre el layout cada vez que seleccionemos alguno de ellos. Los
textos los hemos separado creando recursos de tipo String dentro del
archivo res > values > strings.xml y su contenido es el
que te muestro a continuación:
3.
Para poder ver cómo afectan los valores de los atributos en el diseño del
layout, pasemos a escribir la parte de código Java que ejecutará nuestra
aplicación. A continuación te pongo el código que deberá contener tu actividad
principal, es decir, el archivo .java localizado en el directorio src.
4. Ya
tenemos todo listo, ahora pasemos a ejecutar el proyecto para ver qué pasa.
La
imagen anterior muestra el layout básico definido en el XML. Cada vez que
nosotros seleccionemos alguno de los radio buttons, podremos ver en tiempo de
ejecución los cambios en el diseño del layout que se van haciendo según lo que
hemos definido a través del código del paso anterior.
Esta
es una buena forma de entender todos los atributos que explicamos y su efecto visual en nuestras
aplicaciones.
VI.
GRIDLAYOUT
El GridLayout coloca los
componentes en forma de matriz, haciendo que todos ocupen el mismo tamaño. Es
un Layout adecuado para hacer matrices de cajas de texto por ejemplo, si
queremos hacer un crucigrama o un sudoku, también para matrices de botones como
una calculadora. Este tipo de Layout fue incluido a partir de la API 14
(Android 4.0).
Características:
Son similares al TableLayout, ya que se utiliza igualmente para distribuir
los diferentes elementos de la interfaz de forma tabular, distribuidos en filas
y columnas. La diferencia entre ellos es la forma que tiene el GridLayout de colocar
y distribuir sus elementos hijos en el espacio disponible. En este caso, a
diferencia del TableLayout indicaremos el número
de filas y columnas como propiedades del layout, mediante: android: rowCount y android: columnCount. Con
estos datos ya no es necesario ningún tipo de elemento para indicar las filas,
como hacíamos con el elemento TableRow del TableLayout, sino que
los diferentes elementos hijos se irán colocando ordenadamente por filas o
columnas (dependiendo de la propiedad android: orientation)
hasta completar el número de filas o columnas indicadas en los atributos
anteriores.
Adicionalmente, igual que en el caso
anterior, también tendremos disponibles las propiedades android:
layout_rowSpan y android: layout_columnSpan para conseguir que
una celda ocupe el lugar de varias filas o columnas.
Existe también una forma de indicar de
forma explícita la fila y columna que debe ocupar un determinado elemento hijo
contenido en el GridLayout, y se
consigue utilizando los atributos android:
layout_row y android: layout_column. De cualquier forma, salvo para
configuraciones complejas del grid no suele ser necesario utilizar estas
propiedades.
Un ejemplo basico:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:orientation="horizontal"
android:rowCount="3"
>
<Button
android:id="@+id/button1"
android:gravity="center"
android:text="Button"
/>
<Button
android:id="@+id/button2"
android:gravity="center"
android:text="Button"
/>
<Button
android:id="@+id/button3"
android:gravity="center"
android:text="Button"
/>
<Button
android:id="@+id/button4"
android:gravity="center"
android:text="Button"
/>
</GridLayout>
Ordenar también EditText, TextView y Button de esta forma:
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="2"
android:orientation="horizontal"
android:rowCount="4"
>
<TextView
android:id="@+id/1"
android:gravity="center"
android:text="Codigo:"
/>
<EditText
android:id="@+id/2"
android:layout_width="71dp"
android:gravity="center"
android:text=""
/>
<TextView
android:id="@+id/3"
android:gravity="center"
android:text="Producto:"
/>
<EditText
android:id="@+id/4"
android:layout_width="171dp"
android:gravity="center"
android:text=""
/>
<TextView
android:id="@+id/5"
android:gravity="center"
android:text="Producto:"
/>
<EditText
android:id="@+id/6"
android:layout_width="166dp"
android:gravity="center"
android:text=""
/>
<Button
android:id="@+id/7"
android:gravity="center"
android:text="Agregar"
/>
<Button
android:id="@+id/8"
android:gravity="center"
android:text="Cancelar"
/>
</GridLayout>
También podemos ordenar las imagines de esta forma:
V. TABLELAYOUT
Definición: Es un arreglo de
filas y columnas que permite distribuir los objetos gráficos de una pantalla o
parte de ella de forma tabular.
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.
Propiedades:
En
general existen propiedades válidas para toda la tabla, una de sus filas, y un
elemento dentro de esta, por ejemplo android:background,
que define el fondo del objeto gráfico, el cual puede ser una imagen, un
color, etc.
Propiedades para toda la
tabla (<TableLayout>):
· android:layout_height
=> Esta propiedad indica el alto de toda la tabla.
· android:layout_width
=> Indica el ancho de la tabla.
· android:paddingBottom
=> Especifica el espacio entre los botones.
Propiedades para una fila (<TableRow>):
También
tiene las propiedades android:layout_height
y android:layout_width. Además de ello, se
pueden especificar los atributos siguientes:
·
android:id
=> Es el identificador o clave del objeto gráfico, es usado en la actividad
para la programación de los eventos y procesos del sistema.
·
android:padding
=> Define el relleno o espacio de los cuatro bordes de la fila en píxeles.
Propiedades para un elemento
dentro de una fila (<TextView>, <EditView>,
etc):
Al
igual que para las filas, estos elementos poseen la propiedad android:id,
a continuación se definen algunas propiedades generales de estos controladores
que nos interesan para el diseño de una tabla en Android. No se especifican las
necesarias para el diseño específico de cada objeto gráfico.
·
android:layout_span
=> Cantidad de columnas que ocupará el objeto gráfico.
·
android:layout_column
=> Indica el número de columna en el que se colocará
la vista. Recordemos que toda columna se identifica inicialmente con el número
cero.
·
android:background
=> Especifica
el drawable a utilizar como fondo, sea este una imagen, un color, un shape,
etc.
Ejemplo práctico 1:
Desarrollar
un aplicativo usando TableLayout que permita calcular el promedio de 3 notas de
un alumno.
Resolución:
El
nombre del proyecto será: TableLayout, y se especificarán las siguientes API’s
y el tema, no solo para esta sino para todas las aplicaciones:
A
continuación el código:
activity_main.xml
<TableLayout xmlns: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.tablelayout.MainActivity"
>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Ingrese:"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
/>
<TableRow
android:id="@+id/tableRow1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nota 1:
"
android:textSize="@dimen/abc_action_bar_title_text_size"
android:textStyle="bold" />
<EditText
android:id="@+id/editText1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" >
<requestFocus />
</EditText>
</TableRow>
<TableRow
android:id="@+id/tableRow2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nota 2:
"
android:textSize="@dimen/abc_action_bar_title_text_size"
android:textStyle="bold" />
<EditText
android:id="@+id/editText2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
</TableRow>
<TableRow
android:id="@+id/tableRow3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>
<TextView
android:id="@+id/textView4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nota 3:
"
android:textSize="@dimen/abc_action_bar_title_text_size"
android:textStyle="bold" />
<EditText
android:id="@+id/editText3"
android:layout_width="1dp"
android:layout_height="wrap_content"
android:ems="10"
android:inputType="numberDecimal" />
</TableRow>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calcular promedio" />
</TableLayout>
MainActivity.java
package
com.example.tablelayout;
import
android.support.v7.app.ActionBarActivity;
import
android.os.Bundle;
import
android.view.Menu;
import
android.view.MenuItem;
import
android.view.View;
import
android.view.View.OnClickListener;
import
android.widget.Button;
import
android.widget.EditText;
import
android.widget.Toast;
public class
MainActivity extends ActionBarActivity implements OnClickListener{
EditText
edt1,edt2,edt3;
Button
btn;
@Override
protected void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
edt1=(EditText)findViewById(R.id.editText1);
edt2=(EditText)findViewById(R.id.editText2);
edt3=(EditText)findViewById(R.id.editText3);
btn=(Button)findViewById(R.id.button1);
btn.setOnClickListener(this);
}
@Override
public boolean
onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar
if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean
onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar
will
// automatically handle clicks on the Home/Up button,
so long
// as you specify a parent activity in
AndroidManifest.xml.
int id =
item.getItemId();
if (id ==
R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public void
onClick(View v) {
// TODO Auto-generated method stub
double p=0,p1=0,n1=Double.parseDouble(edt1.getText().toString());
double
n2=Double.parseDouble(edt2.getText().toString());
double
n3=Double.parseDouble(edt3.getText().toString());
double
numero=0,entero=0,ult_cif=0;
switch(v.getId()){
case R.id.button1:{
p=(n1+n2+n3)/3;
entero=(int)(p*1000);
numero=(int)(p*100);
ult_cif=entero%10;
if(ult_cif
>= 5){
numero=numero+1;
}else{
numero=numero+0;
}
Toast
t=Toast.makeText(this,"El
promedio es: "+numero/100, Toast.LENGTH_LONG);
t.show();
}break;
}
}
}
Ejecución del aplicativo:
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.
Aprendimos porque el
FrameLayout es el más sencillo de todos los layouts y conocimos uno de los usos
que se le suele dar a este view Group
Entendimos las funciones y
aplicaciones de un Relative Layout, centrándonos en que la posición actual de
un elemento, está en función de otro.
En cuánto al LinearLayout,
comprendimos que permite ordenar los elementos en filas y columnas, logrando
que la organización de estos sea más precisa en comparación con el
RelativeLayout.
Con respecto al GridLayout
que la diferencia con el Table Layout está en la forma que cada uno de estos
distribuye el mismo espacio para sus elementos.
También profundizamos en el
diseño de tablas con formatos convencionales, lo cuál requirió de conocimientos
más profundos.
Otro punto importante es
conocer que el diseño es una parte crucial de la aplicación porque será un
factor determinante en el agrado o rechazo de un aplicativo por parte del
usuario.
Algunos tipos de layouts
requieren de API`s específicas, el no contar con dichas API’s impediría el
correcto desarrollo del diseño de la aplicación.
El uso de las
tecnologías de la información como Screen Exe, ATubeCatcher, youtube, y otras
aplicaciones permiten la rápida difusión de la información por todo el
internet, lo cual nos permite un posicionamiento en la web y así dejar en alto
el nombre de nuestra alma mater.
INTEGRANTES:
- VEGA VILLAMONTE, DANIEL
- PEREZ NINGLE, DAVID
- PEÑA REYES, LILIBETH
- VELASQUEZ LOJA, BETSY
- CALLA VLADIMIR
