Android Kotlin Fundamentals 03.1: Создание фрагмента

Эта кодовая лаборатория является частью курса Android Kotlin Fundamentals. Вы получите максимальную отдачу от этого курса, если будете последовательно работать с лабораториями кода. Все кодовые лаборатории курса перечислены на целевой странице кодовых лабораторий Android Kotlin Fundamentals .

В этой лабораторной работе вы узнаете о фрагментах и ​​создадите фрагмент в стартовом приложении под названием AndroidTrivia. В следующей лаборатории кода вы узнаете больше о навигации и продолжите работу над приложением AndroidTrivia.

Что вы уже должны знать

  • Основы Котлина
  • Как создавать базовые приложения для Android на Kotlin
  • Как работать с макетами

Что вы узнаете

  • Как статически добавить фрагмент в ваше приложение

Что ты будешь делать

  • Создайте фрагмент внутри действия.

В трех лабораториях кода, составляющих этот урок, вы работаете над приложением под названием AndroidTrivia. Завершенное приложение представляет собой игру, в которой пользователь отвечает на три викторины о кодировании Android. Если пользователь правильно ответит на все три вопроса, он выиграет игру и сможет поделиться своими результатами.

Приложение AndroidTrivia иллюстрирует шаблоны навигации и элементы управления. Приложение состоит из нескольких компонентов:

  • На титульном экране, показанном слева на скриншоте выше, пользователь запускает игру.
  • На игровом экране с вопросами, показанном посередине вверху, пользователь играет в игру и отправляет свои ответы.
  • Панель навигации, показанная справа вверху, выдвигается сбоку приложения и содержит меню с заголовком. Значок ящика открывает панель навигации. Меню навигационного ящика содержит ссылку на страницу «О программе» и ссылку на правила игры.

В верхней части приложения отображается цветное представление, называемое панелью приложения , также известной как панель действий .

В этой лаборатории кода вы работаете с начальным приложением, которое предоставляет код шаблона и классы фрагментов, которые вам нужны при завершении приложения Trivia.

  1. Загрузите проект AndroidTrivia-Starter Android Studio.
  2. Откройте проект в Android Studio и запустите приложение. Когда приложение открывается, оно ничего не делает, кроме отображения имени приложения и пустого экрана.


  3. На панели проектов Android Studio откройте представление «Проект: Android», чтобы изучить файлы проекта. Откройте папку app > java , чтобы увидеть класс MainActivity и классы фрагментов.

  4. Откройте папку res > layout и дважды щелкните на файле activity_main.xml . Файл activity_main.xml появится в редакторе макетов.
  5. Перейдите на вкладку « Дизайн ». Дерево компонентов для файла activity_main.xml показывает корневой макет как вертикальный LinearLayout .



    В вертикальном линейном макете все дочерние представления в макете выравниваются по вертикали.

Фрагмент представляет поведение или часть пользовательского интерфейса (UI) в действии. Вы можете комбинировать несколько фрагментов в одном действии, чтобы создать пользовательский интерфейс с несколькими панелями, и вы можете повторно использовать фрагмент в нескольких действиях.

Думайте о фрагменте как о модульной части действия, что-то вроде «поддействия», которое вы также можете использовать в других действиях:

  • Фрагмент имеет свой жизненный цикл и получает свои входные события.
  • Вы можете добавить или удалить фрагмент во время выполнения действия.
  • Фрагмент определен в классе Kotlin.
  • Пользовательский интерфейс фрагмента определяется в файле макета XML.

Приложение AndroidTrivia имеет основное действие и несколько фрагментов. Большинство фрагментов и их файлы компоновки были определены за вас. В этой задаче вы создаете фрагмент и добавляете его в основное действие приложения.

Шаг 1: Добавьте класс фрагмента

На этом этапе вы создаете пустой класс TitleFragment . Начните с создания класса Kotlin для нового фрагмента:

  1. В Android Studio щелкните в любом месте панели «Проект», чтобы вернуть фокус к файлам проекта. Например, щелкните папку com.example.android.navigation .
  2. Выберите «Файл» > «Создать» > «Фрагмент» > «Фрагмент (пустой)» .
  3. В качестве имени фрагмента используйте TitleFragment . Снимите все флажки, включая « Создать макет XML », « Включить методы фабрики фрагментов» и « Включить обратные вызовы интерфейса ».
  4. Нажмите Готово .
  5. Откройте файл фрагмента TitleFragment.kt , если он еще не открыт. Он содержит метод onCreateView() , который является одним из методов, вызываемых в течение жизненного цикла фрагмента .
  6. В onCreateView() удалите раздел return TextView(activity).apply , включая строку, начинающуюся с setText . В onCreateView() остался только следующий код:
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                         savedInstanceState: Bundle?): View? {
}

