高仿各大商城的引导页

3,890 阅读3分钟

正所谓“好的开始是成功的一半”,对于软件来说也是如此。一款软件如果有一个吸引人的引导页,也势必会让用户欲罢不能,想点进去看看。
今天就给大家讲一款还算可以拿得出手的引导页,想必在你们的项目中也一定可以用得到。

先看一下效果:
这里写图片描述

该引导页的特点:
使用ViewPager实现滑动,这个是基础。
联动的小圆点。这个比较有特点,我们滑动多少,小圆点就同比例的移动多少,这也是这个引导页的亮点所在。
当点击“SKIP”或“即刻开启”时直接进入主页面,并销毁当前的activity。

开看看具体的实现:
1.准备三步曲。这也是一个小秘诀。
初始化视图–>初始化数据–>初始化监听。
这可以使你写代码是思路清晰,也不容易遗漏一些东西。

GuideActivity中:

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //1.初始化视图
        initView();

        //2.初始化数据
        initData();

        //3.初始化监听
        initListener();
    }

2.初始化视图

 /**
     * 初始化数据
     */
    private void initView() {
        setContentView(R.layout.activity_guild);
        ButterKnife.bind(this);
        splash5 = LayoutInflater.from(GuideActivity.this).inflate(R.layout.fragment_entry, null);

    }

所涉及到的两个布局文件:
①activity_guild.xml




    

    

    

        

        
    

用到的shape:selected_radius.xml



    
    

②fragment_entry.xml




    

    

3.初始化数据

 /**
     * 初始化数据
     */
    private void initData() {
        //引导页图片数据的id的数组
        int[] ids = new int[]{
                R.drawable.splash_1,
                R.drawable.splash_2,
                R.drawable.splash_3,
                R.drawable.splash_4};

        //放引导页图片的集合
        imageViews = new ArrayList<>();

        int widthdpi = DensityUtil.dip2px(this, 10);

        for (int i = 0; i < ids.length + 1; i++) {

            //创建小圆点
            ImageView point = new ImageView(this);
            point.setBackgroundResource(R.drawable.point_normal);

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(widthdpi, widthdpi);

            //除了第一个点,其他点都要给它设置左边距
            if (i != 0) {
                params.leftMargin = widthdpi;
            }
            point.setLayoutParams(params);
            //添加小圆点
            llPointGroup.addView(point);

            if (i == ids.length) {

            } else {
                //将图片封装成imageview的对象
                ImageView imageView = new ImageView(this);
                imageView.setBackgroundResource(ids[i]);

                //将iamgeview添加到集合中
                imageViews.add(imageView);
            }

        }
        //给viewpager设置适配器
        viewpage.setAdapter(new MyPagerAdapter());
    }
 //适配器
    class MyPagerAdapter extends PagerAdapter {
        //返回数据总个数
        @Override
        public int getCount() {
            return imageViews.size() + 1;
        }

        //当前视图
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //销毁视图
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);
        }

        //显示视图
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            View view = null;
            if (position < imageViews.size()) {
                view = imageViews.get(position);
                container.addView(view);
            } else {
                view = splash5;
                container.addView(view);
            }
            return view;
        }
    }

–>此时基本功能已经实现,但是小圆点还不能联动。

下面是重点,让小圆点可以随着我们的滑动成比例的移动起来。

简单说下红点移动的原理
需要明白以下几点
①红点移动的距离 : 间距 = 屏幕滑动距离 : 屏幕宽 = 屏幕百分比(ViewPager页面的百分比)

②间距 = 第1个点距离左边距离 - 第0个点距离左边距离

③红点移动的距离 = ViewPager页面的百分比* 间距

④坐标 = 起始位置 + 红点移动的距离;

4.初始化监听

 /**
     * 绑定监听
     */
    private void initListener() {
        //获取树形视图,每次页面布局完成时会调用,获取点间的距离
        ivWhitePoint.getViewTreeObserver().addOnGlobalLayoutListener(new MyOnGlobalLayoutListener());
        //页面改变时
        viewpage.addOnPageChangeListener(new MyOnPageChangeListener());

        splash5.findViewById(R.id.iv_entry).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startMainActivity();

            }
        });
    }

    private class MyOnGlobalLayoutListener implements ViewTreeObserver.OnGlobalLayoutListener {

        @Override
        public void onGlobalLayout() {
            //默认会调用俩次,只需要一次,第一次进入就移除
            ivWhitePoint.getViewTreeObserver().removeGlobalOnLayoutListener(MyOnGlobalLayoutListener.this);
            //间距 = 第1个点距离左边距离 - 第0个点距离左边距离
            leftmax = llPointGroup.getChildAt(1).getLeft() - llPointGroup.getChildAt(0).getLeft();
        }
    }

    private class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
        /**
         * 当页面滑动回调会调用此方法
         *
         * @param position             当前页面位置
         * @param positionOffset       当前页面滑动百分比
         * @param positionOffsetPixels 滑动的像素数
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //红点移动的距离 = ViewPager页面的百分比* 间距
            //坐标 = 起始位置 + 红点移动的距离;
            int leftmagin = (int) (position * leftmax + (positionOffset * leftmax));
            //获取控件iv_red_point
            RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) ivWhitePoint.getLayoutParams();
            //设置iv_red_point属性
            params.leftMargin = leftmagin;
            //绑定到控件上
            ivWhitePoint.setLayoutParams(params);

        }

        /**
         * 页面被选中,回调此方法
         *
         * @param position 被选中的页面位置
         *                 此作用是最后一张图片显示button
         */
        @Override
        public void onPageSelected(int position) {

        }

        /**
         * 当页面滑动状态改变时候
         *
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }

开启MAinActivity的方法:

 /**
     * 开启MainActivity
     * 并销毁当前的activity
     */
    private void startMainActivity() {
        startActivity(new Intent(GuideActivity.this,MainActivity.class));
        finish();
    }

当点击“SKIP”时也进入主页面

 /**
     * 点击右上角的skip图标时进入主页面
     */
    @OnClick(R.id.iv_skip)
    public void onClick() {
        startMainActivity();
    }

好了,简单的引导页完成了,希望在项目中可以使用的到~

源代码已上传至我的资源,即:高仿商城引导页.rar