Vinculación de vistas   Parte de Android Jetpack.

La vinculación de vistas es una función que facilita la escritura de código que interactúa con las vistas. Una vez que la vinculación de vista está habilitada en un módulo, genera una clase de vinculación para cada archivo de diseño XML presente en ese módulo. Una instancia de una clase de vinculación contiene referencias directas a todas las vistas que tienen un ID en el diseño correspondiente.

En la mayoría de los casos, la vinculación de vistas reemplaza a findViewById.

Configuración

La vinculación de vista se habilita módulo por módulo. Para habilitar la vinculación de vista en un módulo, configura la opción de compilación viewBinding en true en el archivo build.gradle a nivel del módulo, como se muestra en el siguiente ejemplo:

Groovy

android {
    ...
    buildFeatures {
        viewBinding true
    }
}

Kotlin

android {
    ...
    buildFeatures {
        viewBinding = true
    }
}

Si deseas que se ignore un archivo de diseño mientras se generan clases de vinculación, agrega el atributo tools:viewBindingIgnore="true" a la vista raíz de ese archivo:

<LinearLayout
        ...
        tools:viewBindingIgnore="true" >
    ...
</LinearLayout>

Uso

Si la vinculación de vistas está habilitada para un módulo, se genera una clase de vinculación para cada archivo de diseño XML que contiene el módulo. Cada clase de vinculación contiene referencias a la vista raíz y a todas las vistas que tienen un ID. El nombre de la clase de vinculación se genera convirtiendo el nombre del archivo XML según la convención de mayúsculas y minúsculas, y agregando la palabra "Binding" al final.

Por ejemplo, considera un archivo de diseño llamado result_profile.xml que contiene lo siguiente:

<LinearLayout ... >
    <TextView android:id="@+id/name" />
    <ImageView android:cropToPadding="true" />
    <Button android:id="@+id/button"
        android:background="@drawable/rounded_button" />
</LinearLayout>

La clase de vinculación generada se llama ResultProfileBinding. Esta clase tiene dos campos: un TextView llamado name y un Button llamado button. El campo ImageView del diseño no tiene ningún ID, por lo que no se hace referencia a él en la clase de vinculación.

Cada clase de vinculación también incluye un método getRoot(), que proporciona una referencia directa para la vista raíz del archivo de diseño correspondiente. En este ejemplo, el método getRoot() de la clase ResultProfileBinding muestra la vista raíz LinearLayout.

En las siguientes secciones, se demuestra el uso de las clases de vinculación generadas en actividades y fragmentos.

Cómo usar la vinculación de vista en actividades

Para configurar una instancia de la clase de vinculación para usarla con una actividad, realiza los siguientes pasos en el método onCreate() de la actividad:

  1. Llama al método inflate() estático incluido en la clase de vinculación generada. Esto crea una instancia de la clase de vinculación para la actividad que se usará.
  2. Para obtener una referencia a la vista raíz, llama al método getRoot() o usa la sintaxis de la propiedad Kotlin.
  3. Pasa la vista raíz a setContentView() para que sea la vista activa en la pantalla.

Estos pasos se muestran en el siguiente ejemplo:

Kotlin

private lateinit var binding: ResultProfileBinding

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ResultProfileBinding.inflate(layoutInflater)
    val view = binding.root
    setContentView(view)
}

Java

private ResultProfileBinding binding;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    binding = ResultProfileBinding.inflate(getLayoutInflater());
    View view = binding.getRoot();
    setContentView(view);
}

Ahora puedes usar la instancia de la clase de vinculación para hacer referencia a cualquiera de las vistas:

Kotlin

binding.name.text = viewModel.name
binding.button.setOnClickListener { viewModel.userClicked() }

Java

binding.name.setText(viewModel.getName());
binding.button.setOnClickListener(new View.OnClickListener() {
    viewModel.userClicked()
});

Cómo usar la vinculación de vista en fragmentos

Para configurar una instancia de la clase de vinculación para usarla con un fragmento, realiza los siguientes pasos en el método onCreateView() del fragmento:

  1. Llama al método inflate() estático incluido en la clase de vinculación generada. Esto crea una instancia de la clase de vinculación para que la use el fragmento.
  2. Para obtener una referencia a la vista raíz, llama al método getRoot() o usa la sintaxis de la propiedad Kotlin.
  3. Muestra la vista raíz del método onCreateView() para convertirla en la vista activa de la pantalla.

Kotlin

private var _binding: ResultProfileBinding? = null
// This property is only valid between onCreateView and
// onDestroyView.
private val binding get() = _binding!!

override fun onCreateView(
    inflater: LayoutInflater,
    container: ViewGroup?,
    savedInstanceState: Bundle?
): View? {
    _binding = ResultProfileBinding.inflate(inflater, container, false)
    val view = binding.root
    return view
}

override fun onDestroyView() {
    super.onDestroyView()
    _binding = null
}

Java

private ResultProfileBinding binding;

@Override
public View onCreateView (LayoutInflater inflater,
                          ViewGroup container,
                          Bundle savedInstanceState) {
    binding = ResultProfileBinding.inflate(inflater, container, false);
    View view = binding.getRoot();
    return view;
}