Создать объект привязки

Фрагмент теперь не будет компилироваться. Чтобы фрагмент скомпилировался, вам нужно создать объект привязки и раздуть представление фрагмента (что эквивалентно использованию setContentView() для действия).

  1. В onCreateView() в TitleFragment.kt создайте переменную binding ( val binding ).
  2. Чтобы расширить представление фрагмента, вызовите метод DataBindingUtil.inflate() для объекта Binding фрагмента, которым является FragmentTitleBinding .

    Передайте в метод четыре параметра:
  • inflater , который является LayoutInflater , используемым для раздувания макета привязки.
  • Ресурс XML-макета макета, который нужно раздуть. Используйте один из макетов, который уже определен для вас, R.layout.fragment_title .
  • container для родительской ViewGroup . (Этот параметр является необязательным.)
  • false для значения attachToParent .
  1. Назначьте привязку, которую DataBindingUtil.inflate возвращает, переменной binding .
  2. Возвратите binding.root из метода, содержащего увеличенное представление. Ваш onCreateView() теперь выглядит следующим образом:
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
   }

Шаг 2: Добавьте новый фрагмент в основной файл макета

На этом шаге вы добавляете TitleFragment в файл макета приложения activity_main.xml .

  1. Откройте res > layout > activity_main.xml и щелкните вкладку « Текст », чтобы просмотреть XML-код макета.
  2. Внутри существующего элемента LinearLayout добавьте элемент fragment .
  3. Установите идентификатор фрагмента в titleFragment .
  4. Задайте для имени фрагмента полный путь к классу фрагмента, в данном случае это com.example.android.navigation.TitleFragment .
  5. Установите ширину и высоту макета на 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. Запустите приложение. Фрагмент добавлен на ваш главный экран.

Проект Android Studio: AndroidTriviaFragment

В этой лаборатории кода вы добавили фрагмент в приложение AndroidTrivia, над которым вы продолжите работу в следующих двух лабораториях этого урока.

  • Фрагмент — это модульная часть действия.
  • Фрагмент имеет свой жизненный цикл и получает свои входные события.
  • Используйте <fragment> , чтобы определить макет для фрагмента в XML-файле макета.
  • Раздуйте макет для фрагмента в onCreateView() .
  • Вы можете добавить или удалить фрагмент во время выполнения действия.

Удасити курс:

Документация для разработчиков Android:

В этом разделе перечислены возможные домашние задания для студентов, которые работают с этой кодовой лабораторией в рамках курса, проводимого инструктором. Инструктор должен сделать следующее:

  • При необходимости задайте домашнее задание.
  • Объясните учащимся, как сдавать домашние задания.
  • Оценивайте домашние задания.

Преподаватели могут использовать эти предложения так мало или так часто, как они хотят, и должны свободно давать любые другие домашние задания, которые они считают подходящими.

Если вы работаете с этой кодовой лабораторией самостоятельно, не стесняйтесь использовать эти домашние задания, чтобы проверить свои знания.

Ответьте на эти вопросы

Вопрос 1

Каковы некоторые различия между фрагментами и действиями? Выберите все утверждения, которые верны.

  • При создании фрагмента вы расширяете макет в onCreateView() . При создании действия вы расширяете макет в onCreate() .
  • Активность имеет свой собственный макет, но фрагмент не может иметь свой собственный макет.
  • Активность имеет свой жизненный цикл, а фрагмент — нет.
  • При расширении макета для фрагмента или действия вы можете ссылаться на макет как R.layout. layoutname .

вопрос 2

Какие из следующих утверждений о фрагментах верны? Выбрать все, что подходит.

  • Фрагмент можно использовать более чем в одном действии.
  • Одно действие может иметь несколько фрагментов.
  • После определения фрагмента в классе Kotlin этот фрагмент автоматически добавляется в файл макета activity_main.xml .
  • Используйте <fragment> , чтобы указать место в файле макета, куда должен быть вставлен фрагмент.

Начать следующий урок: 3.2 Определение путей навигации

Ссылки на другие лаборатории кода в этом курсе см. на целевой странице лаборатории кода Android Kotlin Fundamentals .