第一次进入应用的时候，都会有一个引导页面，引导页面的实现起来也很简单，实现的方式也有很多，下面是自己写的一个引导页面的效果，大致的实现思路为:
最外层是一个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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
为我祈祷平安就好。我的旅行，会有你们的故事陪伴，所以我不会孤单。放心吧。
