QMUITopBar

QMUITopBar 可作为 App 通用的顶部 Bar，提供了以下功能：

1. 在左侧/右侧添加图片按钮/文字按钮/自定义View。
2. 设置标题/副标题，且支持设置标题/副标题的水平对齐方式。

效果图

xml 属性

属性名	描述
qmui_topbar_title_gravity	标题的水平对齐方式
qmui_topbar_need_separator	是否需要底部分隔线
qmui_topbar_separator_color	底部分隔线的颜色
qmui_topbar_separator_height	底部分隔线的高度
qmui_topbar_bg_color	背景色
qmui_topbar_left_back_drawable_id	左侧返回按钮的图片 drawableResId
qmui_topbar_title_text_size	标题的字号大小
qmui_topbar_title_text_size_with_subtitle	存在副标题时的标题字号大小
qmui_topbar_subtitle_text_size	副标题字号大小
qmui_topbar_title_color	标题文字颜色
qmui_topbar_subtitle_color	副标题文字颜色
qmui_topbar_title_margin_horizontal_when_no_btn_aside	标题左右无按钮时标题与 TopBar 左右边缘的距离
qmui_topbar_title_container_padding_horizontal	标题左右的内间距(长标题时可见效果)
qmui_topbar_image_btn_width	左右图片按钮的宽度
qmui_topbar_image_btn_height	左右图片按钮的高度
qmui_topbar_text_btn_padding_horizontal	左右文字按钮的水平内间距(文字按钮的宽度由文字宽度+该左右padding决定)
qmui_topbar_text_btn_color_state_list	左右文字按钮的颜色
qmui_topbar_text_btn_text_size	左右文字按钮的字号大小

各个属性的默认样式配置见 qmui_style_widget.xml

全局配置组件样式的示例

<!-- 在 App 的 theme 中添加 -->
<item name="QMUITopBarStyle">@style/YourTopBarStyle</item>

<!-- 并添加自己的 style -->
<style name="YourTopBarStyle" parent="QMUI.TopBar">
    <item name="qmui_topbar_bg_color">#FFFFFF</item>
</style>

主要方法

方法名	描述
addLeftBackImageButton()	在 TopBar 左边添加一个返回图标按钮，返回图标图片由 xml 属性 qmui_topbar_left_back_drawable_id 指定
addLeftImageButton(int drawableResId, int viewId)、addRightImageButton(int drawableResId, int viewId)	根据 resourceId 在 TopBar 左右添加一个图片按钮
addLeftTextButton(int stringResId, int viewId)、addRightTextButton(int stringResId, int viewId)	在 TopBar 左右添加一个文字按钮
addLeftView(View view, int viewId, LayoutParams layoutParams)、addRightView(View view, int viewId, LayoutParams layoutParams)	在 TopBar 左右添加自定义 View。如果是图片按钮或文字按钮,可通过 generateTopBarImageButtonLayoutParams() 和 generateTopBarTextButtonLayoutParams() 方法创建 LayoutParams
setTitle(int resId) 、setTitle(String title)	设置标题文字
setSubTitle(int resId)、setSubTitle(String subTitle)	设置副标题文字
setTitleGravity(int gravity)	设置标题、副标题的对齐方式
showTitleView(boolean toShow)	切换标题、副标题的显示/隐藏
setCenterView(View view)	设置自定义 View 到 TopBar 中间
removeAllLeftViews()、removeAllRightViews()	移除 TopBar 左右所有的 View
removeCenterViewAndTitleView()	移除 TopBar 的 centerView 和 titleView
setBackgroundAlpha(int alpha)	设置背景透明度(包括分割线，因为分割线依附于背景 Drawable)
setBackgroundDividerEnabled(boolean enabled)	设置底部分隔线的显示/隐藏
computeAndSetBackgroundAlpha(int currentOffset, int alphaBeginOffset, int alphaTargetOffset)	根据传入的三个值(当前值、初始值、最终值)计算决定 TopBar 的背景透明度

相关类

• QMUITopBarLayout