Diseño de Interfaz de Usuario Android: Composiciones de Marco

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

Frame layouts, son uno de los tipos de layouts más sencillos utilizados para organizar los controles dentro de la interfaz de usuario de una aplicación Android.

Entender los layouts es importante para el buen diseño aplicaciones Android. En este tutorial, aprenderá todo lo relacionado a los frame layouts, que son utilizados principalmente para organizar controles view individuales o de superposición en la pantalla. Cuando se usan correctamente, los frame layouts, pueden ser el layout fundamental sobre las que pueden ser diseñadas muchas aplicaciones Android interesantes.

¿Qué es un Frame Layout?

Frame layouts son unos de los tipos de layouts más sencillos y más eficientes utilizados por los desarrolladores Android para organizar los controles view. Son menos usados que otros layouts, simplemente porque son, por lo general, usados para mostrar solamente una view, o views con traslape. A menudo, el frame layout es usado como un contenedor layout, ya que generalmente tiene solamente un solo view child (a menudo otro layout, usado para organizar más que una view).

Consejo: De hecho, en un lugar verá frame layouts usados como parent layout de cualquier layout resource de su diseño. Si lo saca de su aplicación en la herramienta Visor de Jerarquía (una herramienta útil para depurar los layouts de su aplicación), verá que cualquier layout resource que usted diseña son mostrados dentro de un parent view.

Frame layouts son muy sencillos, lo cual los hace muy eficientes. Pueden ser definidos dentro del XML layout resources o por medio de programación en el código de la aplicación en Java. Un child view dentro de una frame layout, está siempre presentado en una posición relativa a la esquina superior izquierda de la pantalla. Si existen múltiples child views, entonces pueden ser presentados uno encima de otros. Esto significa que el primer view agregado al frame layout mostrará en el fondo de la pila, y la última view agregada será mostrada arriba.

Vamos a ver un ejemplo sencillo. Digamos que tenemos un frame layout que está a un tamaño para controlar toda la pantalla (en otras palabras, los atributos layout_width y layout_height están los dos ajustados a match_parent). Entonces podríamos agregar tres controles child a este frame layout:

Un ImageView con una imagen de un lago.
Un TextView con algo de texto para mostrar hacia la parte superior de la pantalla.
Un TextView con algo de texto para mostrar hacia el fondo de la pantalla (Simplemente use el atributo layout_gravity para tener el TextView "sink" en el fondo del parent).

La siguiente figura muestra que este tipo de layout aparecería en la pantalla.

Definiendo un XML Layout Resource con un Frame Layout

La manera más conveniente y sostenible para diseñar una aplicación de interfaces de usuarios es por medio de crear un XML layour resources. Este método simplifica mucho el proceso de diseño UI, moviéndose de la creación static y layout de los controles de interfaz de usuario y la definición de los controles de los atributos, hacia el XML, en lugar de las letras de código.

XML layout resource, deben ser guardados en la jerarquía del directorio del proyecto: /res/layout. Vamos a echar un vistazo a los frame layout presentados en la sección anterior. De nuevo, esta pantalla es básicamente un frame layout con tres child views: una imagen que rellene la pantalla completa, sobre la que dos controles de texto son presentados, cada una con el valor por defecto, y fondo transparente. Este archivo layout resource, nombrado /res/layout/framed.xml, está definido en XML como sigue:

 
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ImageView
        android:id="@+id/ImageView01"
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:src="@drawable/lake"
        android:scaleType="matrix"></ImageView>
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textColor="#000"
        android:textSize="40dp"
        android:text="@string/top_text" />
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/bottom_text"
        android:layout_gravity="bottom"
        android:gravity="right"
        android:textColor="#fff"
        android:textSize="50dp" />
</FrameLayout>

Recuerde que, desde la parte interna del Activity, solamente una sola línea de código dentro del método onCreate() es necesaria para cargar y mostrar un layout resource en la pantalla. Si el layout resource fue guardado en el archivo /res/layout/framed.xml, entonces esa línea de código sería:

1
2	setContentView(R.layout.framed);

Definiendo un Frame Layout por medio de Programación

