为了解决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_horizontal | dimension | 12dp/16dp/20dp | 水平间距 |
xui_config_content_spacing_vertical | dimension | 7.5dp/10dp/12dp | 垂直间距 |
xui_config_color_background | color | #EEF3F7/#EAEDEF | 窗体的背景颜色 |
xui_config_color_separator_light | color | #F0F2F4/#F0F2F4 | 小的分割块使用浅色的分割线 |
xui_config_color_separator_dark | color | #E3E6EA/#D9DDE1 | 大的分割块使用深色的分割线[像ListView、GridView之类] |
xui_config_divider_height | dimension | 0.5dp/1dp | 条目的分割线高度 |
xui_config_separator_height | dimension | 1dp/2dp/3dp | 分割块分割线的高度 |
标题栏属性
属性名 | 类型 | 默认值(手机/小平板/大平板) | 备注 |
---|---|---|---|
xui_actionbar_color | color | #299EE3 | 标题栏的背景颜色 |
xui_actionbar_height | dimension | 52dp/60dp/70dp | 标题栏的高度 |
xui_actionbar_title_text_size | dimension | 18sp/21sp/24sp | 标题文字的大小 |
xui_actionbar_action_text_size | dimension | 15sp/18sp/22sp | 标题栏两边Action文字的大小 |
xui_actionbar_sub_text_size | dimension | 12sp/14sp/16sp | 副标题文字的大小 |
xui_actionbar_action_padding | dimension | 5dp/6dp/7dp | 标题栏两边Action图片的内间距 |
xui_actionbar_side_text_padding | dimension | 14dp/16dp/18dp | 标题栏两边Action文字的内间距 |
按钮属性
属性名 | 类型 | 默认值(手机/小平板/大平板) | 备注 |
---|---|---|---|
xui_round_btn_bg_color | color | @color/xui_transparent | 圆角按钮的背景颜色 |
xui_round_btn_border_color | color | @color/xui_default_round_btn_blue_border | 圆角按钮的边框颜色 |
xui_round_btn_text_color | color | @color/xui_default_round_btn_blue_text | 圆角按钮的文字颜色 |
xui_btn_view_radius | dimension | 5dp/5dp/7dp | 按钮的圆角度数 |
xui_btn_view_width | dimension | 104dp/112dp/148dp | 按钮的宽度 |
xui_btn_view_height | dimension | 32dp/38dp/52dp | 按钮的高度 |
xui_btn_view_text_size | dimension | 13sp/16sp/21sp | 按钮的文字大小 |
xui_btn_view_border_width | dimension | 0.5dp/1dp/1dp | 按钮的边框宽度 |
xui_config_icon_drawable_padding | dimension | 7dp/9dp/12dp | 按钮图标的内间距 |
文字属性
属性名 | 类型 | 默认值(手机/小平板/大平板) | 备注 |
---|---|---|---|
xui_config_size_title_text | dimension | 18sp/21sp/24sp | 标题文字的大小 |
xui_config_size_content_text | dimension | 15sp/18sp/22sp | 正文文字的大小 |
xui_config_size_explain_text | dimension | 12sp/14sp/16sp | 辅助说明文字的大小 |
xui_config_color_title_text | color | #223B53 | 标题文字的颜色 |
xui_config_color_content_text | color | #6A798E | 正文文字的颜色 |
xui_config_color_explain_text | color | #9FABBC | 辅助说明文字的颜色 |
输入框属性
属性名 | 类型 | 默认值(手机/小平板/大平板) | 备注 |
---|---|---|---|
xui_config_size_edittext_input_text | dimension | 13sp/15sp/20sp | 输入框文字的大小 |
xui_config_size_edittext_helper_text | dimension | 8sp/9sp/12sp | 输入提示信息文字的大小 |
xui_config_size_edittext_components_spacing | dimension | 7sp/8sp/10sp | 输入框上下直接的间距 |
xui_config_size_edittext_left_padding | dimension | 10dp/13dp/17dp | 输入框的左间距 |
xui_config_size_edittext_radius | dimension | 4dp/4dp/5dp | 输入框的圆角大小 |
xui_config_size_edittext_height | dimension | 30dp/30dp/40dp | 输入框的高度 |
pop弹出框属性
属性名 | 类型 | 默认值(手机/小平板/大平板) | 备注 |
---|---|---|---|
xui_popup_bg | reference | @drawable/xui_popup_bg | 弹出窗的背景 |
xui_popup_arrow_down | reference | @drawable/xui_popup_arrow_down | 弹出窗向下的箭头 |
xui_popup_arrow_up | reference | @drawable/xui_popup_arrow_up | 弹出窗向上的箭头 |
xui_popup_arrow_up_margin_top | dimension | 17dp | 弹出窗向上箭头距离顶部的高度 |
xui_popup_arrow_down_margin_bottom | dimension | 17dp | 弹出窗向下箭头距离底部的高度 |
xui_popup_width | dimension | 133dp/174dp/232dp | 弹出窗的最大宽度 |
dialog属性
属性名 | 类型 | 默认值(手机/小平板/大平板) | 备注 |
---|---|---|---|
xui_dialog_radius_size | dimension | 7dp/8dp/10dp | 对话框的圆角大小 |
xui_dialog_background_dim_amount | float | 0.6 | 对话框透明背景的灰度 |
xui_dialog_loading_padding_size | dimension | 26dp/30dp/40dp | loading对话框的内间距 |
xui_dialog_loading_min_size | dimension | 100dp/150dp/200dp | loading对话框的最小尺寸 |
loading加载属性
属性名 | 类型 | 默认值(手机/小平板/大平板) | 备注 |
---|---|---|---|
xui_loading_view_size | dimension | 78dp/100dp/135dp | loading控件的尺寸 |
xui_loading_view_width | dimension | 4dp/5dp/6dp | loading环的宽度 |
xui_loading_margin_size | dimension | 6dp/10dp/14dp | loading控件的外间距 |
mini_loading_view_size | dimension | 20dp/30dp/40dp | 迷你loading控件的尺寸 |
如何自定义自己的主题
如何自定义
前面说过了XUI默认提供了四层主题,这里我们定义自己的主题主要是覆盖XUITheme
主题。
<!-- 拓展主题 theme. -->
<style name="XUITheme" parent="XUIBaseTheme">
<!--设置默认窗口的动画样式-->
<item name="android:windowAnimationStyle">@style/WindowAnimStyle</item>
<!--自定义标题栏样式方法1,通过自定义通用属性-->
<item name="xui_actionbar_color">@color/app_color_theme_1</item>
<item name="xui_actionbar_text_color">@color/xui_config_color_primary_text</item>
<item name="xui_actionbar_immersive">true</item>
<!--自定义标题栏样式方法2,通过自定义组件默认样式-->
<item name="TitleBarStyle">@style/TitleBar.Custom</item>
</style>
<style name="TitleBar.Custom">
<item name="tb_titleTextColor">@color/xui_config_color_primary_text</item>
<item name="tb_immersive">true</item>
</style>
<style name="WindowAnimStyle" parent="@android:style/Animation">
<item name="android:activityOpenEnterAnimation">@anim/xpage_slide_in_right</item>
<item name="android:activityOpenExitAnimation">@anim/xpage_slide_out_left</item>
<item name="android:activityCloseEnterAnimation">@anim/xpage_slide_in_left</item>
<item name="android:activityCloseExitAnimation">@anim/xpage_slide_out_right</item>
</style>
自定义基础主题属性
- 通用颜色属性
属性名 | 类型 | 备注 |
---|---|---|
colorAccent | color | 应用控件默认和选中的主要色调 |
colorPrimary | color | 应用的主要色调,actionBar默认使用该颜色,Toolbar导航栏的底色 |
colorPrimaryDark | color | 应用的主要暗色调,statusBarColor默认使用该颜色 |
colorControlNormal | color | 应用控件未选中的色调 |
android:textColorPrimary | color | 应用的主要文字颜色 |
xui_config_color_title_text | color | 标题文字的颜色 |
xui_config_color_content_text | color | 正文文字的颜色 |
xui_config_color_explain_text | color | 辅助说明文字的颜色 |
xui_config_color_error_text | color | 出错文字的颜色 |
xui_config_color_input_text | color | 输入文字的颜色 |
xui_config_color_hint_text | color | 提示文字的颜色 |
xui_config_color_stroke | color | 应用边框的颜色 |
xui_config_color_disable | color | 应用不可点击的颜色 |
xui_config_color_pressed | color | 应用点击后的颜色 |
xui_config_color_background | color | 应用默认的背景颜色 |
xui_config_color_separator_light | color | 小的分割块使用浅色的分割线 |
xui_config_color_separator_dark | color | 大的分割块使用深色的分割线[像ListView、GridView之类] |
- 通用尺寸属性
属性名 | 类型 | 备注 |
---|---|---|
xui_config_content_spacing_horizontal | dimension | margin 和 padding 等使用的内容通用水平间距 |
xui_config_content_spacing_vertical | dimension | margin 和 padding 等使用的内容通用垂直间距 |
xui_alpha_pressed | dimension | 控件点击时的透明度 |
xui_alpha_disabled | dimension | 控件不可点击时的透明度 |
xui_config_divider_height | dimension | 分隔线的高度 |
xui_config_separator_height | dimension | 分割线的高度 |
xui_config_size_title_text | dimension | 标题文字的颜色 |
xui_config_size_content_text | dimension | 正文文字的颜色 |
xui_config_size_explain_text | dimension | 解释说明文字的颜色 |
xui_btn_view_radius | dimension | 按钮通用的圆角大小 |
xui_btn_view_width | dimension | 按钮通用的宽度 |
xui_btn_view_height | dimension | 按钮通用的高度 |
xui_btn_view_text_size | dimension | 按钮通用的文字大小 |
xui_btn_view_border_width | dimension | 按钮边框通用的宽度 |
xui_config_size_spinner_text | dimension | 下拉框文字的大小 |
xui_dialog_radius_size | dimension | 通用弹窗的圆角大小 |
xui_dialog_background_dim_amount | dimension | 通用弹窗背景阴影的透明度 |
自定义通用组件的默认主题样式
- 标题栏属性
属性名 | 类型 | 备注 |
---|---|---|
xui_actionbar_color | color | 标题栏的背景颜色 |
xui_actionbar_text_color | color | 标题栏文字的颜色 |
xui_actionbar_immersive | boolean | 是否支持沉浸式标题栏 |
xui_actionbar_ic_navigation_back | reference | 标题栏返回箭头图标 |
xui_actionbar_height | dimension | 标题栏的高度 |
xui_actionbar_title_text_size | dimension | 标题栏标题文字的大小 |
xui_actionbar_sub_text_size | dimension | 标题栏副标题文字的大小 |
xui_actionbar_action_text_size | dimension | 标题栏动作文字的大小 |
xui_actionbar_action_padding | dimension | 标题栏动作图片的padding |
xui_actionbar_side_text_padding | dimension | 标题栏两侧文字的padding |
- 通用组件样式属性
属性名 | 类型 | 备注 |
---|---|---|
TitleBarStyle | reference | 标题栏组件TitleBar |
XUIGroupListViewStyle | reference | 通用列表组控件XUIGroupListView |
XUICommonListItemViewStyle | reference | 通用列表项控件XUICommonListItemView |
XUIGroupListSectionViewStyle | reference | 通用列表头尾控件XUIGroupListSectionHeaderFooterView |
MiniLoadingStyle | reference | 迷你加载控件MiniLoadingView |
RulerViewStyle | reference | 刻度尺控件RulerView |
RadiusImageViewStyle | reference | 提供图片添加圆角、边框、剪裁到圆形或其他形状等功能的RadiusImageView |
TabSegmentStyle | reference | 选项卡组件TabSegment |
VerifyCodeEditTextStyle | reference | 验证码输入框VerifyCodeEditText |
HorizontalProgressViewStyle | reference | 水平进度条HorizontalProgressView |
CircleProgressViewStyle | reference | 环形进度条CircleProgressView |
ClearEditTextStyle | reference | 可清空输入的输入框ClearEditText |
PasswordEditTextStyle | reference | 可显示隐藏密码的输入框PasswordEditText |
MaterialEditTextStyle | reference | Material Design风格的输入框MaterialEditText |
ValidatorEditTextStyle | reference | 可以自动校验的输入框ValidatorEditText |
MultiLineEditTextStyle | reference | 多行计数输入框MultiLineEditText |
EasyIndicatorStyle | reference | 简单索引控件EasyIndicator |
MultipleStatusViewStyle | reference | 多状态布局控件MultipleStatusView |
StatusViewStyle | reference | 状态控件StatusView |
CountDownButtonStyle | reference | 倒计时按钮CountDownButton |
AutoFitTextViewStyle | reference | 自适应文字大小的组件AutoFitTextView |
RippleViewStyle | reference | 点击水波效果 的组件RippleView |
BannerLayoutStyle | reference | 使用RecyclerView实现Banner的BannerLayout |