Android主题制作教程.docx

Android主题制作教程.docx

《Android主题制作教程.docx》由会员分享，可在线阅读，更多相关《Android主题制作教程.docx（37页珍藏版）》请在冰豆网上搜索。

Android主题制作教程

主题教程

（2.10.30）

一、MIUI主题

  首先，我们手机的UI是由很多部分组成的，如锁屏、通知栏、桌面壁纸、图标等等。

如果我们把手机比喻成一个房子，上述的部分可想象成房子的门、窗、地板、吊灯、座椅等。

那我们可以认为原生的android系统就是一个毛坯房，MIUI是在这之上的一个简装，自定义主题就是你自己给房子做的装修。

    MIUI提供主题自定义功能，其实就相当于帮你请了一个工程队，你可以用从众多装修方案（主题包）中选择自己喜欢的效果，最后交给工程队实施。

而装修方案可大可小，大至全屋翻新，小到只换一盏灯。

目前MIUI会自带两个主题包，达人们也可以设计自己的主题包，大家就可以借用达人们共享出来的设计。

二、准备工作

1.主题测试机器

工欲善其事必先利其器，做题之前首先得有一部能刷MIUI的手机作为测试机。

MIUI现有支持v4的机型分成按分辨率，可分成两类480p（480*854和480*800）与720p（720*1280），分辨率对以后的主题制作有这影响，见后面详述。

480p的机子有：

小米手机1/1S（自带MIUI）、HTCDesireS、HTCIncredibleS、SamsungI9100、华为 Honor、索爱 LT18i 、GoogleNexusS

720P的机子有：

小米手机2（自带MIUI）、GoogleGalaxyNexus、GalaxySIIII9300、GoogleGalaxyNexus、华为 AscendD1、索尼LT26i、HTCOneX、LGLU6200     

附上刷机教程连接

注意：

在针对新版主题客户端的测试方案上线之前，主题制作者只能在2.10.26开发版或之前版本进行测试

2.设计界面

  制作主题之前可先根据官方提供的主题界面模板，对主题界面进行设计，然后再进行切图，将设计稿切片，分成各个小部分，用与主题制作。

3.主题制作软件的安装

官方主题工具：

使用此工具需要java环境的支持，未安装的同学请下载：

解压得jre6文件夹，将其放到到MIUIThemeEditor目录下（图1所示）。

1.windows下运行,“run-windows.bat“

2.linux下运行,“run-linux.sh”

3.macos运行,“run-mand” 

                                  图1 

三、主题制作

1.主题工具的使用

打开主题工具后可点击文件新建主题（图2），或选择打开主题模板

            图2

解压主题包：

拖拽后缀名为mtz格式的主题文件，置于主题工具上（如图3），等待一段时间，便会有一个与mtz文件名称相同的文件夹陈升，这便是解包操作。

                              图3

打开主题以后可看到（图4）主题名称、制作者、设计者，以及主题版本等信息，此为必填项目，ui版本选择为4.0，点击下方保存主题按钮主题文件夹内就会生成description.xml文件，来记录下这些信息。

                              图4

主题打包mtz：

点击工具下方打包即可生成mtz格式主题文件。

点击打包并导入手机可将主题打包并导入手机并应用，前提必须开启手机的USB调试，并安装手机驱动，驱动可通过豌豆荚、qq手机管家等android  pc管理软件进行安装，能连上这类管理软件即代表手机驱动安装完成。

2.图片替换

  不同分辨率的手机，其图片素材尺寸以及素材存放的位置也有所不同。

如图5所示

                      图5

以桌面图标为例，480p图标文件放在drawable-hdpi，720p则为drawable-xhdpi，其他模块的文件位置存放位置也与之相似。

桌面图标替换：

打开主题工具，先在左边选择要替换的图标，然后点击图片选择对应的图标进行替换，也可使用拖拽的方式，将要替换的图标直接拖至其上方，完成替换。

（见图6）

                              图6

  图标除了直接替换对应的图片外，还可以通过几张特定的图片来控制图标风格风格（主要用于第三方图标的风格统一），icon_border.png为最上面的一层；icon_mask.png控制图标显示大小形状，黑色区域显示图标形状；icon_pattern.png为不变色背景，icon_background.png变色背景，会根据图标颜色生成各种颜色背景。

如图7所示，

                                  图7

主题图片素材当中还有一种重要的图片格式，叫做9.png。

这种格式的图片是安卓平台上新创的一种拉伸却不失真的图片，这种图片主要用于一些尺寸不固定的图片，或者上面的是上面的内容区与需要特殊控制的图片，比如短信气泡，输入文字框等。

这种图片的文件名会是xxx.9.png这种格式，用主题工具解包以后，所生成的9.png图片其上下左右各会有1像素黑边，

如图8所示

1号黑色条位置控制图片横向拉伸区域，就是左图纵向绿色区域

2号黑色条位置控制图片纵向拉伸区域，就是左图横向绿色区域  

