本帖最后由 孤伤残影 于 2014-11-8 23:45 编辑
| 1：主题包内容 | 一个完整的主题包包括以下内容：
1. 包括unlock、preview和wallpaper文件夹，icons、launcher、mewidget、keyguard等apk资源，以及description.xml描述文件。
2. 与锁屏主题有关文件：unlock 及 com.android.keyguard
3. unlock内包括锁屏壁纸图片drawable、layout及主题说明theme.xml
4. com.android.keyguard是锁屏屏幕内部引用的资源（百变没有com.android.keyguard ）。
|
|
| 锁屏主题包分类 | 主题包共包括四种
1.百变锁屏主题包
2.滑动锁屏主题包
3.双向锁屏主题包
4.四向锁屏主题包
5.杂志锁屏主题包
将会依次介绍各类锁屏主题包的制作方法
|
|
| 1.百变锁屏主题包 | 主题包内容
1. unlock 内对应壁纸的drawable， layout 及theme.xml说明文件
2. 百变锁屏实现的布局文件在/unlock/layout-hdpi/layout.xml内定义
3. 百变锁屏用到的图片位于/unlock/drawable-hdpi/文件夹内
4. theme.xml 描述百变锁屏的样式style， 锁屏壁纸 wallpaper， 及 布局layout。
百变锁屏关键点
Layout.xml定义及注释
Image节点
Text节点
Unlocker节点
Music Control 节点
Button节点
Animation设计，主要针对Text、Image；
|
|
| Layout.xml定义及注释 | layout.xml大致结构:
<layout frameRate=“” version=“”>
<image name=“” x=“” y=“” w=“” h=“” src=“” visible=“”>
<frameAnimation >
<frame src="" duration=""/>
<frame src="" duration=""/>
</frameAnimation>
</image>
<text x=“” y=“” w=“” h=“” visible=“” align=“” color=“” src=“”/>
<unlocker name="" visible="">
<StartPoint x="" y="" w="" h="“/>
<EndPoint x=“" y=“" w=“" h=“">
<Path x=“" y=“"/>
</EndPoint>
</unlocker>
<MusicControl name ="" x="" y="" visibility="“/>
<button name =“b" x="" y="" w="" h="">
</layout>
frameRate----用来指定锁屏时，界面的刷新率。默认为30帧
version ---------用来指定百变主题的版本，区分EMUI2.3 和2.3以前的主题包
|
|
| Layout.xml设计 | 节点： Layout文件是布局文件加动态命令组成，以上命令标签是常用的节点字符，整个锁屏布局就是由这些节点字符组合而成。
（类似网页的div+css布局，div相当于图层布局，css控制样式）
<image> ——所有图片资源，和以前主题包一样。
<text> ——所有文本资源，和以前主题包一样
<unlocker> ——定义解锁区域。
<StartPoint> ——定义触发解锁时开始的区域，
<EndPoint> ——定义到达解锁区域时，触发解锁。主要定义为(x,y,w,h)
<Path> ——定义解锁区域的路径，主要是定义（x，y）相对于StartPoint的路径。
<Intent> ——设定解锁到的应用，设定type类型。
<MusicControl> ——主要用定义音乐控件，在这个区域内，可以通过text,image,button定义音乐控件包括的元素。
<button> ——定义响应点击事件的区域。主要定义为(x,y,w,h)
<NormalState> ——解锁状态集合，可指定在屏幕上的位置，
<PressedState> ——没有开始解锁时显示的状态，
<triggers> ——用来标识是触发一系列的动作
<trigger> ——用来定义一系列的动作，主要是触发其他控件的动画开始，隐藏或者出现。
<target> ——用来定义触发的对象，通过name属性来触发。
<action> ——用来定义响应事件的动作。
<value> ——用来定义触发的对象的值。
① 节点的概念可以理解为Photoshop中的一个个叠加的图层；
在一个完整的layout布局文件中，布局代码越靠近xml页面顶端，则图层位置越靠近底层；
② 所有的节点都是针对屏幕左上角的绝对坐标。
③ 因为目前所有的布局元素都是基于屏幕的绝对布局，因此需要注意布局的先后顺序。
|
|
| 一个完整的布局文件应该按照以下逻辑构成： | <unlocker >
<StartPoint />
<EndPoint >
<Path/>
<Intent type="camera"/>
</EndPoint>
</unlocker >
< MusicControl >
<button>
<image>
<text>
</ MusicControl >
以上至少定义一个解锁区域，需要有unlock,StartPoint,EndPoint,Path;如果需要定义解锁到某个应用，需要定义<Intent type="camera"/>
以上界面显示部分，主要用来设置界面上显示的元素，所有元素的坐标都是针对屏幕的绝对坐标。
|
|
| Image节点 | 图片部件用来在锁屏界面上显示一个图片，可以指定各种属性
<image name=“” x=“” y=“” w=“” h=“” src=“” visible=“”/>
lname 节点名称，默认可省略
lx,y 相对于屏幕左上角的坐标
lw,h 宽和高
lsrc 图片名称
lvisible: 图片可见性
<image x="348" y="200" w="24" h="24" src="arrow.png">
<image x="348" y="224" w="24" h="24" src="arrow.png">
<image x="348" y="248" w="24" h="24" src="arrow.png">
上述3行代码确定了右图中向下的指示箭头位置。
image定义示例一
例如：时间部分由5张切图组成，所以分为5行代码来布局。 <image x="192" y="160" w="74" h="112" src="´number_´+system.time.hour1+´.png´"/>
<image x="266" y="160" w="74" h="112" src="´number_´+system.time.hour2+´.png´"/>
<image x="340" y="160" w="40" h="112" src="colon.png"/>
<image x="380" y="160" w="74" h="112" src="´number_´+system.time.min1+´.png´"/>
<image x="453" y="160" w="74" h="112" src="´number_´+system.time.min2+´.png´"/>
|
|
| text 节点 | 描述： text节点表示屏幕上所有的文本信息（如SIM卡信息、时间日期信息、充电信息等）。
<text name=“” x=“" y=“" w=“" h=“" align=“" size=“" color=“" src=“"/>
lname: text节点名称，默认可以省略
lx,y：相对屏幕左上角坐标
lw, h：宽和高
lalign：对齐方式，center居中显示，left靠左边，right靠右边
lsize：字串的字体大小；
lcolor: 颜色
lsrc: 字符串值
<text x="0" y="95" w="720" h="66" align="center" size="18" color="#FFFFFFFF" src="system.carrier"/>
<text x="545" y="260" w="120" h="50" visible="system.time.showampm" align="left" size="20" color="#FFffffff" src="system.time.ampm"/>
<text x="0" y="330" w="720" h="54" align="center" size="18" color="#FFffffff" src="system.date"/>
注：src=“system.carrier ” 表示这个字串的含义是系统卡信息，若是“system.carrier2”第二个运营商信息；
text 定义示例一
<text x="0" y="200" w="720" h="80" align="center" size="16" color="#c38e3c" src="system.unlocktip"/>
|
|
text 节点
text 定义示例二：充电信息显示
| 描述： 用来显示在充电状态下，充电信息的显示。
示例：
<text x="20" y="580" w="720" h="50" align="center" size="18" color="#ffffff" ChargingType="number" src="system.charge.text" visible="system.charge.show"/>
关于充电信息的显示，目前规则如下：
1.在xml中新增一个属性“ChargingType”，用来定义充电信息显示格式。
2. 如果设计师不定义此属性，默认显示充电信息为:56%，这种信息显示格式。
3. 此属性目前支持三种样式，说明如下：假设当前正在充电，充电量为56%
ChargingType=“text”: 显示充电信息格式为：“正在充电：56%”；默认
ChargingType="number" ：显示充电信息格式为：“56”
ChargingType=“percent” : 显示充电信息格式为： “56%”。
还可以显示ownerinfo
<text x="0" y="385" w="720" h="50" align="center" size="18" color="#ffffff" src="system.ownerinfo.text" visible="system.charge.show and system.ownerinfo.show"/>
|
|
unlocker节点
描述： unlock节点表示当手指滑动触发到此区域时，会解锁到桌面和对应的应用。
可定义多个解锁区域
<unlocker name=“" visible=“">
<StartPoint x=“" y=“" w=“" h=“">
</StartPoint>
<EndPoint x=“" y=“" w=“" h=“">
<Path x=“" y=“"/>
<Intent type=“"/>
</EndPoint>
</unlocker>
lname: 默认可以省略
lvisible: 某种状态下可见
lStartPoint:解锁时开始的区域
lEndPoint:到达解锁区域时，触发解锁
lPath:解锁区域的路径，主要是定义（x，y）相对于StartPoint的路径。
lIntent: 解锁到某一个应用，由type决定。
ltype：解锁类型，default解锁到桌面，camera解锁到相机，message解锁到短信，email解锁到邮件，calllog解锁到通话记录。
| Unlocker定义示例一
<!--normal unlock-->
<unlocker name=“unlocker” visible=“！system.charge.show and system.music_visible eq 0">
<StartPoint x="259" y="782" w="206" h="124">
</StartPoint>
<EndPoint x="199" y="1027" w="317" h="300">
<Path x=“0" y=“400"/>
<Intent type="camera"/>
</EndPoint>
</unlocker>
在系统未充电、并且音乐播放器不可见情况下显示，
当手指拖动滑块滑动大于Y轴的400px距离时，会解锁到相机。
|
|
MusicControl 节点
| <MusicControl name ="" x="" y="" visibility="">
<text x="" y="" w="" h="" align="" size="" color="" src="" visible =""/>
<image x="" y="" w="" h="" src="" visible="" />
<button name="" x="" y="" w="" h="" visible ="">
</MusicControl>
lname:音乐控件名称，默认可以省略
lx,y：相对于屏幕左上角的坐标
lvisibility： 音乐控件的可见性, true ：可见， false 不可见
l控件的属性项：text，image 和button等
lImage: 图片节点
visible对应的状态比较复杂.。多个状态之间通过 and连接。
1.
lsystem.music_visible：音乐播放器的可见性， 1 可见，0 不可见
lsystem.music_state：音乐播放的某种状态的可见性， 1 play状态 ， 0 暂停状态。
|
|
MusicControl 节点
Music control示例一
visible设置示例：
<MusicControl name ="music_control" x="0" y="0" visibility="false">
<!– 不播放时显示的图片-->
<image x="360-272" y="369+system.unlocker2_moveY" w="544" h="762" src="music_loser_1.png" visible="system.charge.show and system.music_state eq 0 and system.music_visible eq 1" />
<!– 播放时显示的图片，带动画-->
<image x="100" y="369+system.unlocker2_moveY" w="544" h="762" visible ="system.charge.show and system.music_state eq 1 and system.music_visible eq 1">
<frameAnimation >
<frame src="music_loser_1.png" duration="100"/>
<frame src="music_loser_2.png" duration="100"/>
<frame src="music_loser_3.png" duration="100"/>
<frame src="music_loser_4.png" duration="100"/>
</frameAnimation>
</image>
</MusicControl>
| Music control示例二
<!– 歌名，歌手，在播放时单行显示-->
<text x=“0” y=“1220” w=“720” h=“40” align=“center” size=“12” color=“#FF64341b” MusicTextType = “single” src=“system.music_text”
visible ="system.charge.show and system.music_state eq 1 and system.music_visible eq 1"/>
其中：MusicTextType = “single”属性可以设置为single或者multi
|
|
Button 节点
| <button name="" x="" y="" w="" h="" visible ="">
<NormalState>
<image x="" y="" w="" h="" src="" visible =""/>
</NormalState>
<PressedState>
<image x="" y="" w="" h="" src="" visible =""/>
</PressedState>
<triggers>
<trigger name="music_show_trigger" action="double" >
<command target="music_control" visible="true" />
</trigger>
</triggers>
</button>
Button:按钮节点
NormalState：Button 正常状态
PressedState：Button 按下状态
Triggers：触发button行为定义
action：表示点击的事件的行为， 包括双击、单击等
target：目标对象，该对象必须在该节点之前已经定义。
visible：设置目标对象的控件属性， true 可见，false 不可见
Value：设置目标对象的值，主要是设置动画播放还是暂停。
Triggers 支持多条trigger对象
|
|
Button节点
button 定义music control中上一首，下一首，播放、暂停等功能
| <MusicControl name ="music_control" x="0" y="0" visibility="false">
<!– 上一首，点击状态图片定义-->
<image x="10" y="800" w="266" h="286" name="music_prev" src="hot_p.png" visible ="system.charge.show and system.music_visible eq 1 and system.music_prev eq 0"/>
<button name="music_prev" x="0" y="734" w="219" h="298" visible ="system.charge.show and system.music_visible eq 1">
<NormalState>
<image x="10" y="800" w="266" h="286" src="hot_p.png" visible ="system.charge.show and system.music_visible eq 1 and system.music_prev eq 0"/>
</NormalState>
<PressedState>
<image x="10" y="800" w="225" h="282" src="hot_n.png" visible ="system.charge.show and system.music_visible eq 1 and system.music_prev eq 1"/>
</PressedState>
</button>
<!– 播放 -->
<button name="music_play" x="241" y="860" w="262" h="285" visible ="system.charge.show and system.music_state eq 0 and system.music_visible eq 1“/>
<!– 双击行为调出控件-->
<!--music control display when action down-->
</MusicControl>
双击启动音乐播放器
<button name ="button_music_show" x="0" y="0" w="720" h="600">
<triggers>
<trigger name="music_show_trigger" action="double" >
<command target="music_control" visible="true" />
</trigger>
</triggers>
</button>
|
|
动画
动画是image 和 text 一个属性。
描述： animationset节点表示为text，image提供动画效果，可以包含多个动画。
<image x="" y="" w="" h="" src="">
<animationset interval="" condition=" ">
<animation type=“” interpolator="" duration="" />
</animationset>
<frameAnimation >
<frame src="" duration=""/>
</frameAnimation> </image>
animationset：animation的集合
Interval:重复播放动画的时间间隔(ms)，默认值-1，表示不重复播放
Condition：动画播放的条件，比如按下或者正常
animation ：
type：动画类型，包括alpha(渐隐)，translate（位移），scale（缩放），rotate（旋转）
interpolator：动画加速类型，包括accelerateDecelerate,accelerate,anticipate,anticipateOvershoot,
bounce,cycle,decelerate,linear,overshoot
Duration：动画持续时间
frameAnimation 帧动画
oneShot：false,代表循环动画，true：只做一次动画。
frame：动画对应的每一帧
src：帧对应的图片；
duration：帧播放的时间
| image动画示例：拖动提示动画实现
<image x="348" y="200" w="24" h="24" src="arrow.png">
<animationset interval="800" condition="!system.press">
<animation type=“alpha” interpolator="linear" duration="1000" from Alpha="0" to Alpha="1"/>
</animationset> </image> 表示针对arrow这个图片资源，添加播放动画的间隔，并伴随渐隐效果
|
|
百变锁屏主题包制作指导
| [size=111%]l步骤
l1. 下载一个百变锁屏主题包
l2. 修改theme.xml中锁屏样式style=“amazing”
l3. 根据需要修改unlock/layout/layout.xml的布局及引用
l4. 打包，放到sd卡中，sdcard/HWThemes/，应用主题，锁屏即可生效。
[size=111%]l
[size=111%]l
[size=111%]l
[size=111%]l百变锁屏的关键点：layout.xml布局的设置
|
|
双向、四向和滑动锁屏主题包
| l双向和滑动锁屏主题包内容包括
u1. unlock 文件夹只包括theme.xml描述文件
u2. theme.xml中包括锁屏样式及锁屏壁纸
u3. com.android.keyguard 内包括锁屏图片资源 ？
p
l制作要点：只能够替换锁屏壁纸及com.android.keyguard的资源图片
u替换壁纸：
p锁屏壁纸位置： /wallpaper/
p制作方法：制作一张新的壁纸（图片格式为.jpg)，替换/wallpaper/ 文件夹内 theme.xml中wallpaper引用的图片。
p譬如：如上图，制作新的壁纸，命名unlock_wallpaper_0.jpg，放到wallpaper/文件夹。
u替换壁纸操作可选，像滑动锁屏的theme.xml文件中没有wallpaper这一项，则不需要替换。
|
|
双向、四向和滑动锁屏主题包制作方法
| 1. 下载一个完整的双向或者滑动锁屏主题包，解压；
2. 替换/wallpaper/内 theme.xml中引用的锁屏壁纸
3. 更改com.android.keyguard 为.zip 格式，解压；替换res/drawable-xxx文件夹内图片资源（xxx对应分辨率）； 然后压缩com.android.keyguard格式.zip，删除.zip 后缀;
4. 打包整个主题包为.zip，更改.zip格式.hwt;
5. 主题包制作完毕，push到 system/themes,或者放到sd卡中，sdcard/HWThemes/，应用主题，锁屏即可生效。
总结：
1. 双向、四向和滑动锁屏主题包制作比较简单；
2. 在现有尺寸大小的前提下，替换 锁屏壁纸和com.android.keyguard内的资源图片。
|
|
杂志锁屏主题包
主题包内容包括：
1. unlock 内对应壁纸的drawable， layout 及theme.xml说明文件
2. com.android.keyguard是 杂志锁屏apk的图片资源，如暂停，下一张等;
|
|
杂志锁屏主题包说明
3. drawable：内部图片——杂志封面图片，按类型进行分类。
type_0x.png，杂志每种类型的封面，0x：类型编号，共六种类型。必须png格式
Bigpicture_0x_xx.jpg,每种类型对应的杂志封面， 0x: 类型变编号，与type_0x.png一致； xx 杂志封面编号，每一种类型最多有5张封面。
4. layout：杂志封面的类别设置及封面描述等信息， 与drawable内图片对应。
| 杂志锁屏主题包说明
杂志内容描述
以<image />形式存在；
src：该类型下的杂志封面图片，格式.jpg;
title: 杂志显式的标题；
content：杂志显式的内容；
contenturl: 网页链接；
cpname:内容提供商，download：客户端下载链接；package：客户端包名；
如果contenturl有具体的网页链接，“cpname，download及package可以为空”
src不允许重复，唯一
|
|
杂志锁屏主题包制作指导
1.下载一个完整的杂志主题包，解压；
2. 替换unlock /drawable/内图片资源。
3.修改unlock/layout/layout.xml内<layout/><type/><image/>的内容，注意版本号和升级日期，src的引用与drawable名称保存一致。
4.替换com.android.keyguard内引用的资源图片。
5. 打包，放到sd卡中，sdcard/HWThemes/，应用主题，锁屏即可生效。
主题提醒 ：
内容比较复杂，需要替换壁纸杂志图片，和图片资源两种类型。
杂志锁屏主题包只支持中文
修改layout.xml，版本号和升级日期务必要修改，id不允许重复，src不允许重复。
| |
|
|
[复制帖子标题和链接]
