为了解决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主题。
@style/WindowAnimStyle
@color/app_color_theme_1
@color/xui_config_color_primary_text
true
@style/TitleBar.Custom
@color/xui_config_color_primary_text
true
@anim/xpage_slide_in_right
@anim/xpage_slide_out_left
@anim/xpage_slide_in_left
@anim/xpage_slide_out_right
自定义基础主题属性通用颜色属性
属性名类型备注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