ViewPager的介绍和使用

ViewPager的介绍和使用

  • 一:ViewPager介绍
  • 二:ViewPager的使用
  • 三:自动翻页效果代码
      • 翻页监听
  • 四:ViewPager与Fragment结合使用
    • FragmentStataPagerAdpter
    • FragmentPagerAdapter

一:ViewPager介绍

微信上的ViewPager应用
ViewPager的介绍和使用_第1张图片
Viewpager,视图翻页工具,提供了多页面切换的效果。Android 3.0后引入的一个UI控件,位于v4包中。低版本使用需要导入v4包,但是现在我们开发的APP一般不再兼容3.0及以下的系统版本,另外现在大多数使用Android studio进行开发,默认导入v7包,v7包含了v4,所以不用导包,越来越方便了。

Viewpager使用起来就是我们通过创建adapter给它填充多个view,左右滑动时,切换不同的view。Google官方是建议我们使用Fragment来填充ViewPager的,这样 可以更加方便的生成每个Page,以及管理每个Page的生命周期。

ViewPager 直接继承了 ViewGroup,所有它是一个容器类,可以在其中添加其他的 view 类。
ViewPager 需要一个 PagerAdapter 适配器类给它提供数据。
ViewPager 经常和 Fragment 一起使用,并且提供了专门的 FragmentPagerAdapter 和 FragmentStatePagerAdapter 类供 Fragment 中的 ViewPager 使用。

二:ViewPager的使用

ViewPager的介绍和使用_第2张图片
xml中的代码



    

    


创建一个viewPager的布局文件



    


适配器

public class ViewPagerAdapter extends PagerAdapter {

    private Context context;
    private List mData;

    public ViewPagerAdapter(Context context, List mData) {
        this.context = context;
        this.mData = mData;
    }

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

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

    //创建一个页面
    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        //加载vp的布局
        View inflate = View.inflate(context, R.layout.vp_layout, null);
        //给布局中的控件赋值
        TextView textView = inflate.findViewById(R.id.vp_tv_id);
        textView.setText(mData.get(position));
        //添加一个布局
        container.addView(inflate);
        //返回布局
        return inflate;
    }

    //销毁一个页面
    @Override
    public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
        //soper.destroyItem(container,position,object);这一句要删除,否则保存
        container.removeView((View) object);
    }
}

activity的代码

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //去掉自带的bar
        //supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);

        //找到vp
        viewPager = findViewById(R.id.vp_id);

        //初始化数据
        List list = new ArrayList<>();
        for (int i = 0; i <4 ; i++) {
            list.add("第"+i+"个View");
        }

        //设置adapter
        viewPager.setAdapter(new ViewPagerAdapter(this,list));
    }
}

getCount( ):获得viewpager中有多少个view
destroyItem( ):移除一个给定位置的页面。适配器有责任从容器中删除这个视图。这是为了确保 在finishUpdate(viewGroup)返回时视图能够被移除。
instantiateItem( ):①将给定位置的view添加到ViewGroup(容器)中,创建并显示出来 ②返回一个代表新增页面的Object(key),通常都是直接返回view本身就可以了, 当然你也可以自定义自己的key,但是key和每个view要一一对应的关系
isViewFromObject( ):判断instantiateItem(ViewGroup, int)函数所返回来的Key与一个页面视图是否是 代表的同一个视图(即它俩是否是对应的,对应的表示同一个View),通常我们直接写 return view == object;就可以了,至于为什么要这样讲起来比较复杂,后面有机会进行了解吧 貌似是ViewPager中有个存储view状态信息的ArrayList,根据View取出对应信息的吧!

三:自动翻页效果代码

ViewPager的介绍和使用_第3张图片
布局如上
适配器代码

public class ViewAdapter extends PagerAdapter {

    private List list;
    private Context context;

    public ViewAdapter(List list, Context context) {
        this.list = list;
        this.context = context;
    }

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

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

    @NonNull
    @Override
    public Object instantiateItem(@NonNull ViewGroup container, int position) {
        View inflate = LayoutInflater.from(context).inflate(R.layout.item_viewpager, null);

        ImageView textView = inflate.findViewById(R.id.vp_title_id);

        textView.setImageResource(list.get(position));

        container.addView(inflate);

        return inflate;
    }

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

activity代码

public class MainActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private List list = new ArrayList<>();
    private CountDownTimer timer;

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

        viewPager = findViewById(R.id.viewPager_id);

        list.add(R.mipmap.fulian);
        list.add(R.mipmap.leishen);
        list.add(R.mipmap.meidui);

