让构建标题栏变得更加简单, Toolbar 的增强之旅
2018-09-30 本文已影响80人
SharryChoo
前言
邻近国庆, 给大家带来一些干货, 希望能够帮助大家提高开发效率
2018 年的 GDD 大会, Google 再次力荐了全新的 Material Design 组件, 笔者深深为之着迷(哈哈, 老脸一红), Toolbar 这个组件, 相信大家都接触过, 它几乎已经取代了之前 ActionBar 的地位, 不过单凭借 Google 提供的 Toolbar 实在难以胜任开发过程中多变的 UI 风格, 借此契机, 将以前自定义的 CommonToolbar 的组件进行了再次增强, 以适用绝大多数的业务场景
接下来就通过几个场景来介绍这款新的组件
场景一
场景描述
场景一.png
- 构建一个左边有一个返回按钮的标题栏
- 标题文本处于中间状态
通过 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()
场景二
场景描述
场景二.png
- 标题
- 文本大小为 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 去使用
- 说道配合 View, 相信大家应该能够感受到一些猫腻了, 好的这个到场景三种叙述
- TextViewOptions
- 通过 Options 你可以方便地订制 View 的各种属性, 可以精确的定位 view 的 padding 来控制边距
两种方式的运行效果图
效果对比.png
这样子能够满足你的需求吗? 别着急, 且看看场景三
场景三
场景描述
场景三.png
- 沉浸式状态栏
- 左边有个返回按钮
- 左边有个文本
- 右边有个选中框
这样子复杂的场景? 确定用 SToolbar 能够实现? 不巧, 还真能
实现方式
- 在 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: 默认状态
- 其他的属性在上面的场景中已经介绍过, 这里不再赘述
- 在代码中定义自定义的 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 查看源码
