MIUI论坛 下载APP

MIUI开发组

Rank: 8Rank: 8

积分
10677
机型
未知设备
签到次数
195
MIUI版本
8.9.28
私信

2018新年勋章1000万用户纪念勋章MIUI 100周

[制作教程] 【图片教程】MIUI主题制作教程帖(10.11.18更新)

   关闭 [复制链接]
1224219 2162 |
2010-11-18 21:28 | 来自PC
| |
|
跳转
本帖最后由 foxtail 于 2012-6-13 17:34 编辑

========================广而告之=====================================
新手入门必看:
主题制作教程在线帮助文档

主题编辑工具(PC端)
===================================================================

更新至MIUI 1.6.3以上版本

经过这几个月以来MIUI的不断更新,我们深切体会到大家在UI方面的喜好,差异很大。另一方面,限于开发组紧张的人力资源,MIUI不能在短时间内把UI的方方面面做到完美。因此,按照MIUI最初成立时的理念,让大家参与打造更好玩的ROM,我们决定推出真正的主题自定义功能。我们的最终目标是让小白和达人都能玩出各自的精彩!接下来,我将会由浅入深的向大家介绍自定义主题的玩法,看大家能玩到第几级。

Level 1:什么是MIUI自定义主题

首先,我们手机的UI是由很多部分组成的,如锁屏、通知栏、桌面壁纸、图标等等。如果我们把手机比喻成一个房子,上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。那我们可以认为原生的android系统就是一个毛坯房,MIUI是在这之上的一个简装,自定义主题就是你自己给房子做的装修。


MIUI提供主题自定义功能,其实就相当于帮你请了一个工程队,你可以用从众多装修方案(主题包)中选择自己喜欢的效果,最后交给工程队实施。而装修方案可大可小,大至全屋翻新,小到只换一盏灯。目前MIUI会自带两个主题包,达人们也可以设计自己的主题包,大家就可以借用达人们共享出来的设计。

主题制作截屏1-1.png
主题界面


Level 3:管理主题包

目前,为了节省ROM内置的存储空间,主题包放在存储卡里。所以当手机没有存储卡或在U盘模式下,是不能搭配新主题的。

查看主题包
在列表中,我们可以直接看到主题包的名称、作者、日期以及缩略图。点击某个主题包,在弹出的界面中左右滑动,就能看到该主题包的更多效果预览。有了这些信息,我们就可以初步判断添加该主题包后的效果。

添加新主题包
有两种方法可以把新主题包加到可选列表。
方法1:先从网上下载,或从电脑复制主题包到手机任意位置,然后进入主题界面,点击菜单见(menu),选择“从SD卡导入主题包”,在弹出的文件浏览界面里找到主题包并选择。
方法2:直接把主题包放到/sdcard/MIUI/theme目录下,其实通过方法1添加的主题包最后也会被移到该目录。

删除主题包
与添加主题包类似,同样也有简单和高级的方法来删除主题包。
方法1:进入主题界面,点击想要删除的主题包,进入详细页面,点删除按钮即可。
方法2:用文件浏览器,到/sdcard/MIUI/theme目录下,直接删除主题包文件。
注意:系统自带的主题包不支持删除!

主题制作截屏2-2.png
主题详细界面

================================================
按传统,附上AC大神提供的背景音乐: 魔术先生
希望大家的主题千变万化,每人都是魔术大师!
================================================
你举手你抬头
你说我选我选我
手上锁又挣脱
你仍一脸迷惑
吹个风手一松
那硬币竟失踪
一鞠躬那掌声拍得凶

手交错轻轻碰
戒指换手移动
给观众一个梦
讶异中有笑容
手穿海报却不拿汉堡
反而拿出牛仔帽
你永远都猜不着

每当我在台上演出人体漂浮
你就在台下偷偷吃我的泡芙
等待白鸽飞出
再将爱说清楚

啊~读你读你读心想啥事
用古典迫牌方式
我手法精致艾尔姆支
雷一百分的姿势
谁说恋爱别找魔术师
我不需要解释
所以他小丑我是大师

