Андроид студио шаблоны активити

Шаблон Navigation Drawer Activity

Метки: NavigationView , DrawerLayout , Material Design

Рассмотрим шаблон Navigation Drawer Activity. Создадим новый проект и выберем нужный шаблон.

Для беглого знакомства можете сразу запустить проект и посмотреть его в действии. При запуске приложение выглядит как обычная программа «Hello World». Но есть и отличия. Нажмите на значок в виде трёх горизонтальных полосок в заголовке. Значок в документации называется «гамбургером» (Hamburger menu). Это официальная позиция Гугла. Но в реальности значок символизирует полосатых котов (никому не рассказывайте). При нажатии слева вылезет навигационная шторка. Шторка работает как обычная шторка в ванной. По высоте она занимает весь экран, включая системную область. Можете подвигать шторку вперёд-назад, чтобы увидеть, что верхняя кромка шторки в системной области полупрозрачна и не закрывает системные значки. Подобное поведение доступно на устройствах под Android 5 и выше. На старых устройствах шторка находится под системной панелью. Недавно стал проверять работу под Android 8.0 и увидел, что шторка теперь не закрывает системную панель. Ниже для сравнения я привёл два варианта.

Шторка закрывает системную панель Шторка не закрывает системную панель

Сама шторка состоит из двух основных частей — в верхней части находится картинка и текст, а в нижней — меню со значками. Меню в свою очередь разделено на две группы. В верхней части значки можно выбрать и выбранный пункт останется выделенным. В нижней части меню пункты не выделяются. Уберите шторку обратно и вызовите теперь её не нажатием на значок гамбургера, а движением пальца от края экран в центр. Получилось? Отлично, а теперь выдвигайте шторку медленно и наблюдайте за значком гамбургера. Вы увидите, что во время движения значок трансформируется. К сожалению, шторка закрывает значок и непонятно, во что превращаются три полоски. А превращаются они в три кота ж! стрелку. Позже я покажу, как увидеть её. А может не покажу, я ещё не решил.

Возвращаемся в студию и начинаем изучать код проекта.

Если открыть файл activity_main.xml в режиме Design, то можно увидеть, как будет выглядеть приложение с открытой шторкой.

Небольшие расхождения имеются, но в целом совпадает с реальным приложением.

Посмотрим на его содержание.

Сейчас важно запомнить, что за выдвигающую шторку отвечает элемент NavigationView, который входит последним в контейнере DrawerLayout и представляет собой навигационное меню. А перед меню находится вставка include, указывающая на разметку app_bar_main.xml.

Атрибут tools:openDrawer позволяет указать студии, что навигационное меню нужно отобразить в раскрытом виде в режиме просмотра разметки.

NavigationView

В 2014 году Google показал новый дизайн и различные новые примеры по навигации. Но вначале они использовали подручные средства, которые были под рукой — фрагменты.

Спустя год компания разработала на основе предка FrameLayout новый компонент NavigationView, который стал частью библиотеки Android Design Support Library.

Новый подход оказался неожиданным, но логичным. Раз выдвижная шторка содержит навигационное меню, то и класс был спроектирован как меню. Вы можете создать элементы меню в ресурсах res/menu стандартным способом и получить готовую навигацию.

Необходимые рекомендации по созданию навигационной выдвижной шторки можно найти на странице Navigation drawer — Patterns.

Перейдём к деталям.

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

Тег NavigationView содержит ссылку на собственную разметку в атрибуте app:headerLayout, который указывает на файл nav_header_main.xml (верхняя часть шторки), а также на меню в атрибуте app:menu, который ссылается на ресурс меню menu/activity_main_drawer.xml.

Откроем файл nav_header_main.xml и посмотрим на разметку шторки.

Разметка состоит из ImageView и двух TextView, размещённых в контейнере LinearLayout. Фон контейнера определён в ресурсе drawable/side_nav_bar.xml и представляет собой градиент.

Остальные атрибуты понятны и не требуют пояснений.

Можно (но не нужно) настроить верхнюю часть шторки не через XML, а программно.

После обновления одной из версий библиотеки Design Support, доступ к шапке осуществляется теперь через другой код.

Теперь рассмотрим ресурс навигационного меню res/menu/activity_main_drawer.xml.

Принцип создания элементов меню остался стандартным. Каждый пункт меню представляет собой тег item с указанием значка и текста. Для группировки используется элемент group. Поведение элементов меню в группе регулируется атрибутом android:checkableBehavior. В примере используется значение single — при нажатии на пункт меню, он останется выделенным (принцип переключателя RadioButton). Всего доступно три варианта.

• single – можно выбрать один элемент группы (переключатель)
• all — можно выбрать все элементы группы (флажок)
• none – элементы не выбираются

В библиотеке Android Support Design версии 23 вариант all не работает и будет действовать, как со значением single.

Также следует обратить внимание, что теперь проект ссылается на векторные рисунки, которые находятся в папке drawable-21.

Осталось рассмотреть тег include, который ссылается на файл ресурса res/layout/app_bar_main.xml. Он вам будет знаком по шаблону Blank Activity, который мы изучали в статье Библиотека Android Support Design. Только там он находился в файле activity_main.xml, а здесь его перенесли в файл app_bar_main.xml. Всё остальное осталось без изменений. Повторяться не будем.

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

В классе активности реализуется интерфейс OnNavigationItemSelectedListener с его методом onNavigationItemSelected():

Логика кода ничем не отличается о работы с обычным меню. Определяется идентификатор выбранного пункта и далее вам нужно написать свой код. Затем вызывается метод closeDrawer() для закрытия шторки.

Добавим код для первого пункта меню.

При нажатии кнопки «Назад» проверяется состояние шторки. Если шторка открыта (isDrawerOpen()), то её закрываем с помощью метода closeDrawer().

В методе onCreate() происходит инициализация шторки.

Теперь поговорим об изменениях, которые можно внести в проект.

Хотите выдвигать шторку справа? Установите значение end у атрибута layout_gravity. Обычно используется для стран с обратным порядком букв.

На самом деле смысла в этом не оказалось. Да, шторка выдвигается вручную. Но если нажать на значок гамбургера, то приложение валится с ошибкой. Любое нажатие в меню шторки также приводит к ошибке. Теоретически можно написать код, который исправит проблему, но он будет сложным. Забудьте об этом совете.

Тем не менее, можно реализовать забавный эффект — добавить вторую шторку на экран. Первая будет работать главной и реагировать на нажатие значка, а вторая будет дополнительной для вывода какой-то информации. Достаточно в разметку добавить второй NavigationView с атрибутом android:layout_gravity=»end»

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

Для изменения цвета значков и текста в навигационном меню используйте атрибуты app:itemIconTint и app:itemTextColor.

Данным атрибутам соответствуют методы setItemIconTintList() и setItemTextColor() компонента NavigationView.

Так как наличие шторки не совсем очевидно, можно при первом запуске показать шторку в раскрытом состоянии. Далее можно запомнить состояние шторки при первом запуске в настройках, чтобы во второй раз выводить её уже в закрытом состоянии. Можете самостоятельно реализовать эту возможность.

Напоследок покажу превращение значка гамбургера в стрелку в явном виде, как и обещал в начале статьи. Напомню, что по рекомендации Material Design шторка должна закрывать всю область экрана. Но если вы хотите поместить шторку под заголовком, то следует немного поправить разметку. Откроем файл app_bar_main.xml и вырежем из него небольшой кусок. Затем в файле activity_main.xml добавим LinearLayout в качестве корневого контейнера и вставим скопированный ранее кусок кода.

Смотрим на значок.

Сама анимация значка зависит от переменной toggle (объект класса ActionBarDrawerToggle). Если вы её уберёте, то никакого значка в заголовке приложения не будет.

Можно поменять цвет значка гамбургера. Откроем файл стилей res/values/styles.xml и добавим:

Элемент spinBars со значением true позволяет использовать анимацию. В противном случае значок будет статичным.

Навигация

В шаблоне присутствует метод onNavigationItemSelected() с аннотацией @SuppressWarnings(«StatementWithEmptyBody») (Оператор с пустым телом). Нам нужно добавить свой код для навигации, который должен реагировать на нажатия в меню шторки. Нам понадобятся фрагменты. Для примера создадим первый фрагмент.

