Android UI组件——ViewPager

Posted on 2023-03-05

Android UI组件——ViewPager

viewPager

官方解释：以可滑动的格式显示视图或 Fragment。 如果可能，请改用 viewpager2。

不难看出，这货已经被淘汰了，之后基本都是使用viewpager2，but，为了解了解基础，我们还是来说些废话。

ViewPager的简介和作用

ViewPager是android扩展包v4包中的类，这个类可以让用户左右切换当前的view 1）ViewPager类直接继承了ViewGroup类，所有它是一个容器类，可以在其中添加其他的view类。 2）ViewPager类需要一个PagerAdapter适配器类给它提供数据。 3）ViewPager经常和Fragment一起使用，并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

（不知道Fragment是啥的直接叉出android组）

ViewPager的适配器

既然说它可以滑动显示View和Fragment？很像ListView有木有？所以，ViewPager也需要创建对应的PagerAdapter。

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

import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

public class MyPagerAdapter extends PagerAdapter {

    //用于存放视图
    List<View> viewList;
    //获得上下文，后续方便使用一点
    Context context;

    public MyPagerAdapter(List<View> viewList, Context context) {
        this.viewList = viewList;
        this.context = context;
    }

    //获得View的个数
    @Override
    public int getCount() {
        return viewList.size();
    }

    /**
     * 确认View与实例对象是否相互对应。ViewPager内部用于获取View对应的ItemInfo。
     *
     * @param view   ViewPager显示的View内容
     * @param object 在instantiateItem中提交给ViewPager进行保存的实例对象
     * @return 是否相互对应
     */

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

    /**
     * 为给定的位置创建相应的View。创建View之后,需要在该方法中自行添加到container中。
     *
     * @param container ViewPager本身
     * @param position  给定的位置
     * @return 提交给ViewPager进行保存的实例对象
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }

    /**
     * 为给定的位置移除相应的View。
     *
     * @param container ViewPager本身
     * @param position  给定的位置
     * @param object    在instantiateItem中提交给ViewPager进行保存的实例对象
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }
}

然后在MainActivity的activity_main.xml文件中放入ViewPager

<?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=".MainActivity">

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

</LinearLayout>

创建一个或多个打算放入ViewPager的layout布局，用于ViewPager加载和显示

red.xml

<?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:background="#c32136"
    android:gravity="center"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="red"
        android:textSize="35sp"
        />
</LinearLayout>

orange.xml

<?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:background="#ff7500"
    android:gravity="center"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="orange"
        android:textSize="35sp"
        />
</LinearLayout>

green.xml

<?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:background="#00bc12"
    android:gravity="center"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="green"
        android:textSize="35sp"
        />
</LinearLayout>

blue.xml

<?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:background="#44cef6"
    android:gravity="center"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:gravity="center"
        android:text="blue"
        android:textSize="35sp"
        />
</LinearLayout>

然后就可以汇总了

MainActivity.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;

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

import com.pj.viewpager.adapter.MyPagerAdapter;

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

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private List<View> viewList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        //使用上面自定义的PagerAdapter
        MyPagerAdapter adapter = new MyPagerAdapter(viewList, MainActivity.this);
        viewPager.setAdapter(adapter);
    }

    private void initView() {
        viewPager = (ViewPager) findViewById(R.id.view_pager);

        viewList = new ArrayList<>();
        //加载4个xml布局文件并添加到list中
        viewList.add(LayoutInflater.from(MainActivity.this).inflate(R.layout.red,null));
        viewList.add(LayoutInflater.from(MainActivity.this).inflate(R.layout.orange,null));
        viewList.add(LayoutInflater.from(MainActivity.this).inflate(R.layout.green,null));
        viewList.add(LayoutInflater.from(MainActivity.this).inflate(R.layout.blue,null));
    }
}

对MyPagerAdapter进行一些改动还可实现无限右拖动

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

import androidx.viewpager.widget.PagerAdapter;

import java.util.List;

public class MyPagerAdapter extends PagerAdapter {

    //用于存放视图
    List<View> viewList;
    //获得上下文，后续方便使用一点
    Context context;

    public MyPagerAdapter(List<View> viewList, Context context) {
        this.viewList = viewList;
        this.context = context;
    }

    //获得View的个数
    @Override
    public int getCount() {
        return Integer.MAX_VALUE;
    }

    /**
     * 确认View与实例对象是否相互对应。ViewPager内部用于获取View对应的ItemInfo。
     *
     * @param view   ViewPager显示的View内容
     * @param object 在instantiateItem中提交给ViewPager进行保存的实例对象
     * @return 是否相互对应
     */

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

