Archivo por días: 9 enero, 2014

Layouts en android o cómo organizar los componentes en la pantalla

Programación, ,

Existen multitud de tipos de layouts para ordenar los componentes en una pantalla. A continuación explicaremos algunos de los más comunes:

  • LinearLayout: consiste en agrupar los elementos uno detrás de otro de forma horizontal o vertical.
  • TableLayout: este layout permite agrupar los elementos en una tabla que contiene filas y columnas.
  • RelativeLayout: los elementos se ubican dada una posición relativa de otro elemento del mismo layout.
  • FrameLayout: ubica todos los elementos alineados sobre la esquina superior izquierda de manera que unos controles quedarán encima de otros.
  • ScrollView: se puede utilizar cuando el número de componentes de una pantalla se desborda y es necesario un scroll vertical.

Todas estas clases heredan de la clase View o ViewGroup. De esta manera heredarán a su vez una serie de propiedades comunes:

  • layout_width: anchura
  • layout_height: altura
  • layout_marginTop: margen superior
  • layout_marginBottom: margen inferior
  • layout_marginLeft: margen izquierdo
  • layout_marginRight: margen derecho
  • layout_gravity: orientaciones vertical y horizontal del elemento
  • layout_weight: peso
  • layout_x: coordenada x donde ubicar el elemento
  • layout_y: coordenada y donde ubicar el elemento

La manera de utilizar estos layouts será mediante marcación XML en el fichero layout correspondiente a cada actividad. Por ejemplo:


<FrameLayout 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:background="#0099cc"
tools:context=".FullscreenActivity" >

<!--
The primary full-screen view. This can be replaced with whatever view
is needed to present your content, e.g. VideoView, SurfaceView,
TextureView, etc.
-->

<TextView
android:id="@+id/fullscreen_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:keepScreenOn="true"
android:text="@string/dummy_content"
android:textColor="#33b5e5"
android:textSize="50sp"
android:textStyle="bold" />

<!--
This FrameLayout insets its children based on system windows using
android:fitsSystemWindows.
-->

<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true" >

<LinearLayout
android:id="@+id/fullscreen_content_controls"
style="?buttonBarStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center_horizontal"
android:background="@color/black_overlay"
android:orientation="horizontal"
tools:ignore="UselessParent" >

<Button
android:id="@+id/dummy_button"
style="?buttonBarButtonStyle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="@string/dummy_button" />
</LinearLayout>
</FrameLayout>

</FrameLayout>