你举手你抬头
你说我选我选我
我将牌换颜色
变出你的选择
将自由的女神
变不见不稀奇
一〇一变不见才惊喜

手摊开帽子里
总能空手出牌
不管切多少牌
总能切得回来
手穿海报却不拿汉堡
反而拿出牛仔帽
你永远都猜不着

不要问我到底什么才是真的
我变给你看的感情才是真的
因为无时无刻
我只想你快乐

啊~读你读你读心想啥事
用古典迫牌方式
我手法精致艾尔姆支
雷一百分的姿势
谁说恋爱别找魔术师
我不需要解释
所以他小丑我是大师

读你读你读心想啥事
用古典迫牌方式
我手法精致艾尔姆支
雷一百分的姿势
谁说恋爱别找魔术师
我不需要解释
所以不用麻烦了不用麻烦了
不用麻烦了

读你读你读心想啥事
用古典迫牌方式
我手法精致艾尔姆支
雷一百分的姿势
谁说恋爱别找魔术师
我不需要解释
所以他小丑我是大师

收藏1281 分享  

已有 90 人评分 经验 理由  

Sgdw + 4 精品文章^_^
图豆361 + 2 MIUI 因你更精彩!
vinhon + 5 MIUI 因你更精彩!感谢前辈留下的教程让后.
‘妙手空空 + 5 MIUI 因你更精彩!
☞me☜ + 2 MIUI 因你更精彩!
qscftyjm + 5 感谢分享^_^
Ageaser + 1 感谢分享^_^
【兔兔】 + 1 助人为乐^_^
风哈斯 + 1 感谢分享^_^
夕葵 + 1 感谢分享^_^
happyevor + 1 精品文章^_^
一YY阳 + 1 谢谢
5525qq + 1 ,ll
冰封天使泪 + 1 精品文章^_^
vip和尚哥哥 + 1 收藏收藏
米发锁辣 + 1 精品文章^_^
静沐合欢 + 1 感谢分享^_^
xcllayman + 2 精品文章^_^
回头姐 + 1 感谢分享^_^
不像话\'Kid + 1 MIUI 因你更精彩!

经验 +119  查看全部评分

MIUI开发组

Rank: 8Rank: 8

积分
10677
机型
未知设备
签到次数
195
MIUI版本
8.9.28
私信

2018新年勋章1000万用户纪念勋章MIUI 100周

 楼主| 2010-11-18 21:57 | 来自PC
|
本帖最后由 wuming 于 2011-10-21 18:00 编辑

Level 4:制作一个简单的主题包
(内容已更新至MIUI 1.10.21以上版本)

首先主题包其实是一个用zip打包的文件,命名时用mtz作为后缀,里面包含了该主题的描述、预览图及各种图片资源,并按一定的目录结构进行组织,请参照附件。

新主题包打包格式
随着MIUI主题可替换的资源越来越多,主题包包含成百上千的资源文件也越来越常见;为了加快应用主题的速度,优化用户体验,主题管理程序从1.7.8版本开始支持新格式的主题包,同时兼容旧格式主题包。
主题包的新格式约定如下:
       主题包根目录下,仅允许 文件 或 以wallpaper、fonts、boots、ringtones、audioeffect 和 preview命名的子目录 存在
举例:
        旧格式主题包中,图标都放在icons目录下,现在不允许主题包中存在icons目录,因此,只需将进入icons目录,将所有资源打包成一个压缩文件并命名为icons即可。

为方便用户打包, 附件提供了名为 MIUIThemeCompress.jar 的自动打包程序,该程序运行需要java运行时环境;windows下,双击直接运行或右键选择 => “打开方式” => "Java(TM) platform SE Binary" 打开; linux下,通过命令行 "java -jar MIUIThemeCompress.jar" 运行。 同时热烈欢迎广大米友,制作易用性更好的打包工具,为主题制作提供方便。
提示:目前论坛附件下载命名有些问题,请大家下载附件后,将其后缀名改为".jar"

关于java运行环境安装,请进这里
关于新格式讨论,请进这里