    /**
     * 为给定的位置创建相应的View。创建View之后,需要在该方法中自行添加到container中。
     *
     * @param container ViewPager本身
     * @param position  给定的位置
     * @return 提交给ViewPager进行保存的实例对象
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
//        container.addView(viewList.get(position));
//        return viewList.get(position);
        try {
            container.addView(viewList.get(position%viewList.size()));
        }catch (Exception e){

        }
        return viewList.get(position%viewList.size());
    }

    /**
     * 为给定的位置移除相应的View。
     *
     * @param container ViewPager本身
     * @param position  给定的位置
     * @param object    在instantiateItem中提交给ViewPager进行保存的实例对象
     */
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        //避免滑动的时候出现动画卡顿
//        container.removeView(viewList.get(position));
    }
}

上面适配器是使用的View的形式，其实ViewPager主要是搭配Fragment一起使用，官方也给了另一个专门给Fragment适配的适配器

FragmentPagerAdapter

创建FragmentPagerAdapter

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    List<Fragment> fragments;

    public MyFragmentPagerAdapter(FragmentManager fm, int behavior, List<Fragment> fragments) {
        super(fm, behavior);
        this.fragments = fragments;
    }


    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

    //返回Fragment的个数
    @Override
    public int getCount() {
        return fragments.size();
    }


}

FragmentPagerAdapter 的构造方法中新增了一个 behavior 参数，当参数设置为 FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT 时，就会使用 setMaxLifecycle() 来限制了 Fragment 的生命周期，只有当 Fragment 显示在屏幕中时才会执行 onResume()，这样就可以把加载数据的方法放在 onResume() 中从而实现懒加载。

关于Fragment+ViewPager懒加载，有兴趣的自己可以去深究

这样子ViewPager每次滑动的都是Fragment，对于每个Fragment也更加好管理了，代码也少了好多不是嘛（当然要新建Fragment类还有布局文件）

创建Fragment类以及布局

NewsListFragment:

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListView;

import androidx.fragment.app.Fragment;

import com.pj.viewpager.R;
import com.pj.viewpager.adapter.MyNewsListAdapter;
import com.pj.viewpager.bean.NewsListJavaBean;

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

public class NewsListFragment extends Fragment {

    private String title;
    private ListView newsList;
    private List<NewsListJavaBean> data;
    private int ImageId;

    public NewsListFragment(String title) {
        this.title = title;
        data = new ArrayList<>();
        switch (title){
            case "新闻":ImageId = R.drawable.news;break;
            case "美食":ImageId = R.drawable.food;break;
            case "运动":ImageId = R.drawable.football;break;
            case "医疗":ImageId = R.drawable.doctor;break;
            case "游戏":ImageId = R.drawable.game;break;
        }
        for (int i = 0; i < 10; i++) {
            data.add(new NewsListJavaBean(ImageId,title,"这是一条"+title+"列表项"));
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        View view = inflater.inflate(R.layout.fragment_news_list, container, false);
        initView(view);
        MyNewsListAdapter adapter = new MyNewsListAdapter(data);
        newsList.setAdapter(adapter);
        return view;
    }

    private void initView(View view) {
        newsList = (ListView) view.findViewById(R.id.news_list);
    }
}

fragment_news_list.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".fragment.NewsListFragment"
    android:orientation="vertical"
    android:padding="5dp">

    <ListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:dividerHeight="5dp"
        android:divider="@null"
        android:id="@+id/news_list"
        />

</LinearLayout>

创建用于存放数据的NewsListJavaBean类

public class NewsListJavaBean {
    private int ImageId;
    private String title;
    private String content;

    public NewsListJavaBean(int imageId, String title, String content) {
        ImageId = imageId;
        this.title = title;
        this.content = content;
    }

    public NewsListJavaBean() {
    }

