为了解决UI组件在不同尺寸设备上的渲染问题,我特别定制了3种不同设备尺寸的主题:“手机”(4.5英寸),“小平板”(7英寸及以上,10英寸以下)和“大平板”(10英寸及以上)三种。

Theme

框架中UI主题由顶至低,目前可分为4层:XUIRootTheme、XUIBaseTheme、XUITheme和XUITheme.xxx。

  • XUIRootTheme

Theme的最顶层,由各个 API Level 自行决定继承自系统的哪个Theme。目前框架中选择继承的是Android5.0以上最常用的主题:“Theme.AppCompat.Light.NoActionBar”。

  • XUIBaseTheme

基础 Theme,继承XUIRootTheme,定义所有公用的 style。这里主要设置的是应用全局性的样式,包括:colorAccent、colorPrimary、colorPrimaryDark、android:textColorPrimary、windowNoTitle、selectableItemBackground、android:textViewStyle、android:listSelector、android:listDivider、android:gridViewStyle等

  • XUITheme

XUI框架的基础 Theme,继承XUIBaseTheme,可根据应用自身的特点自定义自己独特性全局性的Style。

  • XUITheme.xxx

框架默认提供的UI主题,继承XUITheme。可根据实际需求修改特定组件的主题样式。具体可分为大平板(XUITheme.Tablet.Big)、小平板(XUITheme.Tablet.Small)和手机(XUITheme.Phone)三种样式,其中大平板和小平板又共同继承了平板主题(XUITheme.Tablet)。

Theme表

框架默认提供了多种UI主题

  • XUITheme.Launch:启动页面的主题

  • XUITheme.Tablet:平板的主题

  • XUITheme.Tablet.Big:大平板的主题

  • XUITheme.Tablet.Small:小平板的主题

  • XUITheme.Phone:手机的主题

  • XUIDialog:基础对话框的主题

  • XUIDialog.Custom:自定义对话框的主题

Theme属性表

主题属性使用?attr/的方式进行引用。

全局属性

属性名类型默认值(手机/小平板/大平板)备注
xui_config_content_spacing_horizontaldimension12dp/16dp/20dp水平间距
xui_config_content_spacing_verticaldimension7.5dp/10dp/12dp垂直间距
xui_config_color_backgroundcolor#EEF3F7/#EAEDEF窗体的背景颜色
xui_config_color_separator_lightcolor#F0F2F4/#F0F2F4小的分割块使用浅色的分割线
xui_config_color_separator_darkcolor#E3E6EA/#D9DDE1大的分割块使用深色的分割线[像ListView、GridView之类]
xui_config_divider_heightdimension0.5dp/1dp条目的分割线高度
xui_config_separator_heightdimension1dp/2dp/3dp分割块分割线的高度

标题栏属性

属性名类型默认值(手机/小平板/大平板)备注
xui_actionbar_colorcolor#299EE3标题栏的背景颜色
xui_actionbar_heightdimension52dp/60dp/70dp标题栏的高度
xui_actionbar_title_text_sizedimension18sp/21sp/24sp标题文字的大小
xui_actionbar_action_text_sizedimension15sp/18sp/22sp标题栏两边Action文字的大小
xui_actionbar_sub_text_sizedimension12sp/14sp/16sp副标题文字的大小
xui_actionbar_action_paddingdimension5dp/6dp/7dp标题栏两边Action图片的内间距
xui_actionbar_side_text_paddingdimension14dp/16dp/18dp标题栏两边Action文字的内间距

按钮属性

属性名类型默认值(手机/小平板/大平板)备注
xui_round_btn_bg_colorcolor@color/xui_transparent圆角按钮的背景颜色
xui_round_btn_border_colorcolor@color/xui_default_round_btn_blue_border圆角按钮的边框颜色
xui_round_btn_text_colorcolor@color/xui_default_round_btn_blue_text圆角按钮的文字颜色
xui_btn_view_radiusdimension5dp/5dp/7dp按钮的圆角度数
xui_btn_view_widthdimension104dp/112dp/148dp按钮的宽度
xui_btn_view_heightdimension32dp/38dp/52dp按钮的高度
xui_btn_view_text_sizedimension13sp/16sp/21sp按钮的文字大小
xui_btn_view_border_widthdimension0.5dp/1dp/1dp按钮的边框宽度
xui_config_icon_drawable_paddingdimension7dp/9dp/12dp按钮图标的内间距

文字属性

