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.
- Descarga el proyecto AndroidTrivia-Starter de Android Studio.
- 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.
- 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. - 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 Design. En Component Tree del archivo
activity_main.xml
, se muestra el diseño raíz como verticalLinearLayout
.
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:
- 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.
- Selecciona File > New > Fragment > Fragment (Blank).
- 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.
- Haz clic en Finish.
- Abre el archivo del fragmento
TitleFragment.kt
si aún no está abierto. Contiene el métodoonCreateView()
, que es uno de los métodos que se llama durante el ciclo de vida de un fragmento. - En
onCreateView()
, quita la secciónreturn TextView(activity).apply
, incluida la línea que comienza consetText
. La funciónonCreateView()
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).
- En el método
onCreateView()
deTitleFragment.kt
, crea una variablebinding
(val binding
). - Para aumentar la vista del fragmento, llama al método
DataBindingUtil.inflate()
en el objetoBinding
del fragmento, que esFragmentTitleBinding
.
Pasa cuatro parámetros al método:
inflater
, que es elLayoutInflater
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 elViewGroup
superior. (Este parámetro es opcional).false
para el valorattachToParent
.
- Asigna la vinculación que muestra
DataBindingUtil.inflate
a la variablebinding
. - Muestra
binding.root
del método, que contiene la vista aumentada. Tu métodoonCreateView()
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.
- Abre res > layout > activity_main.xml y haz clic en la pestaña Text para ver el código XML de diseño.
- Dentro del elemento
LinearLayout
existente, agrega un elementofragment
. - Establece el ID del fragmento en
titleFragment
. - 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
. - 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>
- 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 enonCreate()
. - 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:
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.