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

前言:本期教程分为几个板块,请根据实际板块为准!

滑动窗体有很多种方式,可以用ViewPager做,也可以用Fragment做,也可以自己手写一个滑动界面出来等等
这里我们主要讲ViewPager,针对viewpager开发的增加界面以及删除界面,还有内嵌轮播viewpager。
viewpager有三种适配器:PagerAdapterFragmentPagerAdapterFragmentStatePagerAdapter

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());
其它的都跟上面的差不多,看个视频结尾吧!

2 Replies to “滑动窗体ViewPager增删内嵌View开发教程”

发表回复

您的电子邮箱地址不会被公开。