miui制作锁屏教程

经过数周精心打造，百变锁屏终于要发布了。

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

由于一直在调代码和编写主题包，没时间写个很完善的教程，而且百变锁屏的功能点很多，一下子也说不完，这是一个很简单的教程，基本概括了所有重要功能，但是写的比较简单，可能不太容易懂，我们以后会逐渐完善，争取搞得图文并茂。

其实个人觉得学习这些东西最好的方法是看实例，通过看实例了解它的基本原理和运作方式，教程只是一个参考，用来查找一些东西比如支持什么变量什么的。

闲话不多说。

7.8 新增:
Text新增自动滚动功能，如果制定了宽度和滚动速度marqueeSpeed，在文字超过宽度的时候会自动滚动显示
按钮元素，音乐控制，见帖子后面
7.15 新增：
音乐控制支持专辑封面显示见音乐控制部分。

Image, Text, Time的属性align= left, center, right 坐标点水平对齐方式
Image, Time 属性alignV= top, center, bottom 坐标点垂直对齐方式
函数：round() 四舍五入取整 int()向下取整
Image 增加antiAlias属性，默认为false，对于模拟时钟指针设置为true可以减少锯齿。

百变锁屏在主题包里的lockscreen/advance目录下，manifest.xml文件是描述脚本，脚本语法如下：
1. 图片部件
图片部件用来在锁屏界面上显示一个图片，可以指定各种属性
<Image x="" y="" w="" h="" centerX="" centerY="" angle="" src="" srcid="" alpha="" antiAlias=""/>
x,y : 相对于屏幕左上角的坐标
w,h : 宽和高
centerX, centerY : 旋转中心
angle : 旋转角度，一周360度
src : 图片名称
srcid : 图片序列后缀数字，一般用变量表示，可以根据变量显示不同的图片，如果
src="pic.png" srcid="1" 则最后会显示图片"pic_1.png"
alpha : 透明度0-255, 小于等于0不显示
antiAlias: true/false 抗锯齿，如果为true图片在变形旋转时不会有锯齿，但是速度会慢例子：
<Image x="0" y="#screen_height-323" src="bottom_bg.png"/>
2. 所有数值属性支持变量表达式，除src外。

当前支持变量：变量以#开头
* 解锁物件属性：格式：物件名.属性名 #unlocker.move_x
move_x 解锁时在x方向移动距离
move_y 解锁时在x方向移动距离
move_dist解锁时移动距离
state 解锁状态：正常:0 按下:1 到达解锁位置:2
* 全局变量：
time 当前时间，long
touch_x当前触摸点x
touch_y当前触摸点y
battery_level电池电量0-100
sms_unread_count未读短信
call_missed_count未接电话
// 时间日期变量
ampm上下午// 0 am, 1 pm
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值的变量表达式表示该图片只有在非充电状态显示，并且随着解锁水平方向的拖动逐渐变透明至消失。

1.<Image x="162" y="#screen_height-84" src="hs_path_bg.png"
alpha="(255-#unlocker.move_x/100*255)*min(1, abs(1-#battery_state))"/>
复制代码
3. 表达式
支持加减乘除取模括号和函数
加减乘除取模: + - * / %
支持函数
sin, cos, tan, asin, acos, atan, sinh, cosh, sqrt, abs, min, max 不解释
len(数字) 给定数字位数len(1234)=4
digit(数字, 第几位) 取给定数字的第几位digit(1234, 2) = 3
4. 图片部件可以指定动画
动画分为：图片源，位置，大小，旋转，透明度
每种动画相互独立，各自循环播放，动画由若干关键帧组成，关键帧包括帧属性和时间，
除图片源动画外，其它动画会根据当前时间找到相邻的两个关键帧，然后线性插值计算当前的属性。

如果第一帧时间不从0开始，则默认时间为0的第一帧为图片原始属性。

时间单位为毫秒
比如位置动画，如果当前时间是1600，则1600对1000取模，得600，x=10 + (600-100)/(1000-100)*(100-10) = 60 y=120
time 0 100 [600] 1000
| | | |
x,y 10, 20 60,120 100, 200
位置动画中的位置是相对于图片自身的坐标。

