百变解锁设计与实现第2版课件

1、华为锁屏设计（百变+官方）设计与实现方法说明文档 /PART 1 可替换的unlock切图资源 /PART 2 多主题解锁样式布局原理 /PART 3 锁屏资源实现方法 /PART 4 举一反三（已经实现的锁屏案例及详解） /PART 5 xml模板文件（快速布局技巧）注：此版本在第一版的基础上，加入大量配图和代码结合的方式进行演示；目的一是消除设计师对于代码文件的厌倦和恐惧；二是让各位设计师能理解布局文件的原理，可以在今后的锁屏设计中达到举一反三的效果，开发出更多有创意的锁屏设计方案。百变解锁设计与实现第2版1Unlock资源包： Unlock资源包和icon、launcher、widget

2、、wallpaper、preview等属于同一层级文件，是并列关系 Unlock资源包包含了切图包（drawable）和脚本控制包（layout） 切图包是所有界面图片资源的汇总，脚本控制包的 layout.xml文件可以控制解锁界面布局以及字体颜色动画等样式可替换的unlock切图资源：描述： 如果使用现有的模板文件，则在现有尺寸大小的前提下，只修改切图的样式即可完成资源的替换。资源包代码/ PART 12Unlock资源包的内容：描述： 如果使用现有的模板文件，则在现有尺寸大小的前提下，只修改切图的样式即可完成资源的替换。百变锁屏：四向锁屏：/ PART 13Unlock资源包的内容：描述

3、： layout-hdpi文件夹主要控制解锁界面的布局和样式及动画/ PART 14123可替换切图资源： 解锁button 箭头动画 时间切图/ PART 1512可替换文本资源： 时间信息可以用切图资源替换 文字信息可以通过代码修改颜色和字体/ PART 16对位替换资源四点解锁： 时间信息可以用切图资源替换 文字信息可以通过代码修改颜色和字体/ PART 17目前可提供的多主题解锁样式：单点纵向滑动解锁（百变锁屏）单点横向滑动解锁（百变锁屏）四向滑动解锁（官方多主题默认解锁）/PART 28Y=400锁屏界面720（0,0）（屏幕坐标起始位置）1280坐标轴和布局原理：百变锁屏的实现以X

