Что такое 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  и сможете применять полученные знания в своих проектах. успехов в разработке!

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

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

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

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

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

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

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

    1. PikselNsk (автор)

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

  3. Дмитрий

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

    1. PikselNsk (автор)

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

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

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