1. <Image>
2. <PositionAnimation>
3. <Position x="10" y="20" time="100"/>
4. <Position x="100" y="200" time="1000"/>
5. </PositionAnimation>
6. </Image>
7.
8. 还有：
9. <RotationAnimation>
10. <Rotation angle="" time=""/>
11. <Rotation angle="" time=""/>
12. </RotationAnimation>
13.
14. <SizeAnimation>
15. <Size w="" h="" time=""/>
16. <Size w="" h="" time=""/>
17. </SizeAnimation>
18.
19. <!-- 0-255 -->
20. <AlphaAnimation>
21. <Alpha a="" time=""/>
22. <Alpha a="" time=""/>
23. </AlphaAnimation>
复制代码
图片源动画稍有不同，没有插值，x, y 可选，表示相对图片的位置，当前的图片是在列表里的找到第一个大于当前时间的那个点指定的，
1.<SourcesAnimation>
2. <!-- optional: x y -->
3. <Source x="" y="" src="pic1.png" time="100"/>
4. <Source x="" y="" src="pic2.png" time="1000"/>
5. </SourcesAnimation>
复制代码
如果当前时间为1600，则对应的图片为pic2.png
例子：
位置动画表示1秒从屏幕最左端到最右端，停留1秒，透明度动画表示开始透明度为175，在从最左端到最右端过程中透明度不变，到达最右端后0.5秒渐变为不透明，然后0.5秒变为透明消失。

然后循环播放。

1. <Image x="0" y="#screen_height-177" src="charging_light.png"
category="Charging">
2. <PositionAnimation>
3. <Position x="480" y="0" time="1000"/>
4. <Position x="480" y="0" time="2000"/>
5. </PositionAnimation>
6. <AlphaAnimation>
7. <Alpha a="175" time="0"/>
8. <Alpha a="175" time="1000"/>
9. <Alpha a="255" time="1500"/>
10. <Alpha a="0" time="2000"/>
11. </AlphaAnimation>
12. </Image>
复制代码
5. 图片可以指定遮罩
x,y坐标，src为遮罩图片，不透明黑色部分表示不透明，其他部分为透明。

align：坐标是相对于所属图片还是绝对位置，如果是相对，图片移动是遮罩会相应跟随移动。

否则遮罩保持不动。

1.<Mask x="" y="" src="" centerX="" centerY="" angle="" align="">
2. <SourcesAnimation/>
3. <RotationAnimation/>
4. <PositionAnimation/>
5. </Mask>
复制代码
遮罩同样可以有源动画，旋转动画，和位置动画，属性支持变量表达式
1. <Image x="444" y="#screen_height-92" src="hs_path_light.png">
2. <PositionAnimation>
3. <Position x="-438" y="0" time="2000"/>
4. </PositionAnimation>
5. <Mask x="0" y="#screen_height-92" src="hs_path_mask_r.png"
align="absolute"/>
6. </Image>
复制代码
6. category 属性
界面上除解锁部件外所有元素可以指定category属性，Charging BatteryLowBatteryFull，指定了category属性的元素仅会在该状态下显示，可以用来做充电文字，动画等的显示。

如<Image x="100" y="100" src="pic.png" category="Charging"/>
7. time 部件，
src表示时间图片的前缀，如下表示使用time_0.png, time_1.png, ... time_9.png,
time_dot.png. 坐标属性支持变量表达式
1.<Time x="10" y="10" src="time.png">
2. </Time>
复制代码
8.，文字部件
显示指定格式的文字，坐标属性支持变量
color：文字颜色，#FFFFFFFF
size: 文字大小
format：如果需要在文字中显示变量数字，需要指定格式
align：left, center, right，文字坐标的对齐方式
Text新增自动滚动功能，如果制定了宽度和滚动速度marqueeSpeed，在文字超过宽度
的时候会自动滚动显示
1.<Text x="" y="" text="" color="" size="" format="" paras="#x,#y" align=""
marqueeSpeed="">
2. <PositionAnimation/>
3. </Text>
复制代码
例子：
1.<Text x="240" y="130+#unlocker.move_y" category="Charging"
color="#AAFFFFFF" alpha="200" size="24" format="正在充电(%d%%)"
paras="#battery_level" align="center"/>
复制代码
9. 日期部件
显示指定格式的日期
format: 支持标准日期格式, 另外增加农历: NNNN
1.<DateTime x="" y="" color="" size="" format="">
2. <PositionAnimation/>
3. <DateTime>
复制代码
九月：
M -> 9
MM -> 09
7分钟:
m -> 7
mm -> 07
mmm -> 007
mmmm -> 0007
1970年4月6日3:23am
"yyyy/MM/dd h:mmaa" -> "1970/04/06 3:23am"
"M月d日h:mmaa" -> "4月6日3:23am"
"E" -> "周三"
"EEEE" -> "星期三"
"纪念日: M/d" -> "纪念日: 4/6"
24小时: "kk:mm" -> "13:34"
10. 解锁部件
name: 名字，用来做变量名
可以有任意个解锁部件。

