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>

2. 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>

3. 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;
    }
}

3. 新建适配器类继承自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<>();//这是PagerView下面挂的View的集合
    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));
    }

    @NonNull
    @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;
    }
}

4. 在代码中使用适配器。注意在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) {
        }
    }
}