锁屏入门教程 | 小米主题

# 锁屏入门教程

# 准备工作

这篇教程主要是针对没接触过代码的小米主题设计师，让大家用极短的时间了解 MAML 语言，并编写出属于自己的第一个锁屏。

1、下载编辑器 (opens new window)，示例锁屏包 (opens new window)， 代码编辑工具
2、打开编辑器,将“示例锁屏包”拖到编辑器面板任意位置。

# 坐标

文件夹“示例用锁屏包”下 lockscreen 为锁屏文件,advance 是放锁屏素材文件的地方,用代码编辑器打开 manifest.xml，添加下面示例中红字部分代码。

<?xml version="1.0" encoding="UTF-8"?>
<Lockscreen version="2" frameRate="30" screenWidth="1080">
	<Image src="bg.jpg" x="0" y="0" />
</Lockscreen>

frameRate: 帧率

screenWidth：分辨率

Image: 图片标签

src: 图片路径名称（仅支持 advance 下的文件）

x y 坐标

图片支持 jpg, webp, png。分辨率 1080×1920,保存图片用导出，若用存储为，图片可能过大

在代码编辑器中保存文件－电脑连接手机－在编辑器中点应用主题－手机关屏－开屏，然后上面写的背景就会在锁屏展示出来了。

# 时钟 Time

在背景图片的下一行添加时间代码，在 MAML 中先写的代码，内容会在下面显示，就像盖房子第一块砖在下面，第二块砖在第一块上面。

<?xml version="1.0" encoding="UTF-8"?>
<Lockscreen version="2" frameRate="30" screenWidth="1080">
	<Image src="bg.jpg" x="0" y="0" />
	<Time x="540" y="230" src="time.png" space="20"/>
</Lockscreen>

Time: 时钟标签

align: 对齐模式，left(左）, center（居中）, right（右）

space=”20″ 时钟中每个数字图片之间的间距

注意：时钟图片的路径名称取素材文件名“_”前的那部分，如文件名是 a_0.png,a_1.png,……，代码中填 a.png

# 日期 DateTime

示例：

<?xml version="1.0" encoding="UTF-8"?>
<Lockscreen version="2" frameRate="30" screenWidth="1080">
	<Image src="bg.jpg" x="0" y="0" />

	<DateTime x="540" y="420" align="center" format="M月d日 E aa" size="40" color="#ffffff" alpha="220" />
</Lockscreen>

DateTime：日期标签

format：标准日期格式，上面填的“M 月 d 日 E aa”在锁屏上会显示成“5 月 12 日周四下午”，具体解释请点击这里

size: 文字大小

color： RGB 颜色，PHOTOSHOP 中可提取具体颜色，如#ffffff 是白色

alpha：透明度，0－255，0 是透明

# 解锁 Unlocker

为了更直观，可以打开开发者选项－显示布局边界。

1 注意：解锁的坐标现在需要用相对坐标以适配不同分辨率的机型，详细可查看全面屏机型锁屏元素适配

<?xml version="1.0" encoding="UTF-8"?>
<Lockscreen version="1" frameRate="30" screenWidth="1080">
	<!-- 背景 -->
	<Image x="0" y="0" src="bg.jpg" />
	<!-- 时间 -->
	<Time x="540" y="230" align="center" src="time/time.png" space="20"/>
	<!-- 日期 -->
	<DateTime x="540" y="420" align="center" format="M月d日 E aa" size="40" color="#ffffff" />

	<!-- 箭头 -->
	<Image x="540" y="#screen_height-130+#unlocker.move_y" align="center" src="arrow.png" alpha="255" />
	<!-- 解锁 -->
	<Unlocker name="unlocker" bounceInitSpeed="1500" bounceAcceleration="3000">
		<StartPoint x="390" y="#screen_height-200" w="300" h="200" />
		<EndPoint x="390" y="#screen_height-600" w="300" h="100">
			<Path x="0" y="0" tolerance="800">
				<Position x="390" y="#screen_height-200" />
				<Position x="390" y="#screen_height-500" />
			</Path>
		</EndPoint>
	</Unlocker>

</Lockscreen>

unlocker.move_y 解锁部件在 y 方向的偏移（见全局变量）

name 为控件定义名字（此处我用的名称为 unlocker，如果你想命名为 abc 也是可以的，> - 不过相关连的#unlocker.move_y 得改成#abc.move_y）

StartPoint 起始点（手指触摸拖动的起始区域）

EndPoint 目标区域（解锁时起始点 StartPoint（下图大框）要滑动到的目标区域 EndPoi> - nt（下图小框）才能解锁）

w 宽，单位是像素

h 高，单位是像素

Path 滑动路径（用来规定起始点 StartPoint（下图大框）滑动的方向与最大距离）

tolerance 临界值，当你滑动距离超过这个值时，取消解锁操作

这里特别作下说明：只有点击起始点 StartPoint 所标注的范围内，才能触发解锁事件，随后沿你定义的路径方向拖动，滑动距离不超过 tolerance 中填的临界值，当把起始点 StartPoint（下图大框）左上角拖到 EndPoint（下图小框）所定义的目标区域内时，松开手才能解锁，路径不要写错，tolerance 临界值不要太小，否则会无法解锁。

2 解锁示例二（用 anchorX anchorY 修改解锁触发点位置，如果不写，就是默认的左上角）。

<Unlocker name="unlocker">
	<StartPoint x="390" y="1720" anchorX="150" anchorY="100" w="300" h="200" />
	<EndPoint x="340" y="1420" w="300" h="200">
		<Path tolerance="800">
			<Position x="390" y="1720" />
			<Position x="390" y="1470" />
		</Path>
	</EndPoint>
</Unlocker>