Учебное пособие по Android ViewPager

ViewPager в Android позволяет пользователю пролистывать страницы данных влево и вправо. В нашем приложении ViewPager для Android мы реализуем ViewPager, который пролистывает три представления с разными изображениями и текстами.

Android ViewPager

Виджет Android ViewPager находится в библиотеке поддержки и позволяет пользователю провести пальцем влево или вправо, чтобы увидеть совершенно новый экран. Сегодня мы реализуем ViewPager с помощью Views и PagerAdapter. Хотя мы можем реализовать то же самое с помощью ListView.

Пример Android ViewPager

Пример кода Android ViewPager

Activity_main.xml состоит исключительно из ViewPager, как показано ниже. activity_main.xml

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

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

</RelativeLayout>

MainActivity.java приведен ниже. MainActivity.java

package com.journaldev.viewpager;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

public class MainActivity extends AppCompatActivity {

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

        ViewPager viewPager = (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(new CustomPagerAdapter(this));
    }
}

Роль MainActivity в приведенном выше коде заключается в том, чтобы просто сослаться на ViewPager и установить CustomPagerAdapter, который расширяет PagerAdapter. Прежде чем мы обсудим класс CustomPagerAdapter, давайте рассмотрим класс ModelObject. ModelObject.java

package com.journaldev.viewpager;

public enum ModelObject {

    RED(R.string.red, R.layout.view_red),
    BLUE(R.string.blue, R.layout.view_blue),
    GREEN(R.string.green, R.layout.view_green);

    private int mTitleResId;
    private int mLayoutResId;

    ModelObject(int titleResId, int layoutResId) {
        mTitleResId = titleResId;
        mLayoutResId = layoutResId;
    }

    public int getTitleResId() {
        return mTitleResId;
    }

    public int getLayoutResId() {
        return mLayoutResId;
    }

}

В приведенном выше перечислении перечислены все страницы ViewPagers. Есть три страницы с соответствующими макетами. Макет одной страницы приведен ниже. view_blue.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:background="@android:color/holo_blue_dark"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Second View"
        android:layout_gravity="center_horizontal"
        android:textSize="28sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe left to\nFirst View"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:minLines="2"
        android:id="@+id/textView2"
        android:padding="@dimen/activity_horizontal_margin"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Swipe right to\nThird View"
        android:layout_gravity="center_horizontal"
        android:textSize="20sp"
        android:textColor="@android:color/black"
        android:textStyle="bold"
        android:padding="@dimen/activity_horizontal_margin"
        android:minLines="2"
        android:id="@+id/textView3"
        android:layout_alignTop="@+id/textView2"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true" />

</RelativeLayout>

Остальные две страницы имеют аналогичные макеты и приведены в исходном коде этого проекта. CustomPagerAdapter.java

package com.journaldev.viewpager;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class CustomPagerAdapter extends PagerAdapter {

    private Context mContext;

    public CustomPagerAdapter(Context context) {
        mContext = context;
    }

    @Override
    public Object instantiateItem(ViewGroup collection, int position) {
        ModelObject modelObject = ModelObject.values()[position];
        LayoutInflater inflater = LayoutInflater.from(mContext);
        ViewGroup layout = (ViewGroup) inflater.inflate(modelObject.getLayoutResId(), collection, false);
        collection.addView(layout);
        return layout;
    }

    @Override
    public void destroyItem(ViewGroup collection, int position, Object view) {
        collection.removeView((View) view);
    }

    @Override
    public int getCount() {
        return ModelObject.values().length;
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public CharSequence getPageTitle(int position) {
        ModelObject customPagerEnum = ModelObject.values()[position];
        return mContext.getString(customPagerEnum.getTitleResId());
    }

}

CustomPagerAdapter(Context context): конструктору требуется ссылка Context. Контекст сохраняется как переменная-член класса, поскольку позже он используется для доступа к отдельным макетам страниц из класса enum
instantiateItem : в этом случае мы используем перечисление и расширяем макет, связанный с конкретным значением перечисления. Затем мы добавляем новый расширенный макет в ViewGroup (коллекцию представлений), поддерживаемую PagerAdapter, а затем возвращаем этот макет. Объект, возвращаемый этим методом, также используется позже в качестве второго параметра в методе isViewFromObject
destroyItem : этот метод удаляет определенное представление из ViewGroup, поддерживаемого PagerAdapter.
getCount : просто возвращает количество просмотров, которые будут поддерживаться ViewPager. В этом примере счетчик — это количество значений перечисления в объекте модели.
isViewFromObject : этот метод проверяет, принадлежит ли конкретный объект заданной позиции, что упрощается. Как отмечалось ранее, второй параметр имеет тип Object и совпадает со значением, возвращаемым методом instantiateItem
getPageTitle : в заданной позиции нам нужно предоставить PagerAdapter заголовок. Обычно это проявляется в ActionBar как заголовок Activity, или иногда вкладки подключаются к этому методу для маркировки каждой вкладки. В данном случае мы оставили его только для маркировки.

Скачать пример проекта Android ViewPager