项目重构-引导页的实现

简介: 公司的项目从最开始设计到现在上线发版好几个版本,中间经过不停的迭代和修改,现在已经变得有点冗余,对以后的合作开发和后续扩展产生了一定的影响,所以抽空把项目重构一下,一些逻辑和代码重新做一下调整,以更加适合当前的业务逻辑,so,先从引导页面上入手。 比较常用的集中引导页面有如下几种: 第一种: 最简单的引导页(导航点和引导页合二为一,好处是简单,缺点也同样明显:过渡生硬,受适

公司的项目从最开始设计到现在上线发版好几个版本,中间经过不停的迭代和修改,现在已经变得有点冗余,对以后的合作开发和后续扩展产生了一定的影响,所以抽空把项目重构一下,一些逻辑和代码重新做一下调整,以更加适合当前的业务逻辑,so,先从引导页面上入手。
比较常用的集中引导页面有如下几种:
第一种: 最简单的引导页(导航点和引导页合二为一,好处是简单,缺点也同样明显:过渡生硬,受适配影响较大),具体代码如下:

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:orientation="vertical">
     <android.support.v4.view.ViewPager
         android:id="@+id/id_viewpager"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:background="@color/white" />
</LinearLayout>

效果如下:
这里写图片描述这里写图片描述

第二种:使用背景图片+CirclePageIndicator小圆点来实现导航点的效果(稍微复杂,但有了页面切换时的小圆点动画效果)
主布局activity代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v4.view.ViewPager
            android:id="@+id/id_viewpager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white" />
        <com.viewpagerindicator.CirclePageIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="8dp"
            android:padding="10dp" />
    </RelativeLayout>
</LinearLayout>

然后就是引导页的每一个页面的布局了,这里只展示一个就行了,因为几乎都是一样的,代码如下:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/bg_boot_page_one"/>
</LinearLayout>

activity代码如下:

import android.app.Activity;
import android.os.Bundle;

import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;

import com.viewpagerindicator.CirclePageIndicator;

import java.util.ArrayList;
import java.util.List;


import Adapter.ViewPagerAdapter;

public class ViewPagerActivity extends Activity{
    private CirclePageIndicator circlePageIndicator;
    ViewPager viewPager;
    ViewPagerAdapter mpagerAdapter;
    private List<View> views= new ArrayList<View>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_viewpager);

        viewPager= (ViewPager) findViewById(R.id.id_viewpager);
        circlePageIndicator= (CirclePageIndicator) findViewById(R.id.indicator);

        LayoutInflater minflater=LayoutInflater.from(this);
        View view01=minflater.inflate(R.layout.viewpager01,null);
        View view02=minflater.inflate(R.layout.viewpager02,null);
        View view03=minflater.inflate(R.layout.viewpager03,null);
        View view04=minflater.inflate(R.layout.viewpager04,null);
        View view05=minflater.inflate(R.layout.viewpager05,null);

    views.add(view01);
        views.add(view02);
        views.add(view03);
        views.add(view04);
        views.add(view05);

        mpagerAdapter=new ViewPagerAdapter(views);
        viewPager.setAdapter(mpagerAdapter);
        circlePageIndicator.setViewPager(viewPager);
    }
}

最终的实现效果和第一种其实查不了太多,但稍微高档了一些。

第三种:Guideshow控件实现
Guideshow使你简单、快速的构建引导页。另外,你无须生成动态的gif图片就可使页面产生动画效果,如平移、渐变。项目地址: https://github.com/javajavadog/guideshow
这里写图片描述

第四种:AppIntro 控件实现
尝试使用了下,确实是个漂亮的控件,而且使用也很简单,推荐使用。
项目地址:https://github.com/PaoloRotolo/AppIntro
这里写图片描述

第五种:SwitchViewDemo
一个简单的引导页实现。值得推荐的是这完全是个单独的控件,而不是借助ViewPager实现的。作者完全是扩展ViewGroup做的。有兴趣的可以参考作者的设计。

这里写图片描述

最后备注一下
小圆点的实现有多重方法,自己定义,或者使用第三方的开源库,这里介绍一个第三方的开源库,一个轻量级的viewpager指示器CircleIndicator , 项目地址:https://github.com/ongakuer/CircleIndicator,类似于nexus5 启动器的效果。它可以自定义指示器上小圆点的样式和动画效果,效果如下:
这里写图片描述

综上,个人推荐使用第二种+自定义小圆点,这样更加灵活,效果也比较不错,能够满足大部分的需求了。

相关文章
|
4月前
|
JavaScript 调度
Three.js开发秘籍:FlyControls的拖拽视角问题解决方案
Three.js开发秘籍:FlyControls的拖拽视角问题解决方案
62 0
|
7月前
|
测试技术 Python
App自动化测试中,如何更好地处理弹窗?
在App自动化测试中,处理弹窗异常是保证测试稳定性和可靠性的重要环节。当遇到广告弹窗、升级提示等不定时出现的UI元素时,可以采用黑名单处理方法,如上述Python代码示例,通过尝试点击黑名单中的元素来避免干扰。同时,利用异常处理装饰器可以增强函数功能,保持代码整洁,当异常发生时记录日志、截图并保存页面源代码,便于问题排查。这两种策略能有效提升测试的效率和质量。
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
前端学习笔记202305学习笔记第二十三天-重构菜单组件2
52 1
|
C语言
C项目(贪吃蛇BUG解决及功能扩展)
C项目(贪吃蛇BUG解决及功能扩展)
133 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
前端学习笔记202305学习笔记第二十三天-重构菜单组件3
54 0
|
前端开发
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
前端学习笔记202305学习笔记第二十三天-重构菜单组件1
51 0
|
存储 编解码 缓存
|
前端开发 数据格式
前端hook项目重构笔记3-重构之裁剪上传功能
前端hook项目重构笔记3-重构之裁剪上传功能
78 0
前端hook项目重构笔记3-重构之裁剪上传功能
|
前端开发
前端hook项目重构笔记1-重构之裁剪上传功能
前端hook项目重构笔记1-重构之裁剪上传功能
81 0
前端hook项目重构笔记1-重构之裁剪上传功能
|
前端开发
前端hook项目重构笔记4-重构之裁剪上传功能
前端hook项目重构笔记4-重构之裁剪上传功能
76 0