当前位置:首页 > 大杂烩 > 正文内容

小米MIUI10官方主题编辑框架代码(搬运)

单车少年6年前 (2018-11-15)大杂烩15314

MIUI10更新后,通知栏的样式变化较大,对于旧主题适配MIUI10仍然有很多同学找不到资源问题。
首先,miui10通知栏部分相对于旧版本是完全重构了框架,并且针对于可以代码实现的部分,甚至一些图片资源,都已使用xml文件代替,所以这会导致大家常常找不到资源。
以下仅供参考。(有部分资源在最新稳定版还无法生效,请大家等待系统更新)
更基础的教程请点击这里:基础教程
一、通知栏主界面(模块归属:systemui)
颜色值
时间颜色:status_bar_expanded_weather
「滑动指示符」颜色值:qs_panel_expand_indicator_color
「清理按钮」背景颜色:notification_clear_all_bg_color


切图资源
大背景:notification_panel_window_bg.9.png
左上角功能icon:notch_quicksearch_n.png
                         notch_quicksearch_p.png
                         notch_enter_edit_mode_n.png
                         notch_enter_edit_mode_p.png
                         notch_settings_n.png
                         notch_settings_p.png

电池切图:(切图放置目录:com.android.systemui/res/raw-xxhdpi)
                   stat_sys_battery.png(等12张)使用在不同界面

「清理按钮」背景图:notification_clear_all_bg_color
「清理按钮」内部icon:notifications_clear_all.png



布尔值
状态栏颜色:expanded_status_bar_darkmode(改为true即可使用深色状态栏)


尺寸值
亮度条与通知列表间距:qs_panel_expand_indicator_height
「滑动指示符」粗细:qs_panel_expand_indicator_stroke_width
(如下图)


二、开关面板(模块归属:systemui)
颜色值
开关背板颜色:qs_panel_background_color
开关「关闭状态」背景色:qs_tile_icon_bg_disabled_color
开关「开启状态」背景色:qs_tile_icon_bg_enabled_color
开关「开启状态」描边色:qs_tile_icon_border_color
开关「关闭状态」icon颜色:qs_tile_icon_disabled_color
开关「开启状态」icon颜色:qs_tile_icon_enabled_color
开关名称字体颜色:qs_tile_label_text_color
「 移动数据 」无卡状态文字颜色:qs_tile_label_text_color_secondary
流量监测数据文字颜色:qs_footer_data_usage_text_color
流量数据与开关icon中间分割线(编辑页内部分割线):qs_divider_color
编辑页 顶部标题文字颜色(两行):qs_customize_title_text_color
编辑页 候选区开关背景色:qs_customize_content_background_color
编辑开关时,第三方开关app名称文字颜色:qs_tile_app_label_text_color
翻页提示符颜色:qs_page_indicator_dot_color



切图资源
开关背板图:panel_round_corner_bg.9.png
开关编辑页背板图:qs_customizer_bg.9.png
二级页背板图:qs_detail_bg.9.png
开关「关闭状态」背景图:ic_qs_bg_disabled.png
开关「开启状态」背景图:ic_qs_bg_enabled.png
*(此处改图or颜色值均可)
流量数据icon(见安全中心)
蓝牙orWLAN右下箭头:expand_indicator.png

设置icon:ic_settings.png
设为不重要icon:ic_filter.png
设为重要icon:ic_remove_from_filter.png



尺寸值
开关&通知列表圆角:notification_stack_scroller_bg_radius


(如下图)



三、通知列表(模块归属:systemui or framework-res)


颜色值
通知列表大背景:notification_panel_background
左滑通知「 设置 」背景颜色:notification_guts_bg_color
不重要通知分割线颜色:fold_dividing_line_color
通知页「不重要通知」文字颜色:fold_footer_text_color
不重要通知展开页title文字颜色:fold_header_text_color
左滑后设置项文字颜色:notification_setting_button_color
组通知「气泡」文字颜色:notification_overflow_number_color

(以下颜色值 模块归属:framework-res)
通知list主要字颜色:statusbar_content_title
通知list次要字颜色:statusbar_content
通知信息「时间」字颜色:notification_time_color
通知右侧按钮文字颜色:notification_miui_action_text_color_n(常态)
                                   notification_miui_action_text_color_p(按下态)

