Diseño interfaz android - jpexposito/android GitHub Wiki

Un diseño define la estructura de una interfaz de usuario en tu aplicación, por ejemplo. Todos los elementos del diseño se crean usando una jerarquía de objetos View y ViewGroup. Una View suele mostrar un elemento que el usuario puede ver y con el que puede interactuar. En cambio, un ViewGroup es un contenedor invisible que define la estructura de diseño de View y otros objetos ViewGroup.

Los objetos View se denominan "widgets" y pueden ser una de muchas subclases, como Button o TextView. Los objetos ViewGroup se denominan "diseños" y pueden ser uno de los muchos tipos que proporcionan una estructura de diseño diferente, como LinearLayout o ConstraintLayout .

Puedes declarar un diseño de dos maneras:

  • Declarar elementos de la IU en XML. Android proporciona un vocabulario XML simple que coincide con las clases y subclases de vistas, como las que se usan para widgets y diseños. También puedes utilizar la función editor de diseño de Android Studio para crear tu diseño XML mediante una interfaz de arrastrar y soltar.
  • Crear una instancia de elementos de diseño durante el tiempo de ejecución. Tu aplicación puede crear objetos View y ViewGroup (y manipular sus propiedades) de forma programática. Declarar tu IU en XML te permite separar la presentación de tu app del código que controla su comportamiento. El uso de archivos XML también facilita la creación de distintos diseños para diferentes tamaños de pantalla y orientaciones. Consulta las buenas prácticas.

Trabajando con la vistas

Cada archivo de diseño debe contener exactamente un elemento raíz, que debe ser un objeto View o ViewGroup. Una vez que hayas definido el elemento raíz, puedes agregar widgets u objetos de diseño adicionales como elementos secundarios para crear gradualmente una jerarquía de vistas que defina el diseño.

Por ejemplo, a continuación se muestra un diseño XML que usa un LinearLayout vertical para incluir una TextView y un Button:

<?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"
              android:orientation="vertical" >
    <TextView android:id="@+id/text"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:text="Hello, I am a TextView" />
    <Button android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello, I am a Button" />
</LinearLayout>

Carga de recursos del XML

Debes cargar el recurso de diseño desde el código de tu aplicación. La implementación de devolución de llamada al método onCreate() en el activity que tenga relacionado. Para eso, llama a setContentView() pasando la referencia a tu recurso de diseño en forma de R.layout.layout_file_name.

Por ejemplo, si tu diseño XML se guarda como main_layout.xml, los cargarás para tu actividad de la siguiente manera:

public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main_layout);
}

Identificador de elementos

Cualquier objeto View puede tener un ID entero asociado para identificarse de forma única dentro del árbol. Cuando se compila la aplicación, se hace referencia a este ID como un número entero, pero normalmente se asigna el ID en el archivo XML de diseño como una string del atributo id.

El patrón será el siguiente:

android:id="@+id/my_button"

Veamos un ejemplo. Supongamos que deseamos declarar un elemento Button.

<Button android:id="@+id/my_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/my_button_text"/>

Este elemento tiene como identificador único @+id/my_button.

La carga de este elemento será como sigue:

Button myButton = (Button) findViewById(R.id.my_button);

Diseños comunes

Cada subclase de la clase ViewGroup proporciona una manera única de mostrar las vistas que anidas en ella. A continuación, se muestran algunos de los tipos de diseño más comunes integrados en la plataforma Android.

Diseño Lineal Objeto RelativeLayout Vista Web
Un diseño que organiza sus elementos secundarios en una sola fila horizontal o vertical. Si la longitud de la ventana supera la de la pantalla, crea una barra de desplazamiento. e permite especificar la ubicación de los objetos secundarios en función de ellos mismos (el objeto secundario A a la izquierda del objeto secundario B) o en función del elemento primario (alineado con la parte superior del elemento primario). Muestra páginas web.

El resto de layouts y los que están relacionados con datos son los siguiente:

Carga de datos en Layouts

Puedes completar una AdapterView, como ListView o GridView, enlazando la instancia AdapterView con un Adapter, que recupera datos de una fuente externa y crea una View que representa cada entrada de datos.

Android proporciona varias subclases de Adapter que resultan útiles para recuperar diferentes tipos de datos y generar vistas para una AdapterView. El adaptador más común es el siguiente.

ArrayAdapter

Usa este adaptador cuando la fuente de datos sea un arreglo. De forma predeterminada, ArrayAdapter crea una vista para cada elemento de arreglo llamando a toString() en cada elemento y disponiendo los contenidos en una TextView. Por ejemplo, si hay un arreglo de strings que deseas mostrar en una ListView, inicializa un nuevo ArrayAdapter usando un constructor para especificar el diseño de cada string y el arreglo de strings:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
      android.R.layout.simple_list_item_1, myStringArray);

Los argumentos para este constructor son los siguientes:

  • El Context de tu app.
  • El diseño que contiene una TextView para cada string del arreglo.
  • El arreglo de strings. Luego, simplemente llama a setAdapter() en tu ListView:
ListView listView = (ListView) findViewById(R.id.listview);
listView.setAdapter(adapter);

Manejar el onClic()

Puedes responder a eventos de clic en cada elemento de una AdapterView al implementar la interfaz AdapterView.OnItemClickListener. Por ejemplo:

// Create a message handling object as an anonymous class.
private OnItemClickListener messageClickedHandler = new OnItemClickListener() {
  public void onItemClick(AdapterView parent, View v, int position, long id) {
      // Do something in response to the click
  }
};

listView.setOnItemClickListener(messageClickedHandler);

Referencias

Referencias

⚠️ **GitHub.com Fallback** ⚠️