Android开发实现的ViewPager引导页功能(动态加载指示器)详解

概述本文实例讲述了Android开发实现的ViewPager引导页功能(动态加载指示器)。分享给大家供大家参考，具体如下：

本文实例讲述了AndroID开发实现的VIEwPager引导页功能(动态加载指示器)。分享给大家供大家参考，具体如下：

先看效果图咯~

现在几乎每个App都会有引导页，是不是感觉很炫很厉害，所以就想做出来一个学习一下~让自己的App看起来更加的美观~

现在来分析一下：

这个引导页可以分为俩部分~

1.小红点--来提醒这是第几页了~

2.“开始体验”这个button--可以进入主界面，但是要控制这个button只能在最后一页出现

布局的话使用相对布局~

那现在来看看布局吧：

activity_main:

<relativeLayout 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" >  <androID.support.v4.vIEw.VIEwPager  androID:ID="@+ID/vIEwPager"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  />  <relativeLayout   androID:ID="@+ID/rl"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:layout_alignParentBottom="true"   androID:layout_centerHorizontal="true"   androID:layout_marginBottom="20dp">  <linearLayout   androID:ID="@+ID/linear"   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:orIEntation="horizontal">  </linearLayout> </relativeLayout>  <button   androID:layout_wIDth="wrap_content"   androID:layout_height="wrap_content"   androID:ID="@+ID/btn"   androID:layout_alignParentBottom="true"   androID:layout_centerHorizontal="true"   androID:layout_marginBottom="50dp"   androID:visibility="invisible"   androID:text="开始体验"/></relativeLayout>

开始体验这个button设置了不可见来控制在最后一页出现~

小圆点还没开始写出来，只是写了个relativeLayout嵌套了一个linearLayout

然后在分析这个页面的滑动~

先把要滑动的图片放进来：

private VIEwPager vIEwPager;private int[]images={R.drawable.guIDe_1,R.drawable.guIDe_2,R.drawable.guIDe_3};private List<ImageVIEw>imageVIEws;//用来存放几个imagevIEw的实例

实例化并且加载适配器：

