3. Использование виджета ViewPager и TabLayout

Виджет ViewPager позволяет создавать UI с изменяющимися фрагментами, которые можно "перелистывать" с помощью свайпов влево или вправо. Виджет ViewPager можно использовать совместно с TabLayout для добавления закладок.

Рассмотрим использование виджета ViewPager на примере.

Создадим новый проект и отредактируем макет MainActivity. Добавим в макет элемент TabLayout и ViewPager.

Дизайн

XML-код

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

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

</LinearLayout>

Отредактируем класс MainActivity. Получим ссылки на элементы ViewPager и TabLayout.

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private FragmentManager manager;

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

        manager = getSupportFragmentManager();

        ViewPager pager = findViewById(R.id.pager);

        TabLayout tab = findViewById(R.id.tabs);
        tab.setupWithViewPager(pager);
    }
}

Метод TabLayout.setupWithViewPager() настраивает использование TabLayout совместно с ViewPager.

Для работы ViewPager необходимо создать класс адаптера, который будет поставлять виджету фрагменты. В качестве класса фрагмента будем использовать DetailsFragment из предыдущего примера.

После написания класса адаптера, добавим объект с помощью метода setAdapter().

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private FragmentManager manager;

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

        manager = getSupportFragmentManager();

        ViewPager pager = findViewById(R.id.pager);
        pager.setAdapter(new MyAdapter(manager));

        TabLayout tab = findViewById(R.id.tabs);
        tab.setupWithViewPager(pager);
    }


    class MyAdapter extends FragmentPagerAdapter {

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

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return "FRAGMENT " + position;
        }

        @Override
        public Fragment getItem(int i) {
            return DetailsFragment.newInstance(String.valueOf(i));
        }

        @Override
        public int getCount() {
            return 3;
        }
    }
}

Класс адаптера наследуется от класса FragmentPagerAdapter. Нам необходимо передать в конструктор адаптера объект FragmentManager (так как мы будем управлять фрагментами). Кроме этого, нам необходимо установить количество фрагментов, установить заголовок фрагмента для закладок, а также запрограммировать метод getItem(), который возвращает объект i-го фрагмента.

Запустим приложение и посмотрим на результат

Виджет ViewPager позволяет гибко настроить процесс перелистывания фрагментов. К примеру, вы можете создать класс-наследник базового класса ViewPager.PageTransformer, который позволяет настроить анимацию смены фрагментов.

На сайте разработчиков Android скопируем класс ZoomOutPageTransformer

ZoomOutPageTransformer.java

public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    public void transformPage(View view, float position) {
        int pageWidth = view.getWidth();
        int pageHeight = view.getHeight();

        if (position < -1) { // [-Infinity,-1)
            // This page is way off-screen to the left.
            view.setAlpha(0f);

        } else if (position <= 1) { // [-1,1]
            // Modify the default slide transition to shrink the page as well
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float vertMargin = pageHeight * (1 - scaleFactor) / 2;
            float horzMargin = pageWidth * (1 - scaleFactor) / 2;
            if (position < 0) {
                view.setTranslationX(horzMargin - vertMargin / 2);
            } else {
                view.setTranslationX(-horzMargin + vertMargin / 2);
            }

            // Scale the page down (between MIN_SCALE and 1)
            view.setScaleX(scaleFactor);
            view.setScaleY(scaleFactor);

            // Fade the page relative to its size.
            view.setAlpha(MIN_ALPHA +
                    (scaleFactor - MIN_SCALE) /
                            (1 - MIN_SCALE) * (1 - MIN_ALPHA));

        } else { // (1,+Infinity]
            // This page is way off-screen to the right.
            view.setAlpha(0f);
        }
    }
}

Создадим объект этого класса и передадим его в ViewPager с помощью метода setPageTransformer().

MainActivity.java

public class MainActivity extends AppCompatActivity {

    private FragmentManager manager;

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

        manager = getSupportFragmentManager();

        ViewPager pager = findViewById(R.id.pager);
        pager.setAdapter(new MyAdapter(manager));
        pager.setPageTransformer(false, new ZoomOutPageTransformer());

        TabLayout tab = findViewById(R.id.tabs);
        tab.setupWithViewPager(pager);
    }
    
    ...
}

Запустим приложение и посмотрим на результат