Как вы могли заметить, Google обновил многие из своих приложений в стиле Material Design. Одним из основных визуальных изменений в обновления является обновленные раздвижные вкладки. Google дает хорошие руководящие принципы по разработке приложений с вкладками (узнать больше), но не спешит обновлять документацию. В этом учебном пособии я покажу вам, как создать Android приложение с табами — раздвижными вкладками в материальном стиле.

Приступая к работе

1. Добавьте библиотеки appcompat-v7.21.0.+ и appcompat-v4.21.0.+ в файл сборки build.gradle вашего проекта:

[pastacode lang=»java» message=» build.gradle» highlight=»» provider=»manual»]

[/pastacode]

2. Так как Google не обновил их документацию, нам придется украсть два java-файла из открытого исходного кода приложения Google I/O  и вставим его в наш пакет java, чтобы наши вкладки выглядели так же, как в обновленных приложениях Google apps. Вы можете получить эти файлы с ссылке ниже:

SlidingTabLayout.java
SlidingTabStrip.java

3. Создайте новый файл с именем colors.xml в папке ресурсов и добавьте следующий код:

[pastacode lang=»bash» message=»colors.xml» highlight=»» provider=»manual»]

[/pastacode]

4. Создайте новый файл в вашей папке res/color/ и присвойте ему имя selector.xml. После этого добавьте следующий код в него. Этот XML-код изменяет цвет текста активной вкладки, позже мы увидим связанный код стороне Java.

[pastacode lang=»java» message=»selector.xml» highlight=»» provider=»manual»]

[/pastacode]

Файлы макетов

5. Вставьте следующий код в файл styles.xml:

[pastacode lang=»php» message=»styles.xml» highlight=»» provider=»manual»]

 

[/pastacode]

6. Создайте новый файл с именем tool_bar.xml в папке макетов и вставьте следующий код в него:

[pastacode lang=»php» message=»tool_bar.xml » highlight=»» provider=»manual»]

[/pastacode]

7. Теперь нам нужно добавить Toolbar, SlidingTabLayout и ViewPager в наше Main Activity, поэтому добавьте следующий код в ваш файл activity_main.xml в папке макетов:

[pastacode lang=»php» message=»activity_main.xml» highlight=»» provider=»manual»]

[/pastacode]

8. Создадим файлы макетов для вкладок. В моем случае я использую 2 вкладки, и я их называл, tab_1.xml и tab_2.xml:

[pastacode lang=»php» message=»tab_1.xml» highlight=»» provider=»manual»]

[/pastacode]

[pastacode lang=»php» message=»tab_2.xml» highlight=»» provider=»manual»]

[/pastacode]

Java-файлы

9. Теперь нам нужно сделать два фрагмента для вкладок и макетов, которые мы создали раньше. Нужно создать два java-файла в каталоге Java и добавить следующий код в них, в моем случае я назвал файлы Tab1.java и Tab2.java:

[pastacode lang=»java» message=»Tab1.java» highlight=»» provider=»manual»]

[/pastacode]

[pastacode lang=»java» message=»Tab2.java» highlight=»» provider=»manual»]

[/pastacode]

10. Для обеспечения представления для каждой вкладки, нам нужен ViewPagerAdpater. Создаем новый файл java с именем ViewPagerAdpater.java и добавим в него следующий код:

[pastacode lang=»java» message=»ViewPagerAdpater.java » highlight=»» provider=»manual»]

[/pastacode]

11. Теперь вам нужно обновить класс populateTabStrip() в файле SlidingTabLayout.Java, просто замените его следующим кодом:

[pastacode lang=»java» message=»SlidingTabLayout.Java» highlight=»» provider=»manual»]

[/pastacode]

12. И наконец, обновим класс MainActivity.java путем добавления кода ниже:

[pastacode lang=»java» message=»MainActivity.java» highlight=»» provider=»manual»]

[/pastacode]

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

Более наглядно весь процесс смотрите в видео:

Ссылка на исходный код проекта.

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

Продвинутый пример создания вкладок в курсе уроков по созданию реального приложения.

 

Android Sliding Tabs — раздвижные вкладки в стиле Material Design обновлено: Февраль 1, 2016 автором: admin

  1. Подскажите, как можно разместить на вкладке иконку вместо текста, заранее спасибо

  2. В десятом пункте ошибка «ViewPagerAdpater»

  3. Не могу скачать исходный код проекта. Помогите.

  4. А так же не понятно. Я нашел эти два файла.
    SlidingTabLayout.java
    SlidingTabStrip.java
    Что я должен с ними сделать?

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

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

*
*
Website