Cuatro diseños básicos
Un diseño es un contenedor que sirve para colocar muchos controles, permite ajustar la posición de los controles internos según una clasificación determinada.
De esta forma se pueden crear interfaces visuales atractivas.
Los diseños también se pueden anidar dentro de otros diseños.
Diseño – LinearLayout (Diseño lineal)
El diseño lineal es muy utilizado
Como su nombre indica, los controles que contiene se disponen uno tras otro en dirección lineal.
Mediante el atributo android:orientation se puede definir la dirección de disposición: vertical y horizontal
Sintaxis básica
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="veritical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</LinearLayout>Lenguaje del código: HTML, XML (xml)Ahora vamos a verlo en práctica
Creamos un diseño y modificamos la actividad principal para usarlo
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="veritical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
/>
</LinearLayout>Lenguaje del código: HTML, XML (xml)
La actividad principal carga este diseño
setContentView(R.layout.test_linear);
Si cambiamos a ordenación vertical
android:orientation=»horizontal»
Diseño – Alineación de controles en LinearLayout
Se define la alineación del control mediante android:layout_gravity.
Sin embargo, cuando LinearLayout usa orientación horizontal, solo funcionan los modos de alineación vertical. Esto ocurre porque en este caso la longitud horizontal no es fija.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:text="1"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="2"
android:layout_gravity="center"
/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="3"
android:layout_gravity="bottom"
/>
</LinearLayout>Lenguaje del código: HTML, XML (xml)Es decir, cuando el diseño tiene orientación Horizontal, solo funcionan las alineaciones superior, central e inferior de los controles
Diseño – Proporción de pantalla de controles en LinearLayout
Si establecemos el ancho de los controles secundarios en 0dp
Podemos definir la proporción que ocupa cada control en el diseño mediante
android:layout_weight=»n»
P108
También podemos usar weight para uno de los controles
y no usarlo en el otro
De esta manera, el otro control, por ejemplo el botón aquí, mantiene su ancho original. Esta escritura es muy útil para
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:text="3" />
</LinearLayout>Lenguaje del código: HTML, XML (xml)El ancho del botón se ajusta al contenido, y el cuadro de texto ocupa el espacio restante
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal" android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="wrap_content" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="1" />
</LinearLayout>Lenguaje del código: HTML, XML (xml)Diseño – RelativeLayout (Diseño relativo)
RelativeLayout también se llama diseño relativo
Permite colocar los controles en cualquier posición del diseño mediante posicionamiento relativo.
Por eso RelativeLayout cuenta con muchísimos atributos.
Podemos definir para cada control
android:layout_alignParentLeft
android:layout_alignParentTop
android:layout_alignParentRight
android:layout_alignParentBottom
android:layout_centerInParent: estos cinco atributos definen la posición del control: izquierda, superior, derecha, inferior y centro
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="3" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="5" />
</RelativeLayout>Lenguaje del código: HTML, XML (xml)Definir posición respecto a otro control
Con android:layout_above=»@id/button3″ podemos colocar un control encima de otro.
Con layout_below, el control se sitúa debajo de otro.
Con layout_toLeftOf, el control queda a la izquierda de otro.
Con layout_toRightOf, el control queda a la derecha de otro.
Importante: si un control hace referencia a otro para definir su posición, el control referenciado debe declararse antes en el archivo XML.
Colocamos button1 en el centro y lo escribimos al principio del XML, luego los otros cuatro controles se posicionan respecto a él
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="1" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button1"
android:layout_toLeftOf="@id/button1"
android:text="2" />
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_above="@id/button1"
android:layout_toRightOf="@id/button1"
android:text="3" />
<Button
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button1"
android:layout_toRightOf="@id/button1"
android:text="4" />
<Button
android:id="@+id/button5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/button1"
android:layout_toLeftOf="@id/button1"
android:text="5" />
</RelativeLayout>Lenguaje del código: HTML, XML (xml)
Diseño – FrameLayout (Diseño de marco)
Más simple que los dos diseños anteriores
Tiene menos casos de uso en comparación.
Este diseño no tiene opciones de posicionamiento flexible: todos los controles se colocan por defecto en la esquina superior izquierda del contenedor.
Vamos a probarlo, añadimos un TextView y un ImageView
Podemos usar el atributo layout_gravity para definir la alineación dentro del diseño.
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/img1" />
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="foxdevelop.com"
android:layout_gravity="right"
/>
</FrameLayout>Lenguaje del código: HTML, XML (xml)Diseño extendido – Diseño por porcentajes
Los tres diseños anteriores existen desde Android 1.0
Y se siguen usando hasta hoy.
Solo LinearLayout admite layout_weight para definir el tamaño de los controles. Los otros dos no lo soportan.
Por ejemplo, es complicado lograr que dos botones ocupen el mismo espacio con RelativeLayout.
Afortunadamente, Android 7.0 incorporó el diseño por porcentajes.
Se trata de una extensión de RelativeLayout y FrameLayout, añadiendo el prefijo Percent.
Es simplemente una ampliación de los dos diseños anteriores.
Debemos agregar la dependencia del diseño por porcentajes en build.gradle.
Abrimos el archivo app/build.gradle
En el bloque dependencies añadimos
compile ‘com.android.support:percent:27.1.1’
Al modificar build.gradle, Gradle se sincronizará automáticamente para incorporar la librería de porcentajes al proyecto, no requiere intervención manual.
Luego modificamos el diseño por
<android.support.percent.PercentFrameLayout
Y definimos en los controles secundarios
app:layout_widthPercent=»50%»
app:layout_heightPercent=»50%»
También podemos seguir usando el atributo layout_gravity en los controles secundarios
Controles personalizados e importación de archivos de diseño
Diagrama de herencia de controles y diseños
Todos los controles que usamos heredan directa o indirectamente de View.
Todos los diseños heredan directa o indirectamente de ViewGroup.
View es el componente UI básico de Android.
Dibuja un área rectangular en pantalla y responde a los eventos de esa zona.
Importar diseños
Las apps de iPhone tienen interfaces muy similares: botón atrás arriba a la izquierda, título arriba a la derecha.
Vamos a imitar ese estilo.
Crear un botón y un TextView no es difícil para nosotros ahora.
Pero si repetimos esto en todas las páginas, generaremos mucho código duplicado.
Podemos solucionarlo importando diseños externos.
Creamos un archivo justtitle.xml
Creamos un proyecto nuevo TestCustom
Y añadimos un diseño llamado justtitle.xml
El código es el siguiente
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#137e11"
>
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dp"
android:text="Volver"
android:textColor="#fff"
android:background="@null"
/>
<TextView
android:id="@+id/textview"
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:text="Título"
android:textSize="18dp"
android:textColor="#fff"
android:background="@null"
android:layout_margin="5dp"
/>
<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="..."
android:layout_margin="5dp"
android:background="@null"
/>
</LinearLayout>Lenguaje del código: HTML, XML (xml)Luego modificamos la vista de la actividad principal, código a continuación
Recuerda usar include para importar nuestro archivo justtitle.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<include layout="@layout/justtitle"/>
</LinearLayout>Lenguaje del código: HTML, XML (xml)Agregamos una BasicActivity y sobrescribimos onCreate
Después ocultamos la ActionBar original
package com.foxdevelop.www.testcustom;
import android.os.Bundle;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
public class BasicActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActionBar actionBar = getSupportActionBar();
if (actionBar!=null)
{
actionBar.hide();
}
}
}Lenguaje del código: JavaScript (javascript)Uso de controles de diseño personalizados
Para implementar mejor la función de retroceso
No podemos escribir el código del botón volver en cada actividad por separado
Para hacerlo mejor, creamos nuestro propio Layout personalizado heredando de LinearLayout
Lo llamaremos TitleLayout
Dentro del constructor de nuestro diseño personalizado, podemos registrar escuchadores de eventos para los botones del diseño asociado
public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attributes) {
super(context,attributes);
// Especificar la vista a usar
LayoutInflater.from(context).inflate(R.layout.justtitle,this);
// Registrar evento para el botón volver
Button button1 = (Button)findViewById(R.id.button1);
button1.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
((Activity)getContext()).finish(); // Volver equivale a cerrar la actividad actual
}
});
// Registrar evento para el botón de edición
Button button = (Button)findViewById(R.id.button);
button.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getContext(),"Mostrar menú",Toast.LENGTH_LONG).show();
}
});
}
}Lenguaje del código: JavaScript (javascript)<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.foxdevelop.www.testcustom.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>Lenguaje del código: HTML, XML (xml)
Diseño