ViewPager实现带引导小圆点与自动跳转的引导界面

概述实现引导小圆点的方法其实很简单，可直接在布局上放置与引导页面等量的ImageView，然后在切换页面的时候更改图片资源就好了。这里顺便提一下，有些APP是干脆在制作引导页面图片的时候加上引导小圆点，这种方式显然最

实现引导小圆点的方法其实很简单，可直接在布局上放置与引导页面等量的ImageVIEw，然后在切换页面的时候更改图片资源就好了。这里顺便提一下，有些APP是干脆在制作引导页面图片的时候加上引导小圆点，这种方式显然最简单不过了，但是既然是附在图片上的，在切换的时候也是随着图片滑动的，显然看起来效果并不是很好，甚至在我们需要加入小圆点的切换动画时，那就更不能这么去做了。

首先我们先来看看实现效果

 

这里我们的小圆点图片资源是采用shape绘制的，这里我弄的很随便，所以很粗糙，如果觉得不是很美观那就自行修改吧。如果你是直接使用png资源的话，可直接跳过这一步。

shape_ring_black_normal.xml（黑色小圆环）

<?xml version="1.0" enCoding="utf-8"?> <shape xmlns:androID="http://schemas.androID.com/apk/res/androID"   androID:shape="oval">    <solID androID:color="#FFFFFF" />    <size androID:wIDth="24dp"     androID:height="24dp"/>    <stroke androID:color="#000000"     androID:wIDth="1dp"/>  </shape> 

shape_circle_blue_press.xml（蓝色小圆点）

<?xml version="1.0" enCoding="utf-8"?> <shape xmlns:androID="http://schemas.androID.com/apk/res/androID"   androID:shape="oval">    <solID androID:color="#0000F1"/>    <size androID:wIDth="24dp"     androID:height="24dp"/>  </shape> 

再来个选择器，直接用setSelected方法就可以切换图片了，为true是切换为shape_circle_blue_press.xml，否则为shape_ring_black_normal.xml，记得选择器的默认item一定要在最后，否则没有效果。你也可以直接在切换页面的时候替换图片资源。

selector_circle.xml（小圆点选择器）

<?xml version="1.0" enCoding="utf-8"?> <selector xmlns:androID="http://schemas.androID.com/apk/res/androID">    <item androID:state_selected="true" androID:drawable="@drawable/shape_circle_blue_press"/>   <item androID:drawable="@drawable/shape_ring_black_normal"/>  </selector> 

页面布局很简单，VIEwPage是重点来显示主要内容，再来一排ImageVIEw显示小圆点，由于我们在最后一个页面需要有个按钮来跳转到主界面，这里我们加个button先隐藏。

activity_guIDe.xml

<?xml version="1.0" enCoding="utf-8"?> <relativeLayout 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:gravity="center"   androID:layout_height="match_parent">    <button     androID:ID="@+ID/btn_goto"     androID:layout_wIDth="wrap_content"     androID:layout_height="wrap_content"     androID:layout_alignParentRight="true"     androID:visibility="gone"     androID:text="跳转" />    <androID.support.v4.vIEw.VIEwPager     androID:ID="@+ID/vp"     androID:layout_wIDth="match_parent"     androID:layout_height="match_parent" />    <linearLayout     androID:layout_wIDth="wrap_content"     androID:layout_height="wrap_content"     androID:layout_centerHorizontal="true"     androID:layout_alignParentBottom="true"     androID:layout_marginBottom="24dp"     androID:orIEntation="horizontal">      <ImageVIEw       androID:ID="@+ID/imgv_circler1"       androID:layout_wIDth="wrap_content"       androID:layout_height="wrap_content"       androID:src="@drawable/selector_circle"       androID:layout_margin="24dp"/>      <ImageVIEw       androID:ID="@+ID/imgv_circler2"       androID:layout_wIDth="wrap_content"       androID:layout_height="wrap_content"       androID:layout_margin="24dp"       androID:src="@drawable/selector_circle"/>      <ImageVIEw       androID:ID="@+ID/imgv_circler3"       androID:layout_wIDth="wrap_content"       androID:layout_height="wrap_content"       androID:layout_margin="24dp"       androID:src="@drawable/selector_circle"/>    </linearLayout>  </relativeLayout> 

还有一步准备工作，添加每个页面的数据源，继承PagerAdapter这个类

GuIDeAdapter.java

import androID.support.v4.vIEw.PagerAdapter; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup; import java.util.List;  public class GuIDeAdapter extends PagerAdapter {    private List<VIEw> mDatas;    public GuIDeAdapter(List<VIEw> datas) {     this.mDatas = datas;   }    @OverrIDe   public int getCount() {     return mDatas != null ? mDatas.size() : 0;   }    @OverrIDe   public Object instantiateItem(VIEwGroup container,int position) {     container.addVIEw(mDatas.get(position),0);     return mDatas.get(position);   }    @OverrIDe   public voID destroyItem(VIEwGroup container,int position,Object object) {     container.removeVIEw(mDatas.get(position));   }    @OverrIDe   public boolean isVIEwFromObject(VIEw vIEw,Object object) {     return vIEw == object;   } } 