vIEwPager.setAdapter(new MyAdapter());imageVIEws=new ArrayList<ImageVIEw>();for(int i=0;i<images.length;i++){ ImageVIEw imageVIEw=new ImageVIEw(this); imageVIEw.setimageResource(images[i]); imageVIEws.add(imageVIEw);

class MyAdapter extends PagerAdapter{ @OverrIDe public int getCount() {  // Todo auto-generated method stub  return images.length; } @OverrIDe public boolean isVIEwFromObject(VIEw arg0,Object arg1) {  // Todo auto-generated method stub  return arg0==arg1; } @OverrIDe public Object instantiateItem(VIEwGroup container,int position) {  // Todo auto-generated method stub  container.addVIEw(imageVIEws.get(position));  return imageVIEws.get(position); } @OverrIDe public voID destroyItem(VIEwGroup container,int position,Object object) {  // Todo auto-generated method stub  container.removeVIEw((VIEw)object); }}

其实写到这里就可以完成图片的滑动，但是还没有小红点的出现~这时候就要写小红点了~小红点默认是在第一页就出现了的~

在drawable文件下写了俩个xml文件，red_circle--代表红点，gray_circle--代表灰点~

red_circle:

<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval"> <size  androID:wIDth="10dp"  androID:height="10dp"/> <!-- 填充颜色 --> <solID  androID:color="#ff0000"/></shape>

gray_circle:

<?xml version="1.0" enCoding="utf-8"?><shape xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:shape="oval"> <size  androID:wIDth="10dp"  androID:height="10dp"/> <!-- 填充颜色 --> <solID  androID:color="#ECECEC"/></shape>

现在代表颜色的文件写好了，那怎么把它们加进去呢~~

先默认都是灰点，然后在把红点覆盖上去，看代码怎么写：

ImageVIEw gray_Iv=new ImageVIEw(this);gray_Iv.setimageResource(R.drawable.gray_circle);//使用LayoutParams改变控件的位置linearLayout.LayoutParams layoutParams=new linearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);if(i>0){ layoutParams.leftmargin=20;}gray_Iv.setLayoutParams(layoutParams);li.addVIEw(gray_Iv);

把灰点都加到linearLayout里面

而红点：

red_Iv=new ImageVIEw(this);red_Iv.setimageResource(R.drawable.red_circle);rl.addVIEw(red_Iv);

把红点加到relativeLayout里面

还要写个示图树~让红点来滑动：

//示图树red_Iv.getVIEwTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() { //该方法就是在界面全面绘制结束之后回调 @OverrIDe public voID onGlobalLayout() {  // Todo auto-generated method stub  //求距离  left=li.getChildAt(1).getleft()-li.getChildAt(0).getleft();  System.out.println("left为"+left);  red_Iv.getVIEwTreeObserver().removeOnGlobalLayoutListener(this); }});vIEwPager的滑动监听器还要监听图片什么时候滑动，以至于让红点滑动的跟好看（就比如第一个点到第二个点的途中也会有红点）

//滑动的时候@OverrIDepublic voID onPageScrolled(int position,float posionOffset,int arg2) { // Todo auto-generated method stub System.out.println(posionOffset);//滑动的百分比 relativeLayout.LayoutParams layoutParams=   (relativeLayout.LayoutParams)red_Iv.getLayoutParams(); layoutParams.leftmargin=(int)(left*posionOffset+position*left); red_Iv.setLayoutParams(layoutParams);}

还要分析下让“开始体验”这个button出现在最后一页，那就只能在vIEwPager的滑动监听方法里面写可见与不可见了~

@OverrIDepublic voID onPageSelected(int position) { // Todo auto-generated method stub if(position==images.length-1){  btn.setVisibility(VIEw.VISIBLE); }else{  btn.setVisibility(VIEw.GONE); }}

完整MainActicity代码：

public class MainActivity extends Activity { private VIEwPager vIEwPager; private int[]images={R.drawable.guIDe_1,R.drawable.guIDe_3}; private List<ImageVIEw>imageVIEws;//用来存放几个imagevIEw的实例 private linearLayout li; private relativeLayout rl; private ImageVIEw red_Iv; private int left; private button btn; @OverrIDe protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  requestwindowFeature(Window.FEATURE_NO_Title);  setContentVIEw(R.layout.activity_main);  vIEwPager=(VIEwPager) findVIEwByID(R.ID.vIEwPager);  li=(linearLayout) findVIEwByID(R.ID.linear);  rl=(relativeLayout) findVIEwByID(R.ID.rl);  btn=(button) findVIEwByID(R.ID.btn);  vIEwPager.setAdapter(new MyAdapter());  imageVIEws=new ArrayList<ImageVIEw>();  for(int i=0;i<images.length;i++){   ImageVIEw imageVIEw=new ImageVIEw(this);   imageVIEw.setimageResource(images[i]);   imageVIEws.add(imageVIEw);   ImageVIEw gray_Iv=new ImageVIEw(this);   gray_Iv.setimageResource(R.drawable.gray_circle);   //使用LayoutParams改变控件的位置   linearLayout.LayoutParams layoutParams=     new linearLayout.LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);   if(i>0){    layoutParams.leftmargin=20;   }   gray_Iv.setLayoutParams(layoutParams);   li.addVIEw(gray_Iv);  }  red_Iv=new ImageVIEw(this);  red_Iv.setimageResource(R.drawable.red_circle);  rl.addVIEw(red_Iv);  //示图树  red_Iv.getVIEwTreeObserver().  addOnGlobalLayoutListener(new OnGlobalLayoutListener() {   //该方法就是在界面全面绘制结束之后回调   @OverrIDe   public voID onGlobalLayout() {    // Todo auto-generated method stub    //求距离    left=li.getChildAt(1).getleft()-li.getChildAt(0).getleft();    System.out.println("left为"+left);    red_Iv.getVIEwTreeObserver().removeOnGlobalLayoutListener(this);   }  });  vIEwPager.setonPage@R_404_1962@(new OnPage@R_404_1962@() {   @OverrIDe   public voID onPageSelected(int position) {    // Todo auto-generated method stub    if(position==images.length-1){     btn.setVisibility(VIEw.VISIBLE);    }else{     btn.setVisibility(VIEw.GONE);    }   }   //滑动的时候   @OverrIDe   public voID onPageScrolled(int position,int arg2) {    // Todo auto-generated method stub    System.out.println(posionOffset);//滑动的百分比    relativeLayout.LayoutParams layoutParams=      (relativeLayout.LayoutParams)red_Iv.getLayoutParams();    layoutParams.leftmargin=(int)(left*posionOffset+position*left);    red_Iv.setLayoutParams(layoutParams);   }   @OverrIDe   public voID onPageScrollStateChanged(int arg0) {    // Todo auto-generated method stub   }  }); } class MyAdapter extends PagerAdapter{  @OverrIDe  public int getCount() {   // Todo auto-generated method stub   return images.length;  }  @OverrIDe  public boolean isVIEwFromObject(VIEw arg0,Object arg1) {   // Todo auto-generated method stub   return arg0==arg1;  }  @OverrIDe  public Object instantiateItem(VIEwGroup container,int position) {   // Todo auto-generated method stub   container.addVIEw(imageVIEws.get(position));   return imageVIEws.get(position);  }  @OverrIDe  public voID destroyItem(VIEwGroup container,Object object) {   // Todo auto-generated method stub   container.removeVIEw((VIEw)object);  } }}

 PS：这里使用到了androID-support-v4.jar文件，需要在项目中导入jar包，可参考本站相关教程http://www.jb51.net/softjc/552873.html

附：完整实例代码点击此处本站下载。

更多关于AndroID相关内容感兴趣的读者可查看本站专题：《Android开发入门与进阶教程》、《Android布局layout技巧总结》、《Android视图View技巧总结》、《Android编程之activity *** 作技巧总结》、《Android *** 作json格式数据技巧总结》、《Android资源 *** 作技巧汇总》及《Android控件用法总结》

希望本文所述对大家AndroID程序设计有所帮助。

总结

以上是内存溢出为你收集整理的Android开发实现的ViewPager引导页功能(动态加载指示器)详解全部内容，希望文章能够帮你解决Android开发实现的ViewPager引导页功能(动态加载指示器)详解所遇到的程序开发问题。

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