百变解耦锁设计与实现第2版.pptx

华为锁屏设计（百变+官方） 设计与实现方法说明文档 · /PART 1 可替换的unlock切图资源 · /PART 2 多主题解锁样式布局原理 · /PART 3 锁屏资源实现方法 · /PART 4 举一反三（已经实现的锁屏案例及详解） · /PART 5 xml模板文件（快速布局技巧） 注： 此版本在第一版的基础上，加入大量配图和代码结合的方式进行演示； 目的一是消除设计师对于代码文件的厌倦和恐惧；二是让各位设计师能理解布局文件的原理，可以在今后的锁屏设计中达到举一反三的效果，开发出更多有创意的锁屏设计方案。;Unlock资源包： ① Unlock资源包和icon、launcher、widget、wallpaper、preview等属于同一层级文件，是并列关系 ② Unlock资源包包含了切图包（drawable）和脚本控制包（layout） ③ 切图包是所有界面图片资源的汇总，脚本控制包的 layout.xml文件可以控制解锁界面布局以及字体颜色动画等样式;Unlock资源包的内容： 描述： 如果使用现有的模板文件，则在现有尺寸大小的前提下，只修改切图的样式即可完成资源的替换。;Unlock资源包的内容： 描述： layout-hdpi文件夹主要控制解锁界面的布局和样式及动画;;;对位替换资源——四点解锁： ① 时间信息可以用切图资源替换 ② 文字信息可以通过代码修改颜色和字体;目前可提供的多主题解锁样式：;Y=400;layout.xml大致结构: 节点： Layout文件是布局文件加动态命令组成，以下命令标签是常用的节点字符，整个锁屏布局就是由这些节点字符组合而成。 （类似网页的div+css布局，div相当于图层布局，css控制样式） 节点名词解释： static ——整个屏幕，不可指定位置 image ——所有图片资源 text ——所有文本资源 state ——解锁状态集合，可指定在屏幕上的位置 normal ——没有开始解锁时显示的状态 press ——触发解锁时的状态 touchrect ——点击触发解锁状态时显示的热区，坐标相对于state unlockintent ——设定解锁到的应用 ;;; 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/ 以上一段代码表示左图中时间的切图位置坐标，时间部分由5张切图组成，所以分为5行代码来布局。(src是html的一种代表image或text对象的命令） 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行代码确定了右图中向下的指示箭头位置。 ; text x=0 y=95 w=720 h=66 align=center size=18 color=#FFFFFFFF src=system.carrier/ 注： x=“0” y=“95” w=“720” h=“66” 表示这个字符串起始的位置坐标，和宽度高度 align=“center” 表示这个字符串居中显示，left靠左边，right靠右边 size=“18” color=“#FFFFFFFF” 表示这个字串的字体大小和颜色 src=“system.carrier ” 表示这个字串的含义是系统卡信息 color=“#FFFFFFFF” 表示这个字串的颜色是白色 ;左图的static节点xml布局代码： static text x=0 y=95 w=720 h=66 align=center size=18 color=#FFFFFFFF src=system.carrier/ image x=192 y=160 w=74 h=112 src=number_+system.time.hour1+.png/ image x=266 y=160 w=7