接下来就看看如何实现，代码很简单，不难看懂，直接贴出来。

GuIDeAdapter.java

import androID.content.Intent; import androID.support.v4.vIEw.VIEwPager; import androID.support.v7.app.AppCompatActivity; import androID.os.Bundle; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup; import androID.Widget.button; import androID.Widget.ImageVIEw; import androID.Widget.relativeLayout;  import java.util.ArrayList; import java.util.List;  public class GuIDeActivity extends AppCompatActivity implements VIEwPager.OnPagechangelistener {    private VIEwPager vp;   private List<VIEw> mDatas = new ArrayList<>();   private button btn;   private GuIDeAdapter mGuIDeAdapter;    private int[] res = {       R.mipmap.ic_launcher,R.mipmap.ic_launcher,R.mipmap.ic_launcher   };    private ImageVIEw[] imgv = new ImageVIEw[res.length];    @OverrIDe   protected voID onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentVIEw(R.layout.activity_guIDe);      initVIEws();     initDatas();     initEvents();   }    private voID initVIEws() {     vp = (VIEwPager) findVIEwByID(R.ID.vp);     btn = (button) findVIEwByID(R.ID.btn_goto);     imgv[0] = (ImageVIEw) findVIEwByID(R.ID.imgv_circler1);     imgv[1] = (ImageVIEw) findVIEwByID(R.ID.imgv_circler2);     imgv[2] = (ImageVIEw) findVIEwByID(R.ID.imgv_circler3);     relativeLayout.LayoutParams params = new relativeLayout.LayoutParams(VIEwGroup.LayoutParams.WRAP_CONTENT,VIEwGroup.LayoutParams.WRAP_CONTENT);     for (int i = 0; i < res.length; i++) {       ImageVIEw imgv = new ImageVIEw(this);       imgv.setLayoutParams(params);       imgv.setimageResource(res[i]);       mDatas.add(imgv);     }   }    private voID initDatas() {     selectedDoto(0);     mGuIDeAdapter = new GuIDeAdapter(mDatas);     vp.setAdapter(mGuIDeAdapter);   }    private voID selectedDoto(int index) {     for (int i = 0; i < res.length; i++) {       if (i == index) {         imgv[i].setSelected(true);       } else {         imgv[i].setSelected(false);       }     }   }    private voID initEvents() {     vp.setonPagechangelistener(this);     btn.setonClickListener(new VIEw.OnClickListener() {       @OverrIDe       public voID onClick(VIEw v) {         Intent intent = new Intent(GuIDeActivity.this,MainActivity.class);         startActivity(intent);         finish();       }     });   }    @OverrIDe   public voID onPageScrolled(int position,float positionOffset,int positionOffsetPixels) {}    @OverrIDe   public voID onPageSelected(int position) {     if (position == res.length-1) // 如果是最后一个页面显示跳转按钮       btn.setVisibility(VIEw.VISIBLE);     else       btn.setVisibility(VIEw.GONE);     selectedDoto(position);   }    @OverrIDe   public voID onPageScrollStateChanged(int state) {} } 

那如果每个页面不是一个控件这么简单呢？这时我们用Fragment，布局上还是差不多，但最后页面的按钮我们可以转移到最后一个Fragment布局上，因此直接删除button,这里就不能继承Activity，要基础FragmentActivity。
接着我们就要弄三个Fragment出来，这里布局只简单放了个TextVIEw，最后的页面还有个button。我们就看看最后一个Fragment就好了。

fragment_guIDec.xml

<FrameLayout 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="com.newcentury.testdemo.GuIDecFragment">    <TextVIEw     androID:layout_wIDth="wrap_content"     androID:layout_height="wrap_content"     androID:layout_gravity="center"     androID:drawabletop="@mipmap/ic_launcher"     androID:textSize="18sp"     androID:text="页面三"/>    <button     androID:ID="@+ID/btn_goto"     androID:layout_wIDth="wrap_content"     androID:layout_height="wrap_content"     androID:layout_gravity="right"     androID:text="跳转"/>  </FrameLayout> 

GuIDecFragment.java

import androID.content.Intent; import androID.os.Bundle; import androID.support.v4.app.Fragment; import androID.vIEw.LayoutInflater; import androID.vIEw.VIEw; import androID.vIEw.VIEwGroup;  public class GuIDecFragment extends Fragment {    @OverrIDe   public VIEw onCreateVIEw(LayoutInflater inflater,VIEwGroup container,Bundle savedInstanceState) {     VIEw vIEw = inflater.inflate(R.layout.fragment_guIDec,container,false);     vIEw.findVIEwByID(R.ID.btn_goto).setonClickListener(new VIEw.OnClickListener() {       @OverrIDe       public voID onClick(VIEw v) {         Intent intent = new Intent(getActivity(),MainActivity.class);         startActivity(intent);         getActivity().finish();       }     });     return vIEw;   }  } 

当然在前面用到的Adapter是用不了了，这里需要继承FragmentPagerAdapter类。

GuIDeAdapter.java

import androID.support.v4.app.Fragment; import androID.support.v4.app.FragmentManager; import androID.support.v4.app.FragmentPagerAdapter; import java.util.List;  public class GuIDeAdapter extends FragmentPagerAdapter {    private List<Fragment> mDatas;    public GuIDeAdapter(FragmentManager fm,List<Fragment> datas) {     super(fm);     this.mDatas = datas;   }    @OverrIDe   public Fragment getItem(int position) {     return mDatas.get(position);   }    @OverrIDe   public int getCount() {     return mDatas.size();   } } 

GuIDeActivity.java

import androID.os.Bundle; import androID.support.v4.app.Fragment; import androID.support.v4.app.FragmentActivity; import androID.support.v4.vIEw.VIEwPager; import androID.support.v7.app.AppCompatActivity; import androID.Widget.ImageVIEw;  import java.util.ArrayList; import java.util.List;  public class GuIDeActivity extends FragmentActivity implements VIEwPager.OnPagechangelistener {    private VIEwPager vp;   private List<Fragment> mDatas = new ArrayList<>();   private GuIDeAdapter mGuIDeAdapter;    private int[] res = {       R.mipmap.ic_launcher,R.mipmap.ic_launcher   };    private ImageVIEw[] imgv = new ImageVIEw[res.length];    @OverrIDe   protected voID onCreate(Bundle savedInstanceState) {     super.onCreate(savedInstanceState);     setContentVIEw(R.layout.activity_guIDe);      initVIEws();     initDatas();     initEvents();   }    private voID initVIEws() {     vp = (VIEwPager) findVIEwByID(R.ID.vp);     imgv[0] = (ImageVIEw) findVIEwByID(R.ID.imgv_circler1);     imgv[1] = (ImageVIEw) findVIEwByID(R.ID.imgv_circler2);     imgv[2] = (ImageVIEw) findVIEwByID(R.ID.imgv_circler3);   }    private voID initDatas() {     selectedDoto(0);     mDatas.add(new GuIDeaFragment());     mDatas.add(new GuIDebFragment());     mDatas.add(new GuIDecFragment());     mGuIDeAdapter = new GuIDeAdapter(getSupportFragmentManager(),mDatas);     vp.setAdapter(mGuIDeAdapter);   }    private voID selectedDoto(int index) {     for (int i = 0; i < res.length; i++) {       if (i == index) {         imgv[i].setSelected(true);       } else {         imgv[i].setSelected(false);       }     }   }    private voID initEvents() {     vp.setonPagechangelistener(this);   }    @OverrIDe   public voID onPageScrolled(int position,int positionOffsetPixels) {}    @OverrIDe   public voID onPageSelected(int position) {     selectedDoto(position);   }    @OverrIDe   public voID onPageScrollStateChanged(int state) {} } 

实现效果如下：

       

从上面还可以看到一个倒计时，那是怎么实现倒计时自动跳转呢？我们可以直接开个线程完成倒计时 *** 作，当计时为0时便自动跳转，但用户很可能会回滑到上一个界面，也可能用户会手动点击跳转按钮进行跳转，因此，要把控好线程的关闭与开启。代码贴出来如下：

public voID autoGotoThread(boolean start) {   if (start) {     mGotoMainThread = new GotoMainThread();     mGotoMainThread.start();   } else {     if (mGotoMainThread != null && mGotoMainThread.isAlive()) {       mGotoMainThread.stopThread();     }   } }  private voID startActivity() {   Intent intent = new Intent(getActivity(),MainActivity.class);   startActivity(intent);   mGotoMainThread.stopThread();   getActivity().finish(); }  private class GotoMainThread extends Thread {   private volatile boolean isRun = true;   private Object lock = new Object();    @OverrIDe   public voID run() {     synchronized (lock) {       while (isRun) {         try {           Message msg = Message.obtain();           msg.what = 101;           msg.obj = "跳转 " + mTimeValues--;           mHandler.sendMessage(msg);           sleep(1000);         } catch (InterruptedException e) {           e.printstacktrace();         }        }     }   }    public voID stopThread() {     mTimeValues = 5;     isRun = false;   } }  final Handler mHandler = new Handler() {   public voID handleMessage(Message msg) {     switch (msg.what) {       case 101:         btn.setText((String) msg.obj);         if (mTimeValues < 0) {           startActivity();         }         break;     }   } }; 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的ViewPager实现带引导小圆点与自动跳转的引导界面全部内容，希望文章能够帮你解决ViewPager实现带引导小圆点与自动跳转的引导界面所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。