Android中ViewPager的使用

ViewPager允许用户左右翻页数据，与之对应的适配器是PagerAdapter。实现ViewPager.OnPageChangeListener接口即可监听ViewPager，想要显示翻页标题栏可以在ViewPager下挂PagerTabStrip或者PagerTitleStrip子节点并在适配器中重写getPageTitle方法。


使用步骤如下：

1. 建立布局文件，注意名称要写全。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".ViewPagerDemoActivity"
android:padding="10dp">

<androidx.viewpager.widget.ViewPager
android:id="@+id/vp_demo"
android:layout_width="match_parent"
android:layout_height="400dp">
<androidx.viewpager.widget.PagerTabStrip
android:id="@+id/pts_demo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity = "top"/>
</androidx.viewpager.widget.ViewPager>
</LinearLayout>

1. item_demo.xml。ViewPager的每个页面的布局文件。

<?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">

<ImageView
android:id="@+id/iv_image"
android:layout_width="match_parent"
android:layout_height="300dp" />

<TextView
android:id="@+id/tv_description"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#000000"
android:textSize="20sp"
/>
</LinearLayout>

1. ItemInfo.java。数据的bean。

package xyz.strasae.androidlearn.myandroidapplication.bean;

import java.util.ArrayList;

import xyz.strasae.androidlearn.myandroidapplication.R;

public class ItemInfo {
public String name;
public String description;
public int image;
private static String[] names = {"item1", "item2", "item3", "item4"};
private static int[] images = {R.drawable.item1, R.drawable.item2, R.drawable.item3, R.drawable.item4};
private static String[] descriptions = {"This is  item1's description", "This is  item2's description", "This is  item3's description", "This is  item4's description"};

public ItemInfo() {
name = "";
description = "";
image = 0;
}

public ItemInfo(String name, String description, int image) {
this.name = name;
this.description = description;
this.image = image;
}

public static ArrayList<ItemInfo> getDefaultList() {
ArrayList<ItemInfo> itemInfos = new ArrayList<>();
for(int i = 0; i < names.length; i++) {
itemInfos.add(new ItemInfo(names[i], descriptions[i], images[i]));
}
return itemInfos;
}
}

1. 新建适配器类继承自PagerAdapter。

package xyz.strasae.androidlearn.myandroidapplication.adapter;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.viewpager.widget.PagerAdapter;

import java.util.ArrayList;

import xyz.strasae.androidlearn.myandroidapplication.R;
import xyz.strasae.androidlearn.myandroidapplication.bean.ItemInfo;

public class MyViewPagerAdapter extends PagerAdapter {
private Context context;
private ArrayList<View> views  = new ArrayList<>();
private ArrayList<ItemInfo> itemInfos = new ArrayList<>();
private LayoutInflater layoutInflater;

public MyViewPagerAdapter(Context context, ArrayList<ItemInfo> itemInfos) {
layoutInflater = LayoutInflater.from(context);
this.context = context;
this.itemInfos = itemInfos;
for(int i = 0; i < itemInfos.size(); i++) {
View view = layoutInflater.inflate(R.layout.item_demo, null);
ImageView imageView = view.findViewById(R.id.iv_image);
TextView textView = view.findViewById(R.id.tv_description);
imageView.setImageResource(itemInfos.get(i).image);
textView.setText(itemInfos.get(i).description);
views.add(view);
}
}

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

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

@Override
//销毁指定的页面
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView(views.get(position));
}

@NonNu
7ff7
ll
@Override
//实例化指定位置页面 并将其添加到容器中
public Object instantiateItem(@NonNull ViewGroup container, int position) {
container.addView(views.get(position));
return views.get(position);
}

@Nullable
@Override
//获取指定页面的标题
public CharSequence getPageTitle(int position) {
return itemInfos.get(position).name;
}
}

1. 在代码中使用适配器。注意在xml文件中并不能设置翻页标题栏的字体大小和颜色，但是在代码中可以。

package xyz.strasae.androidlearn.myandroidapplication;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.PagerTabStrip;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.os.Bundle;
import android.util.TypedValue;
import android.widget.Toast;

import java.util.ArrayList;

import xyz.strasae.androidlearn.myandroidapplication.adapter.MyViewPagerAdapter;
import xyz.strasae.androidlearn.myandroidapplication.bean.ItemInfo;

public class ViewPagerDemoActivity extends AppCompatActivity {
private ViewPager vp_demo;
private ArrayList<ItemInfo> itemInfos;
private PagerTabStrip pts_demo;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_view_pager_demo);
itemInfos = ItemInfo.getDefaultList();
MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(ViewPagerDemoActivity.this, itemInfos);
vp_demo = findViewById(R.id.vp_demo);
vp_demo.setAdapter(myViewPagerAdapter);
vp_demo.setCurrentItem(0);
vp_demo.setOnPageChangeListener(new MyOnPageChangeListener());
//不能在xml文件中设置字体大小和颜色 但是可以在代码中设置
pts_demo = findViewById(R.id.pts_demo);
pts_demo.setTextSize(TypedValue.COMPLEX_UNIT_SP, 20);
pts_demo.setTextColor(Color.RED);
}

private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {

//第一个参数表示当前页面的序号；第二个参数表示当前页面偏移的百分比，取值为0到1；第三个参数表示当前页面的偏移距离
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}

//position代表当前选中的页面
public void onPageSelected(int position) {
Toast.makeText(ViewPagerDemoActivity.this, itemInfos.get(position).name, Toast.LENGTH_SHORT).show();
}

// 翻页状态改变时触发。state取值说明为：0表示静止，1表示正在滑动，2表示滑动完毕
public void onPageScrollStateChanged(int state) {
}
}
}