属性名类型默认值(手机/小平板/大平板)备注
xui_config_size_title_textdimension18sp/21sp/24sp标题文字的大小
xui_config_size_content_textdimension15sp/18sp/22sp正文文字的大小
xui_config_size_explain_textdimension12sp/14sp/16sp辅助说明文字的大小
xui_config_color_title_textcolor#223B53标题文字的颜色
xui_config_color_content_textcolor#6A798E正文文字的颜色
xui_config_color_explain_textcolor#9FABBC辅助说明文字的颜色

输入框属性

属性名类型默认值(手机/小平板/大平板)备注
xui_config_size_edittext_input_textdimension13sp/15sp/20sp输入框文字的大小
xui_config_size_edittext_helper_textdimension8sp/9sp/12sp输入提示信息文字的大小
xui_config_size_edittext_components_spacingdimension7sp/8sp/10sp输入框上下直接的间距
xui_config_size_edittext_left_paddingdimension10dp/13dp/17dp输入框的左间距
xui_config_size_edittext_radiusdimension4dp/4dp/5dp输入框的圆角大小
xui_config_size_edittext_heightdimension30dp/30dp/40dp输入框的高度

pop弹出框属性

属性名类型默认值(手机/小平板/大平板)备注
xui_popup_bgreference@drawable/xui_popup_bg弹出窗的背景
xui_popup_arrow_downreference@drawable/xui_popup_arrow_down弹出窗向下的箭头
xui_popup_arrow_upreference@drawable/xui_popup_arrow_up弹出窗向上的箭头
xui_popup_arrow_up_margin_topdimension17dp弹出窗向上箭头距离顶部的高度
xui_popup_arrow_down_margin_bottomdimension17dp弹出窗向下箭头距离底部的高度
xui_popup_widthdimension133dp/174dp/232dp弹出窗的最大宽度

dialog属性

属性名类型默认值(手机/小平板/大平板)备注
xui_dialog_radius_sizedimension7dp/8dp/10dp对话框的圆角大小
xui_dialog_background_dim_amountfloat0.6对话框透明背景的灰度
xui_dialog_loading_padding_sizedimension26dp/30dp/40dploading对话框的内间距
xui_dialog_loading_min_sizedimension100dp/150dp/200dploading对话框的最小尺寸

loading加载属性

属性名类型默认值(手机/小平板/大平板)备注
xui_loading_view_sizedimension78dp/100dp/135dploading控件的尺寸
xui_loading_view_widthdimension4dp/5dp/6dploading环的宽度
xui_loading_margin_sizedimension6dp/10dp/14dploading控件的外间距
mini_loading_view_sizedimension20dp/30dp/40dp迷你loading控件的尺寸

如何自定义自己的主题

如何自定义

前面说过了XUI默认提供了四层主题,这里我们定义自己的主题主要是覆盖XUITheme主题。

  1. <!-- 拓展主题 theme. -->
  2. <style name="XUITheme" parent="XUIBaseTheme">
  3. <!--设置默认窗口的动画样式-->
  4. <item name="android:windowAnimationStyle">@style/WindowAnimStyle</item>
  5. <!--自定义标题栏样式方法1,通过自定义通用属性-->
  6. <item name="xui_actionbar_color">@color/app_color_theme_1</item>
  7. <item name="xui_actionbar_text_color">@color/xui_config_color_primary_text</item>
  8. <item name="xui_actionbar_immersive">true</item>
  9. <!--自定义标题栏样式方法2,通过自定义组件默认样式-->
  10. <item name="TitleBarStyle">@style/TitleBar.Custom</item>
  11. </style>
  12. <style name="TitleBar.Custom">
  13. <item name="tb_titleTextColor">@color/xui_config_color_primary_text</item>
  14. <item name="tb_immersive">true</item>
  15. </style>
  16. <style name="WindowAnimStyle" parent="@android:style/Animation">
  17. <item name="android:activityOpenEnterAnimation">@anim/xpage_slide_in_right</item>
  18. <item name="android:activityOpenExitAnimation">@anim/xpage_slide_out_left</item>
  19. <item name="android:activityCloseEnterAnimation">@anim/xpage_slide_in_left</item>
  20. <item name="android:activityCloseExitAnimation">@anim/xpage_slide_out_right</item>
  21. </style>

自定义基础主题属性

  • 通用颜色属性
