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);
}
}

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

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