<Unlocker name="">
起始点，表示点击区域，坐标和宽高，起始点中包含的元素都会跟随当前解锁操作的拖动移动位置。

1.<StartPoint x="" y="" w="" h="">
2. 正常状态，可以包含若干元素
3. <NormalState>
4. <Image/>
5. <Time/>
6. <DateTime/>
7. <Text/>
8. </NormalState>
9. 在点击区域按下，表示开始解锁操作，拖动，隐藏其他状态元素，显示这些
元素，
10. <PressedState>
11. <Image/>
12. <Time/>
13. <DateTime/>
14. <Text/>
15. </PressedState>
16. 达到解锁目标后，隐藏其他元素，显示这些元素
17. <ReachedState>
18. <Image/>
19. <Time/>
20. <DateTime/>
21. <Text/>
22. </ReachedState>
23. </StartPoint>
复制代码
三个状态都可以不指定，可以使用变量来改变其他界面元素状态来表示解锁过程。

解锁目的，坐标和大小，当起始点的x,y点落入解锁目标区域矩形时，达到解锁位置，
此时松开手指即可以解锁
结构和起始点相同，不同的是其中元素不会随解锁操作的拖动移动。

1. <EndPoint x="" y="" w="" h="">
2. 解锁后执行的动作，可以指定不同的intent，（这里需要整理一下现有的例子）
3. <Intent action="" type="" category="" package="" class=""/>
4.
5. <NormalState>
6. <Image/>
7. </NormalState>
8.
9. <!-- show the target position if pressed trying to unlock-->
10. <PressedState>
11. <Image/>
12.
13. </PressedState>
14.
15. <!-- show specified image when reached target, if touch up then perform
unlock-->
16. <ReachedState>
17. <Image/>
18. </ReachedState>
19.
20.
21. 解锁路径tolerance：开始解锁操作后移动时路径最大距离超过这个值则取消，
回到正常状态。

Path 可以指定x,y坐标，默认为0，Position的坐标为相对坐标。

22. <Path x="" y="" tolerance="">
23. <Position x="" y="" />
24. <Position x="" y="" />
25. </Path>
26. </EndPoint>
复制代码
可以有多个解锁目的
<EndPoint/>
</Unlocker>
例子：
1.<Unlocker name="unlocker">
2. <StartPoint x="31" y="#screen_height-117" w="90" h="90">
3. <NormalState>
4. <Image x="31" y="#screen_height-117" src="unlock_button.png">
5. </Image>
6. </NormalState>
7. </StartPoint>
8. <EndPoint x="359" y="#screen_height-117" w="90" h="90">
9. <PressedState>
10. <Image x="359" y="#screen_height-117" src="unlock_target.png">
11. </Image>
12. </PressedState>
13. <Path x="0" y="#screen_height-117">
14. <Position x="31" y="0" />
15. <Position x="359" y="0" />
16. </Path>
17. </EndPoint>
18. </Unlocker>
复制代码
11. manifest.xml 结构
frameRate：指定帧率，如果动画缓慢，可以指定小一点的值，省电。

默认为30。

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

1.<Lockscreen version="1" frameRate="">
2. <Image />
3. <Image />
4. <Unlocker/>
5. <Unlocker/>
6. <Time/>
7. <DateTime/>
8. <Text/>
9. </Lockscreen>
复制代码
12. 壁纸元素
Wallpaper元素引用系统设置的壁纸，除了不能指定图片源外其他和Image元素相同，可以有动画和其他属性控制。

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

可以有多个。

例子：
<Wallpaper/>
13. 按钮元素
按钮元素可以用来接收点击，双击等事件，并可根据trigger的定义来控制界面上其他元素。

按钮元素也可以将事件传递给界面上其他元素，来使其他元素响应用户在锁屏界面上的操作。

<Button name="" x="" y="" w="" h="" listener="">
所有元素增加name属性，按钮的控制对象通过name来指定。

x, y, w, h 指定了按钮区域。

listener，指定该按钮的事件要传给哪个元素。

