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 {// 滑动事件@Overridepublic void onPageScrolled（int position, float positionOffset, int positionOffsetPixels） {}// 某个页面被选中@Overridepublic 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）; }}// 滑动状态发生变化@Overridepublic 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（） {@Overridepublic 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） {//计算当前选中的图片indexint 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 {@Overridepublic 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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。