Библиотека поддержки  Android Design Support Library облегчает разработку, обеспечивая обратную совместимость множества компонентов в материальном стиле, вплоть до Android 2.1. В ней представлены такие компоненты, как navigation drawer, floating action button, snackbar, tabs, floating labels и animation frameworks. В этой статье мы узнаем, как реализовать вкладки в андроид приложении в стиле Material Design.

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

Создаем приложение в стиле Material Design

Создадим новый проект с применением материальной  темы.

В Android Studio в меню выберите File ⇒ New Project и заполните все детали, необходимые для создания нового проекта. При выборе шаблона, выберите Empty Activity и продолжите.

Откройте файл сборки модуля app build.gradle и добавьте в секцию dependensies библиотеку поддержки дизайна  com.android.support:design:23.0.1:

Откройте файл colors.xml в папке res ⇒ values и добавьте цвета:

Добавьте размеры в файл dimens.xml в папке res ⇒ values:

Откройте файл styles.xml в папке res ⇒ values и добавьте стили. Стили, определенные в этом styles.xml являются общими для всех версий android:

Теперь внутри папки res, создайте папку с именем values-v21. В ней создайте еще один файл styles.xml и пропишите в нем стили для версии Android 5.0:

И наконец, откройте файл  AndroidManifest.xml и примените к приложению нашу настроенную тему, изменив значение атрибута android:theme:

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

android-material-design

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

В основном пакете создайте фрагмент  с именем OneFragment.java и добавьте такой код:

Откройте файл макета fragment_one.xml в папке res ⇒ layout и внесите изменения:

10. Аналогичным образом создайте несколько фрагментов с аналогичным кодом, который мы использовали для OneFragment.java. Я создал TwoFragment.java, ThreeFragment.java, FourFragemnt.java ….. до  TenFragment.java, всего 10 фрагментов.

Фиксированные вкладки

Фиксированные вкладки следует использовать, когда у вас ограниченное количество вкладок. Эти вкладки имеют фиксированное положение. В библиотеке android design support library много новых элементов, например, CoordinatorLayout AppBarLayout, TabLayout и других. Мы не охватываем всех их в рамках этой статьи.

Откройте файл компоновки основной активити (activity_main.xml) и добавьте код разметки:

app:tabMode – Определяет режим макета вкладок. В нашем случае значение должно быть “fixed

Откройте MainActivity.java и внесите изменения:

tabLayout.setupWithViewPager() – Назначает ViewPager для TabLayout.

setupViewPager() – Определяет количество вкладок, установив соответствующий фрагмент и имя вкладки.

ViewPagerAdapter – Класс пользовательского адаптера обеспечивает фрагменты, необходимые для view-пейджера.

Теперь запустите приложение. Вы должны видеть вкладки и свайпом переходить между вкладками.

android-material-design-tab-layout

Вкладки, занимающие всю ширину экрана

Если вы хотите, чтобы закладки занимали по ширине весь экран, добавьте атрибут  app:tabGravity=”fill” в ваш TabLayout.

android-tab-layout-landscape-view

Вкладки, выровненные по центру

Если вы хотите расположить ваши вкладки по центру, установите app:tabGravity=”center” для TabLayout.

android-tab-layout-gravity-center

Прокручиваемые вкладки

Прокручиваемые вкладки должны использоваться, когда у вас большое количество вкладок, и недостаточно места на экране, чтобы отобразить все одновременно. Чтобы сделать вкладки прокручиваемыми , установите app:tabMode=”scrollable” для TabLayout.

Откройте activity_main.xml и измените  значение атрибута app:tabMode на scrollable.

Измените MainActivity.java и добавьте несколько фрагментов для ViewPager в методе setupViewPager(). В примере ниже добавлено 10 фрагментов в ViewPager. После изменения код основной активити должен выглядеть так:

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

android-scrollable-tab-layout

Вкладки с иконкой и текстом заголовка

Иногда нужно добавить значок на вкладку. Ранее добавление значка на вкладку было трудоемким процессом. Но сейчас с библиотекой поддержки дизайна это очень легко. Все, что вам нужно сделать — это вызвать метод setIcon() , передав ему нужную пиктограмму. Значок будет помещен перед текстом заголовка вкладки.

Откройте MainActivity.java и измените код, как показано ниже. Здесь добавлен новый метод под названием setupTabIcons() в котором установлены все значки для вкладок.

android-tab-layout-with-icon-and-text (1)

Вкладки только со значками

Установка только значка для вкладки такая же, как и установка текста и значка, только метод getPageTitle() в классе ViewPagerAdapter возвращает null вместо заголовка вкладки.

Откройте MainActivity.java и измените метод getPageTitle(), как показано ниже и запустите приложение проекта.

android-tab-layout-with-only-icons

Значок вкладки над текстом заголовка

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

Когда на вкладке значок и текст, можно увидеть, что значок расположен на одной линии с текстом заголовка вкладки. Но если вы хотите поместить значок над текстом, вы должны использовать custom view  для этого.

В папке res ⇒ values, создайте xml файл с именем fonts.xml и добавьте строки, как в примере ниже. Этот XML-файл определяет семейство шрифтов для заголовка.

В папке res ⇒ values-v21, создайте другой xml-файл с именем fonts.xml и таким кодом:

Откройте activity_main.xml и установите пользовательскую высоту custom_tab_layout_height. Настройка высоты имеет важное значение, так как установка значка выше текста занимает больше места, чем обычно.

Создайте xml-макет с именем custom_tab.xml в папке res ⇒ layout. В этом макете мы определим custom view для вкладки.

Откройте MainActivity.java и измените код, как на примере ниже. Здесь, если вы посмотрите метод setupTabIcons(), мы присваиваем макет custom_tab.xml  каждой вкладке:

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

android-tab-layout-with-custom-view-icon-and-text

Перевод. Источник.

Android Material Design: Работа с вкладками обновлено: Февраль 5, 2016 автором: admin

  1. Спасибо за урок, но есть вопрос по поводу, когда происходит переход на вкладку, то выполняется прогрузка соседней, например если перейти на вторую вкладку,а на третей к примеру выполняется код загрузки изображения из интернета в AsyncTask`e, то загрузка изображения произойдет при переходе на вторую вкладку. Есть ли решение, чтобы прогрузка фрагментов происходила только в выбранной вкладке?

  2. Пытаюсь запустить приложение (кстати делаю я через AIDE) и выдает ошибку:
    appt: Error retrieving parent for item: No resource found that matches the given name: ‘MyMaterialTheme.Base
    Хотя я такой стиль уже создал. Что делать то? Очень хочу вкладки сделать

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*
*
Website