属性名类型备注
colorAccentcolor应用控件默认和选中的主要色调
colorPrimarycolor应用的主要色调,actionBar默认使用该颜色,Toolbar导航栏的底色
colorPrimaryDarkcolor应用的主要暗色调,statusBarColor默认使用该颜色
colorControlNormalcolor应用控件未选中的色调
android:textColorPrimarycolor应用的主要文字颜色
xui_config_color_title_textcolor标题文字的颜色
xui_config_color_content_textcolor正文文字的颜色
xui_config_color_explain_textcolor辅助说明文字的颜色
xui_config_color_error_textcolor出错文字的颜色
xui_config_color_input_textcolor输入文字的颜色
xui_config_color_hint_textcolor提示文字的颜色
xui_config_color_strokecolor应用边框的颜色
xui_config_color_disablecolor应用不可点击的颜色
xui_config_color_pressedcolor应用点击后的颜色
xui_config_color_backgroundcolor应用默认的背景颜色
xui_config_color_separator_lightcolor小的分割块使用浅色的分割线
xui_config_color_separator_darkcolor大的分割块使用深色的分割线[像ListView、GridView之类]
  • 通用尺寸属性
属性名类型备注
xui_config_content_spacing_horizontaldimensionmargin 和 padding 等使用的内容通用水平间距
xui_config_content_spacing_verticaldimensionmargin 和 padding 等使用的内容通用垂直间距
xui_alpha_presseddimension控件点击时的透明度
xui_alpha_disableddimension控件不可点击时的透明度
xui_config_divider_heightdimension分隔线的高度
xui_config_separator_heightdimension分割线的高度
xui_config_size_title_textdimension标题文字的颜色
xui_config_size_content_textdimension正文文字的颜色
xui_config_size_explain_textdimension解释说明文字的颜色
xui_btn_view_radiusdimension按钮通用的圆角大小
xui_btn_view_widthdimension按钮通用的宽度
xui_btn_view_heightdimension按钮通用的高度
xui_btn_view_text_sizedimension按钮通用的文字大小
xui_btn_view_border_widthdimension按钮边框通用的宽度
xui_config_size_spinner_textdimension下拉框文字的大小
xui_dialog_radius_sizedimension通用弹窗的圆角大小
xui_dialog_background_dim_amountdimension通用弹窗背景阴影的透明度

自定义通用组件的默认主题样式

  • 标题栏属性
属性名类型备注
xui_actionbar_colorcolor标题栏的背景颜色
xui_actionbar_text_colorcolor标题栏文字的颜色
xui_actionbar_immersiveboolean是否支持沉浸式标题栏
xui_actionbar_ic_navigation_backreference标题栏返回箭头图标
xui_actionbar_heightdimension标题栏的高度
xui_actionbar_title_text_sizedimension标题栏标题文字的大小
xui_actionbar_sub_text_sizedimension标题栏副标题文字的大小
xui_actionbar_action_text_sizedimension标题栏动作文字的大小
xui_actionbar_action_paddingdimension标题栏动作图片的padding
xui_actionbar_side_text_paddingdimension标题栏两侧文字的padding
  • 通用组件样式属性
属性名类型备注
TitleBarStylereference标题栏组件TitleBar
XUIGroupListViewStylereference通用列表组控件XUIGroupListView
XUICommonListItemViewStylereference通用列表项控件XUICommonListItemView
XUIGroupListSectionViewStylereference通用列表头尾控件XUIGroupListSectionHeaderFooterView
MiniLoadingStylereference迷你加载控件MiniLoadingView
RulerViewStylereference刻度尺控件RulerView
RadiusImageViewStylereference提供图片添加圆角、边框、剪裁到圆形或其他形状等功能的RadiusImageView
TabSegmentStylereference选项卡组件TabSegment
VerifyCodeEditTextStylereference验证码输入框VerifyCodeEditText
HorizontalProgressViewStylereference水平进度条HorizontalProgressView
CircleProgressViewStylereference环形进度条CircleProgressView
ClearEditTextStylereference可清空输入的输入框ClearEditText
PasswordEditTextStylereference可显示隐藏密码的输入框PasswordEditText
MaterialEditTextStylereferenceMaterial Design风格的输入框MaterialEditText
ValidatorEditTextStylereference可以自动校验的输入框ValidatorEditText
MultiLineEditTextStylereference多行计数输入框MultiLineEditText
EasyIndicatorStylereference简单索引控件EasyIndicator
MultipleStatusViewStylereference多状态布局控件MultipleStatusView
StatusViewStylereference状态控件StatusView
CountDownButtonStylereference倒计时按钮CountDownButton
AutoFitTextViewStylereference自适应文字大小的组件AutoFitTextView
RippleViewStylereference点击水波效果
的组件RippleView
BannerLayoutStylereference使用RecyclerView实现Banner的BannerLayout