通知进度条背景色:notification_progress_horizontal_bg_color
通知进度条进度色:notification_progress_horizontal_progress_color



切图资源
通知列表大背景:notification_panel_bg.9.png(改颜色值可生效)
单条通知常态背景:notification_item_bg_n.9.png
单条通知按下态背景:notification_item_bg_p.9.png
单条展开后背景常态:notification_item_expanded_bg_n.9.png(音乐背景)
单条展开后背景按下态:notification_item_expanded_bg_p.9.png
通知二级展开背景常态:notification_item_expanded_children_bg_n.9.png
通知二级展开背景常态:notification_item_expanded_children_bg_p.9.png
不重要通知右侧箭头:right_arrow.png
不重要通知页_右侧「通知过滤」icon:user_fold_tips.png

(以下图片资源 模块归属:framework-res)
通知右侧按钮背景:notification_miui_action_bg.9.png(做此图时如下2张图不生效)
                             notification_miui_action_bg_n.9.png(常态)
                             notification_miui_action_bg_p.9.png(按下态)
通知右侧收起箭头:notification_up_arrow.png
数量提示按钮:notification_group_overflow_number_bg.9.png

(如下图)



四、亮度条&多媒体通知(模块归属:systemui or framework-miui-res)
颜色值
亮度板背景色:qs_brightness_background_color
亮度板进度颜色:qs_brightness_progress_color

「 播放、暂停等5个图标 」颜色:notification_media_action_color
多媒体通知分割线颜色:notification_expanded_bg_divider_color
多媒体通知大背景颜色:notification_expanded_bg_color

通知左侧mini_icon颜色:notification_mini_view_icon_tint_color
(以下颜色值模块归属:framework-res)
多媒体通知 app名称颜色:media_notification_app_name_text_color
歌名文字颜色:statusbar_content(同通知主要字)
歌名文字颜色:statusbar_content(同通知次要字)
底部按钮处背景色:media_notification_actions_bg_color



切图资源
亮度icon:ic_brightness_low.png(最弱)
                   ic_brightness_high.png(最亮)
