Возможно, вы видели некоторые из новых функций пользовательского интерфейса, доступных как часть пакета совместимости Android. Одна из таких функций, горизонтальный просмотр страниц, позволяет легко перемещаться влево и вправо для загрузки различных экранов (страниц), управляемых одним действием. Эта функция была продемонстрирована в нескольких громких приложениях, таких как приложение Android Market и клиент Google+ для Android.
В пакете совместимости Android есть ряд классов, которые можно использовать для реализации горизонтального перелистывания страниц в ваших пакетах Android. Элемент управления ViewPager (android.support.v4.view.ViewPager) обеспечивает горизонтальное перелистывание. Он может использоваться в ваших макетах так же, как галерея или другой элемент управления пользовательского интерфейса, заполненный адаптером. Класс PagerAdapter (android.support.v4.view.PagerAdapter) используется для определения данных, отображаемых элементом управления ViewPager. Сегодня мы рассмотрим простой пример использования этих классов для обеспечения поведения смахивания.
Шаг 0: Начало работы
Мы предоставляем полный исходный код для примера приложения, обсуждаемого в этом руководстве. Вы можете скачать образец исходного кода, который мы предоставляем для ознакомления .
Шаг 1. Используйте пакет совместимости
Горизонтальный просмотр страниц основан на API-интерфейсах, доступных только в пакете совместимости Android v4, редакция 3 ; в настоящее время эти API не доступны в стандартном Android SDK. Поэтому вам нужно добавить пакет совместимости Android в ваш проект Android, чтобы получить доступ к соответствующим API.
Чтобы добавить пакет Android Compatibility в ваш проект Eclipse Android, щелкните правой кнопкой мыши проект в Project Explorer. Выберите «Инструменты Android», «Добавить библиотеку совместимости». Теперь вы увидите файл android-support-v4.jar в папке с вашими ссылочными библиотеками. Это означает, что вы успешно добавили пакет в свой проект и теперь можете начать его использовать.
Шаг 2: Определите ViewPager
Затем вам нужно определить элемент управления ViewPager в файле ресурсов макета. В нашем простом примере мы обновляем ресурс макета main.xml, используемый нашим классом Activity, и определяем элемент управления ViewPager в этом макете. На этот элемент управления должно ссылаться его полное имя: android.support.v4.view.ViewPager.
Например, вот обновленный ресурс макета main.xml с определенным ViewPager:
|
01
02
03
04
05
06
07
08
09
10
|
<?xml version=»1.0″ encoding=»utf-8″?>
<LinearLayout xmlns:android=»http://schemas.android.com/apk/res/android»
android:orientation=»vertical»
android:layout_width=»fill_parent»
android:layout_height=»fill_parent»>
<android.support.v4.view.ViewPager
android:layout_width=»match_parent»
android:layout_height=»match_parent»
android:id=»@+id/myfivepanelpager»/>
</LinearLayout>
|
Элементы управления ViewPager часто занимают весь экран, но это не обязательно так. В этом примере мы отобразим пять различных «страниц» макета, поэтому мы называем наш элемент управления ViewPager уникальным идентификатором, обозначенным myfivepanelpager.
Шаг 3. Создание ресурсов макета страницы
Затем вы захотите создать набор ресурсов, которые будут составлять «страницы» или «панели» для горизонтального перелистывания. Вы можете использовать один и тот же файл ресурсов макета для каждой страницы и добавлять разное содержимое, или вы можете загрузить совершенно разные ресурсы макета для отдельных страниц. Для этого примера мы создали пять отдельных файлов ресурсов макета, которые называются farleft.xml, left.xml, middle.xml, right.xml и farright.xml. Каждый ресурс макета имеет различное содержимое для отображения. Содержание каждого ресурса макета зависит от вас. Вы можете использовать статические или динамические элементы управления. Чтобы сохранить этот пример простым, мы будем придерживаться статических элементов управления, таких как TextView и ImageView. Для крайних левых и крайних правых страниц мы включим некоторые элементы управления Button.
Это изображение показывает пять различных результатов файла ресурсов макета:
В реализации этих файлов макета нет ничего особенного. Не забудьте реализовать любые обработчики Button onClick в своем классе Activity. Эти ресурсы макета будут загружены PagerAdapter во время выполнения для отображения на экране. Подробности реализации см. В исходном коде, сопровождающем этот проект.
Шаг 4: Реализация пользовательского адаптера PagerAdter
Ваш ViewPager нуждается в адаптере данных, чтобы определять и загружать соответствующий контент для каждой страницы, к которой пользователь проводит. Мы назвали наш файл ресурсов макета «pages» в том порядке, в котором мы хотим, чтобы они отображались, слева направо.
Когда вы расширяете класс PagerAdapter, вам необходимо реализовать несколько ключевых методов.
Во-первых, вам нужно определить размер диапазона подкачки. В этом случае у нас есть набор из пяти страниц для отображения. Поэтому вы хотите, чтобы метод getCount () класса MyPagerAdapter возвращал размер страницы 5.
Затем вам нужно реализовать метод instantiateItem () для раздувания соответствующего файла ресурсов макета, в зависимости от положения свайпа пользователя. Самая дальняя страница слева находится в позиции 0, следующая страница справа — позиция 1 и т. Д. Метод instantiateItem () использует сервис LayoutInflater для раздувания определенного макета и добавления его в коллекцию, используемую ViewPager.
Это изображение показывает пять различных файлов ресурсов макета и их «позиции» в терминах порядка подкачки:
Последний важный метод, который необходимо реализовать, — это метод destroyItem (), который удаляет конкретный макет из коллекции, используемой ViewPager, когда он больше не отображается.
Вот базовая реализация для пятистраничного горизонтального адаптера пейджера под названием MyPagerAdapter, который реализует эти основные методы, а также некоторые другие:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
private class MyPagerAdapter extends PagerAdapter {
public int getCount() {
return 5;
}
public Object instantiateItem(View collection, int position) {
LayoutInflater inflater = (LayoutInflater) collection.getContext()
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int resId = 0;
switch (position) {
case 0:
resId = R.layout.farleft;
break;
case 1:
resId = R.layout.left;
break;
case 2:
resId = R.layout.middle;
break;
case 3:
resId = R.layout.right;
break;
case 4:
resId = R.layout.farright;
break;
}
View view = inflater.inflate(resId, null);
((ViewPager) collection).addView(view, 0);
return view;
}
@Override
public void destroyItem(View arg0, int arg1, Object arg2) {
((ViewPager) arg0).removeView((View) arg2);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == ((View) arg1);
}
@Override
public Parcelable saveState() {
return null;
}
}
|
Шаг 5: Привязать MyPagerAdapter
Наконец, вам необходимо обновить метод onCreate () вашего класса Activity, чтобы привязать MyPagerAdapter к элементу управления ViewPager, определенному в файле ресурсов макета main.xml.
Вы также можете использовать это время для установки начальной позиции пейджера. По умолчанию он начинается с позиции 0 (крайний левый макет с простым кнопочным управлением). Однако мы хотим позволить пользователю проводить пальцем влево и вправо, поэтому мы устанавливаем начальную позицию ViewPager на средний макет (обезьяна в середине), используя метод setCurrentItem ().
|
01
02
03
04
05
06
07
08
09
10
|
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
MyPagerAdapter adapter = new MyPagerAdapter();
ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);
myPager.setAdapter(adapter);
myPager.setCurrentItem(2);
}
|
Теперь, если вы запустите свое приложение, вы начнете с обезьяны на средней странице и сможете пролистать две страницы влево или вправо, как показано здесь:
Вывод
Элемент управления пользовательским интерфейсом пейджера в горизонтальном представлении — это аккуратный элемент управления пользовательским интерфейсом, доступный для разработчиков Android через пакет совместимости Android. Данные для отдельных «страниц» управляются специальным адаптером данных, который называется PagerAdapter. В библиотеке совместимости также есть классы для создания совместимых с фрагментами адаптеров данных для управления элементами управления ViewPager.