高仿各大商城的引导页面

最新推荐文章于 2023-04-06 08:42:34 发布

李诗雨

最新推荐文章于 2023-04-06 08:42:34 发布

阅读量5k

点赞数 2

分类专栏：项目必备文章标签：引导页商城联动圆点

本文链接：https://blog.csdn.net/cjm2484836553/article/details/53292150

版权

项目必备专栏收录该内容

10 篇文章 0 订阅

订阅专栏

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

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

该引导页的特点：
①使用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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_guild"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.myapplication.GuideActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpage"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <ImageView
        android:id="@+id/iv_skip"
        android:layout_alignParentRight="true"
        android:layout_marginTop="20dp"
        android:layout_marginRight="20dp"
        android:src="@drawable/splash_btn_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="40dp">

        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"/>

        <ImageView
            android:id="@+id/iv_white_point"
            android:background="@drawable/selected_radius"
            android:layout_width="10dp"
            android:layout_height="10dp" />
    </RelativeLayout>
</RelativeLayout>

用到的shape：selected_radius.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="oval">
    <solid android:color="#FFF" />
    <corners android:radius="5dp" />
</shape>

②fragment_entry.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/splash_5" />

    <ImageView
        android:id="@+id/iv_entry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"
        android:layout_marginBottom="60dp"
        android:background="@drawable/splash_btn_enter"/>

</FrameLayout>

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

ps：引导页做完你可能需要接着去做首页，
欢迎继续参看我的：使用分类型RecyclerView实现各大商城的首页。

李诗雨

关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
高仿各大商城的引导页面

正所谓“好的开始是成功的一半”，对于软件来说也是如此。一款软件如果有一个吸引人的引导页，也势必会让用户欲罢不能，想点进去看看。今天就给大家讲一款还算可以拿得出手的引导页，想必在你们的项目中也一定可以用得到。先看一下效果：该引导页的特点： ①使用ViewPager实现滑动，这个是基础。 ②联动的小圆点。这个比较有特点，我们滑动多少，小圆点就同比例的移动多少，这也是这个引导页的亮点所在。
复制链接

扫一扫