亮度背景:brightness_toogle_bg.9.png(暂不生效)
亮度板进度:brightness_toogle_progress_bg.9.png(暂不生效)
亮度滑块:brightness_toggle_thumb.png(当滑块在最右侧or最左侧时,只能显示一半,因此该资源左右需要留出和图片等宽的留白,
width = png_width * 3
*(此处改图or颜色值均可,建议改颜色)
(如下图)



五、通知栏二级页面(模块归属:systemui or framework-miui-res)
颜色值
「无线网络」or「蓝牙」标题文字颜色:qs_detail_title_text_color
二级页内容区背景色:qs_detail_content_background_color
无线网络or蓝牙列表主要字:qs_detail_item_primary_text_color
无线网络wlan「已连接」字体颜色:qs_detail_item_secondary_text_color
底部按钮文字颜色:qs_detail_buttons_text_color

(以下颜色值 模块归属:framework-miui-res)
开关为全局控件(可改png资源,改颜色值也可以)
滑动开关开启状态背景色:accent color light
滑动开关关闭状态背景色:sliding button bar off light 

*(开关资源可能出现重启生效问题,不建议大家修改)


切图资源
背板图:qs_detail_bg.9.png
列表icon:ic_qs_wifi_full_4.png(wifi)
                   ic_qs_wifi_lock.png(锁)
                   ic_qs_wifi_lock.png(锁)



(如下图)



六、悬浮窗&虚拟按键(模块归属:systemui or framework-res)
颜色值
悬浮窗背景色:notification_heads_up_bg_color(改图也可以)
来电主要字颜色:notification_in_call_caller_name_color(旧版暂不生效,需要升级最新开发版)
来电次要字颜色:notification_in_call_caller_info_color
横屏悬浮通知单条文字颜色:optimized_heads_up_notification_text

「回复」文字颜色:optimized_heads_up_notification_action_text
(以下颜色值 模块归属:framework-res)
通知右侧按钮文字颜色:notification_miui_action_text_color_n(常态)
                                   notification_miui_action_text_color_p(按下态)



切图资源
悬浮窗背景:notification_heads_up_bg.9.png(改颜色值也可以)
接听电话icon:answer_icon.png
拒接电话icon:end_call_icon.png

横屏信息时出现
右侧按钮背景常态:optimized_heads_up_notification_action_button_bg_n
右侧按钮背景按下态:optimized_heads_up_notification_action_button_bg_p 

虚拟键切图:前缀为ic_sysbar的系列切图

(以下图片资源 模块归属:framework-res)
通知右侧按钮背景:notification_miui_action_bg.9.png(做此图时如下2张图不生效)
                                   notification_miui_action_bg_n.9.png(常态)
                                   notification_miui_action_bg_p.9.png(按下态)



(如下图)



七、多任务&分屏(模块归属:systemui )


颜色值
「分屏模式」文字颜色: recents_dock_btn_text_color
分屏提示字颜色:recents_dock_area_text_color
分屏提示字投影颜色:recents_dock_area_text_shadow_color
分屏拖动背景颜色:recents_dock_area_overlay 

缩略图标题字体:   task_manager_text
长按任务-大背景颜色值:recent_menu_mask_color
功能键背景(支持图片修改):recent_menu_bg_color(背景色)
                                             recent_menu_bg_pressed_color(按下态颜色)

切图资源
分屏icon:   ic_recents_dock_btn_n.png
                ic_recents_dock_btn_p.png

大背景:  recent_task_bg.9.png
功能键背景图:  recent_menu_bg.png(部分常态、按下态)
                      recent_menu_bg_normal.png(常态)
                      recent_menu_bg_press.png(按下态)

功能icon: ic_task_lock.png
                   ic_task_multi.png
                   ic_task_setting.png
                   ic_task_unlock.png

清理icon背景:  btn_clear_all.png(与通知栏清理icon一致)
清理icon: notifications_clear_all.png
清理完成:recent_clear_button_tick.png



(如下图)



八、长截屏界面(模块归属:systemui )
颜色值
顶栏背景:   screenshot_ui_bg
「反馈」文字颜色:  screenshot_lighttheme_text_color
分割线(上、下、截图描边):    screenshot_part_divider_color
长截屏时-文字颜色:screenshot_lighttheme_text_color
长截屏时-顶部背景色:screenshot_top_msg_bg



切图资源
「反馈」button 背景:  bugreport_btn_bg_normal.9.png
                                  bugreport_btn_bg_pressed.9.png

返回icon:  action_bar_back_normal_light.png
               action_bar_back_pressed_light.png

截长屏icon:    action_button_long_screenshot_normal_light.png
                     action_button_long_screenshot_pressed_light.png
                     action_button_long_screenshot_disable_light.png



大背景:    window_bg_secondary_light.9.png(模块归属:framework-miui-res)
底部「结束截长屏」button背景:按钮背景:screenshot_btn_bg_normal.9.png
                                                               screenshot_btn_bg_pressed.9.png


(如下图)




好啦,今天就介绍这么多啦。大家还有什么找不到的颜色值可以留言或者加入我们的主题编辑器用户反馈群哟。
以上所有颜色值注释信息会在近期更新至编辑器,不需要更新,只要联网同步就好咯。
相关的图片资源,我们将在下次编辑器更新时一同附上。
界面制作不难哟。加油吧!

转自MIUI论坛

链接:http://www.miui.com/thread-19504342-1-1.html

打赏
收藏
点赞

「 欢迎使用微信小程序访问该文章 」


扫描二维码推送至手机访问。

版权声明:本文由小杨生活志发布,如需转载请注明出处。

本文链接:https://www.yanghuaxing.com/blog/79.html

标签: MIUI
分享给朋友:

评论列表

sherry
sherry 来自:广西贵港市
4年前 (2020-03-12)

请问通过什么样的方法修改上面的参数

单车少年 回复:
解压主题文件,找到里面相应的代码
4年前 (2020-03-13)
sherry 回复:
我是小米手机4C的用户,我的系统是MIUI10.1.1.0我想更改我的悬浮通知的阴影,请问如何实现。因为现在的阴影表现非常的不满意,肉眼可见的难看,最好能取得博主您的电报,方便发图片!
4年前 (2020-03-13)

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。