@Override
public void onDestroyView() {
    super.onDestroyView();
    binding = null;
}

Ahora puedes usar la instancia de la clase de vinculación para hacer referencia a cualquiera de las vistas:

Kotlin

binding.name.text = viewModel.name
binding.button.setOnClickListener { viewModel.userClicked() }

Java

binding.name.setText(viewModel.getName());
binding.button.setOnClickListener(new View.OnClickListener() {
    viewModel.userClicked()
});

Proporciona sugerencias para diferentes configuraciones

Cuando declaras vistas en varias configuraciones, a veces tiene sentido usar un tipo de vista diferente según el diseño en particular. En el siguiente fragmento de código, se muestra un ejemplo de esto:

# in res/layout/example.xml

<TextView android:id="@+id/user_bio" />

# in res/layout-land/example.xml

<EditText android:id="@+id/user_bio" />

En este caso, es posible que esperes que la clase generada exponga un campo userBio de tipo TextView, ya que TextView es la clase base común. Debido a limitaciones técnicas, el generador de código de vinculación de vistas no puede determinar esto y, en su lugar, genera un campo View. Esto requiere transmitir el campo más adelante con binding.userBio as TextView.

Para solucionar esta limitación, la vinculación de vistas admite un atributo tools:viewBindingType, lo que te permite indicarle al compilador qué tipo usar en el código generado. En el ejemplo anterior, puedes usar este atributo para hacer que el compilador genere el campo como un TextView:

# in res/layout/example.xml (unchanged)

<TextView android:id="@+id/user_bio" />

# in res/layout-land/example.xml

<EditText android:id="@+id/user_bio" tools:viewBindingType="TextView" />

En otro ejemplo, supongamos que tienes dos diseños, uno que contiene un BottomNavigationView y otro que contiene un NavigationRailView. Ambas clases extienden NavigationBarView, que contiene la mayoría de los detalles de la implementación. Si tu código no necesita saber exactamente qué subclase está presente en el diseño actual, puedes usar tools:viewBindingType para establecer el tipo generado en NavigationBarView en ambos diseños:

# in res/layout/navigation_example.xml

<BottomNavigationView android:id="@+id/navigation" tools:viewBindingType="NavigationBarView" />

# in res/layout-w720/navigation_example.xml

<NavigationRailView android:id="@+id/navigation" tools:viewBindingType="NavigationBarView" />

La vinculación de vistas no puede validar el valor de este atributo cuando se genera código. Para evitar errores de tiempo de compilación y de tiempo de ejecución, el valor debe cumplir con las siguientes condiciones:

  • El valor debe ser una clase que herede de android.view.View.

  • El valor debe ser una superclase de la etiqueta en la que se coloca. Por ejemplo, los siguientes valores no funcionan:

      <TextView tools:viewBindingType="ImageView" /> <!-- ImageView is not related to TextView. -->
  <TextView tools:viewBindingType="Button" /> <!-- Button is not a superclass of TextView. -->

  • El tipo final debe resolverse de manera coherente en todas las configuraciones.

Diferencias de findViewById

La vinculación de vistas tiene ventajas importantes frente al uso de findViewById:

  • Seguridad contra valores nulos: Dado que la vinculación de vistas crea referencias directas a las vistas, no hay riesgo de que se produzca una excepción de puntero nulo debido a un ID de vista no válido. Además, cuando una vista solo está presente en algunas configuraciones de un diseño, el campo que contiene su referencia en la clase de vinculación se marca con @Nullable.
  • Seguridad de tipos: Los campos de cada clase de vinculación tienen tipos que coinciden con las vistas a las que hacen referencia en el archivo en formato XML. Esto significa que no hay riesgo de una excepción de transmisión de clase.

Estas diferencias significan que las incompatibilidades entre tu diseño y tu código hacen que falle la compilación durante el momento de compilación en lugar de hacerlo en el tiempo de ejecución.

Comparación con la vinculación de datos

La vinculación de vistas y la vinculación de datos generan clases de vinculación que puedes usar para hacer referencia a vistas directamente. Sin embargo, la vinculación de vistas está diseñada para procesar casos de uso más simples y proporciona los siguientes beneficios por sobre la vinculación de datos:

  • Compilación más rápida: La vinculación de vistas no requiere procesamiento de anotaciones, por lo que los tiempos de compilación son más rápidos.
  • Facilidad de uso: La vinculación de vistas no requiere archivos de diseño XML etiquetados especialmente, por lo que es más rápido adoptarlos en tus apps. Una vez que habilites la vinculación de vista en un módulo, se aplicará automáticamente a todos los diseños de ese módulo.

Por otro lado, la vinculación de vistas tiene las siguientes limitaciones en comparación con la vinculación de datos:

Debido a estas consideraciones, en algunos casos es mejor usar la vinculación de vistas y la vinculación de datos en un proyecto. Puedes usar la vinculación de datos en diseños que requieren funciones avanzadas y usar la vinculación de vista en diseños que no lo requieren.

Recursos adicionales

Para obtener más información sobre la vinculación de vistas, consulta los siguientes recursos adicionales:

Blogs

Videos