        viewPager.setAdapter(new ViewAdapter(list,this));

        //安卓自带的定时器方法
        timer = new CountDownTimer(20000, 2000) {
            int index = 0;
            @Override
            public void onTick(long millisUntilFinished) {
                //设置当前的viewPager显示的页面
                viewPager.setCurrentItem(index);
                ++index;
                if (index == list.size()){
                    index = 0;
                }
            }

            @Override
            public void onFinish() {
                Toast.makeText(MainActivity.this, "倒计时结束", Toast.LENGTH_SHORT).show();
            }
        };
        timer.start();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        //防止内存溢出
        timer.cancel();
    }
}

翻页监听

1.设置方法

addOnPageChangeListener()

2.翻页监听接口

ViewPager.OnPageChangeListener

3. 重写方法
1 ,onPageScrolled(int position, float positionOffset, int positionOffsetPixels)

页面滑动状态停止前一直调用

position:当前点击滑动页面的位置

positionOffset:当前页面偏移的百分比

positionOffsetPixels:当前页面偏移的像素位置
2, onPageSelected(int position)

滑动后显示的页面和滑动前不同,调用

position:选中显示页面的位置
3 ,onPageScrollStateChanged(int state)

页面状态改变时调用

state:当前页面的状态

SCROLL_STATE_IDLE:空闲状态

SCROLL_STATE_DRAGGING:滑动状态

SCROLL_STATE_SETTLING:滑动后滑翔的状态
使用

//直接设置即可
vpId.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        Log.e("vp","滑动中=====position:"+ position + "   positionOffset:"+ positionOffset + "   positionOffsetPixels:"+positionOffsetPixels);
    }

    @Override
    public void onPageSelected(int position) {
        Log.e("vp","显示页改变=====postion:"+ position);
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        switch (state) {
            case ViewPager.SCROLL_STATE_IDLE:
                Log.e("vp","状态改变=====SCROLL_STATE_IDLE====静止状态");
                break;
            case ViewPager.SCROLL_STATE_DRAGGING:
                Log.e("vp","状态改变=====SCROLL_STATE_DRAGGING==滑动状态");
                break;
            case ViewPager.SCROLL_STATE_SETTLING:
                Log.e("vp","状态改变=====SCROLL_STATE_SETTLING==滑翔状态");
                break;
        }
    }
});

四:ViewPager与Fragment结合使用

与Fragment结合使用其实也一样,只是用Fragment代替原先的View,填充ViewPager;然后就是Adapter不一样,配合Fragment使用的有两个Adapter:FragmentPagerAdapter和FragmentStatePagerAdapter。

相同点:
FragmentPagerAdapter和FragmentStatePagerAdapter都继承自PagerAdapter

不同点:
卸载不再需fragment时,各自采用的处理方法有所不同

ViewPager两个Adapter方法的区别

在destroyItem()方法中,FragmentStatePagerAdapter调用的是remove()方法,适用于页面较多的情况;FragmentPagerAdapter调用的是detach()方法,适用于页面较少的情况。但是有页面数据需要刷新的情况,不管是页面少还是多,还是要用FragmentStatePagerAdapter,否则页面会因为没有重建得不到刷新
创建Fragment代码

public class PagerFragment extends Fragment {
    String mContent;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        mContent = (String) getArguments().get("content");
        View view = inflater.inflate(R.layout.fragment_pager, container, false) ;
        TextView textView = (TextView) view.findViewById(R.id.tv);
        textView.setText(mContent);
        return view;
    }

}

xml文件



    


适配器

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        final List list = new ArrayList<>();
    for (int i = 0; i < 5; i++) {
        PagerFragment fragment = new PagerFragment();
        Bundle bundle = new Bundle();
        bundle.putString("content","第"+i+"个Fragment");
        fragment.setArguments(bundle);

        list.add(fragment);
    }

    ViewPager vp = (ViewPager) findViewById(R.id.vp);
//        vp.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
//            @Override
//            public Fragment getItem(int position) {
//                return list.get(position);
//            }
//
//            @Override
//            public int getCount() {
//                return list.size();
//            }
//        });

    vp.setAdapter(new FragmentStatePagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

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

FragmentStataPagerAdpter

fragment的生命周期会执行
onDestoryView
onDestory
onCreate
onCreateView
fragment会被销毁
适用用 图片预览等多个fragment的情况

FragmentPagerAdapter

onDestoryView
onCreateView
fragment不会被销毁
适用于引导页等少个fragment的情况

你可能感兴趣的:(交互式视觉设计,Android,Studio)