简单地来说:MORE 就是基于“标记语言”的渲染引擎,MAML 就是MIUI MORE渲染引擎的脚本语言。使用了MORE渲染引擎,MIUI主题模块:(MAML脚本编写)百变锁屏 com.android.internal.policy.impl.AwesomeLockScreen桌面时钟 com.miui.home.launcher.gadget.AwesomeClock相框小工具 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.mamlstatusbar_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文件 (去掉后缀即可)重启手机应用才能成功*
2015年05月05日
byMI-谢
写在前面为什么官方没有系统整理主题制作的"完整"教程?不知道!为什么官方没有提供一份"规范"的MAML脚本帮助文档?不知道为什么目前的主题大部分“好看却不好用”?写代码,没好文献。做主题,没好工具。永远停留在变脸的时代!为什么学习MIUI主题制作门槛比较高?设计师不喜欢写代码!为什么人们接受付费主题,却不接受付费软件?视觉优先原则的生物。动效设计在百变框架下面的实现,必要么?必要,要不然很难用。只可惜maml要达成framer.js一样的高度,还有很远的距离啊。百变框架下,我们究竟能最大限度的做多少事?官方把控,可怜的情报都是仅凭网友经验。…………………………………………………………对于绝大多数的主题设计师来说,编码绝对是他们的痛。何况官方还没有给一份像样子的帮助文档,只有论坛里一堆经验帖和wiki上排版让人着急的文档。另外,主题编辑器目前仍处于简单替换图片或某些参数功能的阶段。压根就没有代码编辑功能,因此也就出现了“好看却不好用”的现状。对设计师而言,一需要编码,学习曲线陡峭。二没有好工具,制作周期长。三参考文献少,创作受限。ps.我想这也是自由桌面一直没能像百变锁屏推出时那样受人欢迎吧。…………………………………………………………so.那么问题来了,该不该学maml脚本语言呢?当然啦!总之,重新整理文档原因有下:规范排版,以便查阅发帖交流,挖掘坑爹的情报!ps.谁叫官方从来都不出一份正经的完整参数文档。求关注,求完善,求官方开发组可怜可怜我们一群设计师吧π_π
2015年05月05日
byMI-谢
主题制作小技巧集合 为了大家更容易更系统的找到每周一招,特意为大家整理了这个集合帖子,以后大家可以直接从这个帖子找到之前发的每周一招小技巧了。教你如何玩转MIUI主题。第一招:个性TAB栏第二招:个性list第三招:局部调用第四招:.9图的绘制技巧第五招:主题适配480P和720P第六招:控件开关制作技巧第七招:制作个性拨号面板第八招:系统弹窗篇第九招:教你解决常见&必现BUG第十招:教你如何解决拨号盘错位第十一招:教你植入节日彩蛋第十二招:教你如何适配1080第十三招:自由桌面制作教程第十四招:个性短信气泡第十五招:个性文件夹 第十六招:教你兼容稳定版和开发版之间的差异第十七招:教你如何在锁屏中添加锁屏个性化定制的快捷入口第十八招:MIUI主题设计稿滤镜规范第十九招:通过修改代码来实现个性的设计
2015年05月05日
by叛逆yu
通过修改代码来实现个性的设计 如今我们的主题市场的主题创意已经多种多样,设计师们都在想方设法让自己的主题更加有特色,更加吸引用户的眼球,但是MIUI主题制作的前提是依托于MIUI系统的,有某些设计因为和系统默认布局不同,所以运用普通的制作方法是无法完全实现设计师的初衷设计的。 我们这里介绍的方法是个普遍适用的方法,并不是针对某一个部分的修改,在之前的每周一招中我们谈到过tab高度的修改,就是用的这个方法。下面我们再来举个实例来作简要说明。 例如: 当我们遇到这种类似的问题的时候,我们就需要做一些高级修改(修改相应模块下的theme_values.xml中的dime值)。 我们在编辑器里找到时钟模块按如下选择。 找到timer_hour_text_paddingtop,clock_text_stopwatch_large和这两个值,将其分别改为合适的值(我们这里分别改为163.000000dp和24.000000dp)。就能实现设计稿中的效果。 本例中timer_hour_text_paddingtop是控制数字上面的填充距离的变量。 clock_text_stopwatch_large是控制数字的大小的变量。 到这步制作师可能会问,我怎么知道哪句代码是控制哪里的呢,关于这个问题,事实上是个积累的过程,做的多了你自然会知道他们是什么,初学者可以通过简单的翻译代码的字面意思和多做尝试的方法来找到相应代码所控制的变量,多看我们发的教程收集积累也是一个好方法。
2015年05月05日
by叛逆yu
设计主题时注意的问题。 之前我们每周一招中大部分是关于制作者如何制作出更精美的主题,作为设计师只需要安心的去设计主题就好了。但是在设计或制作中,往往会出现一些制作者制作出来的主题和设计稿不符甚至相差很大,这是不是制作者的能力不足呢? 其实这是多方面的,制作者的能力是一方面,有时不符合MIUI主题框架的设计稿也会给制作者带来压力,甚至会影响到整个主题的制作过程和最终效果。 在主题制作过程中,最重要的一步就是切图,但由于photoshop的原因,图层或者分组使用的特殊的混合模式,在制作者切图制作主题过程时就会造成主题与设计稿不符的情况。如下面这个例子:样式1和样式2两个一样的线框,当我制作主题时,需要把这个线框给切出来变成png,为了不对图层造成影响,我们一般先转换成智能对象。 转换成智能对象并且将图片切好以后: 样式1变成了这个样子,没什么问题: 而样式2在切出来后却变成了这个样子: 变成全白了,这是为什么呢? 问题就出现在图层上,我们来先看看样式1的图层: 再来看看样式2的图层: 明明是相同的图层样式,为什么切出来的图却不一样呢? 问题就出现在混合模式上(样式1: 和样式2: ),虽然混合模式能做出很棒的效果,而且有时还能简化设计师的操作步骤,但是由于混合模式的原理,在制作者切图的时候就会造成与设计稿不符,甚至有很大出入的情况。 这个只是简单的小例子,有时候设计师为了能有更酷更炫的效果,对单个图层使用了大量的不同的混合模式,而制作者在制作的过程中发现切出来的图和设计稿的相差太大,造成整个主题质量下降。因此设计师在设计主题时尽量不使用特殊的混合模式,而是使用正常模式加上不同的图层样式来达到自己想要的效果。这样制作者在制作的时候不仅能节省切图的时间,还能减少设计师再次修改设计稿的成本。BUT也有特殊情况 例如:如果一个切图是由很多个图层组成的,那么只是最下面的一个图层的混合模式不能用“正常”以外(例如:正片叠底,颜色减淡... ...)的模式,其他图层可随意。
2015年05月05日
by叛逆yu
在主题制作中,有个很重要的模块,那就是我们的锁屏。每一种解锁方式或者每一种显示方式都不可能满足所有的人的需求,所以我们的的锁屏自定义也就应运而生。 为了让我们的用户能有更多的选择我们往往会在锁屏中加入各种自定义,以满足更多的人的需求。但是有了这个自定义之后,用户怎么才能知道怎么自定义呢,怎么设置呢,在哪里可以找到自定义入口呢,现在的主题风格客户端虽然分类很清晰能让用户快速找到自己喜爱风格的主题,但是自定义锁屏的入口却不容易被用户发现。 好了直入主题吧,本周我们来给大家分享的是在锁屏界面定义操作直接进入自定义锁屏界面,只需在锁屏界面完成设定的操作即可进行各种自定义。 下面仅举一例什么原理,请大家根据自己的需求自行设定自己的操作。 例:我们想在锁屏中通过双击操作,进入自定义锁屏,那么我们只需写一个Button即可实现。 <!--快速进入自定义锁屏样式页面--> <Button x="0" y="440" w="720" h="209" visibility="not(#music_control.visibility)"> <Triggers> <Trigger action="double"> <IntentCommand action="android.intent.action.MAIN" package="com.android.thememanager" class="com.android.thememanager.view.MamlConfigSettings"> <Extra name="maml_code" type="string" expression="'lockstyle'"/> </IntentCommand> <IntentCommand action="android.intent.action.MAIN" package="com.android.thememanager" class="miui.maml.MamlConfigSettings"> <Extra name="maml_code" type="string" expression="'lockstyle'"/> </IntentCommand> <Intent action="android.intent.action.MAIN" package="com.android.thememanager" class="com.android.thememanager.view.LockscreenConfigSettings"/> <ExternCommand command="unlock"/> </Trigger> </Triggers> </Button>
2015年05月05日
by叛逆yu
由于近期MIUI系统对一些图进行了调整,所以对之前已经完成的主题和今后的做新的主题,需要做一些兼容性的适配。 1.在联系人模块下,如下截图,白框中的橙色的背景大图,以前是用:“contact_detail_default_photo.png”这张图的,但现在更改为“contact_detail_default_photo.jpg”了,所以以前大家改过的都不生效了。今后在制作主题中大家需要把这两张图都放到com.android.contacts\res\drawable-xhdpi目录下,这样就能兼顾新版的rom和旧版的rom了。 2.在文件管理器模块下,如下截图,红框部分的9宫格切图,以前用的是drawable-hdpi目录下的“category_button_bg.png”和“category_button_bg_selected.png”,现在用的是drawable-xhdpi目录下的“category_button_bg.9.png”和“category_button_bg_selected.9.png”。所以以后制作时,这4张图都需要制作。 3.在新建联系人的页面中,红框中的按钮,原来是framework-miui-res\res\drawable-xhdpi下的“v5_spinner_bg_normal_light.9.png”和“v5_spinner_bg_pressed_light.9.png”,现在替换成了com.android.contacts\res\drawable-xhdpi路劲下的“group_memeber_ship_view_bg_n.9.png”和“group_memeber_ship_view_bg_p.9.png” 另外现在1080P也渐渐来临,想必有些设计师可能也已经着手按1080P的尺寸设计主题了。对于图标,1080的图标:画布大小为:192x192,图标大小为:170x170 如果考虑做1080的图标的话,切图可以放在icons\res\drawable-xxhdpi。但目前如果只做1080P的图标,由于跨度过大,480P的手机上缩放后图标会出现比较明显的锯齿,所以建议大家需要处理一份480尺寸的图标,放到icons\res\drawable-hdpi下。480P的图标:画布大小:90x90,图标大小为:72x72。
2015年05月05日
by叛逆yu
大家是否还记得2.3和V4时期的文件夹背景呢?到了V5时代,我们默认的主题文件夹背景是透明的。所以大家可能就误解了我们主题里文件夹背景是不可改的。其实不然,我们的文件夹背景依然能跟着我们设计的主题风格走的。这周我会告诉大家文件夹的制作原来和设计技巧,希望大家能更好的完善和设计自己的主题。文件夹的组成:com.miui.home\res\drawable-xhdpi:folder_background.9.png(文件夹背景)folder_setting_rename_bg.9.png(文件夹titile编辑模式输入框)folder_setting_confirm_n.9.png(文件夹titile编辑模式按钮常态)folder_setting_confirm_p.9.png(文件夹titile编辑模式按钮二态)folder_scrollbar_v.9.png(文件夹右侧滚动条)下面我给大家看一个主题制作好的效果图:再给大家看看拆解图:下图1左边的红框框选的为:folder_setting_rename_bg.9.png(文件夹titile编辑模式输入框)右边框选的为:folder_setting_confirm_n.9.png(文件夹titile编辑模式按钮常态), folder_setting_confirm_p.9.png(文件夹titile编辑模式按钮二态)下图2框选的为:folder_scrollbar_v.9.png(文件夹右侧滚动条) 了解清楚原理后,对于设计师:可以根据自己的主题风格设计好文件夹的背景图,宽至少为三个图标一行的宽度,高度不限,最高为1120px。如果希望文件夹显示的大小能根据里边图标的多少而进行缩放,那么设计时就要参考前面一讲的系统控件弹窗篇的设计技巧了,因为文件夹背景和弹窗的缩放原理是一样的。如果不考虑跟着文件夹里边图标的多少进行缩放,那么你的文件夹背景可以做任意文理的设计,不需要考虑缩放问题。 对于制作者,制作上原理和弹窗一样,可以拉伸的文理,图标显示的内容区切一行图标的高度就可以了,这样就能根据图标的多少进行放大了。如果是不可拉伸文理。可直接根据设计稿的大小切图制作。folder_background.9.png(文件夹背景)此图的内容区是控制folder_setting_rename_bg.9.png(文件夹titile编辑模式输入框)folder_setting_confirm_n.9.png(文件夹titile编辑模式按钮常态)folder_setting_confirm_p.9.png(文件夹titile编辑模式按钮二态)这这三张图和文件夹里边图标的显示区域的。而文件夹title名字的位置是由folder_setting_rename_bg.9.png,folder_setting_confirm_n.9.png,folder_setting_confirm_p.9.png这三张图的位置和内容区控制。所以如果你发现title文字不居中,你可以通过调整这三张图的大小,位置和点9黑边,可通过留空白像素达到你想要的居中效果。可根据我提供的这几张切图研究。附件为切图包。文件夹切图链接:http://www.miui.com/forum.php?mod=misc&action=attachcredit&aid=1427205&formhash=077d5752
2015年05月05日
by叛逆yu
在设计主题的过程中,很多设计师都只将短信对话框做成单一的模式,其实MIUI的主题框架支持短信气泡样式多样化,如添加形状、花纹等。 以米兔为例:在米兔主题中,对话框出了单一的方框式之外,还加上了兔子小尾巴(发送短信时),和米兔军帽(接收短信时)的小点缀,这样不仅使对话框不再单一,而且还能增加主题的趣味性。 但在设计的过程中,需要注意的是,必须要留出文字显示区域,在此区域上最好不要添加花纹或图案,否则对话框在适应文字内容的同时,可能会把点缀的图案给纵向或横向拉伸,导致整体效果被破坏。 实例:在画.9的时候,拉伸区不能触碰到图案上,必须要落到文字显示的区域,否则整个图形会被破坏。另外对话框上下不宜留太多的透明像素,否则会造成短信列表的间隔增大,影响美观。而如果左右留过多透明像素,则气泡与手机边框的距离会增大,同样影响美观。留透明像素保持间距的技巧:接受气泡:上下各留:15px 左留:30px发送气泡:上下各留:15px 右留:30px群发送气泡:上下各留:15px 右留:30px也可根据自己需要调整 一个气泡包含normal(常态)和pressed(按下)两个状态,这两个状态形状一样,而且是相互影响的,在设计和制作的过程中,应该同时处理这两个状态。需要注意的是,发送失败和普通短信发送成功的气泡用的是同一个按下态,因此发送失败的形状和普通短信的气泡形状要相一致。具体例子如图所示: 最后在短信设计的过程中,由于主题机制的实现原理,收藏短信的标记在接收气泡中是属于右边边底对齐的,而在发送气泡是左边底对齐的。 因此,在设计收藏标识时,在接收气泡中收藏标记最好画在右下角的地方,发送短信画在左下角地方。如果将收藏短信标识的位置随意放置,不仅达不到设计稿的效果,还有可能破坏了主题的美感。
2015年05月05日
by叛逆yu
自由桌面制作教程自由桌面以com.miui.home.freestyle 为名。●搭建基本框架:在com.miui.home.freestyle内,包含三个文件夹和一个description.xml文件,如下(截图)skins文件夹主要存放自由部件;stage_images存放场景图;tools存放小工具(比如音乐插件);description.xml(描述文件,对自由桌面的宽高、类型的定义)。◆skins自由部件制作:如下图,将每一张要做自由部件的png图切好、命名(无限制),存放skins目录下。◆stage_images背景图:首先要确定自由桌面的宽度,例如:要做3屏的自由桌面,则要选择2160宽度的图作为壁纸。壁纸将存放于stage_images目录下。◆tools制作的小工具将放在此目录内(制作说明看最后)。◆description.xml文件配置:将以下代码复制到description.xml内保存即可。<?xml version='1.0' encoding='utf-8' standalone='yes' ?><scene name="mi_style"> <screen type="drift"/> <screen type="background"/> <screen type="foreground"/> <screen type="dock"/> 至此,一个简单的自由桌面已经完成了一半,剩下的一半将在主题编辑器内完成。用主题编辑器将此主题打开,点击“自由桌面编辑器”模块,进入编辑自由桌面。●添加自由桌面部件 首先要说明,自由桌面分为drift、background、foreground、dock四层,将部件添加在drift层则可随意移动,可点击;background不可移动,不可点击;foreground不可移动,可点击;dock跟随屏幕移动而移动,例如桌面底部拨号联系人图标。通常会选择drift层。填写自由桌面宽度,主屏填写(0为第一屏;1为第二屏;2为第三瓶,以此类推)◆添加背景图选中drift层,选择“创建”在“场景图片”分类内,可以看到之前编辑好的背景图片,点击图片进行添加。◆添加部件选择创建,在自由部件分类内选择要添加部件的图片,然后为它选择功能,有四种功能可供选择。无功能:用户可以在自由桌面中为它添加功能。打开APP:为部件预设打开指定的应用,但用户在自由桌面内也可以自由更改。抽屉:打开所有应用列表。快捷开关:与桌面快捷开关相同。文件夹:将部件设置为文件夹功能。添加成功后,部件将出现在预览图中,预览图可以通过鼠标滚轮进行缩放,部件可以通过鼠标拖放来改变位置或直接在预览图下输入坐标。※ 关于tools小工具的制作每一个小工具都是以文件夹形式放在tools目录下它的manifest.xml文件如下,代码写在gadget内。一样基于百变框架,与锁屏代码通用。
2015年05月05日
by叛逆yu