    public int getImageId() {
        return ImageId;
    }

    public void setImageId(int imageId) {
        ImageId = imageId;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getContent() {
        return content;
    }

    public void setContent(String content) {
        this.content = content;
    }
}

创建为NewsListFragment布局中ListView的适配器

MyNewsListAdapter.java:

import android.annotation.SuppressLint;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import com.pj.viewpager.R;
import com.pj.viewpager.bean.NewsListJavaBean;

import java.util.List;

public class MyNewsListAdapter extends BaseAdapter {

    List<NewsListJavaBean> data;
    private ImageView newsListItemImg;
    private TextView newsListItemTitle;
    private TextView newsListItemContent;

    public MyNewsListAdapter(List<NewsListJavaBean> data) {
        this.data = data;
    }

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

    @Override
    public Object getItem(int i) {
        return data.get(i);
    }

    @Override
    public long getItemId(int i) {
        return i;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        @SuppressLint("ViewHolder") View v = LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.news_list_item, null);
        initView(v);
        NewsListJavaBean bean = data.get(i);
        newsListItemImg.setImageResource(bean.getImageId());
        newsListItemTitle.setText(bean.getTitle());
        newsListItemContent.setText(bean.getContent());
        return v;
    }

    private void initView(View v) {
        newsListItemImg = (ImageView) v.findViewById(R.id.news_list_item_img);
        newsListItemTitle = (TextView) v.findViewById(R.id.news_list_item_title);
        newsListItemContent = (TextView) v.findViewById(R.id.news_list_item_content);
    }
}

创建适配器中的 R.layout.news_list_item 布局资源文件（ListView中的item布局文件）

news_list_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:minHeight="100dp"
    android:orientation="horizontal"
    android:padding="10dp">
    <ImageView
        android:layout_width="100dp"
        android:layout_height="80dp"
        android:scaleType="centerCrop"
        android:id="@+id/news_list_item_img"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_marginLeft="10dp"
        >
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:textSize="18sp"
            android:id="@+id/news_list_item_title"
            android:lines="1"
            android:ellipsize="end"
            />
        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:gravity="center_vertical"
            android:textSize="15sp"
            android:id="@+id/news_list_item_content"
            android:lines="1"
            android:ellipsize="end"
            />
    </LinearLayout>
</LinearLayout>

创建FragmentAndViewPager.java 的Activity类和布局进行汇总

activity_fragment_and_view_pager.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"
    android:orientation="vertical"
    tools:context=".FragmentAndViewPager">

    <!-- ViewPager视图容器-->
    <androidx.viewpager.widget.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fragment_and_view_pager"
        />

</LinearLayout>

FragmentAndViewPager.java：

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import com.pj.viewpager.adapter.MyFragmentPagerAdapter;
import com.pj.viewpager.fragment.NewsListFragment;

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

public class FragmentAndViewPager extends AppCompatActivity {

    private ViewPager fragmentAndViewPager;
    private List<Fragment> fragments;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_and_view_pager);
        initView();
        //自定义的MyFragmentPagerAdapter 继承于 FragmentPagerAdapter
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT, fragments);
        fragmentAndViewPager.setAdapter(adapter);
    }

    private void initView() {
        fragmentAndViewPager = (ViewPager) findViewById(R.id.fragment_and_view_pager);
        fragments = new ArrayList<>();
        fragments.add(new NewsListFragment("新闻"));
        fragments.add(new NewsListFragment("美食"));
        fragments.add(new NewsListFragment("运动"));
        fragments.add(new NewsListFragment("医疗"));
        fragments.add(new NewsListFragment("游戏"));
    }
}

ViewPager+Fragment+TabLayout

关于TabLayout： blog.csdn.net/csdnxia/art… 自己去看吧（滑稽）

现改FragmentAndViewPager的布局代码：

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

    //利用TabLayout来显示ViewPager的标题，标明当前在哪一页
    <com.google.android.material.tabs.TabLayout
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:id="@+id/tab"
        />

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

</LinearLayout>

然后更改MyFragmentPagerAdapter的代码

import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;

import java.util.List;

