美文网首页最近需要做的Android技术知识Android知识
高效开发,打造通用Toolbar,适应90%的使用场景

高效开发,打造通用Toolbar,适应90%的使用场景

作者: SharryChoo | 来源:发表于2018-01-26 18:58 被阅读492次

    临近过年, 这次不分析源码, 给大家带来一个通用的 Toolbar, 希望能带给大家点儿帮助

    封装目的

    1. 选择自定义 View 实现 Toolbar, 是为了更好的实现两用性

    2. 既可以在XML文件中配合 CoordinatorLayout 使用实现炫酷的效果, 也可以通过代码直接构建

    3. 更加方便的使用添加返回按键, 标题, 菜单等

    4. 更加方便的添加点击事件

    5. 给用户自定义标题的权限

    效果展示

    1. 非沉浸式

      非沉浸式.png
    2. 沉浸式

      沉浸式.png
    3. 自定义标题

      定义标题栏.png

    使用方式

    1. 在 style.xml 中,将主题改为 NoActionBar 的样式

    2. 基本用法

            SToolbar.Builder(this)
                    .addTitleImage(R.mipmap.ic_launcher)// 标题头像
                    .addTitleText("FrankChoo")// 标题文本
                    .setBackgroundColorResource(R.color.colorAccent)// 背景颜色
                    .addLeftIcon(1, R.drawable.icon_back) {}// 响应左部图标的点击事件
                    .addLeftText(2, "Left") {}// 响应左部文本的点击事件
                    .addRightText(3, "Right") {}// 响应右部文本的点击事件
                    .addRightIcon(4, R.drawable.icon_left) {}// 响应右部图标的点击事件
                    .setTextColor(Color.BLACK)// 会全局设置字体的颜色, 自定义标题除外
                    .apply()
    
    1. 调整图标和文本大小
        // 图标宽高
        SToolbar.Builder(this)
            .addLeftIcon(1, R.drawable.icon_back, /*Width*/50, /*Height*/50) {}
            ...
        // 文本大小
        SToolbar.Builder(this)
            .addLeftText(2, "Left", 20f) {}// 响应左部文本的点击事件
    
    1. 自定义标题
        // 1. 创建View
        val titleView = LayoutInflater.from(this).inflate(R.layout.toolbar_title,
                    window.decorView as ViewGroup, false)
        // 2. 动态填充
        SToolbar.Builder(this)
                .addCustomTitle(titleView)
                ...
    
    1. 状态栏
    public enum Style {
        TRANSPARENT,// 全透明
        TRANSLUCENCE,// 半透明
        HIDE,// 隐藏
        DEFAULT// 默认
    }
    
    // 直接使用的方式
    AppBarHelper.with(this).setStatusBarStyle(Style.TRANSPARENT).apply()
    
    // 通过Builder直接构建的方式
    SToolbar.Builder(this)
            .setStatusBarStyle(Style.TRANSPARENT)// 只需要在这里集成即可
    

    实现思路

    看完了集成方式, 下面看看实现思路:

    技术难点:

    1. 动态集成:
      • 分析过 setContentView() 源码(https://www.jianshu.com/p/3872219cc07a)的我们都知道, DecorView 是系统默认的 Window 下的顶层View, DecorView 的内部只有一个子View, 但这个子 View, 会根据不同的特征去 inflate 系统提供的不同的布局
      • 这个系统布局中有一个共性: 存在一个 @id 为 com.android.internal.R.id.content 的 FrameLayout 容器
      • 这就是我们 setContentView() 的父容器(不考虑继承自AppCompatActivity时, 其在内部进行的多次填充处理)

    好的, 我们就把 Toolbar 添加到这个容器中的第 0 个位置, 然后让之前的 View margin 一个 ActionBar 的高度就完成了, 完美的保证了通用性

    1. 沉浸式状态栏: 为了支持沉浸式状态栏, 需要根据用户传入的参数, 动态的改变 SToolbar的 padding 值, 以完美的适应沉浸式状态栏
      相关

    GitHub传送门

    https://github.com/SharryChoo/SToolbar

    相关文章

      网友评论

      本文标题:高效开发,打造通用Toolbar,适应90%的使用场景

      本文链接:https://www.haomeiwen.com/subject/bxbwaxtx.html