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。
java
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
<?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
<?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
<?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
<?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
<?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
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进行一些改动还可实现无限右拖动
java
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
java
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:
java
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
<?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类
java
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:
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
<?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
<?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:
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
<?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的代码
java
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中的代码
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.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);
}
}
看看效果吧:

关于滑动监听:
java
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
效果图显示:

差不多了,完结撒花!
项目gitee地址:gitee.com/thor19/view...