描述文件
描述文件命名为description.xml,内容参照如下格式填写。如果标题为空,主题界面中会用主题包的文件名代替。如果版本为空,主题界面会用主题包的文件修改时间代替。绿色部分为可以替换内容。
<?xml version="1.0" encoding="UTF-8"?>
<MIUI-Theme>
    <title>圆润图标</title>
   <designer>MIUI</designer>
    <author>MIUI</author>
    <version>1.0</version>
    <uiVersion>1</uiVersion>
</MIUI-Theme>
关于 uiVersion 使用方法详见:这里

效果预览图
预览图都放在主题包的preview目录下,在预览时最大支持10张预览图。为了便于真实体现主题包效果,所有被官方收录的主题包,都有我们统一制作预览图;同时,为了充分表达主题包的蕴含,需要制作者提供一张预览图作为该主题的封面;该封面会在主题管理器程序缩略图列表中展示。
主题包各模块预览图命名规则如下:
自定义封面预览图为preview_cover_0.jpg, 仅支持一张;
系统风格的预览图为preview_0.jpg, preview_1.jpg,...以此类推开始;
桌       面的预览图为preview_launcher_0.jpg, preview_launcher_1.jpg, ...以此类推开始;
短信风格的预览图为preview_mms_0.jpg,preview_mms_1.jpg,...以此类推开始;
图标风格的预览图为preview_icons_0.jpg,preview_icons_1.jpg,...以此类推开始;
开机动画的预览图为preview_animation_0.jpg,preview_icons_1.jpg,...以此类推开始;
字体风格的预览图为preview_fonts_0.jpg,preview_fonts_1.jpg,...以此类推开始;
锁屏样式的预览图为preview_lockscreen_0.jpg, preview_lockscreen_1.jpg, ...以此类推开始;
通知栏的预览图为preview_statusbar_0.jpg, preview_statusbar_1.jpg, ...以此类推开始;

替换壁纸(包括桌面壁纸和锁屏壁纸)
桌面壁纸和锁屏壁纸放在主题包的 wallpaper 目录下:
default_wallpaper.jpg : 桌面壁纸
default_lock_wallpaper.jpg : 锁屏壁纸
default_lock_wallpaper_800.jpg : 高度为800像素的锁屏壁纸
注意: default_lock_wallpaper_800.jpg 仅在主题包包含default_lock_wallpaper.jpg 且 手机屏幕高度为800像素时自动使用。

替换程序图标(包括非系统程序的图标)
所有用于替换原生图标的资源都放在主题包的icons压缩包中,大家可以用系统自带的圆润图标主题包为模版,保持文件名不变的前提下,替换相应图片内容即可。桌面文件夹的那几个图片资源也可以放在这个压缩包中。

如何命名图标文件
新装了程序后,回到桌面查看该程序图标的样子。然后用带图片预览功能的文件浏览器到/data/system/customized_icons_1目录下找到该图标,它的文件名就是我们要找的答案。

替换系统字体
将准备好的字体文件放在主题包的fonts目录下,并按如下规则命名。使用主题换字体不会影响OTA升级。如果想用一个字体文件同时替换中英文,那就命名为Arial.ttf。
默认字体:DroidSans.ttf
英文数字:Arial.ttf
中文字体:DroidSansFallback.ttf

替换开机效果
将准备好的开机动画或开机音乐放在主题包的boots目录下,并按如下规则命名。
开机动画:bootanimation.zip
开机音乐:bootaudio.mp3

替换铃声
将准备好的铃声放在主题包的ringtones目录下,并按如下规则命名。
来电铃声:ringtone.mp3
通知铃声:notification.mp3
闹钟铃声 : alarm.mp3

