Шаблон "Basic Activity"

Раньше шаблон использовал компоненты из библиотеки Android Support Design и был специально спроектирован под новый дизайн Material Design. Позже появился Jetpack AndroidX и шаблон переделали. А недавно его в очередной раз изменили, добавив фрагменты и новый способ навигации между ними.

Создадим проект при помощи шаблона Basic Activity.

Заполняем нужные поля. Флажок ставить не нужно, он нужен для поддержки старой библиотеки.

При использовании шаблона будут задействованы различные компоненты: CoordinatorLayout, AppBarLayout, FloatingActionButton, Snackbar.

Первые три компонента доступны через XML-разметку, а Snackbar вызывается программно.

Изучим разметку активности activity_main.xml.


<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </com.google.android.material.appbar.AppBarLayout>

    <include layout="@layout/content_main" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Корневым элементом разметки служит компонент CoordinatorLayout, который является наследником стандартного FrameLayout. Но если обычный FrameLayout позволяет просто накладывать один компонент поверх другого, то CoordinatorLayout позволяет координировать определённые зависимости между дочерними компонентами. Сейчас мы не будем вдаваться в тонкости, этой теме можно посвятить отдельную статью.

Далее идёт AppBarLayout с вложенным Toolbar. Связка компонентов образуют внешний вид и поведение продвинутого заголовка экрана активности, который пришёл на смену ActionBar из Android 4.x, который в свою очередь заменил стандартный заголовок (Title) в Android 2.x. Опять оставляем их пока без внимания.

Потом следует интересный приём, который вам может впоследствии пригодиться. В существующую разметку вставляется ещё одна разметка при помощи тега include и с указанием вставляемой разметки - layout/content_main.xml.

Завершает основную разметку красивая кнопка FloatingActionButton, которая на самом деле является продвинутым вариантом ImageView. Но в спецификации Material Design кнопке отводится большая роль и практически является визитной карточкой нового дизайна. Наверняка, вы уже видели её на различных картинках.

Подробнее о возможностях кнопки в отдельной статье. Обратите внимание, что кнопка "пришпилена" к нижнему правому углу экрана при помощи layout_gravity. В качестве значка используется изображение из системных ресурсов @android:drawable/ic_dialog_email в свойстве srcCompat. Вы можете установить собственное изображение, подходящее по контексту. На данный момент Гугл рекомендует отказываться от растровых изображений и активно использовать векторные изображения.

Заменим значок электронной почты на изображение лапы кота. Щёлкаем правой кнопкой мыши по папке app и вызываем контекстное меню New | Vector Asset. В диалоговом окне щёлкаем по значку Clip Art, чтобы открыть другое окно для выбора значка. В строке поиска набираем pets и находим нужный значок. Выделяем его и нажимаем OK.

Pets Icon

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

Далее нажимаем кнопку Next и в следующем окне запоминаем название файла в ресурсах. Если вы всё-таки поменяли цвет, то логичнее будет поменять и название файла, убрав слово "black". Для этого можно вернуться на ша назад и отредактировать поле Name. Оставляю на ваше усмотрение.

Pets Icon

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

Также у активности есть меню в виде трёх точек, как создавать меню вы должны уже знать.

Snackbar

Если раньше для всплывающих сообщений использовались хлебные тосты Toast, то теперь можно использовать новый класс Snackbar.

Класс Snackbar имеет много общего с классом Toast и имеет практически тот же синтаксис.

Пример запуска сообщения находится в файле класса MainActivity.kt.


fab.setOnClickListener { view ->
    Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
        .setAction("Action", null).show()
}

Как видите, код очень похож. Но есть и различия. Если Toast является частью активности и выводится поверх неё в нижней части по умолчанию, если не заданы другие параметры, то Snackbar выводится в "подвале" родительского элемента. В первом параметре указывается подходящий компонент, по которому система попытается найти родителя, обычно им является CoordinatorLayout. В некоторых примерах я видел код, когда родитель указывается явно.

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

Для начала просто откройте файлы fragment_first.xml и fragment_second.xml в папке res/layout. Разметка у них идентичная - кнопка и текстовая метка. Измените текст, если хотите.

Добавляем новые компоненты

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

Теперь напишем код для щелчка кнопки. Код пишется в файле FirstFragment.kt. В методе onViewCreated() уже есть пример щелчка кнопки "Next" для перехода на вторую активность. По такому же образцу пишем свой код для показа Toast.


override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    view.findViewById<Button>(R.id.button_first).setOnClickListener {
        findNavController().navigate(R.id.action_FirstFragment_to_SecondFragment)
    }

    view.findViewById<Button>(R.id.button).setOnClickListener {
        val toast = Toast.makeText(context, "Hello Kitty", Toast.LENGTH_SHORT)
        toast.show()
    }
}

Связь между фрагментами

Общение между фрагментами основано на новом способе Jetpack Navigation. Откройте файл res/navigation/nav_graph.xml. Его можно посмотреть в текстовом и визуальном виде. Переключитесь в режим Design, чтобы увидеть связь между фрагментами. В примере мы просто переключаемся между двумя фрагментами, но можно организовать передачу данных между ними и отправлять числа, строки и т.д.

Дополнительные материалы