public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    List<Fragment> fragments;
    String[] title; //加一个用于存储标题的数组或列表

    //使用构造方法将title传过来
    public MyFragmentPagerAdapter(FragmentManager fm, int behavior, List<Fragment> fragments,String[] title) {
        super(fm, behavior);
        this.fragments = fragments;
        this.title = title;
    }

    @Override
    public Fragment getItem(int position) {
        return fragments.get(position);
    }

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

    //重写getPageTitle方法 返回值为title[position]
    @Override
    public CharSequence getPageTitle(int position) {
        return title[position];
    }
}

然后更改FragmentAndViewPager中的代码

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;

import com.google.android.material.tabs.TabLayout;
import com.pj.viewpager.adapter.MyFragmentPagerAdapter;
import com.pj.viewpager.fragment.NewsListFragment;

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

public class FragmentAndViewPager extends AppCompatActivity {

    private ViewPager fragmentAndViewPager;
    private List<Fragment> fragments;
    private TabLayout tab;
    private String[] title = {"新闻","美食","运动","医疗","游戏"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fragment_and_view_pager);
        initView();
        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), FragmentPagerAdapter.BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT, fragments,title);
        fragmentAndViewPager.setAdapter(adapter);
        tab.setupWithViewPager(fragmentAndViewPager);
    }

    private void initView() {
        fragmentAndViewPager = (ViewPager) findViewById(R.id.fragment_and_view_pager);
        fragments = new ArrayList<>();
        fragments.add(new NewsListFragment(title[0]));
        fragments.add(new NewsListFragment(title[1]));
        fragments.add(new NewsListFragment(title[2]));
        fragments.add(new NewsListFragment(title[3]));
        fragments.add(new NewsListFragment(title[4]));
        tab = (TabLayout) findViewById(R.id.tab);
    }
}

关于滑动监听：

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                Toast.makeText(MainActivity.this, "这是第"+(position+1)+"个页面", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

1.onPageScrolled(int position,float positionOffset, int positionOffsetPixels)：这个方法会在屏幕滚动过程中不断被调用。有三个参数，第一个position，这个参数要特别注意一下。当用手指滑动时，如果手指按在页面上不动，position和当前页面index是一致的；如果手指向左拖动（相应页面向右翻动），这时候position大部分时间和当前页面是一致的，只有翻页成功的情况下最后一次调用才会变为目标页面；如果手指向右拖动（相应页面向左翻动），这时候position大部分时间和目标页面是一致的，只有翻页不成功的情况下最后一次调用才会变为原页面。当直接设置setCurrentItem翻页时，如果是相邻的情况（比如现在是第二个页面，跳到第一或者第三个页面），如果页面向右翻动，大部分时间是和当前页面是一致的，只有最后才变成目标页面；如果向左翻动，position和目标页面是一致的。这和用手指拖动页面翻动是基本一致的。如果不是相邻的情况，比如我从第一个页面跳到第三个页面，position先是0，然后逐步变成1，然后逐步变成2；我从第三个页面跳到第一个页面，position先是1，然后逐步变成0，并没有出现为2的情况。 positionOffset是当前页面滑动比例，如果页面向右翻动，这个值不断变大，最后在趋近1的情况后突变为0。如果页面向左翻动，这个值不断变小，最后变为0。 positionOffsetPixels是当前页面滑动像素，变化情况和positionOffset一致。

2.onPageSelected(int position)：这个方法有一个参数position，代表哪个页面被选中。当用手指滑动翻页的时候，如果翻动成功了（滑动的距离够长），手指抬起来就会立即执行这个方法，position就是当前滑动到的页面。如果直接setCurrentItem翻页，那position就和setCurrentItem的参数一致，这种情况在onPageScrolled执行方法前就会立即执行。

3.onPageScrollStateChanged(int state)：这个方法在手指操作屏幕的时候发生变化。有三个值：0（END）,1(PRESS) , 2(UP) 。当用手指滑动翻页时，手指按下去的时候会触发这个方法，state值为1，手指抬起时，如果发生了滑动（即使很小），这个值会变为2，然后最后变为0 。总共执行这个方法三次。一种特殊情况是手指按下去以后一点滑动也没有发生，这个时候只会调用这个方法两次，state值分别是1,0 。当setCurrentItem翻页时，会执行这个方法两次，state值分别为2 , 0