替换系统音效
将准备好的系统音效音乐文件放在主题包的audioeffect目录下,并按如下规则命名。
系统音效名称
音效意义
Lock.ogg 锁屏音
Unlock.ogg 解锁音
EffectTick.ogg 点击音
KeypressDelete.ogg 键盘回退音
KeypressReturn.ogg 键盘回车音
KeypressStandard.ogg 键盘按键音
KeypressSpacebar.ogg 键盘空格音
CameraClick.ogg 拍照音
VideoRecord.ogg摄像开始音
CameraCountDown.ogg 定时拍照倒计时音
CameraBeepSuccess.ogg 对焦成功音
CameraBeepFail.ogg 对焦失败音
CameraBeepInProgress.ogg 防抖拍照音1
CameraBeepInProgress1.ogg 防抖拍照音2
CameraBeepInProgress2.ogg 防抖拍照音3
MusicShake.ogg 甩动切歌音
MessageComplete.ogg 短信送达音
SoundRecorderPlay.ogg 录音开始音
SoundRecorderPause.ogg 录音暂停音
SoundRecorderRewind.ogg 倒带音
LowBattery.ogg 低电量通知音


替换电量图标
目前状态栏电量图标由主题包中的三个文件决定,三个文件的制作原理一样,相互没有依赖关系,可以独立替换
图形图标:com.android.systemui/res/raw/stat_sys_battery.png
数字图标:com.android.systemui/res/raw/stat_sys_battery_number.png
充电图标:com.android.systemui/res/raw/stat_sys_battery_charge.png

这三个文件的内容是由n * m个小图标组成的大长方形,每个小图标大小为38x38。这些小图标从上到下、从左到右依次代表从1%到100%的电量或充电动画的每一帧。

举个例子,如果文件内容是2 * 5个小图标,布局如下,
ABCDE
FGHIJ

如果用做图形或数字图标,那每个图标表示的电量为:
A: 1%~10%
B: 11%~20%
C: 21%~30%
D: 31%~40%
E: 41%~50%
F: 51%~60%
G: 61%~70%
H: 71%~80%
I: 81%~90%
J: 91%~100%

如果用做充电动画图标,那充电时从当前电量对应的图标开始依次显示到J,不断循环。譬如当前电量为55时,动画就会显示FGHIJFGHIJ.....

最后放上一个彩色的数字电量图标资源供大家参考

==============

更新说明:
       1. MIUIThemeCompress.jar 程序 7.17 加入记录“上次打开目录位置” 功能







round_icons.mtz

772.25 KB, 下载次数: 4117, 下载积分: 经验 -1 米

圆润图标

MIUIThemeCompress.jar

10.99 KB, 下载次数: 9310, 下载积分: 经验 -1 米

主题自动打包

已有 20 人评分 经验 理由  

Sgdw + 4 MIUI 因你更精彩!
倪离 + 1 感谢分享^_^
水中橙色 + 1 感谢分享^_^
餐巾纸 + 1 好东东!虽然俺自己制图无力…….
章萧醇 + 1 超好的帖子!初识MIUI,期待其好地发展,目.
紫冥炎 + 1 不错学习了
superb1n + 1 gre
没有故事啊 + 1 制作个属于自己的主题,嘿嘿
色机色彩 + 1 学习了
misteryss + 1
喜欢流浪 + 1 很好,我可以评分了
happyTrent + 1 好东西手下了
smilenet + 1 谢谢
东门庆 + 1 很难啊
fhf333 + 1 高级的了
guoyao + 1 我很赞同
小猫最可爱 + 1
流浪三哥 + 1 支持
ppcl520 + 1 赞啊
空白回忆 + 1 geili

经验 +23  查看全部评分

MIUI开发组

Rank: 8Rank: 8

积分
10677
机型
未知设备
签到次数
195
MIUI版本
8.9.28
私信

2018新年勋章1000万用户纪念勋章MIUI 100周

 楼主| 2010-11-18 21:57 | 来自PC
|
本帖最后由 wuming 于 2011-10-26 16:14 编辑

Level 5:制作高级主题包

MIUI的主题包,从原理上来说,相当于一个若干程序的资源包的合集。以系统自带的卡通小怪为例,com.android.launcher里放的是要替换桌面UI的资源,com.android.mms里放的则是要替换短信UI的资源。而每个程序的资源包里的目录结构和android的apk设计一致。目前MIUI的主题包支持替换图片(包括9-patch)以及系统或App相关的样式资源。

