Se usó la API de Cloud Translation para traducir esta página.

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 de forma secuencial. Todos los codelabs del curso se enumeran en la página de destino de los codelabs de Android Kotlin Fundamentals.

En este codelab, aprenderás sobre los fragmentos y crearás uno dentro de una app de inicio llamada AndroidTrivia. En el siguiente codelab, obtendrás más información sobre la navegación y seguirás trabajando en la app de AndroidTrivia.

Conocimientos que ya deberías tener

Conceptos 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 programación de Android. Si el usuario responde correctamente las tres preguntas, gana el juego y puede compartir sus resultados.

La app de AndroidTrivia ilustra los 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 muestra en el centro arriba, el usuario juega y envía sus respuestas.
El panel de navegación, que se muestra a la derecha arriba, se desliza desde el costado de la app y contiene un menú con un encabezado. El ícono de panel lateral abre el panel lateral de navegación. El menú de navegación lateral contiene un vínculo a la página Acerca de y otro a las reglas del juego.

En la parte superior de la app, se muestra una vista coloreada llamada barra de la app, que también se conoce como barra de acciones.

En este codelab, trabajarás con una app de partida que proporciona código de plantilla y clases de fragmentos que necesitarás a medida que completes la app de Trivia.

Descarga el proyecto de Android Studio AndroidTrivia-Starter.
Abre el proyecto en Android Studio y ejecuta la app. Cuando se abra la app, no hará nada más que mostrar el nombre de la app y una pantalla en blanco.
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 la clase MainActivity y las clases de fragmentos.
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.
Haz clic en la pestaña Diseño. El Component Tree del archivo activity_main.xml muestra el diseño raíz como LinearLayout vertical.

En un diseño lineal vertical, todas las vistas secundarias del diseño se alinean 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 reutilizar un fragmento en varias actividades.

Considera un fragmento como una sección modular de una actividad, algo así como una "subactividad" 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 ya se definieron. 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:

En Android Studio, haz clic en cualquier lugar dentro del panel Project para volver a enfocar los archivos del proyecto. Por ejemplo, haz clic en la carpeta com.example.android.navigation.
Selecciona File > New > Fragment > Fragment (Blank).
Para el nombre del fragmento, usa TitleFragment. Borra todas las casillas de verificación, incluidas create Layout XML, include fragment factory methods y include interface callbacks.
Haz clic en Finalizar.
Abre el archivo de 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.
En onCreateView(), quita la sección return TextView(activity).apply, incluida la línea que comienza con setText. La función onCreateView() solo tendrá el siguiente código:

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Crea un objeto de vinculación

El fragmento no se compilará ahora. Para que el fragmento se compile, debes crear un objeto de vinculación y ampliar la vista del fragmento (lo que equivale a usar setContentView() para una actividad).

En el método onCreateView() de TitleFragment.kt, crea una variable binding (val binding).
Para inflar 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 la vinculación.
Es el recurso de diseño XML del diseño que se aumentará. Usa uno de los diseños que ya están definidos para ti, R.layout.fragment_title.
container para el ViewGroup principal. (Este parámetro es opcional).
false para el valor attachToParent.

Asigna la vinculación que devuelve DataBindingUtil.inflate a la variable binding.
Devuelve binding.root desde el método, que contiene la vista inflada. Tu método onCreateView() ahora se ve 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.

Abre res > layout > activity_main.xml y haz clic en la pestaña Text para ver el código XML del diseño.
Dentro del elemento LinearLayout existente, agrega un elemento fragment.
Configura el ID del fragmento como titleFragment.
Establece el nombre del fragmento en la ruta completa de la clase del fragmento, que en este caso es com.example.android.navigation.TitleFragment.
Establece el ancho y la altura 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>

Ejecuta la app. El fragmento se agregó a la pantalla principal.

Proyecto de Android Studio: AndroidTriviaFragment

En este codelab, agregaste un fragmento a la app de AndroidTrivia, en la 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> para definir el diseño del 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:

Developing Android Apps with Kotlin

Documentación para desarrolladores de Android:

En esta sección, se enumeran las posibles actividades para el hogar para los alumnos que trabajan en este codelab como parte de un curso dirigido por un instructor. Depende del instructor hacer lo siguiente:

Si es necesario, asigna una tarea.
Comunicarles a los alumnos cómo enviar las actividades para el hogar.
Califica las actividades para el hogar.

Los instructores pueden usar estas sugerencias en la medida que quieran y deben asignar cualquier otra actividad para el hogar que consideren apropiada.

Si estás trabajando en este codelab por tu cuenta, usa estas actividades para el hogar para probar tus conocimientos.

Responde estas preguntas:

Pregunta 1

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

Cuando creas un fragmento, inflas el diseño en el método onCreateView(). Cuando creas una actividad, inflas el diseño en onCreate().
Una actividad tiene su propio diseño, pero un fragmento no puede tenerlo.
Una actividad tiene su propio ciclo de vida, pero un fragmento no.
Cuando inflas el diseño de un fragmento o una actividad, puedes hacer referencia al diseño como R.layout.layoutname.

Pregunta 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, el fragmento se agrega automáticamente al archivo de diseño activity_main.xml.
Usa la etiqueta <fragment> para definir el lugar en 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 obtener vínculos a otros codelabs de este curso, consulta la página de destino de los codelabs de Conceptos básicos de Kotlin para Android.

Aspectos básicos de Kotlin para Android 03.1: Cómo crear un fragmento Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.