ViewPager 实现带有小圆点的引导页滑动(实战)

概述

对于 ViewPager ,相信大家都不陌生,我们在 Android 开发中使用它的频率非常之高,应用启动时的引导页,主页指示标签的滑动「上一篇文章就用到了 ViewPager」以及底部的滑动,这些都是 ViewPager 的杰作 。

说个最接地气的例子,当我们新安装了一个安卓应用在手机上并启动那个界面后,十有八九会有一些可以滑动的的页面「不可以滑动的话又怎么能引导你进入应用呢?」,这些可以滑动的页面便可以说是 ViewPager,对于一个很简单的 App,通过 Viewpager 进入了应用,对于一个公司来说,引导页简单粗暴完美,力小作用大地展示本公司的 logo 或者相关信息介绍,以提高知名度,当然,还有的公司用它来投放广告,目的你懂的,好吧,扯着扯着就扯到商业去了,其实这些都说明了引导页的重要性,毕竟价值决定一切,好了,接下来我们就从技术的角度来研究一下它是如何实现引导页滑动效果的。

ViewPager 是 v4 包中的一个类,继承自ViewGroup,其实是一个容器,一般和 Fragment 一起使用,它更方面的管理页面中 Fragment 的生命周期,类似于 ListView,也有自己的适配器,里面用来填充数据页面。布局管理器允许左右翻转带数据的页面,我们想要显示的视图可以通过实现 PagerAdapter 来显示。这个类其实是在早期设计和开发的,它的 API在 后面的更新之中可能会被改变,当它们在新版本之中编译的时候可能还会改变源码。

效果图

废话不说,先上最终效果图:

实现过程

1.布局中声明 ViewPager,代码如下:

<android.support.v4.view.ViewPager
   android:id="@+id/mviewpager"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>

2.准备我们需要滑动的页面的每一个 Item,在这里我展示其中一页的代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@drawable/image1">
   <Button
       android:id="@+id/btn_jump01"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="跳过"
       android:background="#0e000000"
       android:textSize="25sp"
       android:textColor="#7033CC"
       android:layout_alignParentRight="true"
       android:layout_marginTop="35dp" />
</RelativeLayout>

很显然,这是一个背景图,在这个背景中我们添加了一个 Button, 以实现跳过后面的 Item 并直接进入下一个 activity,这个功能我们后面再来实现。

3.初始化相关控件:

// ViewPager
mviewpager=(ViewPager) findViewById(R.id.mviewpager);
// 获取滑动的三个 Item 并加载到一个集合里
view01=View.inflate(this,R.layout.layout_guide_item01,null);
view02=View.inflate(this,R.layout.layout_guide_item02,null);
view03=View.inflate(this,R.layout.layout_guide_item03,null);
mList.add(view01);
mList.add(view02);
mList.add(view03);
// 底部可以滑动的小圆点
point01=(ImageView) findViewById(R.id.point01);
point02=(ImageView) findViewById(R.id.point02);
point03=(ImageView) findViewById(R.id.point03);
// 跳过后面的 Item 并直接进入目的 Activity
btn_jump01=(Button)view01.findViewById(R.id.btn_jump01);
btn_jump02=(Button)view02.findViewById(R.id.btn_jump02);
btn_start=(Button)view03.findViewById(R.id.btn_start);


4.接下来就是实现引导页滑动的核心代码,即给 ViewPager 设置适配器,以实现数据和页面的绑定。

//        设置适配器
      mviewpager.setAdapter(new GuideAdapter());
      private class GuideAdapter extends PagerAdapter {
       public GuideAdapter() {
           super();
       }

       @Override
       public Object instantiateItem(ViewGroup container, int position) {
           ((ViewPager)container).addView(mList.get(position));
           return mList.get(position);
       }

       @Override
       public void destroyItem(ViewGroup container, int position, Object object) {
           ((ViewPager)container).removeView(mList.get(position));
//            super.destroyItem(container, position, object);
       }

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

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

这里自定义了一个 Adapter内部类 继承了PagerAdapter,并重写了父类的四个方法,这是必须要实现的,instantiateItem() 方法用于将布局添加到 container 容器并强转为 ViewPager;

destroyItem()表示销毁一个Item

getCount()表示 获取ViewPager 的长度,也就是页面的数量

5.设置底部与页面一起滑动的小圆点。好,滑动时实现了,可是,从美学以及心理学的角度,我们还想要给它底部添加小圆点,方便我们很直观的看到目前所在的 position。

//        设置Viewpager监听
     mviewpager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
           @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
           }
           @Override
           public void onPageSelected(int position) {
               L.i("position"+position);
               switch (position){
                   case 0:
                       setPointImg(true,false,false);
                       break;
                   case 1:
                       setPointImg(false,true,false);
                       break;
                   case 2:
                       setPointImg(false,false,true);
                       break;
               }
           }
           @Override
           public void onPageScrollStateChanged(int state) {

           }
       });

我们为 ViewPager 添加一个页面滑动的监听,这里需要重写以上三个方法,分别代表选中页面滚动时,页面被选中「应该说叫触发」时,页面滚动的状态发生改变时要完成的方法。

5.分别为第一和第二个页面添加一个跳过后面 Item 直接进入目的 Activity 的 Button 按钮,第三个页面添加一个进入主页的按钮。

public class GuideActivity extends AppCompatActivity implements View.OnClickListener {
                 ...
//        跳过按鈕
btn_jump01.setOnClickListener(this);
btn_jump02.setOnClickListener(this);
//        进入主页按鈕
btn_start.setOnClickListener(this);
@Override
   public void onClick(View v) {
       switch (v.getId()){
           case R.id.btn_start:
               startActivity(new Intent(GuideActivity.this, MainActivity.class ));
               break;
           case R.id.btn_jump01:
               startActivity(new Intent(GuideActivity.this, MainActivity.class ));
               break;
           case R.id.btn_jump02:
               startActivity(new Intent(GuideActivity.this, MainActivity.class ));
       }

   }

代码很简单,实现了一个 View.OnClickListener 接口,为活动分别设置了监听器,并重写了 onClick() 方法,最后点击进入 MainActivity 中。
这样整个功能就完美的实现了,你 get 到了吗?通过以上的讲解和学习,相信你一定收获不小,在今后的自学过程中,欢迎和大家一起交流学习,以上内容如果有疑问或者有更加独特的实现方法,欢迎大家一起交流讨论!
 文:dolphkon

封面图:来源于网络


PS:本公众号内容属于原创,如果你喜欢,欢迎关注我的公众号,「ID:androiddevup」在今后的学习过程中,一起交流进步,同时欢迎 转发分享到朋友圈,分享也是一种快乐!

发布了8 篇原创文章 · 获赞 9 · 访问量 6201

猜你喜欢

转载自blog.csdn.net/DolphKong/article/details/81085982