替换某个App资源
当我们想要给某个app制作主题包,具体步骤如下(以电话为例):
  • 在手机的/system/app或/data/app里找到该app的apk文件(而系统UI的apk则为/system/framework/framework-res.apk)。电话的apk为Phone.apk。
  • 把刚找到的apk文件当成zip文件解压,把除了.png以外的文件删掉,并保持目录结构不变。
  • 找到想要替换的图片,把不想替换的统统删掉。假设我们要替换拨号界面左下角跳转到联系人图,那对应的图片是res/drawable-hdpi/ic_in_call_touch_contact.png
  • 修改图片内容,保持文件名和目录结构不变。
  • 把res目录打包压缩并命名为该app的进程名,电话的进程名为com.android.phone。获取一个程序的进程名的方法很多,在此介绍一个最小白的方法:装个task manager(网盘上有),运行那个app,再运行task manager,找到那个app,长按->detail,然后屏幕下部会弹出的该app的进程名。(欢迎大家提供更小白的方法)
  • 准备好描述文件、预览图等(详见教程的Level 4)
  • 把修改好的文件和目录打包成zip文件,并修改后缀为mtz(注意保证res目录在zip包里面第一层)


替换系统或App样式资源
MIUI主题还支持替换系统或App的样式信息,具体地包括颜色、文字、大小尺寸等;下面以官方的黑色主题为例简要介绍如何替换颜色(默认主题下窗口使用的是白底黑色):
    1. 下载并解压官方黑色主题
    2. 在framework-res根目录下,有一个叫“theme_values.xml"的文件,其定义了要替换的系统样式值:
        <color name="mi_screen_background_dark">#ff000000</color>
        <color name="mi_bright_foreground_dark_inverse">#ff000000</color>
        以上将窗口的背景色默认有白色改成了黑色。
    3. 在com.android.mms根目录下,也有一个叫“theme_values.xml"文件,其定义短信程序要替换的该App或系统的样式值:
        <color name="message_button_alert_text_color">#ffffffff</color>
        定义了短信程序中“重发按钮” 字体颜色使用白色
        <color name="mi_bright_foreground_dark_inverse" package="android">#ffffffff</color>
        定以了在短信程序中使用的系统样式mi_bright_foreground_dark_inverse替换为白色;
        注意,在App中替换系统样式的值时,只对该App的其作用,且必须注明 package="android"。

    关于系统或App样式字段的获取,请查找其res目录中的xml文件。建议大家第一次制作时,详细参考官方黑色主题。   

MIUI桌面选项
1. 通过主题定义滚动条样式。
在原来的滚动条设计虽然提供了快速定位桌面的功能,但同时也增加了误操作的机会。
对主题的美观也造成了障碍。这导致了很多主题为了去除滚动条只好把滚动条换成全透明的图。
好了,现在我们可以通过主题定制滚动条了(桌面指示器),方法如下
在主题包中的com.android.launcher目录下创建修改theme_values.xml
添加一行
<string name="home_indicator">slider</string>

其中红字的slider代表要使用的是滚动条(这也是默认设置)。
还可以指定为:
none (代表禁用滚动条)
bottom_point (代表使用下方点状桌面指示器)
top_point (代表使用上方点状桌面状指示器)

2. 通过主题对壁纸位置的定义。
壁纸随桌面滚动这个是android的一个特色。但并不是所有同学都喜欢这样。
尤其对主题制作者来让壁纸固定下配合更加重要,于是我们增加了如下定义:
同定义滚动条一样,在同一个theme_values.xml中添加:
<string name="wallpaper_scrolling">all</string>
其中红字的“all”代表全范围滚动(默认设置)
还可以指定为:
left (壁纸固定在左侧不滚动)
center (壁纸固定在中心不滚动)
right (壁纸固定在右侧不滚动)



已有 9 人评分 经验 理由  

