Andriod开发 ViewPager PageTabStrip

1. ViewPager

 ViewPager常见于APP的引导页或者产品介绍，左右滑动展示不同页面。

 ViewPager用PagerAdapter来绑定数据。PagerAdapter是个抽象类，所以需要写一个子类来实现它。

xml:

<?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=".ViewPagerActivity"
    android:orientation="vertical"
    >
    
    <androidx.viewpager.widget.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        ></androidx.viewpager.widget.ViewPager>

</LinearLayout>

java:

实现PagerAdapter的子类

package com.example.chapter08;

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

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

import com.example.chapter08.entity.Book;

import java.util.ArrayList;
import java.util.List;

public class BookPagerAdapter extends PagerAdapter {

    private Context myContext;
    private List<Book> books;

    private List<ImageView> images;

    public BookPagerAdapter(Context myContext, List<Book> books) {
        this.myContext = myContext;
        this.books = books;

        images = new ArrayList<>();
        for(Book b : books){
            ImageView iv = new ImageView(myContext);
            iv.setLayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
            ));
            iv.setImageResource(b.image);
            images.add(iv);
        }

    }


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

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView iv = images.get(position);
        container.addView(iv);
        return iv;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(images.get(position));
    }
}

 instantiateItem表示当前容器要展示第几个View，执行一个放入新View的操作。

 destroyItem则是移除之前的View。

这两个函数设置好了，也就是绑定数据到了ViewPager

使用PagerAdapter的子类：

package com.example.chapter08;

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

import android.os.Bundle;
import android.widget.Toast;

import com.example.chapter08.entity.Book;

import java.util.List;

public class ViewPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private List<Book> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_view_pager);

        ViewPager vp = findViewById(R.id.vp);
        list = Book.getDefaultList();
        BookPagerAdapter adapter = new BookPagerAdapter(this, list);
        vp.setAdapter(adapter);

        vp.addOnPageChangeListener(this);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(this, list.get(position).name, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}

效果图：左右滑动，可以切换不同书籍封面

 

 

 2.PageTabStrip

这个是放在ViewPager里的一个组件，在View上方显示一个标题栏，可以随着View的滑动而滑动。

效果可以直接看下图

比起只显示图片，需要在xml里增加一个PageTabStrip，然后在适配器的class中实现getPageTitle方法，返回值就是title内容

代码如下：

xml

<?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=".PagerTabActivity"
    android:orientation="vertical"
    >

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

        <androidx.viewpager.widget.PagerTabStrip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/pt"></androidx.viewpager.widget.PagerTabStrip>

    </androidx.viewpager.widget.ViewPager>

</LinearLayout>

Adapter子类 

package com.example.chapter08;

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

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

import com.example.chapter08.entity.Book;

import java.util.ArrayList;
import java.util.List;

public class BookPagerAdapter extends PagerAdapter {

    private Context myContext;
    private List<Book> books;

    private List<ImageView> images;

    public BookPagerAdapter(Context myContext, List<Book> books) {
        this.myContext = myContext;
        this.books = books;

        images = new ArrayList<>();
        for(Book b : books){
            ImageView iv = new ImageView(myContext);
            iv.setLayoutParams(new ViewGroup.LayoutParams(
                    ViewGroup.LayoutParams.MATCH_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT
            ));
            iv.setImageResource(b.image);
            images.add(iv);
        }

    }


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

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        ImageView iv = images.get(position);
        container.addView(iv);
        return iv;
    }

    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        container.removeView(images.get(position));
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return books.get(position).name;
    }
}

绑定View和Adapter

package com.example.chapter08;

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 com.example.chapter08.entity.Book;

import java.util.List;

public class PagerTabActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private List<Book> list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_pager_tab);


        //init pager tab
        PagerTabStrip pt =  findViewById(R.id.pt);
        pt.setTextSize(TypedValue.COMPLEX_UNIT_SP,20);
        pt.setTextColor(Color.GRAY);

        //init view page
        ViewPager vp = findViewById(R.id.vp);
        list = Book.getDefaultList();
        BookPagerAdapter adapter = new BookPagerAdapter(this, list);
        vp.setAdapter(adapter);

        vp.setCurrentItem(2);
        vp.addOnPageChangeListener(this);

    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        Toast.makeText(this, list.get(position).name, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }
}