Aspectos básicos de Kotlin para Android 03.1: Cómo crear un fragmento

Este codelab es parte del curso Conceptos básicos de Kotlin para Android. Aprovecharás al máximo este curso si trabajas con los codelabs en secuencia. Todos los codelabs del curso se detallan en la página de destino de codelabs sobre los aspectos básicos de Kotlin para Android.

En este codelab, aprenderás sobre fragmentos y crearás un fragmento dentro de una app inicial llamada AndroidTrivia. En el siguiente codelab, obtendrás más información sobre la navegación y trabajarás más en la app de AndroidTrivia.

Conocimientos que ya deberías tener

  • Los aspectos básicos de Kotlin
  • Cómo crear apps básicas para Android en Kotlin
  • Cómo trabajar con diseños

Qué aprenderás

  • Cómo agregar un fragmento de forma estática a tu app

Actividades

  • Crea un fragmento dentro de una actividad.

En los tres codelabs que componen esta lección, trabajarás en una app llamada AndroidTrivia. La app completa es un juego en el que el usuario responde tres preguntas de trivia sobre la codificación de Android. Si el usuario responde las tres preguntas correctamente, gana el juego y puede compartir sus resultados.

La app de AndroidTrivia muestra patrones y controles de navegación. La app tiene varios componentes:

  • En la pantalla de título, que se muestra a la izquierda en la captura de pantalla anterior, el usuario inicia el juego.
  • En la pantalla del juego con preguntas, que se muestran en el centro de la parte superior, el usuario juega y envía sus respuestas.
  • El panel lateral de navegación, que se muestra a la derecha, se desliza desde el lateral de la app y contiene un menú con un encabezado. El ícono del panel lateral abre el panel lateral de navegación. El menú de panel lateral de navegación contiene un vínculo a la página “Acerca de” y un vínculo a las reglas del juego.

En la parte superior de la app, se muestra una vista en color llamada barra de la app, también conocida como barra de acciones.

En este codelab, trabajarás desde una app de inicio que proporciona el código de plantilla y las clases de fragmentos que necesitas mientras completas la app de Trivia.

  1. Descarga el proyecto AndroidTrivia-Starter de Android Studio.
  2. Abre el proyecto en Android Studio y ejecuta la app. Cuando se abre, no hace nada más que mostrar el nombre de la app y una pantalla en blanco.


  3. En el panel Project de Android Studio, abre la vista Project: Android para explorar los archivos del proyecto. Abre la carpeta app > java para ver las clases MainActivity y fragmentos.

  4. Abre la carpeta res > layout y haz doble clic en activity_main.xml. El archivo activity_main.xml aparece en el editor de diseño.
  5. Haz clic en la pestaña Design. En Component Tree del archivo activity_main.xml, se muestra el diseño raíz como vertical LinearLayout.



    En un diseño lineal vertical, todas las vistas secundarias del diseño están alineadas verticalmente.

Un fragmento representa un comportamiento o una parte de la interfaz de usuario (IU) en una actividad. Puedes combinar varios fragmentos en una sola actividad para compilar una IU de varios paneles y volver a usar un fragmento en varias actividades.

Considera un fragmento como una sección modular de una actividad, como una actividad secundaria, que también puedes usar en otras actividades:

  • Un fragmento tiene su propio ciclo de vida y recibe sus propios eventos de entrada.
  • Puedes agregar o quitar un fragmento mientras se ejecuta la actividad.
  • Un fragmento se define en una clase de Kotlin.
  • La IU de un fragmento se define en un archivo de diseño XML.

La app de AndroidTrivia tiene una actividad principal y varios fragmentos. La mayoría de los fragmentos y sus archivos de diseño se han definido para ti. En esta tarea, crearás un fragmento y lo agregarás a la actividad principal de la app.

Paso 1: Agrega una clase de fragmento

En este paso, crearás una clase TitleFragment en blanco. Comienza por crear una clase de Kotlin para un fragmento nuevo:

  1. En Android Studio, haz clic en cualquier parte del panel de proyecto para enfocar los archivos de proyecto. Por ejemplo, haz clic en la carpeta com.example.android.navigation.
  2. Selecciona File > New > Fragment > Fragment (Blank).
  3. Para el nombre del fragmento, usa TitleFragment. Desmarca todas las casillas de verificación, incluidos cómo crear XML de diseño, Incluir devoluciones de llamada de fábrica y Incluir devoluciones de llamada de interfaz.
  4. Haz clic en Finish.
  5. Abre el archivo del fragmento TitleFragment.kt si aún no está abierto. Contiene el método onCreateView(), que es uno de los métodos que se llama durante el ciclo de vida de un fragmento.
  6. En onCreateView(), quita la sección return TextView(activity).apply, incluida la línea que comienza con setText. La función onCreateView() solo queda con el siguiente código:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Crea un objeto de vinculación

