主题

为了解决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的最大优势就是可以根据设计师的风格特点，定制出适合设计师的UI主题样式。你只需要根据下面我所列出的内容进行修改即可完成定制。这里我有一个简单的定制案例可供参考。

如何自定义

前面说过了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