Что такое TabLayout в Android и как с ним работать?

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

В начале, когда мир Android разработки кажется особо огромным и ты не знаешь что лучше применить в своих первых «Hello world», то можно верстать хоть в одном активити весь интерфейс. Позже, с опытом приходит понимание, что дизайн в сфере мобильной разработки всё таки стоит продумывать заранее, перед открытием Android Studio. В первую очередь он должен быть максимально удобным и приятным для пользователя, а уже потом стоит задуматься о расширяемости и актуальности инструментов.

В этой статье, как Вы уже поняли из названия, мы рассмотрим такой удобный и полезный (как для разработчика, так и для конечного пользователя) виджет, как TabLayout. Взглянув на скриншот, Вы сразу поймёте о чём я говорю. Подавляющее большинство современных приложений используют TabLayout в своём интерфейсе. Данный виджет позволяет добавить в приложение «табы» для переключения между фрагментами. Виджет является наследником HorizontalScrollView и располагается в библиотеке «com.android.support:design».

Давайте создадим проект в Android Studio и подключим в файле build.gradle библиотеку «com.android.support:design». Для этого в конец файла в секцию dependencies добавим compile ‘com.android.support:design:23.0.1’

Куда вставить? »

TabLayout располагается в области, где обычно располагается ActionBar, поэтому нам необходимо заменить тему на NoActionBar, и создать макет экрана, в котором расположим TabLayout вместе с Toolbar внутри AppBarLayout. Стоит отметить, что реализация TabLayout великолепно работает в связке с ViewPager. Мы можем перелистывать вкладки как нажимая на табы вверху, так и листая экран. Классический пример на скриншоте.

Далее создаём макет главного активити

Показать activity_main.xml »


 

Запустив приложение мы увидим на экране три зоны. Toolbar, TabLayout и ViewPager.
Для того что бы TabLayout работал в связке с ViewPager’ом в библиотеке com.android.support:design существует внутренний скрытый механизм. Нам не нужно вникать в тонкости его работы для того что бы им пользоваться. Для того что бы наша конструкция заработала необходимо выполнить несколько шагов:

1. Создать класс-потомок PagerAdapter. Создаём класс ViewPagerAdapter, наследуем его от FragmentStatePagerAdapter и реализуем необходимые методы getItem и getCount. Также для правильной работы нам необходимо переопределить метод getPageTitle, без этого у наших вкладок не будет названий. Ещё добавим в класс метод addFragment, через который будем добавлять фрагменты во ViewPager.

Показать ViewPagerAdapter »

2. Вторым шагом необходимо настроить созданный выше адаптер и назначить его адаптером нашего ViewPager в методе public void setAdapter(PagerAdapter adapter). Для настройки нам потребуется какой то фрагмент, давайте создадим простенький SimpleFragment, макет для него и добавим несколько экземпляров в адаптер.

Показать SimpleFragment »

 

Показать макет SimpleFragment fragment_simple.xml »


 

3. Наконец третьим шагом в MainActivity можем простым вызовом методаpublic void setupWithViewPager(@Nullable final ViewPager viewPager) связать весь наш код в рабочую структуру и запустить проект для того что бы убедиться в его работоспособности!

Показать MainActivity »


 

Далее можно с помощью разнообразных слушателей обрабатывать переключения, с полным списком методов вы можете ознакомиться в официальной документации Google. Я надеюсь что с помощью данной статьи вы поняли как работать с TabLayout в Android  и сможете применять полученные знания в своих проектах. успехов в разработке!

Комментарии:

Что такое TabLayout в Android и как с ним работать?: 5 комментариев

  1. Добрый день. Добавьте пожалуйста ссылку на исходник проекта. Заранее спасибо.

  2. Для настройки нам потребуется какой то фрагмент, давайте создадим простенький SimpleFragment, макет для него и добавим несколько экземпляров в адаптер.

    Ты реально настолько долбаеб, чтобы написать в статье слово добавим и не показать, как ты добавил? Красавчик, веди блоги дальше.

    1. Чуть ниже пример кода с активити, в котором видно что и как добавляется. И вам добра, Егор Прокофьев=)

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

    1. Здравствуйте, Дмитрий. Спасибо, на выходных надо бы исправить статью, а то я совсем углубился в свои android проекты и забросил сайт =(

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

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