【www.bbyears.com--php应用】
第一次进入应用的时候，都会有一个引导页面，引导页面的实现起来也很简单，实现的方式也有很多，下面是自己写的一个引导页面的效果，大致的实现思路为:
最外层是一个FragmentActivity，里面包含4个fragment，在fragment中给ViewPager开一个循环，这样实现了图片播，其实效果就是在FragmentActivity中几个fragment滑动切换，
fragment中ViewPager无限轮播和滑动切换；
下面为代码实现:
代码如下
publicclassMainActivityextendsActionBarActivity {
privateViewPager viewpager;
privateFragmentManager fm;
privateViewPagerAdapter adapter;
privateArrayList
privateButton btn_guide;
privateView point1, point2, point3, point4;
privateintchoiceBg = R.drawable.shape_bule_point;// 被选背景
privateintunChoiceBg = R.drawable.shape_center_point_red;// 未被选背景
@Override
protectedvoidonCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
}
privatevoidinitView() {
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(newFirstFragment());
items.add(newSecondFragment());
items.add(newThridFragment());
items.add(newFourFragment());
adapter =newViewPagerAdapter(fm, items);
viewpager.setAdapter(adapter);
viewpager.setCurrentItem(0,false);
viewpager.setOffscreenPageLimit(items.size());
// 被选设置为蓝色
point1.setBackgroundResource(choiceBg);
viewpager.setOnPageChangeListener(newGuidePageListener());
}
/**
* viewpager的滑动监听
*
* @author Kevin
*
*/
classGuidePageListenerimplementsOnPageChangeListener {
// 滑动事件
@Override
publicvoidonPageScrolled(intposition,floatpositionOffset,intpositionOffsetPixels) {
}
// 某个页面被选中
@Override
publicvoidonPageSelected(intposition) {
if(position ==0) {
setPointBg(choiceBg, unChoiceBg, unChoiceBg, unChoiceBg);
}elseif(position ==1) {
setPointBg(unChoiceBg, choiceBg, unChoiceBg, unChoiceBg);
}elseif(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
publicvoidonPageScrollStateChanged(intstate) {
}
}
/**
* 设置被选小圆点的背景颜色
*
* @param pointBg1
* @param pointBg2
* @param pointBg3
* @param pointBg4
*/
privatevoidsetPointBg(intpointBg1,intpointBg2,intpointBg3,intpointBg4) {
point1.setBackgroundResource(pointBg1);
point2.setBackgroundResource(pointBg2);
point3.setBackgroundResource(pointBg3);
point4.setBackgroundResource(pointBg4);
}
}
在这里要注意ViewPager和fragment在滑动变化时，改变底部小圆点被选的颜色；
publicclassHomeAdapterextendsPagerAdapter {
privateList
privateImageCycleViewListener mImageCycleViewListener;
privateContext context;
publicHomeAdapter(Context context, List
this.context = context;
this.mImageCycleViewListener = mImageCycleViewListener;
this.data =newArrayList
if(data !=null) {
this.data.addAll(data);
}
}
publicvoidnotifyData(List
if(data !=null) {
this.data.clear();
this.data.addAll(data);
}
notifyDataSetChanged();
}
// 当天viewpager有多少个条目
LinkedList
@Override
publicintgetCount() {
if(data.size() !=0) {
returnInteger.MAX_VALUE;// 无限循环
}else{
return0;
}
}
// 判断返回的对象和加载view对象关系
@Override
publicbooleanisViewFromObject(View arg0, Object arg1) {
returnarg0 == arg1;
}
// 销毁一个条目
@Override
publicvoiddestroyItem(ViewGroup container,intposition, Object object) {
// super.destroyItem(container, position, object);
ImageView view = (ImageView) object;
imageList.add(view);// 把移除的对象添加到缓存集合中
container.removeView(view);
}
// 创建一个条目
@Override
publicObject instantiateItem(ViewGroup container,intposition) {
intindex =0;
if(data.size() !=0) {
index = position % data.size();
}
finalImageView image;
if(imageList.size() >0) {
image = imageList.remove(0);
}else{
image =newImageView(context);
}
// BitmapUtils bitmapUtils = BitMapHelper.getBitmapUtils();
finalGuiderInfo vo = data.get(index);
if(vo !=null) {
// String url = vo.url;
// bitmapUtils.display(image, url, new BitmapLoadCallBack
//
// @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
//
// }
// });
intimageid = vo.imageid;
image.setImageResource(imageid);
// bitmapUtils.display(image, url);
}
finalintpos = index;
if(mImageCycleViewListener !=null) {
image.setOnClickListener(newOnClickListener() {
@Override
publicvoidonClick(View v) {
mImageCycleViewListener.onImageClick(vo, pos, image);
}
});
}
container.addView(image);// 加载的view对象
returnimage;// 返回的对象
}
/**
* 轮播控件的监听事件
*
* @author minking
*/
publicstaticinterfaceImageCycleViewListener {
/**
* 单击图片事件
*
* @param position
* @param imageView
*/
publicvoidonImageClick(GuiderInfo info,intpostion, View imageView);
}
}
publicclassFirstFragmentextendsFragmentimplementsImageCycleViewListener {
privateView view;
privateViewPager header_view;
privateHomeAdapter adapter;
privateList
privatebooleanflag;
privateTextView tv_dis;
@Override
publicView onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
view = inflater.inflate(R.layout.first_fragment, container,false);
setData();
initView();
returnview;
}
@SuppressWarnings("deprecation")
privatevoidinitView() {
tv_dis = (TextView) view.findViewById(R.id.tv_dis);
header_view = (ViewPager) view.findViewById(R.id.header_view);
adapter =newHomeAdapter(getActivity(), data,this);
header_view.setAdapter(adapter);
header_view.setOnPageChangeListener(newOnPageChangeListener() {
@Override
publicvoidonPageSelected(intarg0) {
//计算当前选中的图片index
intindex = arg0 %2;
System.out.println("-----------index"+ index);
GuiderInfo dtGzsApplyCenterHeader = data.get(index);
tv_dis.setText(""+dtGzsApplyCenterHeader.event_content);
}
@Override
publicvoidonPageScrolled(intarg0,floatarg1,intarg2) {
}
@Override
publicvoidonPageScrollStateChanged(intarg0) {
}
});
// 设置中间值
finalAuToRunTask run =newAuToRunTask();
header_view.setCurrentItem(1000* data.size());// 实现左右两边都可以滑动
header_view.setOnTouchListener(newOnTouchListener() {
@Override
publicbooleanonTouch(View v, MotionEvent event) {
switch(event.getAction()) {
caseMotionEvent.ACTION_DOWN:// 按下
run.stop();
break;
caseMotionEvent.ACTION_CANCEL:// 事件取消
caseMotionEvent.ACTION_UP:// 抬起
run.start();
break;
default:
break;
}
returnfalse;// viewpager触摸事件返回值要是fasle不能为true
}
});
run.start();// 开启轮播
}
@Override
publicvoidonImageClick(GuiderInfo info,intpostion, View imageView) {
}
// 自动轮播
classAuToRunTaskimplementsRunnable {
@Override
publicvoidrun() {
if(flag) {
// 取消之前的任务
DensityUtil.cancle(this);
// 获取当前条目
intcurrentItem = header_view.getCurrentItem();
currentItem++;
header_view.setCurrentItem(currentItem);
// 延迟执行当前的一个任务
DensityUtil.postDelayed(this,2000);// 递归调用
}
}
publicvoidstart() {
if(!flag) {
// 取消之前的任务
DensityUtil.cancle(this);
flag =true;
// 延迟执行当前的一个任务
DensityUtil.postDelayed(this,1000);// 递归调用
}
}
publicvoidstop() {
if(flag) {
flag =false;
DensityUtil.cancle(this);
}
}
}
privatevoidsetData() {
GuiderInfo vo =newGuiderInfo();
vo.imageid = R.drawable.shape_red;
vo.event_content="红色";
data.add(vo);
GuiderInfo vo1 =newGuiderInfo();
vo1.imageid = R.drawable.shape_yellow;
vo1.event_content="黄色";
data.add(vo1);
}
}
以上为效果实现的主要代码，效果运行如下:
上面的效果图还有一小部分效果未展示出来，其实上面的圆是循环轮播的，同时也是可以滑动的；
源码：Androidpager