Ahora, el fragmento no se compilará. Para que el fragmento se compile, debes crear un objeto de vinculación y aumentar la vista de este (que equivale a usar setContentView() para una actividad).

  1. En el método onCreateView() de TitleFragment.kt, crea una variable binding (val binding).
  2. Para aumentar la vista del fragmento, llama al método DataBindingUtil.inflate() en el objeto Binding del fragmento, que es FragmentTitleBinding.

    Pasa cuatro parámetros al método:
  • inflater, que es el LayoutInflater que se usa para aumentar el diseño de vinculación.
  • El recurso de diseño XML del diseño que se va a aumentar. Usa uno de los diseños que ya están definidos, R.layout.fragment_title.
  • container para el ViewGroup superior. (Este parámetro es opcional).
  • false para el valor attachToParent.
  1. Asigna la vinculación que muestra DataBindingUtil.inflate a la variable binding.
  2. Muestra binding.root del método, que contiene la vista aumentada. Tu método onCreateView() ahora luce como el siguiente código:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
   val binding = DataBindingUtil.inflate<FragmentTitleBinding>(inflater,
           R.layout.fragment_title,container,false)
   return binding.root
   }

Paso 2: Agrega el fragmento nuevo al archivo de diseño principal

En este paso, agregarás TitleFragment al archivo de diseño activity_main.xml de la app.

  1. Abre res > layout > activity_main.xml y haz clic en la pestaña Text para ver el código XML de diseño.
  2. Dentro del elemento LinearLayout existente, agrega un elemento fragment.
  3. Establece el ID del fragmento en titleFragment.
  4. Configura el nombre del fragmento en la ruta de acceso completa de la clase del fragmento, que en este caso es com.example.android.navigation.TitleFragment.
  5. Establece el ancho y el alto del diseño en match_parent.
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <fragment
                android:id="@+id/titleFragment"
                android:name="com.example.android.navigation.TitleFragment"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                />
        </LinearLayout>

</layout>
  1. Ejecuta la app. El fragmento se agregó a tu pantalla principal.

Proyecto de Android Studio: AndroidTriviaFragment

En este codelab, agregaste un fragmento a la app de AndroidTrivia, que seguirás trabajando en los próximos dos codelabs de esta lección.

  • Un fragmento es una sección modular de una actividad.
  • Un fragmento tiene su propio ciclo de vida y recibe sus propios eventos de entrada.
  • Usa la etiqueta <fragment> a fin de definir el diseño para el fragmento en el archivo de diseño XML.
  • Aumenta el diseño de un fragmento en onCreateView().
  • Puedes agregar o quitar un fragmento mientras se ejecuta la actividad.

Curso de Udacity:

Documentación para desarrolladores de Android:

En esta sección, se enumeran las posibles tareas para los alumnos que trabajan con este codelab como parte de un curso que dicta un instructor. Depende del instructor hacer lo siguiente:

  • Si es necesario, asigna la tarea.
  • Informa a los alumnos cómo enviar los deberes.
  • Califica las tareas.

Los instructores pueden usar estas sugerencias lo poco o lo que quieran, y deben asignar cualquier otra tarea que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas tareas para poner a prueba tus conocimientos.

Responda estas preguntas

Question 1

¿Cuáles son algunas de las diferencias entre fragmentos y actividades? Seleccione todas las afirmaciones que sean verdaderas.

  • Cuando creas un fragmento, aumentas el diseño en el método onCreateView(). Cuando creas una actividad, aumentas el diseño en onCreate().
  • Una actividad tiene su propio diseño, pero un fragmento no puede tener su propio diseño.
  • Una actividad tiene su propio ciclo de vida, pero un fragmento no.
  • Cuando se aumenta el diseño de un fragmento o una actividad, puedes hacer referencia a él como R.layout.layoutname.

Question 2

¿Cuáles de las siguientes afirmaciones sobre los fragmentos son verdaderas? Selecciona todas las opciones que correspondan.

  • Puedes usar un fragmento en más de una actividad.
  • Una actividad puede tener varios fragmentos.
  • Después de definir un fragmento en una clase de Kotlin, este se agrega automáticamente al archivo de diseño activity_main.xml.
  • Usa la etiqueta <fragment> para definir el lugar de un archivo de diseño en el que se insertará un fragmento.

Comienza la siguiente lección: 3.2 Cómo definir rutas de navegación

Para ver vínculos a otros codelabs de este curso, consulta la página de destino de codelabs sobre aspectos básicos de Kotlin para Android.