Android引导页面的简单实现

第一次进入应用的时候，都会有一个引导页面，引导页面的实现起来也很简单，实现的方式也有很多，下面是自己写的一个引导页面的效果，大致的实现思路为:

最外层是一个fragmentactivity，里面包含4个fragment，在fragment中给viewpager开一个循环，这样实现了图片播，其实效果就是在fragmentactivity中几个fragment滑动切换，
fragment中viewpager无限轮播和滑动切换；

下面为代码实现:

public class mainactivity extends actionbaractivity {
 private viewpager viewpager;
 private fragmentmanager fm;
 private viewpageradapter adapter;
 private arraylist<object> items = new arraylist<object>();
 private button btn_guide;
 private view point1, point2, point3, point4;
 private int choicebg = r.drawable.shape_bule_point;// 被选背景
 private int unchoicebg = r.drawable.shape_center_point_red;// 未被选背景

 @override
 protected void oncreate(bundle savedinstancestate) {
  super.oncreate(savedinstancestate);
  requestwindowfeature(window.feature_no_title);
  setcontentview(r.layout.activity_main);
  initview();
 }

 private void initview() {
  btn_guide = (button) findviewbyid(r.id.btn_guide);
  point1 = findviewbyid(r.id.point1);
  point2 = findviewbyid(r.id.point2);
  point3 = findviewbyid(r.id.point3);
  point4 = findviewbyid(r.id.point4);
  viewpager = (viewpager) findviewbyid(r.id.viewpager);
  fm = this.getsupportfragmentmanager();
  items.add(new firstfragment());
  items.add(new secondfragment());
  items.add(new thridfragment());
  items.add(new fourfragment());

  adapter = new viewpageradapter(fm, items);
  viewpager.setadapter(adapter);
  viewpager.setcurrentitem(0, false);
  viewpager.setoffscreenpagelimit(items.size());

  // 被选设置为蓝色
  point1.setbackgroundresource(choicebg);

  viewpager.setonpagechangelistener(new guidepagelistener());
 }

 /**
  * viewpager的滑动监听
  * 
  * @author kevin
  * 
  */
 class guidepagelistener implements onpagechangelistener {
  // 滑动事件
  @override
  public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {

  }

  // 某个页面被选中
  @override
  public void onpageselected(int position) {
   if (position == 0) {
    setpointbg(choicebg, unchoicebg, unchoicebg, unchoicebg);
   } else if (position == 1) {
    setpointbg(unchoicebg, choicebg, unchoicebg, unchoicebg);
   } else if (position == 2) {
    setpointbg(unchoicebg, unchoicebg, choicebg, unchoicebg);
   } else {
    setpointbg(unchoicebg, unchoicebg, unchoicebg, choicebg);
   }
   if (position == items.size() - 1) {// 最后一个页面
    btn_guide.setvisibility(view.visible);// 显示开始体验的按钮
   } else {
    btn_guide.setvisibility(view.invisible);
   }
  }

  // 滑动状态发生变化
  @override
  public void onpagescrollstatechanged(int state) {

  }
 }

 /**
  * 设置被选小圆点的背景颜色
  * 
  * @param pointbg1
  * @param pointbg2
  * @param pointbg3
  * @param pointbg4
  */
 private void setpointbg(int pointbg1, int pointbg2, int pointbg3, int pointbg4) {
  point1.setbackgroundresource(pointbg1);
  point2.setbackgroundresource(pointbg2);
  point3.setbackgroundresource(pointbg3);
  point4.setbackgroundresource(pointbg4);
 }
}

在这里要注意viewpager和fragment在滑动变化时，改变底部小圆点被选的颜色；

public class homeadapter extends pageradapter {
 private list<guiderinfo> data;
 private imagecycleviewlistener mimagecycleviewlistener;
 private context context;

 public homeadapter(context context, list<guiderinfo> data, imagecycleviewlistener mimagecycleviewlistener) {
  this.context = context;
  this.mimagecycleviewlistener = mimagecycleviewlistener;
  this.data = new arraylist<guiderinfo>();
  if (data != null) {
   this.data.addall(data);
  }
 }

 public void notifydata(list<guiderinfo> data) {
  if (data != null) {
   this.data.clear();
   this.data.addall(data);
  }
  notifydatasetchanged();
 }

 // 当天viewpager有多少个条目
 linkedlist<imageview> imagelist = new linkedlist<imageview>();

 @override
 public int getcount() {
  if (data.size() != 0) {
   return integer.max_value;// 无限循环
  } else {
   return 0;
  }
 }

 // 判断返回的对象和加载view对象关系
 @override
 public boolean isviewfromobject(view arg0, object arg1) {
  return arg0 == arg1;
 }

 // 销毁一个条目
 @override
 public void destroyitem(viewgroup container, int position, object object) {
  // super.destroyitem(container, position, object);
  imageview view = (imageview) object;
  imagelist.add(view);// 把移除的对象添加到缓存集合中
  container.removeview(view);

 }

