Una vista como la composición de varias vistas

Ejercicio paso a paso:  Una vista para introducir una dirección de socket.

Android nos proporciona una extensa paleta de controles (widgets) para crear complejas interfaces de usuario. En este ejemplo vamos a estudiar cómo podemos crear un nuevo tipo de vista para una tarea especializada uniendo varios de estos controles. En concreto, crearemos una vista para introducir una dirección de socket. Como se ve a continuación, estará formada por una dirección IP y un número de puerto:

 

1.    Crea un nuevo proyecto con nombre VistaConectar. En el primer cuadro de diálogo introduce los siguientes datos:

Application Name: VistaConectar

Package name: com.example.vistaconectar

Minimum Required SDK: API 4 (1.6)

Target SDK: API 17 (4.2)

Compile With: API 17 (4.2)

2.     Crea un nuevo layout con nombre conectar.xml. Contendrá los elementos que visualizará nuestra nueva vista:

<?xmlversion="1.0" encoding="utf-8"?>

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal" >

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="70"

        android:orientation="vertical" >

        <TextView

            android:id="@+id/textView1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="ip" />

        <EditText

            android:id="@+id/ip"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:inputType="numberDecimal"

            android:digits="0123456789."/>

        <TextView

            android:id="@+id/estado"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:gravity="center"

            android:text="Desconectado"

            android:textAppearance="?android:attr/textAppearanceMedium" />

    </LinearLayout>

    <LinearLayout

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_weight="30"

        android:orientation="vertical" >

        <TextView

            android:id="@+id/textView3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="puerto" />

        <EditText

            android:id="@+id/puerto"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:inputType="number" />

        <Button

            android:id="@+id/conectar"

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:text="Conectar" />

    </LinearLayout>

</LinearLayout>

Para conseguir esta composición se ha utilizado un LinearLayout con dos columnas. Se ha utilizado el atributo layout_weight para repartir el ancho sobrante, dando un 70% a la primera columna y un 30% a la segunda. Especial atención hay que prestar al primer EditText en sus campos:

android:inputType="numberDecimal"

android:digits="0123456789."

que nos permite introducir una dirección IP formada por dígitos decimales y puntos.

3.     Crea una nueva clase con nombre VistaConectar y este código:

publicclass VistaConectar extends LinearLayout {

   private EditText ip;

   private EditText puerto;

   private TextView estado;

   private Button conectar;

 

   public VistaConectar(Context context, AttributeSet attrs) {

       super(context, attrs);     

       LayoutInflater.from(context).inflate(R.layout.conectar,this,true);  

       ip = (EditText) findViewById(R.id.ip);

       puerto= (EditText) findViewById(R.id.puerto);

       estado = (TextView) findViewById(R.id.estado);

       conectar = (Button) findViewById(R.id.conectar);

   }

}

4.  Modifica el contenido de la actividad inicial (activity_main.xml) para que incluya una vista de este tipo:

<LinearLayoutxmlns: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:orientation="vertical"

    tools:context=".MainActivity" >

    <com.example.vistaconectar.VistaConectar

        android:id="@+id/vistaConectar"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />

</LinearLayout>

5.  Ejecuta la aplicación y verifica el resultado.

 

Preguntas de repaso:  Vistas