滑动窗体ViewPager增删内嵌View开发教程

前言:本期教程分为几个板块,请根据实际板块为准!
滑动窗体有很多种方式,可以用ViewPager做,也可以用Fragment做,也可以自己手写一个滑动界面出来等等
这里我们主要讲ViewPager,针对viewpager开发的增加界面以及删除界面,还有内嵌轮播viewpager。
viewpager有三种适配器:PagerAdapter,FragmentPagerAdapter,FragmentStatePagerAdapter
ViewPager基础使用板块
先看组视频
视频里的内容就是Viewpager,但是这里的Viewpager加入了特效,这里的特效我们下面会学!
首先,我们先创建viewpager的控件:androidx.viewpager.widget.ViewPager
具体看图,这里我就不放代码了,真的简单!

然后我们创建三个xml界面,并且背景给上三个不同的颜色,像这样:

做好了后我们回到主界面java,看看是不是熟悉的界面:

首先我们获取Viewpager的id,获取后先放在这里: ViewPager viewPager=findViewById(R.id.view); 然后我们构建三个View界面 View view1= LayoutInflater.from(this).inflate(R.layout.activity_layout1,null); View view2= LayoutInflater.from(this).inflate(R.layout.activity_layout2,null); View view3= LayoutInflater.from(this).inflate(R.layout.activity_layout3,null); 这样就构建好了 R.layout.activity_layout1 R.layout.activity_layout2 R.layout.activity_layout3 是刚刚创建的3个xml界面 LayoutInflater.from(this).inflate的意思是将这一页进行构建,this是上下文联系的意思,构建后赋值给 view1 view2 view3 这样就构建好了。 构建好了后我们需要一个存界面的容器List<View>,这个List有很多种存法,比如List<String>,List<Int>,如果要深入了解就去百度吧。 这里我们是存View界面,所以如下,我们需要new ArrayList<View>();具体详解见上期中的ArrayList部分 List<View> viewList=new ArrayList<View>(); 有了容器后我们就将上面的view界面存入List<View> viewList viewList.add(view1); viewList.add(view2); viewList.add(view3); 这样就存进去了,存入后我们就需要给viewpager构造一个适配器PagerAdapter: 详细看下面PagerAdapter适配器 然后通过无参的形式将上面的viewList传入viewpager.java viewpager viewPager1=new viewpager(viewList); 再然后就给xml的viewpager控件启用适配器 viewPager.setAdapter(viewPager1);
PagerAdapter适配器
创建java文件viewpager class viewpager extends PagerAdapter { List<View> viewList;//新建全局对象变量List<View> //这里的List<View> viewList是通过无参传入的 public viewpager(List<View> viewList){ this.viewList=viewList; } //getCount()是PagerAdapter的一个方法,用于获取view的总数量,这里是必填的,因为在启用适配器的时候这里会被调用 @Override public int getCount() { return viewList.size();//这里需要手动改写 } //isViewFromObject方法是用于判断传入的view是不是view,这里是必填的,因为在启用适配器的时候这里会被调用 @Override public boolean isViewFromObject(@NonNull View view, @NonNull Object object) { return view==object; } //instantiateItem方法是用于构造view进ViewGroup,这个类似前面List<View>的add写入view,这里是必填的,因为在启用适配器的时候这里会被调用 @NonNull @Override public Object instantiateItem(@NonNull ViewGroup container, int position) { container.addView(viewList.get(position)); return viewList.get(position);//需要手动改写 } //destroyItem是用于界面被删除的时候被调用,这里非必填,如果你不删除view界面的话 @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView(viewList.get(position)); } }
一起来看看主界面java文件和PagerAdpter的java文件


像这个样子,这个界面就可以滑动三页了
虚拟机可能有点卡,将就看看。
代码量到这里只是完成了基础构建,其实刚刚我们已经经历了适配器的重构,接下来我们就给viewpager加点特效,就跟第一个视频一样!
ViewPager的方法setPageTransformer:
直接调用就行 viewPager.setPageTransformer(true,new ZoomOutPageTransformer()); 特效这玩意谷歌那边给了几种,我这边就发一个感觉还行的,特效是可以自己继承重构的,释放代码:
public class ZoomOutPageTransformer implements ViewPager.PageTransformer { private static final float MIN_SCALE = 0.85f; private static final float MIN_ALPHA = 0.5f; @SuppressLint("NewApi") public void transformPage(View view, float position) { int pageWidth = view.getWidth(); int pageHeight = view.getHeight(); Log.e("TAG", view + " , " + position + ""); if (position < -1) { // [-Infinity,-1) // This page is way off-screen to the left. view.setAlpha(0); } else if (position <= 1) //a页滑动至b页 ; a页从 0.0 -1 ;b页从1 ~ 0.0 { // [-1,1] // Modify the default slide transition to shrink the page as well float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position)); float vertMargin = pageHeight * (1 - scaleFactor) / 2; float horzMargin = pageWidth * (1 - scaleFactor) / 2; if (position < 0) { view.setTranslationX(horzMargin - vertMargin / 2); } else { view.setTranslationX(-horzMargin + vertMargin / 2); } // Scale the page down (between MIN_SCALE and 1) view.setScaleX(scaleFactor); view.setScaleY(scaleFactor); // Fade the page relative to its size. view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA)); } else { // (1,+Infinity] // This page is way off-screen to the right. view.setAlpha(0); } } }
特效代码本篇文章不解释,这玩意主要针对修改控件的高宽,逻辑思维比较复杂,但是如果有兴趣的话也可以去百度,教程到这里也就可以实现第一个视频里面的那种特效了,基础教程到此结束,下面开始进阶教程。
ViewPager增删view界面
注:viewpager的增删不能在刚刚走了PagerAdapter的继承后直接执行,如果执行是会蹦的,java这种东西有些时候就是麻烦。
ViewPager增加view界面
viewpager的增加界面我们在滑动的时候执行
这里我们用到viewpager的addOnPageChangeListener方法,在这个方法下又有3个方法
position是现在看见的view是第几页
onPageScrolled //在滑动到另一页的时候执行
//positionOffset从没有滑动的0到开始滑动切换到另一页是逐增为1,滑动完成后变为0
//positionOffsetPixels是当前滑动的像素
onPageSelected //在滑动时加载另一页的时候执行
onPageScrollStateChanged//手指按下时state为1滑动时为2滑动停止时为0
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { } @Override public void onPageScrollStateChanged(int state) { } }); 这里的position是从0开始, 第0个是view1 第1个是view2 第2个是view3 一次类推,我们这里只构建了这三个view,所以只有这么多
接下来我们在onPageScrolled中写滑动结束后执行的代码:增加view界面
这里我们使用viewPager1.getCount();获取view的总页数,这里的viewPager1是上面new过的喔,这里用的是viewpager.java中的getCount方法 if (position==viewPager1.getCount()-1)//当滑动的界面等于view的最后一页时执行,这里面我们就写增加界面的代码 { View view4= LayoutInflater.from(getApplicationContext()).inflate(R.layout.activity_layout3,null);//再构造一页layout3赋值给view4 viewPager1.viewList.add(view4);//将view4写入viewpager.java中的全局对象变量viewList中 viewPager1.notifyDataSetChanged();//刷新适配器 }

效果《《视频
这样就可以增加view了,增加view教程结束!
ViewPager删除view界面
删除跟增加一个道理,增加是添加List<View> viewList的界面并刷新,而删除就是删掉List<View> viewList的界面并刷新
这里我们将if里面的代码改为删掉第一页,List<View> viewList对象变量的get()也是从0开始的,所以不能越界或者写负数,这里我们就删第1页就行了 @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { a++;//这里的a给了个全局变量int a=0;进这个界面时执行a++,此时a=1 if (a==2) {//也就是滑动一次后a=2执行删除第一页并刷新 viewPager1.viewList.remove(viewPager1.viewList.get(0));//获取viewpager.java中的全局对象变量viewList中的第一个view并通过remove方法删除 viewPager1.notifyDataSetChanged();//刷新适配器 } } 注:适配器中的destroyItem有两种方式,除了以上那种,还有下面这种 @Override public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) { container.removeView((View)object); }

滑动时删除第一页只剩2页
到这里删除view界面教程结束
ViewPager内嵌教程
内嵌教程我们这里是viewpager内嵌viewpager,也挺简单的。
首先我们在layout1中再写一个viewpager,看图,看图

然后回到主界面
这里我们就不写滑动事件了
跟刚才的理念差不多,
ViewPager viewPagerv=view1.findViewById(R.id.layout1view);//这里的view1在上面已经构造了,所以得在这个已经构造了的view1中find ViewPager List<View> viewList1=new ArrayList<View>(); View view4= LayoutInflater.from(this).inflate(R.layout.activity_layout2,null); View view5= LayoutInflater.from(this).inflate(R.layout.activity_layout3,null); View view6= LayoutInflater.from(this).inflate(R.layout.activity_layout2,null); viewList1.add(view4); viewList1.add(view5); viewList1.add(view6); viewpager1 viewPagers=new viewpager1(viewList1);//创建一个新的viewpager1也是继承PagerAdapter,这里方便对两个viewpager适配器分开管理 viewPagerv.setAdapter(viewPagers); viewPagerv.setPageTransformer(true,new ZoomOutPageTransformer()); 其它的都跟上面的差不多,看个视频结尾吧!
感谢分享 赞一个
好的