3号黑色条位置控制输入框内文字显示的上下位置，即右图紫色区域上下边界

4号黑色条位置控制输入框内文字显示的左右边距，即右图紫色区域左右边界

                          图8

  黑边可以在ps内直接画上，也可通过主题工具内附带的软件进行编辑（如图9）。

在使用画黑边时如果失误多选了部分，可按住shift键，再点击即可擦掉，最后按ctrl+s保存。

需要注意的是9.png图片必须画上黑边，不然在应用图片的时候，即使放了对应的图片手机上也不会显示。

用ps画黑边的时候需要注意，必须用纯黑色，不能有色差。

                                图9

3.主题工具中的模块介绍

主题内基本模块

Com.android.contacts 通讯录以及拨号

Com.android.fileexplorer 文件管理器

Com.android.mms  短信

Com.android.providers.downloads.ui 下载管理

Com.android.settings  设置

Com.android.systemui 通知栏以及任务管理器

Com.android.updater 系统更新

Com.miui.antispam 防打扰

Com.miui.backup 备份

Com.miui.home 桌面

Cworkassistant 流量监控

framework-miui-res  MIUI全局

framework-res  Android原生全局

以上模块为主题工具内带有图解的模块

MIUI全局和Android原生全局内主要存放文件是会在各种界面都会调用到的东西，比如按钮，弹窗，进度条等等，如在当前模块没有想要修改的素材时，可以去全局找。

  接下来以对短信模块的修改为例子，简单的说说使用如何使用主题工具对主题进行编辑。

点击模块，若当前无此模块可将手机连上电脑，通过手机导入素材。

                          图10

选择要替换的图片，右边区域会显示图片存放的路径，以及默认素材图片尺寸，图10的中的黑圈中的数字就是默认素材的尺寸。

将从设计稿内提取的素材替换进去，然后使用主题工具内提供的9.png工具，画上内容区与拉伸区。

替换完成后点击打包并导入手机，测试替换效果。

5.简单锁屏的制作

百变锁屏在主题包里的lockscreen/advance目录下，manifest.xml文件是描述脚本，以上代码为简单的iphone锁屏的代码，所谓的解锁就是将解锁起始点移动到解锁区域的过程，在这个解锁过程中可以沿着运动轨迹（图中的白线path）进行，也可完全自由的运动，当解锁起始点完全包含在结束区域时解锁完成。

XY坐标为图片左上角的点，因为miui支持不同分辨率，所以在写坐标时需要注意，当图片以屏幕底部对齐时，其y坐标，需要以这种形式书写：

y="#screen_height-89"，意思其y坐标是以屏幕高度减去图片距离屏幕底部的高度。

附上百变锁屏综合教程

6.theme_values.xml文件说明

主题文件内除了图片以外，还有theme_values.xml，这个主要用于控制当前模块下的文字颜色，提示文字等信息。

里面的颜色代码与普通的十六进制颜色代码不同，是在还在前面增加了2位用于控制文字透明度，可在主题工具中点击切换编辑模式查看当前模块的theme_values.xml文件

7.关于壁纸和铃声

替换铃声

将准备好的铃声放在主题包的ringtones目录下，并按如下规则命名。

来电铃声：

ringtone.mp3

通知铃声：

notification.mp3

闹钟铃声:

alarm.mp3

替换壁纸（包括桌面壁纸和锁屏壁纸）

桌面壁纸和锁屏壁纸放在主题包的wallpaper目录下：

桌面壁纸：

default_wallpaper.jpg  

锁屏壁纸:

  default_lock_wallpaper.jpg

领先android的锁屏技术教程

     我们的目标是最大化锁屏界面的自由度，让解锁界面和解锁方式可以通过主题包很方便的更换。

百变锁屏时时候进军2.0新时代了，我们仍会继续发力，加入更多更酷的新功能!

manifest.xml

百变锁屏在主题包里的lockscreen/advance目录下，manifest.xml文件是描述脚本

frameRate：

指定帧率，如果动画缓慢，可以指定小一点的值，省电。

默认为30。

displayDesktop属性，默认为false，透视到桌面功能，如果没有锁屏壁纸或者锁屏壁纸可以被移开或透明时可以看到桌面launcher或者是锁屏前的应用程序。

可以完美实现WP7，Meego，阿里云等的解锁界面。

界面元素的遮挡取决于在xml中出现的先后，最先出现的在最下层。

壁纸元素

Wallpaper元素引用系统设置的壁纸，除了不能指定图片源外其他和Image元素相同，可以有动画和其他属性控制。

如果没有此元素则不显示壁纸。

可以有多个。

例子：

变量及变量数组

分别定义单个变量和变量数组

name变量名

expression变量对应的表达式或常量注意：

如果定义字符串常量需要多一套单引号:

expression="'mystring'"

type=number/string定义数值变量或字符串变量默认：

number

const=true变量只会在初始化时计算一次，以后不会重新计算，可以提高效率。

