logo资料库

小米MAML 整理教程.docx

第1页 / 共49页
第2页 / 共49页
第3页 / 共49页
第4页 / 共49页
第5页 / 共49页
第6页 / 共49页
第7页 / 共49页
第8页 / 共49页
资料共49页,剩余部分请下载后查看
[制作教程] MAML 之【MORE 渲染引擎】
千叶主题工作室 MAML 教程【总】2015.01.01 From http://www.miui.com/thread-2196783-1-1.html By-MI-谢 整理-千叶 千叶 2015/3/29
MAML 教程【总】2015.01.01 目录 MAML 之【前(tu)言(cao)】 ..................................................................................................... 0 [制作教程] MAML 之【MORE 渲染引擎】........................................................................... 0 MAML 之【百变锁屏 Lockscreen】....................................................................................... 2 MAML 之【百变壁纸 MiWallpaper】....................................................................................2 MAML 之【百变图标 Icon】 ..................................................................................................2 MAML 之【自由桌面 scene】*TODO.................................................................................... 3 MAML 之【所有元素】*TODO................................................................................................5 MAML 之【全局变量 #】....................................................................................................... 5 MAML 之【表达式】 ............................................................................................................... 8 MAML 之【变量 Var VarArray】 .............................................................................................9 MAML 之【壁纸 Wallpaper】.............................................................................................. 10 MAML 之【文本 Text】.........................................................................................................10 MAML 之【时间 Time DateTime】 ...................................................................................... 11 MAML 之【图片 Image ImageNumber Mask】 ...................................................................13 MAML 之【按钮 Button】....................................................................................................14 MAML 之【音乐 MusicControl 】....................................................................................... 15 MAML 之【滑块 Slider】......................................................................................................16 MAML 之【组 Group】.........................................................................................................19 MAML 之【绑定变量源 VariableBinders】......................................................................... 19 MAML 之【传感器 SensorBinder】 ..................................................................................... 21 MAML 之【内容提供 ContentProviderBinder】................................................................. 22 MAML 之【网络服务 WebServiceBinder】 .........................................................................24 MAML 之【广播 BroadcastBinder】.................................................................................... 25 MAML 之【自定义 Config】.................................................................................................26 MAML 之【动态帧率 FramerateController】......................................................................28 MAML 之【动画 Animation】 .............................................................................................. 29 如何“快速”制作一款 MIUI 锁屏?(forBeginner).............................................................30 如何看待“盗用原作”提交到市场的收费主题?.................................................................. 31 如何正确地添加文字到 MIUI 锁屏?....................................................................................31 如何正确地添加图片到 MIUI 锁屏?....................................................................................32 如何正确地使用 Command 在 MIUI 锁屏?.........................................................................34 如何正确地控制动画在 MIUI 锁屏?....................................................................................37 如何正确地实现动画在 MIUI 锁屏 2?.................................................................................40 做好一款 WP8 锁屏,需要的是坚持。.............................................................................. 44 MAML 与 【动效设计】的思考 *TODO............................................................................. 45 MAML 与 【乐高积木】 的思考 *todo............................................................................. 46 1
MAML 之【前(tu)言(cao)】 写在前面 为什么官方没有系统整理主题制作的"完整"教程? 不知道! 为什么官方没有提供一份"规范"的 MAML 脚本帮助文档? 不知道 为什么目前的主题大部分“好看却不好用”? 写代码,没好文献。做主题,没好工具。永远停留在变脸的时代! 为什么学习 MIUI 主题制作门槛比较高? 设计师不喜欢写代码! 为什么人们接受付费主题,却不接受付费软件? 视觉优先原则的生物。 动效设计在百变框架下面的实现,必要么? 必要,要不然很难用。只可惜 maml 要达成 framer.js 一样的高度,还有很远的距离啊。 百变框架下,我们究竟能最大限度的做多少事? 官方把控,可怜的情报都是仅凭网友经验。 ………………………………………………………… 对于绝大多数的主题设计师来说,编码绝对是他们的痛。何况官方还没有给一份像样子的帮 助文档,只有论坛里一堆经验帖和 wiki 上排版让人着急的文档。另外,主题编辑器目前仍 处于简单替换图片或某些参数功能的阶段。压根就没有代码编辑功能,因此也就出现了“好 看却不好用”的现状。 对设计师而言,一需要编码,学习曲线陡峭。二没有好工具,制作周期长。三参考文献少, 创作受限。ps.我想这也是自由桌面一直没能像百变锁屏推出时那样受人欢迎吧。 ………………………………………………………… so.那么问题来了,该不该学 maml 脚本语言呢?当然啦! 总之,重新整理文档原因有下: 规范排版,以便查阅 发帖交流,挖掘坑爹的情报!ps.谁叫官方从来都不出一份正经的完整参数文档。 求关注,求完善,求官方开发组可怜可怜我们一群设计师吧π_π [制作教程] MAML 之【MORE 渲染引擎】 简单地来说: MORE 就是基于“标记语言”的渲染引擎,MAML 就是 MIUI MORE 渲染引擎的脚本语言。 使用了 MORE 渲染引擎,MIUI 主题模块:(MAML 脚本编写) •百变锁屏 com.android.internal.policy.impl.AwesomeLockScreen •桌面时钟 com.miui.home.launcher.gadget.AwesomeClock 1
•相框小工具 com.miui.home.launcher.gadget.PhotoFrame •闹钟响铃界面 com.android.deskclock.AlarmAlertFullScreen •自由桌面动态小部件 com.miui.home.launcher.gadget.AwesomeGadget •百变壁纸 com.miui.home.launcher.MiWallpaper (基于 SurfaceView) •动态图标 •天气小工具 com.miui.home.launcher.gadget.Weather_2x4_custom (v4) 在这个渲染框架下,我们能干些什么? •展示信息(图片、文字、声音) •添加动画(大小、位置、透明、旋转、源) •简单交互(拖拽、点击、按键)(接收来自用户、系统的动作或参数,触发执行命令) •自制控件* 学会 MAML 脚本,我们在哪写代码? 百变锁屏:主题包文件夹/lockscreen/advance/manifest.xml 中,... 百变壁纸:主题包文件夹/miwallpaper/manifest.xml 中,... 百变图标:主题包文件夹/icons/fancy_icons/应用对应的文件夹/manifest.xml 中, ... 百变时钟:主题包文件夹/clock_2x4 或 clock_2x2 或 clock_1x2/manifest.xml 中,... 百变相框:主题包文件夹/photoframe_2x2 或 photoframe_2x4 或 photoframe_4x4/manifest.xml, 百变闹钟:主题包文件夹/alarmscreen/manifest.xml 中,... 自由桌面:主题包文件夹/com.miui.home.freestyle/description.xml 中,... statusbar_clock:主题包文件夹/com.android.systemui/res/raw/statusbar_clock.maml • statusbar_clock.maml 改后缀 .zip 解压,编辑 manifest.xml 中,... •多个文件以 zip 压缩方式打包成.maml 文件 (不是压缩 statusbar_clock 文件夹,而是里面 多个文件) statusbar_music:主题包文件夹/com.android.systemui/res/raw/statusbar_music.maml 同上 powermenu:/system/media/theme/default/powermenu •powermenu 加后缀.zip 解压,编辑 manifest.xml 中,... •多个文件以 zip 压缩方式打包成 powermenu 文件 (去掉后缀即可) •重启手机应用才能成功* 1
MAML 之【百变锁屏 Lockscreen】      // 透视到桌面,如果没有锁屏壁纸或 // 指定帧率,如果动画缓慢,可以指定小值,以省电。 frameRate="30"(默认) displayDesktop="false"(默认) 者锁屏壁纸可以被移开或透明时可以看到桌面或锁屏前的状态。 showSysWallpaper="false"( 默 认 ) // 显 示 桌 面 壁 纸 , 如 果 没 有 指 定 锁 屏 壁 纸 ,会将桌面壁纸作为锁屏的壁纸。 screenWidth="720" 锁屏中所有元素的位置都按 720p 的布局编写,480p 的手机会自动进行缩放。 extraResourcesScreenWidth 的(宽度值),e.g. 宽度做最合适的适配。 // 锁屏包中的图片资源有哪些分辨率 "480,720"。在不同分辨率的机型上,会自动向这里指定的 // 设定屏幕标准宽度,如果指定为 720, MAML 之【百变壁纸 MiWallpaper】   width:表示百变壁纸的宽度。 height:表示高度 另外,如果要实现元素跟随手指滑动的效果,需要借助#wallpaper_offset_pixel_x, #wallpaper_offset_x //偏移的像素数 (0 ~ -1*屏宽)(第一屏 ~ 最  wallpaper_offset_pixel_x 后一屏) wallpaper_offset_x   二者关系:#wallpaper_offset_x * 屏宽 = -1*#wallpaper_offset_pixel_x  为了适配不同分辨率机型,建议使用 #wallpaper_offset_x //偏移百分比 (0 ~ 1.0)(第一屏 ~ 最后一屏) 壁纸切成双屏宽 (2*#screenWidth) 壁纸定位:x="-#wallpaper_offset_x * 屏宽" 随滑动的元素定位:x="-#wallpaper_offset_x * 屏宽 + 相对壁纸的位置" MAML 之【百变图标 Icon】   frameRate useVariableUpdater 时间的更新周期 // 可指定帧率(省着用呐!) // 指定需要哪些系统变量,包括电量和时间,可以指定 2
useVariableUpdater = "Battery, DateTime.Hour,DateTime.Minute,DateTime.Second" 或"none"指定不更新。 如果需要显示系统电量并且每小时更换图片, useVariableUpdater="Battery,DateTime.Hour"。 如果需要每秒进行多次刷新,可以直接使用 frameRate     // 图标大小 width height screenWidth="720" hideApplicationMessage="false" (默认) // 指定屏幕宽度 // 屏蔽右上角的通知标志 MAML 之【自由桌面 scene】*TODO 自由桌面 scene  基本框架:com.miui.home.freestyle/文件夹下: /skins /stage_images /tools 文件夹主要存放自由部件(png 切图) 文件夹主要存放场景图(壁纸) 文件夹主要存放小工具(音乐插件等) /description.xml 描述文件,对自由桌面的宽高、类型的定义 description.xml 文件配置: 1. 2. 3. 4. 5. 6. 7. - 自由桌面分为 drift、background、foreground、dock 四层。 可以将部件添加在: drift 层 可随意移动,可点击; background 层 不可移动,不可点击; foreground 层 不可移动,可点击; dock 层 通常会选择 drift 层。 跟随屏幕移动而移动,例如桌面底部拨号联系人图标。 - 添加 部件功能: 无功能:用户可以在自由桌面中为它添加功能。 打开 APP:为部件预设打开指定的应用,但用户在自由桌面内也可以自由更改。 抽屉:打开所有应用列表。 快捷开关:与桌面快捷开关相同。 文件夹:将部件设置为文件夹功能。 3
- 添加 tools 小工具 - 每一个小工具都单独一个文件夹形式 放在 tools 文件夹下 - 每一个文件夹中的 manifest.xml,...代码编写 编辑器未更新!(*TODO) 用主题编辑器将此主题打开,点击“自由桌面编辑器”模块,进入编辑自由桌面。 添加 skins 自由部件 填写自由桌面宽度,主屏填写(0 为第一屏;1 为第二屏;2 为第三瓶,以此类推) 添加 stage_images 背景图 选中 drift 层,选择“创建”在“场景图片”分类内,可以看到之前编辑好的背景图 片,点击图片进行添加。 添加 部件 选择创建,在自由部件分类内选择要添加部件的图片,然后为它选择功能,有四种功 能可供选择。 添加成功后 部件将出现在预览图中,预览图可以通过鼠标滚轮进行缩放,部件可以通过鼠标拖放 来改变位置或直接在预览图下输入坐标。 规范代码: 1. 2. 3. 4
16. 17. 18. 19. 20. 21. 22. MAML 之【所有元素】*TODO 根据“坑爹的官方提供 alpha 版文档”可以得到以下情报: --------------------------------------------------- 0.壁纸...... 1.文本...... 2.时间......
分享到:
收藏