Главная » Перелистываем экраны приложения с 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);
}
}
Вот и все, можно преступать к тестированию приложения с использованием такой крутой штуки как ViewPager:
Замечательно, все переключается, отображается и Toast сообщение не подвело. Полный код файла MainActivity.java. | |
|
Всего комментариев: 0 | |