Разметка для первой активности.

По такому же образу создайте второй фрагмент SecondFragment и т.д.

Определим RelativeLayout в файле content_main.xml в качестве контейнера.

Теперь можем написать недостающий код для навигации по фрагментам в MainActivity.

Добавляем счётчик в меню шторки

Откройте файл res/menu/activity_main_drawer.xml и добавьте атрибут app:actionViewClass=»android.widget.TextView» ко второму и третьему элементу меню из шаблона. Теперь эти элементы будут связаны с текстовыми метками.

Объявим текстовые метки и инициализируем их в методе onCreate(). В отдельном методе будем управлять их свойствами.

Вы можете переделать метод под себя, чтобы динамически изменять показания счётчика.

Сдвигаем содержимое экрана

При выдвижении шторки можно сдвинуть основное содержание. Потребуется небольшая модификация кода. Для начала нужно присвоить идентификатор контейнеру ConstraintLayout в content_main.xml.

В MainActivity добавим экземпляру ActionBarDrawerToggle метод onDrawerSlide() и сдвинем содержимое на определённую величину. При желании можно также изменить размер, используя второй параметр метода slideOffset.

Дополнительное чтение

Библиотека mxn21/FlowingDrawer с прикольным эффектом.

Источник

Русские Блоги

Самое подробное объяснение! Руководство по шаблону активности Android Studio (шаблону)

Обзор

Действие Android Studio также называется шаблоном Android ADT, который представляет собой уже созданный шаблон, который вы видите в галерее действий при создании нового действия:

Задумывались ли вы когда-нибудь о написании шаблона Activity самостоятельно, а затем написании менее повторяющегося кода, если вы хотите создать такой же тип Activity в будущем? Эта статья должна открыть для вас дверь в новый мир.
Когда вы видите в Интернете учебное пособие, которое знакомит только с общей идеей, а затем оставляете ссылку, позволяющую изучить его, я хочу написать полное руководство самостоятельно. В этой серии руководств будет объяснен процесс создания шаблона «сделай сам», дополненный различными функциями, типами данных и другим синтаксисом.

Начало

эмммм, нет ни IDE, ни подсказок по коду для создания шаблонов, так что лучше найти готовый образец для его изменения. Адрес шаблона Activity Android Studio находится в папке установочный адрес \ plugins \ android \ lib \ templates \ activity, как показано на рисунке.

Мы видим, что встроенные шаблоны AS находятся здесь. Давайте сначала скопируем один из них. Я выбрал BasicActivity. В конце концов, содержание здесь относительно закончено. Тогда можно начинать.
Сначала посмотрите на структуру файла:

• globals.xml.ftl // Глобальные переменные (необязательно)
• recipe.xml.ftl // Скрипт (выполнение копирования файла и другие операции)
• recipe_fragment.xml.ftl
• template.xml // Опишите параметры, переменные, введение и т. д. шаблона
• template_basic_activity.png // Эскизы, те, которые видны в галерее действий
• template_basic_activity_fragment.png
• root // Корневой каталог ресурсов, следующая файловая структура такая же, как и у проекта
  • res
    • layout
      • activity_fragment_container.xml.ftl
      • fragment_simple.xml.ftl
  • src
    • app_package
      • SimpleActivity.java.ftl
      • SimpleActivity.kt.ftl
      • SimpleActivityFragment.java.ftl
      • SimpleActivityFragment.kt.ftl

Создать шаблон RecyclerView

Лучше говорить о теории и читать документы, чем делать это напрямую, поэтому здесь я использую пример RecyclerView для реализации всего процесса с различными подробными API. Перед тем, как это сделать, нам нужно скопировать готовый шаблон (например, Drawer Activity). Затем измените имя папки на RecyclerView Activity. Затем создайте проект Android Studio и запишите файлы, которые нам нужно создать с помощью шаблона. Чтобы сделать RecyclerView нужно:
+ один или два макета действий
+ макет элемента списка
+ Activity,
+ адаптер
Если вы не знакомы с RecyclerView, вы можете прочитать эту статью ->
Руководство по RecyclerView
Я написал демонстрацию на Kotlin (не имеет значения, если вы этого не понимаете, просто знаете, что делать):
Поместите снимок экрана с Activity:

Поместите еще один снимок экрана адаптера:

Макет, вы можете использовать его свободно. Напишите любой макет, который вы часто пишете.
и т. д. . . Владелец, стой спокойно, что случилось с таким количеством ошибок, что, черт возьми, дает три layoutManager для RecyclerView? ? ! И эта переменная называет вас. . . Не боитесь поддельного программиста Android? ?
Гм. . . Тогда, пожалуйста, не обращайте внимания на такое количество деталей. В конце концов, существует слишком много способов играть в RecyclerView. Мы не можем учесть все ситуации и можем только написать общий код, а затем изменить его в соответствии с реальной ситуацией. Это всего лишь простой пример, вы также можете добавить код обратного вызова щелчка RecyclerView и т. Д.
Затем скопируйте эти файлы в соответствующее место в папке шаблона. Например, ListActivity находится в корневом каталоге \ src \ app_package. Затем добавьте к этим файлам суффикс «.ftl». (Обратите внимание, что имя суффикса добавляется вместо изменения имени суффикса).
Три файла макета после модификации:

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

Вернитесь в каталог res и удалите неиспользуемые папки. Если у вас есть символы, цвета и другие ресурсы, скопируйте файлы, такие как colors.xml или strings.xml, в соответствующую папку и добавьте расширение .ftl Вот и все. Позже мы будем использовать код для объединения этих ресурсов.

Поскольку задействованы некоторые параметры, не спешите изменять содержимое класса, сначала просмотрите три файла на главной странице:
globals,recipe,template。

Globals

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

[Привет, автор оригинального постера, вы слишком безответственны] Хорошо, позвольте мне поговорить об этом файле. Помимо template.xml, другие файлы, которые должны обрабатываться Android Studio (на самом деле, нижний слой — это работа FreeMaker, я расскажу об этом позже), необходимо добавить суффикс .ftl (полное название FreeMarker Template Language), поэтому глобальные переменные и рецепты не являются исключением (так что изображения и Некоторые файлы ресурсов, которые не требуют подстановки переменных и обработки слияния, могут быть опущены).
Язык FTL состоит из следующих четырех вещей:
-Text: текст для прямого вывода
-Interpolation: вставка переменных в строки в формате «$ »
-FTL-теги (теги / команды): теги, похожие на html.
-Comments (комментарии):

в глобальных переменных — это команда:

Само собой разумеется, что выражение создано для выполнения инструкций под тегом .
Global использует пары ключ-значение для хранения глобальных переменных. Эти переменные обычно не используются в качестве параметров, которые можно изменять при создании Activity (поэтому их следует называть глобальными константами?). В основном они появляются в других файлах ftl в виде $ .
Типы глобальных переменных: строковые, логические, целочисленные. При использовании типа String тип можно не указывать.
В globals.xml.ftl вы также можете использовать команду для импорта других переменных. Для назначения используется команда .

Template.xml

Сначала посмотрите корневой элемент:

среди них:
формат: фиксированное значение, игнорируется
редакция: версия, значение
name: название шаблона.
minApi: соответствует minSdkVersion
minBuildApi: соответствует уровню API
description: Введение

В шаблоне есть несколько видов узлов:
— тип шаблона категории
-библиотека зависимостей
-formfactor не изменяется
параметр -параметр
— превью
-globals не будут изменены
— выполнить без изменений

Позвольте мне сначала разобраться с этими узлами:

category

1. Applications
2. Activities
3. UI Components

dependency

name — это имя зависимой библиотеки
версия — самая низкая версия библиотеки.

thumb

предварительный просмотр
Если вам нужно использовать разные изображения для предварительного просмотра в зависимости от переменных, используйте следующие методы:

параметр (переменная)

Эти переменные — это параметры, которые можно изменить при создании Activity (конечно, некоторые переменные могут быть скрыты в зависимости от типа проекта)

Узел имеет следующие параметры:

