Использование ViewPager для создания скользящего экрана в Android

Android предоставляет множество элементов управления UI для создания красивых экранов UI для ваших приложений. Одним из общих требований к пользовательскому интерфейсу является скольжение между несколькими экранами. Например, слайд-шоу с фотографиями. Android предоставляет пользовательский интерфейс для создания скользящих экранов, который называется ViewPager . В этом руководстве объясняется использование ViewPager для создания скользящего экрана в ваших приложениях для Android.

Вы можете найти код для этой статьи на GitHub

Добавление View Pager к вашей активности

Создайте новый пустой проект Activity и начните с добавления ViewPager в действие. Как и любой другой элемент управления пользовательского интерфейса, вы определяете ViewPager в файле макета. Измените activity_main.xml на следующее:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v4.view.ViewPager android:id="@+id/vpPager" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v4.view.PagerTabStrip android:id="@+id/pager_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="top" /> </android.support.v4.view.ViewPager> </LinearLayout> 

В приведенном выше макете есть LinearLayout, содержащий ViewPager с идентификатором «vpPage». Есть также вложенное представление PagerTabStrip которое указывает вкладки в верхней части экрана в зависимости от количества страниц в ViewPager. После создания макета обновите файл MainActivity.java, чтобы использовать этот макет следующим образом:

 package com.viewpagerandroid; // Update to match your package import android.support.v4.app.Fragment; import android.support.v4.app.FragmentManager; import android.support.v4.app.FragmentPagerAdapter; import android.support.v4.view.ViewPager; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; 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 vpPager = (ViewPager) findViewById(R.id.vpPager); } } 

В приведенном выше коде я MainActivity которая устанавливает макет, созданный как его представление содержимого. Затем он запрашивает ссылку на ViewPager с помощью функции findViewById .

Создание фрагментов для ViewPager

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

Классы макетов и фрагментов:

fragment_one_img.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"> <TextView android:id="@+id/txtMain" android:layout_width="match_parent" android:layout_height="wrap_content" /> <ImageView android:id="@+id/imgMain" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> 

FragmentWithOneImage.java

 package com.viewpagerandroid; 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.ImageView; import android.widget.TextView; public class FragmentWithOneImage extends Fragment { private String title; private int image; public static FragmentWithOneImage newInstance(String title, int resImage) { FragmentWithOneImage fragment = new FragmentWithOneImage(); Bundle args = new Bundle(); args.putInt("image", resImage); args.putString("title", title); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); image = getArguments().getInt("image", 0); title = getArguments().getString("title"); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_one_img, container, false); TextView tvLabel = (TextView) view.findViewById(R.id.txtMain); tvLabel.setText(title); ImageView imageView = (ImageView) view.findViewById(R.id.imgMain); imageView.setImageResource(image); return view; } } 

fragment_two_images.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"> <TextView android:id="@+id/txtMain" android:layout_width="match_parent" android:layout_height="wrap_content" /> <ImageView android:id="@+id/imgMain" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:id="@+id/imgSecondary" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> 

FragmentWithTwoImages.java

 package com.viewpagerandroid; 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.ImageView; import android.widget.TextView; public class FragmentWithTwoImages extends Fragment { private String title; private int imageMain; private int imageSecondary; public static FragmentWithTwoImages newInstance(String title, int resMainImage, int resSecondaryImage) { FragmentWithTwoImages fragment = new FragmentWithTwoImages(); Bundle args = new Bundle(); args.putInt("imageMain", resMainImage); args.putInt("imageSecondary", resSecondaryImage); args.putString("title", title); fragment.setArguments(args); return fragment; } @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); imageMain = getArguments().getInt("imageMain", 0); imageSecondary = getArguments().getInt("imageSecondary", 0); title = getArguments().getString("title"); } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_two_images, container, false); TextView tvLabel = (TextView) view.findViewById(R.id.txtMain); tvLabel.setText(title); ImageView imageView = (ImageView) view.findViewById(R.id.imgMain); imageView.setImageResource(imageMain); ImageView imageViewSecondary = (ImageView) view.findViewById(R.id.imgSecondary); imageViewSecondary.setImageResource(imageSecondary); return view; } } 

В приведенном выше коде FragmentWithOneImage , имеет метод getInstance который принимает текст и идентификатор ресурса изображения, отображаемый во фрагменте. Фрагмент раздувает макет frag_one_img.xml и устанавливает текст и идентификатор ресурса изображения. Точно так же FragmentWithTwoImages раздувает макет frag_two_images.xml и устанавливает текст и оба идентификатора ресурса изображения.

Реализация PagerAdapter

Теперь, когда вы создали фрагменты, вам нужен PagerAdapter который вы установите в ViewPager . Хотя вы можете напрямую расширяться из PagerAdapter , Android предоставляет другой базовый класс FragmentPagerAdapter который реализует базовые функциональные возможности для отображения фрагментов в виде страниц в PagerAdapter .

Расширьте адаптер из FragmentPagerAdapter , добавив этот класс в MainActivity.java :

 public static class MyPagerAdapter extends FragmentPagerAdapter { private static int NUM_ITEMS = 3; public MyPagerAdapter(FragmentManager fragmentManager) { super(fragmentManager); } // Returns total number of pages. @Override public int getCount() { return NUM_ITEMS; } // Returns the fragment to display for a particular page. @Override public Fragment getItem(int position) { switch (position) { case 0: return FragmentWithOneImage.newInstance("Fragment 1", R.drawable.android_1); case 1: return FragmentWithOneImage.newInstance("Fragment 2", R.drawable.android_2); case 2: return FragmentWithTwoImages.newInstance("Fragment 3", R.drawable.android_3, R.drawable.android_4); default: return null; } } // Returns the page title for the top indicator @Override public CharSequence getPageTitle(int position) { return "Tab " + position; } } 

 FragmentPagerAdapter adapterViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager); adapterViewPager = new MyPagerAdapter(getSupportFragmentManager()); vpPager.setAdapter(adapterViewPager); } 

 dependencies { ... compile 'com.ToxicBakery.viewpager.transforms:view-pager-transforms:1.2.32@aar' } 

 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ViewPager vpPager = (ViewPager) findViewById(R.id.vpPager); adapterViewPager = new MyPagerAdapter(getSupportFragmentManager()); vpPager.setAdapter(adapterViewPager); vpPager.setPageTransformer(true, new RotateUpTransformer()); }