 // 创建一个条目
 @override
 public object instantiateitem(viewgroup container, int position) {
  int index = 0;
  if (data.size() != 0) {
   index = position % data.size();
  }
  final imageview image;
  if (imagelist.size() > 0) {
   image = imagelist.remove(0);
  } else {
   image = new imageview(context);
  }
//  bitmaputils bitmaputils = bitmaphelper.getbitmaputils();
  final guiderinfo vo = data.get(index);
  if (vo != null) {
//   string url = vo.url;
//   bitmaputils.display(image, url, new bitmaploadcallback<view>() {
//
//    @suppresswarnings("deprecation")
//    @override
//    public void onloadcompleted(view arg0, string arg1, bitmap bitmap, bitmapdisplayconfig arg3, bitmaploadfrom arg4) {
//     image.setimagebitmap(null);
//     bitmapdrawable ob = new bitmapdrawable(context.getresources(), bitmap);
//     image.setbackgrounddrawable(ob);
//    }
//
//    @override
//    public void onloadfailed(view arg0, string arg1, drawable arg2) {
//     // todo auto-generated method stub
//
//    }
//   });
   int imageid = vo.imageid;
   image.setimageresource(imageid);
//   bitmaputils.display(image, url);
  }
  final int pos = index;
  if (mimagecycleviewlistener != null) {
   image.setonclicklistener(new onclicklistener() {
    @override
    public void onclick(view v) {
     mimagecycleviewlistener.onimageclick(vo, pos, image);
    }
   });
  }
  container.addview(image);// 加载的view对象
  return image;// 返回的对象
 }

 /**
  * 轮播控件的监听事件
  * 
  * @author minking
  */
 public static interface imagecycleviewlistener {

  /**
   * 单击图片事件
   * 
   * @param position
   * @param imageview
   */
  public void onimageclick(guiderinfo info, int postion, view imageview);
 }

}

public class firstfragment extends fragment implements imagecycleviewlistener {
 private view view;
 private viewpager header_view;
 private homeadapter adapter;
 private list<guiderinfo> data = new arraylist<guiderinfo>();
 private boolean flag;
 private textview tv_dis;

 @override
 public view oncreateview(layoutinflater inflater, viewgroup container, bundle savedinstancestate) {
  view = inflater.inflate(r.layout.first_fragment, container, false);
  setdata();
  initview();

  return view;
 }

 @suppresswarnings("deprecation")
 private void initview() {
  tv_dis = (textview) view.findviewbyid(r.id.tv_dis);
  header_view = (viewpager) view.findviewbyid(r.id.header_view);
  adapter = new homeadapter(getactivity(), data, this);

  header_view.setadapter(adapter);
  header_view.setonpagechangelistener(new onpagechangelistener() {

   @override
   public void onpageselected(int arg0) {
    //计算当前选中的图片index
    int index = arg0 % 2;
    system.out.println("-----------index" + index);
    guiderinfo dtgzsapplycenterheader = data.get(index);
    tv_dis.settext(""+dtgzsapplycenterheader.event_content);
   }

   @override
   public void onpagescrolled(int arg0, float arg1, int arg2) {

   }

   @override
   public void onpagescrollstatechanged(int arg0) {

   }
  });
  // 设置中间值
  final autoruntask run = new autoruntask();

  header_view.setcurrentitem(1000 * data.size());// 实现左右两边都可以滑动
  header_view.setontouchlistener(new ontouchlistener() {
   @override
   public boolean ontouch(view v, motionevent event) {
    switch (event.getaction()) {
    case motionevent.action_down:// 按下
     run.stop();

     break;
    case motionevent.action_cancel:// 事件取消
    case motionevent.action_up:// 抬起
     run.start();
     break;
    default:
     break;
    }
    return false;// viewpager触摸事件返回值要是fasle不能为true
   }
  });

  run.start();// 开启轮播
 }

 @override
 public void onimageclick(guiderinfo info, int postion, view imageview) {

 }

 // 自动轮播
 class autoruntask implements runnable {
  @override
  public void run() {
   if (flag) {
    // 取消之前的任务
    densityutil.cancle(this);
    // 获取当前条目
    int currentitem = header_view.getcurrentitem();
    currentitem++;
    header_view.setcurrentitem(currentitem);
    // 延迟执行当前的一个任务
    densityutil.postdelayed(this, 2000);// 递归调用
   }
  }

  public void start() {
   if (!flag) {
    // 取消之前的任务
    densityutil.cancle(this);
    flag = true;
    // 延迟执行当前的一个任务
    densityutil.postdelayed(this, 1000);// 递归调用
   }
  }

  public void stop() {
   if (flag) {
    flag = false;
    densityutil.cancle(this);
   }
  }
 }

 private void setdata() {
  guiderinfo vo = new guiderinfo();
  vo.imageid = r.drawable.shape_red;
  vo.event_content="红色";
  data.add(vo);
  guiderinfo vo1 = new guiderinfo();
  vo1.imageid = r.drawable.shape_yellow;
  vo1.event_content="黄色";
  data.add(vo1);

 }
}

以上为效果实现的主要代码，效果运行如下:

上面的效果图还有一小部分效果未展示出来，其实上面的圆是循环轮播的，同时也是可以滑动的；

源码：androidpager

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