También puede crear por medio de la programación y configurar frame layouts. Esto se hace usando la clase FameLayout (android.widget.FrameLayout). Encontrará los parámetros específicos para cada frame en la clase FrameLayout.LayoutParams. Asimismo, los parámetros normales (android.view.ViewGroup.LayoutParams), tales como layout_height y layout_width, así como también los parámetros de los márgenes (ViewGroup.MarginLayoutParams), aún se utilizan en los objetos FrameLayout.
En vez de cargar un layout resource directamente usando el método setContentView() como se mostró anteriormente, usted debe desarrollar la pantalla de contenidos en Java y luego proporcionar un objeto parent layout que contiene todos los controles de contenidos para mostrar como child views en el método setContentView(). En este caso, su parent layout sería el frame layout.
Por ejemplo, el siguiente código demuestra cómo reproducir el mismo layout descrito anteriormente pero por medio de programación. Específicamente, tenemos un Activity instanciando un FrameLayout y ubicando un control ImageView seguido por dos controles TextView dentro de él en su método onCreate().


public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    TextView tv1 = new TextView(this);
    tv1.setText(R.string.top_text);
    tv1.setTextSize(40);
    tv1.setTextColor(Color.BLACK);

    TextView tv2 = new TextView(this);
    tv2.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT, Gravity.BOTTOM));
    tv2.setTextSize(50);
    tv2.setGravity(Gravity.RIGHT);
    tv2.setText(R.string.bottom_text);
    tv2.setTextColor(Color.WHITE);

    ImageView iv1 = new ImageView(this);
    iv1.setImageResource(R.drawable.lake);
    iv1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    iv1.setScaleType(ScaleType.MATRIX);

    FrameLayout fl = new FrameLayout(this);
    fl.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
    fl.addView(iv1);
    fl.addView(tv1);
    fl.addView(tv2);
    setContentView(fl);
}

La pantalla resultado luce exactamente igual a la figura mostrada anteriormente.

Cuando usar Frame Layouts

Como otros potentes tipos de layouts como linear layouts, relative layouts y table layouts a su disposición, es fácil olvidarse de los frame layouts. La eficiencia de un frame layout lo convierte en un buena opción para las pantallas que contienen algunos controles views (pantallas de inicio, pantallas de juegos, con una sola base y similares). Algunas veces otros diseños de layout poco eficientes pueden ser reducidos a un diseño frame layout que es más eficiente, mientras que otras veces un tipo de layout más especializado es apropiado. Frame layouts son opciones de layout normales cuando usted quiere traslapar views.

Mirando Controles Similares

FrameLayout es relativamente simple. Debido a esto, numerosos tipos de layouts y controles view se basan en ellos. Por ejemplo, ScrollView es simplemente un FrameLayout que tiene barras deslizables cuando el contenido child es demasiado grande para presentarlo dentro de los límites del layout. Todas las pantallas de inicio de y los widgets de la aplicación residen dentro de un FrameLayout.
Una notable adición para todos los FrameLayouts es que pueden tomar un fondo editable además de un fondo normal. Esto se hace por medio del atributo XML android:foreground. Esto puede ser utilizado para, un frame alrededor de las views básicas.

En conclusión

La aplicación Android de interfaces de usuario están definidas usando layouts, y frame layouts son uno de los tipos de layouts más sencillos y eficientes que están disponibles. Los controles child de un frame layout están presentados en una posición relativa a la parte superior izquierda del layout. Si múltiples child views existen dentro del frame layout, entonces están presentados con el último child view arriba.

Sobre los Autores

Desarrolladores de Celulares; Lauren Darcey y Shane Conder son coautores de varios libros sobre el desarrollo en Android: un libro de programación a fondo titulado: Desarrollo de Aplicaciones Inalámbricas de Android y Sams Aprenda usted mismo a Desarrollar Aplicaciones para Android en 24 horas. Cuando no escriben, ellos pasan su tiempo desarrollando programas para celulares en sus empresas y proporcionando servicios de consultoría. Pueden ser localizado a través de correo electrónico: androidwirelessdev+mt@gmail.com o por medio de su blog en androidbook.blogspot.com y en Twitter @androidwireless.