大家好,本周MIUI Turbo Team将继续教大家MIUI主题的制作技巧,第四周的主题为——.9图的绘制技巧。 在MIUI主题中,含有大量的.9.png的图片,如果能正确的绘制,不仅能使主题更加不拘一格外,还能节省系统资源。论坛里已经有很详细的.9图说明和教程,现在以具体的例子来说明下.9图的绘制技巧和应注意的问题。 以钢铁侠的弹窗为例。下图(图1)为第一版钢铁侠的弹窗样式。在(图1)的左半部分,在红框部分,.9区域只有1个像素点,这时候由于拉伸的区域不能完全将bottom按钮给完全包住,因此产生了错位的现象。 而在右半部分中,.9区域从1个像素点改成2个像素点之后,拉伸区域完全,bottom按钮可以完全落在灰色拉伸区域上,这时候就不会产生错位现象。 此外,在绘制.9图的过程中,除了可以参考官方默认尺寸之外,可以根据需要适当的调整图标。如(图2)所示。 在(图2)中,左半部分是根据官方尺寸绘制的大小,但由于改图不含有图案、渐变等元素,在纯背景图中,.9的拉伸不会破坏图形的样式,因此将图适当压缩,纯色拉伸区域可适当缩小,通过调整图形的尺寸来改变图形大小,这样不仅能压缩主题包的大小,还能节省系统资源。 而如果背景有图案或者其他样式,在绘制.9区域的过程中,需要根据具体的情况做出相应的调整,避免出现拉伸区域落在图案或样式上的现象,在有条件的情况下,应试试拉伸区和内容区不同的组合,多注意拉伸区和内容区的对应关系,以到达最佳的效果。
2015年05月04日
by叛逆yu
第三招:局部调用 大家好,本周MIUI Turbo Team将继续教大家MIUI主题的制作技巧,第三周的主题为——局部调用功能。 在MIUI主题中,有时候部分模块的元素是与MIUI全局元素有冲突的,大家是否遇到过这样的情况而不知道如何处理?本周我将教大家如何处理这样的情况,让主题更加不拘一格。 下面以钢铁侠为例。 在钢铁侠这款主题中,短信背景与联系人背景是不一样的(图1),而我们知道,在MIUI主题机制中,全局背景图是调用framework-miui-res\res\drawable-xhdpi目录下的v5_window_bg_light.9.png文件的。 当设计稿中出现两个不同样式的背景(元素),需要怎么办呢? MIUI的主题中提供了局部调用的功能,在不同模块中,可以分别调用MIUI全局的元素,而不影响到其他模块和全局功能。 此功能分为两部分:(1)主题元素单独调用;(2)字体颜色单独修改。 一、主题元素单独调用 以拨号与联系人背景为例,为了单独独立出不同于其他模块的背景,需要在联系人模块(com.android.contacts)下单独建立framework-miui-res文件夹,目录结构如(图2)所示。 framework-miui-res目录与res目录同级,在这个目录中修改需要替换的元素,如tab栏、背景等等MIUI全局支持的任意元素,这样该主题元素就会单独在这个目录生效,而不影响其他模块和全局的调用。 二、字体颜色单独修改 当替换完背景之后,字体颜色如果使用全局的颜色,有可能会出现问题。这时就需要对字体颜色进行单独修改。 打开主题编辑器,选择模块,下拉选择需要单独修改的模块,在同步好素材库后,点击主题编辑器上栏的切换编辑模式(图3),进入编辑theme_values.xml修改代码模式,并从下拉单中选择miui(图4)。 之后就进入了熟悉的修改字体颜色界面,选择需要修改的颜色字段,进行修改即可。例如在这里我将单独修改拨号模块中小豆豆的字体颜色(图5),此项修改并不会影响其他模块以及全局模块,而是独立进行的,不会破坏主题的整体结构。 好了,本周的教程结束了,请期待下一周新的主题制作技巧。MIUI Turbo Team
2015年05月04日
by叛逆yu
每周一招,教你玩转MIUI主题第二招:个性list 不知道上一招的学习对大家的个性tab 有多少帮助呢?既然tab 栏可以如此个性,一定有同学会因为个性的tab栏影响到list 的美观,那么本周为大家讲的就是列表(list)。下面我们用米兔主题来做例子。 1.当大家设计个性的tab 背景后,会出现如图1所示,list被tab栏盖住了。 2.这时我们需要截图量出完整list的高度和被切首行list的高度的差值。如图2所示。 3.接下来打开编辑器,选择模块framework-miui-res选择dime值,如图3,找到v5_action_bar_overlay_height,把值改成((139-119)/2=)10,导入手机。完美呈现图4! (当第一行的list距离tab的高度比其他list间的距离要大时,那么此时我们要修改的这个数值“10”,就应该为“-10”了) 4.既然首行list 会遇到被遮现象,那么末行list 是不是也会出现类似现象呢?如图5所示。 5.我们要做的和第2步是一样的,量出他们的差值。如图6所示。6.接下来打开编辑器,选择模块framework-miui-res选择dime值,如图7,找到v5_split_action_bar_overlay_height,把值改成((139-97)/2=)-21,导入手机。完美呈现图8! (当第末行的list距离bottom的高度比其他list间的距离要大时,那么此时我们要修改的这个数值“-21”,就应该为“21”了)下面再为大家演示下改dime值可以实现的另外一个效果 6,当我们的tab栏做了投影时,如果我们不改这个dime值,效果就会如图9所示,列表往上移时,字被切掉了。但我们把这个dime改后,就能完美实现我们的投影效果了。图10.看不清的童鞋可以看我放大后的对比图图11。
2015年07月02日
by叛逆yu
每周一招,教你玩转MIUI主题第一招:个性TAB栏大家是否在为设计主题时尺寸的把握发愁?是否在为面对个性设计的制作发愁?这周开始我每周都会和大家分享一点MIUI主题的技巧。 在MIUI主题里,有一些地方的尺寸是不需要跟着设计稿的尺寸走的,可以自由把握,设计出更个性的主题。这周为大家讲的是顶栏(title&tab)。 下面我们用米兔主题来做例子。 1.先把TAB背景按设计稿的尺寸147px切图。 2.用主题编辑器把图替换到相对应的位置。导入手机。发现如图1所示,tab按钮被压得挫爆了。 3.那么这时,我们用PS量取刚才我们切出的TAB.BG的图,除了.9后的高度。如图2所示。 4.打开主题编辑器,选择模块framework-res--选择dime值(图3),找到action_bar_stacked_max_height,把值改成(147/2=)74,再选择模块framework-res-miui--选择dime值(图4),找到v5_action_bar_height,把值改成(147/2=)74,导入手机。完美呈现图5。
2015年07月02日
by叛逆yu