Что такое 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. Мы можем перелистывать вкладки как нажимая на табы вверху, так и листая экран. Классический пример на скриншоте.

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

Показать скрытое содержание
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:background="?attr/colorAccent"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabGravity="fill"
            app:tabMode="fixed"/>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.design.widget.CoordinatorLayout>

 

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

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

Показать скрытое содержание
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import java.util.ArrayList;
import java.util.List;

public class ViewPagerAdapter extends FragmentStatePagerAdapter {


    private final List<Fragment> mFragmentList = new ArrayList<>();
    private final List<String> mFragmentTitleList = new ArrayList<>();

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitleList.get(position);
    }

    public void addFragment(Fragment fragment, String title) {
        mFragmentList.add(fragment);
        mFragmentTitleList.add(title);
    }

}

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

Показать скрытое содержание
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SimpleFragment extends Fragment {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_simple, container, false);
    }

}

 

Показать скрытое содержание

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#e5e5e5">

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="148dp"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/imageView1"
        android:gravity="center"
        android:text="Fragment"
        android:textSize="30sp" />

</RelativeLayout>

 

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

Показать скрытое содержание
import android.support.design.widget.TabLayout;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private TabLayout tabLayout;
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        actionBar.setDisplayHomeAsUpEnabled(true);


        viewPager = (ViewPager) findViewById(R.id.viewpager);
        setupViewPager(viewPager);

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        tabLayout.setupWithViewPager(viewPager);


    }

    private void setupViewPager(ViewPager viewPager) {
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addFragment(new SimpleFragment(), "People");
        adapter.addFragment(new SimpleFragment(), "Group");
        adapter.addFragment(new SimpleFragment(), "Calls");
        viewPager.setAdapter(adapter);
    }
}

 

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

Понравилась статья? Поделиться с друзьями:

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

Комментарии: 7
  1. Алексей

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

  2. Alex

    Обновите ссылку на файлы

  3. Очень полезная статья

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

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

    1. PikselNsk (автор)

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

  4. Дмитрий

    Как например на первой вкладке запустить новый класс фрагмента вместо new SimpleFragment()?

  5. Дмитрий

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

    1. PikselNsk (автор)

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

Добавить комментарий для Alex Отменить ответ

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: