让构建标题栏变得更加简单, Toolbar 的加强之旅

前言

邻近国庆, 给你们带来一些干货, 但愿可以帮助你们提升开发效率

2018 年的 GDD 大会, Google 再次力荐了全新的 Material Design 组件, 笔者深深为之着迷, Toolbar 这个组件, 相信你们都接触过, 它几乎已经取代了以前 ActionBar 的地位, 不过单凭借 Google 提供的 Toolbar 实在难以胜任开发过程当中多变的 UI 风格, 借此契机, 将之前自定义的 CommonToolbar 的组件进行了再次加强, 以适用绝大多数的业务场景

接下来就经过几个场景来介绍这款新的组件

场景一

场景描述

• 构建一个左边有一个返回按钮的标题栏
• 标题文本处于中间状态

经过 SToolbar 的实现方式

方式一:

在 xml 文件中, 使用自定义属性

<com.sharry.libtoolbar.SToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:backIcon="@drawable/icon_back"
        app:titleGravity="Center"
        app:titleText="Sharry"
        app:titleTextSize="18dp" />
复制代码

• backIcon: 返回按钮的资源文件
• titleGravity: 标题的位置(默认居中)
• textText: 标题文本
• titleTextSize: 标题文本的大小
• titleTextColor: 标题文本的颜色

方式二:

使用代码构建, 调用使用 SToolbar.Builder 的方式来构建一个 Toolbar

SToolbar.Builder(this)
        .setStatusBarStyle(Style.TRANSPARENT)
        .setBackgroundColorRes(R.color.colorPrimary)
        .setTitleGravity(Gravity.CENTER_HORIZONTAL)
        .setTitleText("Sharry")
        .addBackIcon(R.drawable.icon_back)
        .apply()
复制代码

• apply()
  • 最终调用 apply 会构建一个 SToolbar 的实例对象,
  • 而且将它添加到 com.android.internal.R.id.content 这个 ContentParent 中
    • 关于这个资源文件这里就不过多介绍了(这里有相关知识点的介绍)
  • 而且会将咱们 setContentView 中设置的布局, 自动的移动到 Toolbar 的下方

若是你想获取一个对象, 并且不想让他插入到布局文件中, 能够调用 .build() 方式便可

SToolbar.Builder(this)
        .//...
        .build()
复制代码

场景二

场景描述

• 标题
  • 文本大小为 20 dp
  • 文本处于中间状态
• 左边有一个返回按钮
• 菜单
  • 左边有一个文本菜单
  • 右边有一个文本菜单
  • 右边有一个图片菜单
  • 文本菜单的文本大小为 13dp
  • 每一个菜单之间的间距为 10dp

可见这个场景就复杂的多了

方式一

即便是这样复杂的文本, 依旧能够经过 xml 中提供的属性快捷构建

<com.sharry.libtoolbar.SToolbar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:backIcon="@drawable/icon_back"
        app:menuLeftText="left_menu"
        app:menuRightIcon="@drawable/icon_right"
        app:menuRightText="right_menu"
        app:menuTextColor="@android:color/white"
        app:menuTextSize="13dp"
        app:subItemInterval="10dp"
        app:titleGravity="Center"
        app:titleText="Sharry"
        app:titleTextColor="@android:color/white"
        app:titleTextSize="18dp" />
复制代码

• menuLeftText: 左部菜单文本
• menuRightText: 右部菜单文本
• menuTextSize: 菜单文本的大小
• subItemInterval: 每一个一个子 Item 之间的间隔

方式二

使用代码构建

SToolbar.Builder(this)
                .setStatusBarStyle(Style.TRANSPARENT)
                .setBackgroundColorRes(R.color.colorPrimary)
                // 设置间隔
                .setSubItemInterval(10)
                // 设置Gravity
                .setTitleGravity(Gravity.CENTER_HORIZONTAL)
                // 设置标题文本
                .setTitleText("Sharry", 18)
                .addBackIcon(R.drawable.icon_back)
                // 添加左部的菜单文本
                .addLeftMenuText(
                        TextViewOptions.Builder()
                                .setText("left")
                                .setListener { showMsg("U click left text") }
                                .build()
                )
                // 添加右边的菜单文本
                .addRightMenuText(
                        TextViewOptions.Builder()
                                .setText("right")
                                .setListener { showMsg("U click right text") }
                                .build()
                )
                // 添加右边的菜单图片
                .addRightMenuImage(
                        ImageViewOptions.Builder()
                                .setDrawableResId(R.drawable.icon_right)
                                .setListener { showMsg("U click right image") }
                                .build()
                )
                .apply()
复制代码

能够看到关于菜单的构建, 能够经过添加一个 Options 来构建

• SToolbar 提供了三种 Options
  • TextViewOptions
    • 传入这个 Options 会自动建立 TextView 而且添加进指定的菜单中
  • ImageViewOptions
    • 传入这个 Options 会自动建立 ImageView 而且添加到指定的菜单中
  • ViewOptions
    • 这个 Options 不可以单独使用, 要配合 View 去使用

经过 Options 你能够方便地订制 View 的各类属性, 能够精确的定位 view 的 padding 来控制边距

两种方式的运行效果图

这样子可以知足你的需求吗? 别着急, 且看看场景三

场景三

场景描述

• 沉浸式状态栏
• 左边有个返回按钮
• 左边有个文本
• 右边有个选中框

这样子复杂的场景? 肯定用 SToolbar 可以实现? 不巧, 还真能

实现方式

1. 在 xml 中定义基本的简单属性

<com.sharry.libtoolbar.SToolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:statusBarStyle="Transparent"
        app:backIcon="@drawable/icon_back"
        app:subItemInterval="10dp"
        app:titleGravity="Left"
        app:titleTextSize="18dp" />
复制代码

• statusBarStyle: 这个属性, 用于控制状态栏
  • Transparent: 全透明
  • Translucent: 半透明
  • Hide: 隐藏状态栏
  • Default: 默认状态
• 其余的属性在上面的场景中已经介绍过, 这里再也不赘述

2. 在代码中定义自定义的 Menu

protected void initTitle() {
        SToolbar toolbar = findViewById(R.id.toolbar);
        // 1. 建立自定义 View 的属性
        mCheckIndicator = new CheckedIndicatorView(this);
        // 2. 将这个自定义 View 经过 addRightMenuView 添加到 Toolbar 中
        toolbar.addRightMenuView(
                mCheckIndicator,
                ViewOptions.Builder()
                        .setVisibility(View.INVISIBLE)
                        .setWidthExcludePadding(dp2px(this, 25))
                        .setHeightExcludePadding(dp2px(this, 25))
                        .setPaddingRight(dp2px(this, 10))
                        .setListener(new View.OnClickListener() {
                            @Override
                            public void onClick(View v) {
                                mPresenter.handleToolbarCheckedIndicatorClick(mCheckIndicator.isChecked());
                            }
                        })
                        .build()
        );
    }
复制代码

这里就能够看到

• 咱们传入了一个自定义 View
• 构建了一个 ViewOptions, 经过 Builder 设置的属性最终都会做用到这个 View 上

总结

相信经过上面几个场景的介绍, 你们对 SToolbar 在使用上, 有了必定程度的了解, 其实每一个位置上的 View, 均可以经过这种方式去实现, 这样子我相信应该能够知足开发过程当中绝大多数的需求了

你能够经过 Options 调整各个位置的 View, 也能够在各个位置上添加自定义 View, 好比构造出下面这样子的 Title

想了解更多请移步到下方的 Github 查看源码

github.com/SharryChoo/…