引导页面的实现

最新推荐文章于 2024-07-06 18:02:48 发布

老胡杨

最新推荐文章于 2024-07-06 18:02:48 发布

阅读量961

点赞数

分类专栏： android 文章标签： viewpager 图片应用

本文链接：https://blog.csdn.net/wangwo1991/article/details/54907164

版权

android 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

第一次进入应用的时候，都会有一个引导页面，引导页面的实现起来也很简单，实现的方式也有很多，下面是自己写的一个引导页面的效果，大致的实现思路为:
最外层是一个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);

    }
}