Skip to content

QMUITopBar

chanthuang edited this page Feb 15, 2019 · 2 revisions

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 的背景透明度

相关类

You can’t perform that action at this time.