ViewPager 的使用

ViewPager 的使用

ViewPager 是一个容器类，继承自 ViewGroup ，可以在其中添加其他 View。ViewPager 使用 PagerAdapter 适配器完成数据视图绑定，经常和 Fragment 一起使用，并且提供了专门的 FragmentPagerAdapter 和 FragmentStatePagerAdapter 类供 Fragment 中的 ViewPager 使用。

使用步骤：

1. 在布局文件中添加相应的标签 <androidx.viewpager.widget.ViewPager>。

   <androidx.viewpager.widget.ViewPager
       android:id="@+id/view_pager"
       android:layout_width="match_parent"
       android:layout_height="match_parent"/>
   

2. 自定义继承自 PagerAdapter 的适配器，重写 getCount()，isViewFromObject()，instantiateItem()，destroyItem() 方法。

   public class CustomPagerAdapter extends PagerAdapter {
   
       private Context context;    // 上下文对象
       private List<View> pageList;    // 数据源
   
       public CustomPagerAdapter(Context context, List<View> pageList) {
           this.context = context;
           this.pageList = pageList;
       }
   
       /**
       * 为给定位置创建页面。适配器负责将视图添加到容器中。
       * 返回一个表示新页面的对象,通常直接返回 View 本身。
       */
       @NonNull
       @Override
       public Object instantiateItem(@NonNull ViewGroup container, int position) {
           View item = pageList.get(position);
           container.addView(item);
           return item;
       }
   
       /** 删除给定位置的页面，适配器负责从其容器中删除视图。 */
       @Override
       public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
           container.removeView(pageList.get(position));
       }
   
       /** 返回 ViewPager 中可用的视图数量。 */
       @Override
       public int getCount() { return pageList.size(); }
   
       /** 判断当前页面视图是否与 instantiateItem() 返回的特定键对象相关联(即是否表示同一个 View)。 */
       @Override
       public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
           return view == object;
       }
   }
   

3. 构建视图页面数据源和自定义适配器。

   ViewPager viewPager = findViewById(R.id.view_pager);
   LayoutInflater inflater = LayoutInflater.from(this);
   View pager1 = inflater.inflate(R.layout.view_pager_1, null, false);
   View pager2 = inflater.inflate(R.layout.view_pager_2, null, false);
   View pager3 = inflater.inflate(R.layout.view_pager_3, null, false);
   List<View> pagers = new ArrayList<>();
   pagers.add(pager1);
   pagers.add(pager2);
   pagers.add(pager3);
   CustomPagerAdapter adapter = new CustomPagerAdapter(this, pagers);
   viewPager.setAdapter(adapter);
   viewPager.addOnPageChangeListener(this);
   

4. 通过 addOnPageChangeListener() 方法设置滑动切换页面监听事件，重写实现 onPageScrolled()，onPageSelected()，onPageScrollStateChanged() 方法。

   viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
       @Override
       public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
           
       }
   
       @Override
       public void onPageSelected(int position) {
           Toast.makeText(this, "You scrolled to pager " + position, Toast.LENGTH_SHORT).show;
       }
   
       @Override
       public void onPageScrollStateChanged(int state) {
   
       }
   });
   

为 ViewPager 添加标题栏 —— PagerTitleStrip 和 PagerTabStrip

PagerTitleStrip 和 PagerTabStrip 都是跟随着 ViewPager 滑动而滑动的标题栏，一个是普通文字， 一个是文字带下划线，以及可以点击文字可切换页面。更偏向于使用后者 PagerTabStrip。

使用步骤：

1. 在 XML 布局文件下的 ViewPager 标签中添加 <androidx.viewpager.widget.PagerTabStrip> 标签。

   <androidx.viewpager.widget.ViewPager
       android:id="@+id/view_pager"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintStart_toStartOf="parent"
       app:layout_constraintTop_toTopOf="parent">
   
       <androidx.viewpager.widget.PagerTabStrip
           android:id="@+id/pager_tab"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content" />
   
   </androidx.viewpager.widget.ViewPager>
   

2. 修改适配器的构造函数，增加一个参数，传入 Title 字符串数组。重写 getPageTitle() 方法返回指定位置上的 Title 字符串。

public class CustomPagerAdapter extends PagerAdapter {

    private Context context;    // 上下文对象
    private List<View> pageList;    // 视图数据源
    private String[] titles;    // 标题数据源

    public CustomPagerAdapter(Context context, List<View> pageList, String[] titles) {
        this.context = context;
        this.pageList = pageList;
        this.titles = titles;
    }

    // ...

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}