Перелистываем экраны приложения с ViewPager

Главная » Перелистываем экраны приложения с ViewPager

Если вам нужно создать приложение с многими экранами, которые красиво переключаются между собой, то это можно довольно легко сделать с помощью такого стандартного элемента Android интерфейса, как ViewPager. ViewPager довольно прост в использовании и выглядит довольно красиво. В этом уроке мы создадим приложение с использованием ViewPager, в котором программно будут создаваться 5 экранов, на каждом из которых будет находится номер страницы и собственная фоновая картинка, а также сделаем так, что при нажатии на каждый из экранов будет появляться Toast сообщение с номером нажатой страницы.

Для начала создадим новое приложение, выбираем Blank Activity. Открываем файл activity_main.xml и задаем там ViewPager:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingBottom="5dp"
 android:paddingLeft="5dp"
 android:paddingRight="5dp"
 android:paddingTop="5dp"
 android:orientation="vertical">

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

</LinearLayout>

На этом настройка пользовательского интерфейса закончена. Все остальное будет происходить в файле MainActivity.java.

Для работы ViewPager ему нужно настроить собственный адаптер, унаследованный от PagerAdapter. Поэтому, в файле MainActivity.java до метода onCreate () мы задаем используемые объекты:

ViewPager viewPager;
MyPagerAdapter mPagerAdapter;

Теперь в методе onCreate () делаем стандартный шаг инициализации используемых объектов и настраиваем адаптер к ViewPager:

// Инициализируем используемые объекты:
viewPager = (ViewPager)findViewById(R.id.view_pager);
mPagerAdapter = new MyPagerAdapter();
viewPager.setAdapter(mPagerAdapter);

Ну и последний и самый важный шаг - это настройка того самого адаптера. Вся остальная работа будет проделана именно в теле адаптера.

Итак, мы создаем адаптер под названием MyPagerAdapter, наследуем его от PagerAdapter. Задаем целое число страниц в адаптере - 5, используемые картинки и цвета для каждого из 5 экранов в качестве двух массивов с данными. А далее программно создаем LinearLayout, задаем его параметры и цвет фона из массива цветов, созданных выше, и в теле этого layout также программно создаем 2 элемента: TextView и ImageView. Текстовое поле будет служить местом, где будет отображаться число - номер страницы, а в ImageView будет отображаться соответственная каждому экрану фоновая картинка.

Все это в коде выглядит следующим образом:

private class MyPagerAdapter extends PagerAdapter {

 // Задаем целое число количества страниц:
 int NumberOfPages = 5;

 // Используем в страницах следующие ресурсы:
 int[] res = {
 android.R.drawable.ic_dialog_alert,
 android.R.drawable.ic_menu_camera,
 android.R.drawable.ic_menu_compass,
 android.R.drawable.ic_menu_directions,
 android.R.drawable.ic_menu_gallery};

 // Цвета, которые будут применяться для фона каждой страницы:
 int[] backgroundcolor = {
 0xFF101010,
 0xFF202020,
 0xFF303030,
 0xFF404040,
 0xFF505050};

 // Метод исполняющий счет страниц:
 @Override
 public int getCount() {
 return NumberOfPages;
 }

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

 @Override
 public Object instantiateItem(ViewGroup container, int position) {

 // Программно создаем в ViewPager layout, в котором отображаем счетчик страницы от 0 до 5,
 // а также настраиваем слушателя нажатий, при нажатии на который будет появляться Toast
 // сообщение с текстом, сообщающим какая по номеру страница нажата:
 TextView textView = new TextView(MainActivity.this);
 textView.setTextColor(Color.WHITE);
 textView.setTextSize(30);
 textView.setTypeface(Typeface.DEFAULT_BOLD);
 textView.setText(String.valueOf(position));

 ImageView imageView = new ImageView(MainActivity.this);
 imageView.setImageResource(res[position]);
 LayoutParams imageParams = new LayoutParams(
 LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
 imageView.setLayoutParams(imageParams);

 LinearLayout layout = new LinearLayout(MainActivity.this);
 layout.setOrientation(LinearLayout.VERTICAL);
 LayoutParams layoutParams = new LayoutParams(
 LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
 layout.setBackgroundColor(backgroundcolor[position]);
 layout.setLayoutParams(layoutParams);
 layout.addView(textView);
 layout.addView(imageView);

 // Слушатель нажатий и Toast сообщение с номером страницы:
 final int page = position;
 layout.setOnClickListener(new OnClickListener(){

 @Override
 public void onClick(View v) {
 Toast.makeText(MainActivity.this,"Нажата " + page + " страница",Toast.LENGTH_SHORT).show();
 }});

 container.addView(layout);
 return layout;
 }

 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
 container.removeView((LinearLayout)object);
 }
}