• id: имя переменной, уникальный идентификатор переменной
• name: имя переменной, отображаемое при создании Activity
• type: type, есть строка, логическое значение, перечисление или разделитель (в любом случае я не знаю, что это такое, я попробовал AS и получил ошибку)
• ограничения: переменные ограничения, содержащие следующие значения
  • nonempty
  • apilevel
  • package
  • class
  • activity
  • layout
  • drawable
  • string
  • id — это идентификатор ресурса, а не переменная
  • уникальное уникальное ограничение, действительно только тогда, когда объявлены другие ограничения, такие как макет
  • существует Ограничение, согласно которому переменная должна существовать, действительно только тогда, когда объявлены другие ограничения, такие как макет
• Предложить рекомендуемое значение, созданное в соответствии с другими переменными, если переменная не изменяется
• дефолт
• help При редактировании переменной отображается подсказка, отображаемая ниже
• видимость видна

Сказав это, попробуем еще раз отредактировать переменные RecyclerView. Прежде всего, нам нужны переменные

• Имя класса компонента
• имя файла itemLayout
• имя адаптера
• Макет списка (линейный, сеточный, в шахматном порядке)
• Количество столбцов в списке

Не поддерживает целые числа, что немного сложно. . . Поэтому я использовал перечисление вместо столбца
Что касается названий активности и основного макета, то достаточно сохранить исходные названия, а некоторые другие бесполезные переменные можно удалить.
Вы можете обнаружить, что некоторые функции используются в предложении некоторых переменных, например, в layoutName

Функция activityToLayout (activityClass) здесь состоит в том, чтобы преобразовать имя Activity в стандартизированное имя макета, например, параметр CatActivity вернет activity_cat.
Помимо activityToLayout, есть и другие (казалось бы) полезные функции:

• строка camelCaseToUnderscore (строка) Стиль имени регистра верблюда для подчеркивания
• string escapeXmlAttribute (string) перекодирует специальные символы, такие как »
  Не забудьте изменить имя класса, имя пакета и имя файла макета. Код моего последнего действия выглядит следующим образом:

Адаптер тоже аналогичная модификация, код здесь не размещен

Далее напишем recipe.xml.ftl
В рецепте в основном используются следующие пять инструкций:

• copy: скопируйте файл или всю папку, указанную атрибутом from, в местоположение, указанное в to. Если атрибут to не записан, будет использован путь с таким же атрибутом from, а суффикс .ftl имени файла будет удален (если это суффикс ftl).
• instantiate: создать экземпляр, аналогично копированию, но предварительно обработать файл перед копированием, то есть вычислить интерполяцию в файле и выполнить инструкции внутри.
• merge: файлы слияния, обычно используемые для файлов ресурсов, таких как string.xml, color.xml и AndroidManifest.xml
• open: откройте эти файлы в Android Studio после завершения всех операций копирования.
• зависимость: зависит от библиотеки, библиотека, указанная mavenUrl, будет загружена автоматически.
  Поскольку проект зависит от библиотеки anko, его необходимо автоматически импортировать, если в проекте нет библиотеки. Зависимость обычно используется с функцией hasDependency:

Следующим шагом является создание или копирование всех файлов один за другим и, наконец, использование оператора open для открытия файла, который требует дальнейшей модификации. Полный код выглядит следующим образом:

. На данный момент мы в основном завершили работу по созданию нового шаблона Для того, чтобы быть совершенным, я специально нарисовал эскиз для предварительного просмотра при его создании (AI работает тяжело, не рвота):

Благодаря многолетним навыкам рисования в одиночку. . . По крайней мере, ты можешь видеть прошлое. .
Не забудьте синхронизировать имя изображения в теге большого пальца в template.xml после замены эскиза
Затем поместите всю измененную папку в \ plugins \ android \ lib \ templates \ activity, перезапустите AS (необходимо, потому что эти шаблоны загружаются при запуске студии Android [неудивительно Запуск такой медленный . ]). Затем проверьте, если не получится, продолжайте менять. . .

Скриншот теста:

Изображение для предварительного просмотра немного красивое. У меня есть время, чтобы изменить размер изображения.

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

О FreeMaker

Шаблон активности работает с freeMaker, ftl имеет очень мощные функции, если вы хотите углубленно изучить, вы можете перейти к официальному документу:Документация FreeMaker

Источник