一个Button可以有若干个trigger，trigger定义了按钮动作引发相关的操作，如控制某元素的属性
<Trigger action="" target="" property="" value=""/>
action: 按钮动作：down (按下), up (抬起), double (双击), long (长按，暂时未实现) target: 控制目标名
property: 属性名，目前支持：visibility 以后会增加其他属性控制。

value: 属性值，目前针对boolean有： true, false, toggle
Button元素的xml结构：
1.<Button>
2. //可以指定任意个trigger，也可以不指定。

3. <Triggers>
4. <Trigger/>
5. <Trigger/>
6. </Triggers>
7. // 按钮正常状态，可以包含任意界面元素，如Image Text等，可以不指定
8. 注意：Button中Image的坐标和Button自己的坐标是独立的，都是相对于
Button的父元素。

9. <Normal>
10. <Image/>
11. <Text/>
12. ...
13. </Normal>
14. // 按钮按下状态，可以包含任意界面元素，如Image Text等，也可以不指定，
如果指定了normal状态，则显示normal状态元素。

15. <;Pressed>
16. <Image/>
17. <Text/>
18. ...
19. </Pressed>
20. </Button>
复制代码
14. 音乐控制元素
指定名称，从而使显示与否可以由另一个按钮控制，比如双击。

必须包含4个Button和1个Text，并且name分别为指定的名称。

可以包含其他任意界面元素如Image等。

<MusicControl name="music_control" x="" y="">
//专辑封面，和普通Image一样除了图片是绑定到专辑封面的，可以指定大小，加Mask 等。

<Image name="music_album_cover"/>
//歌名和歌手显示文字
<Text name="music_display"/>
//上一首按钮
<Button name="music_prev"/>
//下一首按钮
<Button name="music_next"/>
//播放按钮
<Button name="music_play"/>
//暂停按钮
<Button name="music_pause"/>
</MusicControl>
例子：
<!--双击控制音乐控制显示隐藏-->
<Button x="178" y="529" w="126" h="126">
<Triggers>
<Trigger action="double" target="music_control" property="visibility"
value="toggle"/>
</Triggers>
</Button>
1.<MusicControl x="0" y="300" name="music_control" visibility="false">
2. <Image name="music_album_cover" x="240" y="40" alpha="150"
align="center" alignV="center" />
3. <!-- 背景图-->
4. <Image src="music_bg.png" x="40" y="0" alpha="100" />
5. <!-- Text新增自动滚动功能，如果制定了宽度和滚动速度marqueeSpeed，
在文字超过宽度的时候会自动滚动显示 -->
6. <Text name="music_display" x="240" y="10" w="300" marqueeSpeed="30"
size="24" color="#FFFFFF" alpha="150" align="center"/>
7. <Button name="music_prev" x="40" y ="40" w="108" h="84">
8. <Normal>
9. <Image src="music_previous_n.png" x="40" y="40" />
10. </Normal>
11. <;Pressed>
12. <Image src="music_previous_p.png" x="40" y="40" />
13. </Pressed>
14. </Button>
15. <Button name="music_next" x="332" y ="40" w="108" h="84">
16. <Normal>
17. <Image src="music_next_n.png" x="332" y="40" />
18. </Normal>
19. <;Pressed>
20. <Image src="music_next_p.png" x="332" y="40" />
21. </Pressed>
22. </Button>
23. <Button name="music_play" x="186" y ="40" w="108" h="84">
24. <Normal>
25. <Image src="music_play_n.png" x="186" y="40" />
26. </Normal>
27. <;Pressed>
28. <Image src="music_play_p.png" x="186" y="40" />
29. </Pressed>
30. </Button>
31. <Button name="music_pause" x="186" y ="40" w="108" h="84">
32. <Normal>
33. <Image src="music_pause_n.png" x="186" y="40" />
34. </Normal>
35. <;Pressed>
36. <Image src="music_pause_p.png" x="186" y="40" />
37. </Pressed>
38. </Button>
39. </MusicControl>
复制代码
====高级技巧====：
1. 显示和不显示用alpha来控制，每个条件都可以映射到alpha为0或255的表达式，如果条件之间的关系是与，则表达式相乘，如果是或则相加。

一个图片或者动画，电池正常，电池已充满。

解锁为正常的时候显示，其他，像“电量低，充电。

解锁按下，或者到达解锁位置”都不显示。

<Image src="pic.png" alpha="max(0,(1-#battery_state))*255 + max(0,(#battery_state-2))*255 + max(0,(1-#unlocker.state))*255">。