Sgdw + 4 精品文章^_^
西瓜很愤怒 + 1 MIUI 因你更精彩!
啊军2 + 1 感谢分享^_^
恒星酸奶 + 1 其中红字的“all”代表全范围滚动(默认设.
板手哥 + 1 到现在我都还是小白
一米缕 + 1 精品文章
fhf333 + 1 大师级了
悶老虎 + 1 精品文章
小米系统 + 1

经验 +12  查看全部评分

MIUI开发组

Rank: 8Rank: 8

积分
10677
机型
未知设备
签到次数
195
MIUI版本
8.9.28
私信

2018新年勋章1000万用户纪念勋章MIUI 100周

 楼主| 2010-11-18 21:58 | 来自PC
|
本帖最后由 foxtail 于 2010-11-30 12:50 编辑

Level 6:处理9-Patch(.9.png)图片

1. 了解什么是9-patch格式。这个格式主要的特点是定义了图片的可控制拉伸区域和内容区域。这个网上很多文章有介绍,相信大家都能找到自己能看懂的。先给出我随便搜索到的,http://blog.csdn.net/greatstar/archive/2010/10/12/5936177.aspx
2. 按照第一步找到的教程,制作9-patch图标
3. 编译9-patch图片。编译的方法有点偏技术,大家可以试试这个工具xUltimate Draw9Patch Compiler(http://www.droidforums.net/forum ... ease-xultimate.html)。用法挺简单,把你的图片放到一个目录(可以直接用它自带的example目录),然后运行那个工具,就会生成编译好的图片,文件名不会变,但是你会看到图片的黑边都被去掉(实际上已经存到png内部特殊数据区)。
4. 把你编译好的图片按普通图片的方法放进主题包。

更详细教程,请先看http://miui-dev.com/forums/showthread.php?243-GUIDE-Theming-MIUI-general-tutorials-of-tweaks-I-ve-made

已有 7 人评分 经验 理由  

Sgdw + 4 MIUI 因你更精彩!
q517 + 1 顶起~~~~~
sylviafxw + 1 高手,学习!
海边的流氓 + 1 学习......
fhf333 + 1 王了
自己家的猫 + 1 2
丶菊花易爆 + 1 帅气的技术帖!

经验 +10  查看全部评分

荣誉开发组

Rank: 6Rank: 6

积分
17914
机型
未知设备
签到次数
227
MIUI版本
9.2.11
私信

MIUI 3000万MIUI 2000万1000万用户纪念勋章小米手机2终身荣誉勋章小米手机1终身荣誉勋章MIUI三周年关注微信极客勋章关注腾讯微博关注新浪微博MIUI 100周发烧友俱乐部VIP贵宾小米手机元器件合体活动勋章一周年纪念勋章第二次内测勋章

2010-11-19 08:22 | 来自PC
|
坐等技术贴完成

已有 1 人评分 经验 理由  

Sy°z + 2 你是不是重庆的?小女生?

经验 +2  查看全部评分

玩机大师

Rank: 4

积分
1376
机型
小米手机1/1S
签到次数
24
MIUI版本
1
私信
2010-11-19 14:11 | 来自PC
|
不顶不行啊

玩机大师

Rank: 4

积分
1012
机型
未知设备
签到次数
2
MIUI版本
3.2.22
私信
2010-11-19 14:12 | 来自PC
|
沙发没了...

玩机达人

Rank: 2

积分
164
机型
MOTO Milestone
签到次数
3
MIUI版本
1
私信
2010-11-19 14:12 | 来自PC
|
不顶不行啊

玩机之王

Rank: 5Rank: 5

积分
3088
机型
未知设备
签到次数
63
MIUI版本
V8.2.1.0.LHNCNDL
私信
2010-11-19 14:16 | 来自PC
|
顶啊 支持啊

已有 1 人评分 经验 理由  

JiankaiZhao + 1 很棒

经验 +1  查看全部评分

玩机狂人

Rank: 3Rank: 3

积分
217
机型
未知设备
签到次数
12
MIUI版本
3.12.20
私信
2010-11-19 14:16 | 来自PC
|
这样以后好主题会越来越多了

已有 4 人评分 经验 理由  

浮生如茶89 + 1 文不对题
皮尔卡卡超 + 1 不顶不行啊!!
懜の茹湮滅 + 1 虽然不懂但依然为楼主顶上让更多的人看到.
lao死累死 + 1 很好

经验 +4  查看全部评分

快速回复 返回顶部 返回列表