4、Y轴的坐标为参考线，以屏幕左上位置为起始点，起始坐标为（0,0）所有锁屏界面上的图形文字布局都是以此坐标为原点进行定位。举例：一个图层在屏幕上的定位方法注：图片和文字布局方法一样200 x200image（X=200,Y=400） (单位：像素）400 x 400 imageX=200/PART 29layout.xml大致结构:节点：Layout文件是布局文件加动态命令组成，以下命令标签是常用的节点字符，整个锁屏布局就是由这些节点字符组合而成。（类似网页的div+css布局，div相当于图层布局，css控制样式）节点名词解释： 整个屏幕，不可指定位置 所有图片资源 所有文本资源 解锁状态集合

5、，可指定在屏幕上的位置 没有开始解锁时显示的状态 触发解锁时的状态 点击触发解锁状态时显示的热区，坐标相对于state 设定解锁到的应用/PART 210Static部分是非解锁部分的整个屏幕布局State部分是解锁动态布局，包含normal和press两种状态一个完整的布局文件应该按照以下逻辑构成： /PART 211节点详解：节点是布局出一个完整可用的锁屏界面的基本要素；理解了什么是节点，也就理解了如何布局锁屏；什么是节点（重要）： 节点的概念可以理解为Photoshop中的一个个叠加的图层； 在一个完整的layout布局文件中，布局代码越靠近xml页面顶端，则图层位置越靠近低层； 整个屏

6、幕可以划分为两个区域：static区域和state区域。 static区域（节点）=无交互行为区域，点击不会有任何变化； static区域也可以添加一些与解锁无关的动画效果，但不能添加交互行为（如触发锁屏）； state区域（节点）=可添加交互行为区域，点击可以解锁； state区域是解锁的主要组成部分，这里可以添加锁屏的normal和press两种状态； 可以实现点击交互行为，包括解锁到应用，或者触发动画； 节点（只针对锁屏区域） 节点（针对全屏幕）/PART 212以上一段代码表示左图中时间的切图位置坐标，时间部分由5张切图组成，所以分为5行代码来布局。(src是html的一种代表imag

7、e或text对象的命令）上述3行代码确定了右图中向下的指示箭头位置。image节点：描述： image节点表示屏幕上所有的图片信息。/PART 213注： x=“0” y=“95” w=“720” h=“66” 表示这个字符串起始的位置坐标，和宽度高度 align=“center” 表示这个字符串居中显示，left靠左边，right靠右边 size=“18” color=“#FFFFFFFF” 表示这个字串的字体大小和颜色 src=“rrier ” 表示这个字串的含义是系统卡信息 color=“#FFFFFFFF” 表示这个字串的颜色是白色text节点：描述： text节点表示屏幕上所有的文本

8、信息（如SIM卡信息、时间日期信息等）。/PART 214左图的static节点xml布局代码：static节点：描述：static节点的范围是整个屏幕，里面包含的,直接布局在整个屏幕上。/PART 215state节点：描述： state节点表示当手指触发到此区域，可以触发normal和press状态的切换左图的static节点xml布局代码： /PART 216normal节点：描述： normal节点表示没有触发锁屏时的状态。表示没有触发锁屏开始的位置是坐标为 x=0 ，y=680的位置。宽度为720（屏幕宽），高度为500的区域。表示普通状态的起始位置，这里的起始位置是相对于state

9、而言的，所以为 x=0 ，y=0。表示滑块位置以坐标 x=280 ，y=0为起点的图片资源lock_normal.png。/PART 217press节点：描述： press节点表示手指触发锁屏区域时显示的状态。表示触发锁屏开始的位置是坐标为 x=0 ，y=680的位置。宽度为720（屏幕宽），高度为500的区域。表示滑块位置以坐标 x=280 ，y=0为起点的图片资源lock_press.png 。/PART 218touchrect节点：描述： text节点表示当手指触发到此区域，可以触发normal和press状态的切换表示当手指点击在解锁区域x=280，y=0的位置时，点击在160 x

10、160范围内的区域将会发生状态变化。（比如点击在此区域时，会出现滑块normal和press两种图片状态的变化）160 x 160/PART 219Y=400unlockintent节点：描述： unlockintent节点表示当手指滑动触发到此区域时，会解锁到固定应用。表示当手指拖动滑块滑动大于Y轴的400px距离时，会解锁到桌面。type：解锁类型，default解锁到桌面，camera解锁到相机，message解锁到短信，email解锁到邮件，calllog解锁到通话记录。/PART 220animationset & animation 节点：描述： animationset节点表示为

11、text，image提供动画效果，可以包含多个动画。 表示针对arrow这个图片资源，添加播放动画的间隔，并伴随渐隐效果。interval：-1表示不重复播放动画（默认值），当给的值大于等于0的时候，表示重复播放动画的间隔（单位=毫秒）type：动画类型，包括alpha(渐隐)，translate（位移），scale（缩放），rotate（旋转）interpolator：动画加速类型，包括accelerateDecelerate,accelerate,anticipate,anticipateOvershoot,bounce,cycle,decelerate,linear,overshootD

12、uration：动画持续时间/PART 221锁屏资源实现方法：以向右滑动解锁为例，讲解如何实现一个百变锁屏设计方案的xml文件布局。/PART 3 先布局static节点， 即除了解锁部分的其他设计此部分表示不需要随解锁状态 ， 变化而改变的视图，所有的坐标 相对整个屏幕 这部分布局针对全屏后布局state节点， 即解锁部分设计此部分表示解锁状态的变化，需要设定normal、press两个解锁状态的布局。这部分布局只从解锁坐标开始 节点内的所有文件布局都是以节 点开始位置为参考22布局静态stitic节点：/PART 3注： stitic节点的大小其实等同于全屏幕（X=0，Y=0)23布局静

13、态stitic节点：/PART 3 1134 5 注： 这里的所有布局都是针对整个屏幕的坐标。 标红部分是确定图片布局的数值，如果修改了图片资源大小，需要修改这些数据。24h=400Y=880布局动态state节点：/PART 3 2注： 这里的state布局是指锁屏区域，开始的高度是Y=880px； 有效区域一般设定为屏幕可见区域（如这里是400px)。X=720125布局动态state节点：/PART 32 13 注：state节点里的布局都是以state节点开始的位置作为起始坐标，而不是以全屏幕为起始点；26布局滑动解锁：/PART 3 这里规定了点击开始的坐标，只有手指触摸在X轴大于80的位置时，才会触发交互事件； 这里布局了背景的图层； 160 x 160X=802127控制滑动解锁：/PART 3这段代码比较长，分开来解释每个数据的含义。这段代码主要限定了解锁滑块的几种状态：手指点击在上面时的位置；滑动到右侧解锁时的位置；左右两侧滑动极限坐标； system.point.x lt 160 ? 80 : 表示滑块到左边距的最小距离保持在80px，poin