如果变量值会在锁屏运行期间改变，const设为false默认：

false

...

...

Item数组元素定义

expression元素对应的表达式

value如果元素是常量，则用value指定常量值

//定义了一个每隔两秒轮换一次日期显示格式的DateTime元素.

//数组元素可以用来根据数字变量值显示不同的字符串

--ifconstistrue,thevariablewillonlyevaluateonceattheinitialtime,-->

const="true"/>

//显示英文月份

...

变量表达式,src除外

当前支持变量：

变量以#开头

*解锁物件属性：

格式：

物件名.属性名#unlocker.move_x

move_x解锁时在x方向移动距离

move_y解锁时在y方向移动距离

move_dist解锁时移动距离

state解锁状态：

正常:

0按下:

1到达解锁位置:

2

*全局变量：

time当前时间，long

touch_x当前触摸点x

touch_y当前触摸点y

battery_level电池电量0-100

sms_unread_count未读短信

call_missed_count未接电话

//时间日期变量

time_sys变量，为系统当前时间毫秒数。

ampm上下午//0am,1pm

hour12小时，12小时制

hour24小时，24小时制

minute分钟

second秒

year年

month月//0-11

date日

day_of_week星期//1-7星期日到星期六

screen_width屏幕宽度

screen_height屏幕高度

battery_state电池状态：

正常:

0充电:

1电量低:

2已充满:

3

例子：

alpha值的变量表达式表示该图片只有在非充电状态显示，并且随着解锁水平方向的拖动逐渐变透明至

消失。

alpha="（255-#unlocker.move_x/100*255）*min（1,abs（1-#battery_state））"/>

表达式

支持加减乘除取模括号和函数

加减乘除取模:

+-*/% 

支持函数:

sin,cos,tan,asin,acos,atan,sinh,cosh,sqrt,abs,min,max不解释

len（数字）给定数字位数len（1234）=4

digit（数字,第几位）取给定数字的第几位digit（1234,2）=3

round（）四舍五入取整int（）向下取整

eq（x,y）//x==y?

1:

0

ne（x,y）//x!

=y?

1:

0

ge（x,y）//x>=y?

1:

0

gt（x,y）//x>y?

1:

0

le（x,y）//x<=y?

1:

0

lt（x,y）//x

 isnull（x）//x==null?

1:

0//是否表达式包含空变量，通常用于判断绑定的变量是否查到数据

not（x）x>0?

0:

1

ifelse（x,y,z）//x>0?

y:

z

ifelse（x1,y1,x2,y2,...,z）

ifx1>0returny1;elseifx2>0returny2;...;elsereturnz

+可以拼接字符串，一些函数也可以支持字符串，isnull可以判断字符串变量是否为空，ifelse可以选择字符串，字符串比较函数eqs（@string1,@string2）

元素可见性支持表达式

visibility=“表达式”<=0不可见>0可见Image,Text,Time的属性align=left,center,right坐标点水平对齐方式

Image,Time属性alignV=top,center,bottom坐标点垂直对齐方式

文本部件

显示指定格式的文字，坐标属性支持变量 

color：

文字颜色，#FFFFFFFF 

size:

文字大小 

format：

如果需要在文字中显示变量数字，需要指定格式,用%d指定数字位置 

paras:

如果指定了format,需要在paras里指定%d对应的变量表达式,可以有多个变量表达式用","隔开

align：

left,center,right，文字坐标的对齐方式 

Text新增自动滚动功能，如果制定了宽度和滚动速度marqueeSpeed，在文字超过宽度的时候会自动滚动显示 

angle:

旋转角度

自动滚动功能，如果制定了宽度和滚动速度marqueeSpeed，在文字超过宽度的时候会自动滚动显示文本支持多行#text1.text_height为折行后的高度

可选属性：

spacingMult行距倍数默认1

spacingAdd行距增加量默认0

next_alarm_time下一个闹钟时间

文字和日期支持旋转 

[%s]电池:

[%d%%]"paras="@next_alarm_time,#battery_level"/>

size="24"format="正在充电（%d%%）"paras="#battery_level"align="center"/>

文本元素支持文字宽度变量属性text_width

#tt.text_width 

textExp属性支持字符串表达式：

例子：

天气信息，如果温度为空显示--非空显示数值

w="360"size="36"color="#ffffff"align="right"

textExp="ifelse（isnull（#weather_temperature）,'--',#weather_temperature）+'℃'"

/>

时间部件

src表示时间图片的前缀，如下表示使用time_0.png,time_1.png,...time_9.png,time_dot.png.坐标属性支持变量表达式

日期部件

显示指定格式的日期

format:

支持标准日期格式,另外增加农历:

NNNN

九月：

M->9

MM->09

7分钟:

m->7

mm->07

mmm->007

mmmm->0007

1970年4月6日3:

23am

"yyyy/MM/ddh:

mmaa"->"1970/04/063:

23am"

"M月d日h:

mmaa"->"4月6日3:

23am"

"E"->"周三"

"E