Паттерн ViewPager — пример использования

| 14.02.2015

Думаю, вы уже встречали во многих приложениях возможность «перелистывания» страниц/экрана с помощью движения пальца влево или вправо по экрану. Это паттерн называется ViewPager. Он прост в создании и использовании, и сейчас мы создадим небольшое приложение-пример.

В нашем приложении на каждом экране/странице будет отображаться текстовая фраза с номером страницы. Также мы добавим над фразой небольшой «счетчик» по типу 2/29, где первая цифра — это номер страницы, на которой мы сейчас находимся, а вторая — количество страниц.

1. Итак, разметка основного экрана — res/layout/activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" 
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/txtCount2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#fff"
            android:text="TextView1" />

    </android.support.v4.view.ViewPager>

</RelativeLayout>

Как видим, здесь ключевой элемент — это android.support.v4.view.ViewPager, который, по сути, является фрагментом, внутри которого будет изменяться контент.

Добавьте значения отступов в res/values/dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

2. Создадим верстку для отдельного пункта страницы — res/layout/pager_item.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp">

    <TextView
        android:id="@+id/txtCount"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top"
        android:layout_marginBottom="10dp"
        />
    <TextView
        android:id="@+id/text1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="top"
        android:textSize="18sp"
        />

</LinearLayout>

Здесь первый элемент TextView будет использоваться для создания «счетчика», а во втором будем сеттить наш текст.

3. Создадим класс фрагмента ItemFragment.java

package ru.androiddocs.pagerexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class ItemFragment extends Fragment {

    public static final String ARG_TEXT = "item_text";
    public static final String ARG_POSITION = "item_position";
    public static final String ARG_COUNT = "item_count";

    @Override
    public View onCreateView(LayoutInflater inflater,
                             ViewGroup container, Bundle savedInstanceState) {
        // The last two arguments ensure LayoutParams are inflated
        // properly.
        View rootView = inflater.inflate(
                R.layout.pager_item, container, false);
        Bundle args = getArguments();

        ((TextView) rootView.findViewById(R.id.text1)).setText(
                args.getString(ARG_TEXT));

        ((TextView) rootView.findViewById(R.id.txtCount)).setText(
                args.getInt(ARG_POSITION) + " / " + args.getInt(ARG_COUNT));

        return rootView;
    }
}

Здесь метод onCreateView() будет строить нам отображение отдельной страницы, получая данные из объекта Bundle, которые мы будем передавать из класса-адаптера (создадим на следующем шаге). Аргументы достаются так:

Bundle args = getArguments();

Аргументы достаются по ключам, имя которых помещено в константы ARG_TEXT, ARG_POSITION и ARG_COUNT. Достать тот или иной аргумент можно с помощью методов:

args.getInt(ARG_POSITION)

или

args.getString(ARG_TEXT)

в зависимости от типа данных.

4. Создадим класс адаптера TextPagerAdapter, который наследуется от FragmentStatePagerAdapter.

package ru.androiddocs.pagerexample;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import java.util.List;

public class TextPagerAdapter extends FragmentStatePagerAdapter {

    List<String> data;

    public TextPagerAdapter(FragmentManager fm, List<String> data) {
        super(fm);
        this.data = data;
    }

    @Override
    public Fragment getItem(int i) {

        Fragment fragment = new ItemFragment();

        Bundle args = new Bundle();
        args.putString(ItemFragment.ARG_TEXT, data.get(i));
        args.putInt(ItemFragment.ARG_POSITION, i+1);
        args.putInt(ItemFragment.ARG_COUNT, getCount());

        fragment.setArguments(args);

        return fragment;
    }

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

    @Override
    public CharSequence getPageTitle(int position) {
        return "Item " + (position + 1);
    }
}

В конструкторе мы получаем FragmentManager и данные, помещенные в список List.

Метод getItem() создает новый ItemFragment и добавляет к нему аргументы Bundle с ключами-константами из ItemFragment.

Метод getCount() возвращает количество элементов в нашем списке.

Метод getPageTitle() возвращает заголовок для конкретной страницы.

5. Создадим класс MainActivity.java

package ru.androiddocs.pagerexample;

import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBarActivity;
import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends ActionBarActivity {

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

        TextPagerAdapter mTextPagerAdapter = new TextPagerAdapter(
                getSupportFragmentManager(), getData());

        ViewPager mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(mTextPagerAdapter);
        
        // mViewPager.setCurrentItem(10); 
    }

    private List<String> getData() {
        List<String> data = new ArrayList<>();
        for (int i = 1; i < 30; i++) {
            data.add("Item number " + i);
        }

        return data;
    }
}

Тут все просто. Создаем экземпляр адаптера TextPagerAdapter, передавая ему FragmentManager (с поддержкой старых версий) и объект данных, возвращаемых методом getData(). Под свои нужды вы можете видоизменить получение данных, например, с использованием базы данных.

Если необходимо установить программно номер текущей страницы, то можно использовать закомментированную строчку:

mViewPager.setCurrentItem(10);

Запускаем приложение и листаем влево/вправо.

Паттерн ViewPager

Паттерн ViewPager

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

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

*