1, 什么是“点九”“点九”是安卓开发中所用到的一种特殊的图片形式,文件扩展名为:.9.png 我们都知道安卓平台(比如手机)有各种各样的分辨率,不同分辨率上的图形会因为长宽变化产生拉伸, 按照平常的办法,图形的失真变形,但我们又不能每个分辨率都单独做一份适配,效率低而且包也大,在这样的情况下,点九的出现,完美地解决了这一问题(看图)从上图就可以看出,点九PNG图能完美保留图片细节 点九图在图片外围一像素区域内,有断断续续纯黑的黑边,并且在无黑边的地方,是纯透明的,不得有其它像素。拉伸时,上方和左边的黑边控制被拉伸区域,右边和下方的黑边控制文字的显示区域 2, 点九图的制作 在小米的主题编辑器中,有点九修改工具,打开方法如下(1) 将要用于替换的图片素材拖动到相应位置(如下图中1)(2) 点击编辑按钮(如下图中2)在上图中,大家可以通过拖动虚线来各黑边的位置和宽度,然后在右边进行拉伸预览,多做练习,强化理解!注意:(1)拉伸比例 仅左边与上方黑边是可以不连续的,如左边的A与B黑边,纵向拉伸时,两区域拉伸是有拉伸比例的,这个值为你原来绘制的A与B两黑边长度之比,打个比方:如果你原来绘制点九图时,A位置黑边为1像素,B位置黑边为2像素,那么在拉伸时,B位置拉伸的大小会是A位置的2倍(2)PS直接画黑边 如果用PS直接画黑边,请把画布增加2像素(如100×100的图变成102×102),并且保证四条边缘1 像素的区域内是绝对透明的,填充黑边时,颜色为(#000000),不透明度与填充都为100% 最后记得点击右上角-保存。This
2016年04月15日
by阳光一束
[制作教程]通知栏停用百变框架特大通知,通知栏不再用百变咯,不会写代码的小伙伴们不用再担忧了。还没有升级的小伙伴们,在此,为大家奉上通知栏新样子。此次改版,对于做过百变通知栏的主题有一定的影响,为此,大家莫怕,我们已有如下对策, 1、 升级后的系统会根据状态栏的字体颜色为此处的时间日期及搜索框中显示文字进行染色,确保线上还未更新的主题在此处不出现bug。 另:如果你真的不喜欢时间和日期与状态栏一个颜色,那也没有关系, 在通知栏中有一个布尔值auto_modify_expanded_header_color, 这个值默认为true, 意思为:将通知栏上方搜索框背景+搜索框中提示字体+时间+日期的颜色与状态栏中时间颜色保持一致,若想随心更换,只需将此改为false即可。 修改方法:在com.android.systemui这个模块下找到theme_values.xml这个文件,打开此文件,加入一行代码 <bool name=”auto_modify_expanded_header_color”>false</bool> 2、 有部分主题存在如下图的设计, (通知栏背景图的上方有一条颜色与大背景颜色不同,目的为了状态栏可以看清楚) 对于如此的设计大家也无需着急,只是,劳烦设计师或制作者更新一下主题咯。 在通知栏上方,默认的大家会发现有一块偏白的小背景,这是一张图片,(expanded_header_bg.9.png)大家只需要把这个图片换一个颜色,就可以让通知栏显示不出问题咯。 制作通知栏时如何兼容新旧系统:建议大家按照新系统制作,在保证新系统没有问题的前提下,仍然要制作旧系统下的时钟和音乐两个百变插件,即在com.android.systemui\res\raw路径下添加statusbar_clock.maml.unzip和statusbar_music.maml.unzip这两个文件夹,如果手上只有一部手机,没法测试旧系统,则建议把这两个百变插件用系统默认的改改颜色简单处理即可~附件是系统默认的两个百变插件的压缩包~附件下载:raw.zip小米主题托管上做主题网
2016年04月01日
特大通知,通知栏不再用百变咯,不会写代码的小伙伴们不用再担忧了。还没有升级的小伙伴们,在此,为大家奉上通知栏新样子。此次改版,对于做过百变通知栏的主题有一定的影响,为此,大家莫怕,我们已有如下对策, 1、 升级后的系统会根据状态栏的字体颜色为此处的时间日期及搜索框中显示文字进行染色,确保线上还未更新的主题在此处不出现bug。 另:如果你真的不喜欢时间和日期与状态栏一个颜色,那也没有关系, 在通知栏中有一个布尔值auto_modify_expanded_header_color, 这个值默认为true, 意思为:将通知栏上方搜索框背景+搜索框中提示字体+时间+日期的颜色与状态栏中时间颜色保持一致,若想随心更换,只需将此改为false即可。修改方法:在com.android.systemui这个模块下找到theme_values.xml这个文件,打开此文件,加入一行代码 <bool name=”auto_modify_expanded_header_color”>false</bool> 2、 有部分主题存在如下图的设计, (通知栏背景图的上方有一条颜色与大背景颜色不同,目的为了状态栏可以看清楚) 对于如此的设计大家也无需着急,只是,劳烦设计师或制作者更新一下主题咯。 在通知栏上方,默认的大家会发现有一块偏白的小背景,这是一张图片,(expanded_header_bg.9.png)大家只需要把这个图片换一个颜色,就可以让通知栏显示不出问题咯。 制作通知栏时如何兼容新旧系统:建议大家按照新系统制作,在保证新系统没有问题的前提下,仍然要制作旧系统下的时钟和音乐两个百变插件,即在com.android.systemui\res\raw路径下添加statusbar_clock.maml.unzip和statusbar_music.maml.unzip这两个文件夹,如果手上只有一部手机,没法测试旧系统,则建议把这两个百变插件用系统默认的改改颜色简单处理即可~附件是系统默认的两个百变插件的压缩包~
2016年03月07日
byKX Zheng
一份manifest文件,可以同时运行在多个设备,只需要设置好在不同尺寸或密度的设备上使用的资源和缩放比例就可以了。资源适配:extraResources=”sw1000-den320:den320:1.2,sw1000-den320::1.2,sw1000-den320-large:den320:1.2″每一项用逗号隔开,即不同的机型之间用逗号隔开,每一项内部通常用两个冒号隔开,第一个冒号之前是对机型的描述,两个冒号之间是对所用资源的描述,第二个冒号之后描述的是对所用资源的缩放比。这里说的资源就是图片,对资源的缩放就是在不同的机型上缩小放大图片。sw1000-den320:den320:1.2这一项的意思是在屏宽是1000密度是320的机型上,使用的是den320文件夹下的资源,并且放大1.2倍;sw1000-den320::1.2这一项中两个冒号之间是空白,意思是在屏宽1000密度320的机型上,使用的是默认的资源,并且放大1.2倍。extraResources=”sw2000-den480:1.8,sw1000-den320-large:1.8″ 上面这两项内部都只有一个冒号,意思是sw2000-den480的机型使用的资源就是在sw2000-den480这一同名文件夹下的资源,并且放大1.8倍。在资源适配的描述中,对机型的描述格式必须是swXXX-denXXX,否则无法生效。布局适配:布局适配是对XML中的所有的坐标和尺寸的适配,每一项依然用逗号隔开,但是每一项内部都只用一个冒号分割,因为布局适配无需指定资源,所以冒号之前是对机型的描述,冒号之后是缩放比,这里的缩放比通常是和资源的缩放比一致的。extraScaleByDensity=”320:1.2,480:1.8″extraScaleByDensity的意思是根据密度缩放,第一项的意思是在密度是320的机型上对布局的缩放是1.2,即所有的坐标和尺寸都要放大1.2倍。extraScaleByScreenWidth=”720:1.2,1280:1.8″这是根据屏宽缩放。extraScales=”sw1000-den320:1.2,sw2000-den480-large:1.8″,这是根据屏宽和密度缩放。适配原理:首先把你所有自定义中出现的den和sw做一个列表 (比如这里extraResources=”sw1440-den440::0.916, sw720-den320::0.667, sw480-den240::0.444″,涉及到的den有440, 320, 240, 再加上一个默认的480; sw有1440, 720, 480, 再加一个默认的1080(与den480对应) )然后当你的主题放到一个设备上时,首先拿你的设备密度去上面的den列表中找,找到最贴近的一个,然后如果同样den有多个sw,那么再拿设备的屏宽去这几个sw中找最贴近的一个,这样就找到了最合适的swXXX-denXXX最后,资源就取这个sw-den对应的目录下的资源,及缩放比例Sr。代码中数字的缩放比例就使用sw-den对应的Ss.最最后,就是缩放比例a) 如果按密度缩放(即scaleByDensity=”true”):资源真正的缩放比例是Sr * 设备den (找到的den),代码中的数字缩放比例是Ss * 设备den(找到的den)b) 如果按屏宽缩放(即scaleByDensity=”false”):资源真正的缩放比例是Sr * 设备sw (找到的sw) ,代码中的数字缩放比例是Ss * 设备sw(找到的sw)下面用一个动态图标举例:<Icon version=”1″ frameRate=”0″ width=”192″ height=”192″ useVariableUpdater=”DateTime.Second” resDensity=”480″ extraResources=”sw720-den320::0.705,sw1080-den440::0.882,sw2000-den640::1.176″ extraScales=”sw720-den320:0.705,sw1080-den440:0.882,sw2000-den640:1.176″>//这里所用的资源都是默认资源,默认资源的意思是在com.android.calendar这个动态日历的文件夹下只有一套资源,并且是直接放在这个文件夹下的。resDensity=”480″的意思是下面的代码都是根据密度是480的机型写的,即屏宽是1080的机型,所以这句话也可以换成screenWidth=”1080″。 <VariableBinders> <BroadcastBinder action=”android.intent.action.TIME_SET” /> <BroadcastBinder action=”android.intent.action.DATE_CHANGED” /> </VariableBinders> <Group pivotX=”96″ pivotY=”96″> <Image x=”96″ y=”96″ align=”center” alignV=”center” src=”calendar_icon.png” srcid=”#date” /> </Group>//如果在密度是640的设备上,pivotX,pivotY,X和Y都会放大成原来的1.176倍来适配设备,这就是布局适配。</Icon>再举一个例子:<Icon version=”1″ frameRate=”18″ width=”192″ height=”192″ resDensity=”480″ extraResources=”sw720-den320:den320:1,sw1080-den440:den480:0.882,sw1080-den480:den480:1,sw2000-den640:den480:1.176″ extraScales=”sw720-den320:1,sw1080-den440:0.882,sw1080-den480:1,sw2000-den640:1.176″>//这里所用的资源都是来自den320文件夹和den480文件夹,即在com.android.deskclock这个动态时钟文件夹下建两个文件夹,分别叫den320和den480,里面放相应资源。 <Image name=”hand_hour” x=”96″ y=”53″ align=”center” pivotX=”4″ pivotY=”43″ src=”hour.png” rotation=”#hour_angle_raw” antiAlias=”true”/> <Image name=”hand_minute” x=”96″ y=”49″ align=”center” pivotX=”8″ pivotY=”47″ src=”minute.png” rotation=”#minute_angle_raw” antiAlias=”true”/></Icon>百变图标附件下载:icons.zip
2016年01月27日
byKX Zheng
主题要先在小米商店上架后才能在此上传上传主题的详细步骤:1.进入http://mi.ui.cn(也就是我们的官网)2.在下图位置点击登录,如果没有账号的点击注册,也可以第三方登录哦。3.输入你的账号密码4.登录后首页右上角变为下图的样子,然后点击上传主题5.点击主题栏6.选择需要上传的主题,点击立即发布7.填写对应信息,发布出去大功告成!!
2015年07月02日
by小米主题学院
需求场景:当你希望你的主题锁屏可以设置为你刚刚拍摄的花儿,鸟儿,没有雾霾的蓝天,或者你心爱的人时,那么这个功能你一定不能错过。该功能现已稳定版,欢迎大家使用,我不会告诉你猪蹄哥准备挑选一批有此功能的主题做一个专题的。config.xml 新增 ImagePicker 条目,可以让让用户选择手机中的某个图片,获取其地址到变量中<Config><Group text=”自定义图片” summary=”请先将图片裁剪到合适大小和部位以确保显示效果,尺寸过大的照片请先缩小至屏幕大小,否则可能不能正常显示或费内存”><ImagePicker text=”图片一” summary=”选择图片一” id=”img1″/><ImagePicker text=”图片二” summary=”选择图片二” id=”img2″/></Group></Config>manifest.xml 中 Image支持Uri类型的src,即config中选择的图片地址,@img1 @img2<Image x=”0″ y=”0″ src=”@img1″ srcType=”Uri”/><Image x=”0″ y=”500″ src=”@img2″ srcType=”Uri”/>清除图片:<VariableCommand name=”img1″ expression=””” type=”string” persist=”true”/>将相应变量置空即可。注意:图片过大可能不能显示,比如像素过大的照片。
2015年07月28日
by小米主题市场
大家好我是本初,本教程演示的是任意不规则单色图像变色,有人会觉得引用图形资源时,用ps多制作几张不同单色的图片资源不就行了。其实,本例是配合文字颜色,可在config配置自定义中分别定义r,g,b值,或者定义h,s,b值达到自定义任意颜色的目的。当然本例并没有演示在config自定义文件中的设置,只是引入一个颜色变量数组。当然如果在锁屏中定义色相滑动条可见即可得最好。只是提供一些思路吧。以下是效果图:代码如下:<?xml version="1.0" encoding="UTF-8"?><!-- 单色图形变色 --><Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true"> <Rectangle w="720" h="1280" fillColor="#009688"/> <Button w="720" h="1180"> <Triggers> <Trigger action="up"> <VariableCommand name="click" expression="ifelse(eq(#click,13),0,#click+1)" /> </Trigger> </Triggers> </Button> <Button y="1180" w="720" h="100"> <Triggers> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <!-- 颜色变量数组 --> <Var name="click" expression="0" const="true" /> <VarArray type="string"> <Vars> <Var name="color_c" index="#click"/> </Vars> <Items> <Item value="#f44336"/> <Item value="#e91e63"/> <Item value="#9c27b0"/> <Item value="#ea80fc"/> <Item value="#4caf50"/> <Item value="#a5d6a7"/> <Item value="#cddc39"/> <Item value="#ffeb3b"/> <Item value="#f9ce1d"/> <Item value="#ff9800"/> <Item value="#5d4037"/> <Item value="#5d4037"/> <Item value="#ffffff"/> <Item value="#000000"/> </Items> <VarArray> <!-- 图片资源原本颜色为红色,dst_in模式中它的颜色取决于矩形底色 --> <Group h="1280" w="720" layered="true"> <Rectangle x="360" y="540" align="center" alignV="center" w="#dragon.bmp_width" h="#dragon.bmp_height" fillColor="@color_c" /> <Image name="dragon" x="360" y="540" align="center" alignV="center" src="dragon.png" xfermode="dst_in" /> </Group> <Text x="50" y="820" color="@color_c" size="80" textExp="'点击屏幕切换颜色'"/> <<Rectangle x="360" y="1170" w="520" h="100" cornerRadius="50,50" align="center" fillColor="#8bc34a"/> <Text x="360" y="1220" align="center" alignV="center" color="#ffffff" size="40" textExp="'双击此处解锁'"/></Lockscreen>
2015年07月28日
bynewspower
http://mi.ui.cn/colleague.html这里是代码的教程链接,写代码的时候用建议看完课程之后看maml教程。193630584 这个群是官方制作群。可以跟大神们交流,问一些问题。不过真心建议先自学完,再开始问。不要问一些视频里面老师都有教的问题啦~希望我的帖子对你们有帮助。我也才学了半个月,磕磕绊绊一直看着教程走到现在,看到论坛里面很多问制作问题的- -。群里的制作者们都挺乐于助人的,而且群里也有一些分享的资源可以下载附上主题编辑器的下载地址:http://www.miui.com/thread-2421703-1-1.html这边的每周一招也是很实用的:http://mi.ui.cn/articleinfo/25.html再加一段吧,如果编辑器出问题了。如果不是最新版本编辑器,就下载最新的编辑器。无法应用主题的时候,可以打开任务管理器,进程里面有个adb进程。右键关掉。确认一下自己的系统版本是不是V6开发版。开发者模式有没有打开。usb调试有没有打开?开发者模式打开方法:设置-关于手机-在miui版本上连续点7下然后回到设置页面-其他高级设置-开发者选项-开启usb调试。用主题编辑器的同时,小米助手也要一只开着哦。希望能帮到你们,只能把一些我的经验告诉你们了。花了半个多月,自己摸索加大神们的帮助总结出来的。
2015年07月13日
byalone小小喵
[size=14.0000pt]3. [size=14.0000pt]组([size=14.0000pt]Group[size=14.0000pt])元素,属性还有[size=14.0000pt]clip=[size=14.0000pt]”true/false[size=14.0000pt]”[size=14.0000pt]裁剪,配合组的w和h[size=14.0000pt] [size=14.0000pt]使用[size=14.0000pt]。层(layered)属性,由w和h配合颜色渲染模式xfermode使用。组计算频率[size=14.0000pt]/[size=14.0000pt]组帧速(frameRate)与动态帧速(frameRateController)的关系与使用。[size=14.0000pt]l [size=14.0000pt]裁剪(clip) 组(Group)元素支持裁剪(clip)应该是很久之前就支持了,相信很多主题设计师也在用,但我等小白找到它挺费劲,wiki上貌似没有,不过论坛上的官方教程里好像有,我记在了笔记上,忘了在哪看到的了。加入clip=“true”可以配合w和h进行裁剪,组界限以外的元素将不会显示,默认是false。具体观摩示例代码。[size=14.0000pt]l [size=14.0000pt]层(layered) 配合颜色渲染模式xfermode,关于xfermode是android一种颜色渲染模式,[size=14.0000pt]多种,可以参考下面的地址查看[size=14.0000pt] http://blog.csdn.net/t12x3456/article/details/10432935[size=14.0000pt]Src是下层图层,Dst是上层图层。具体可观摩示例代码。[size=14.0000pt]但maml与此有些许区别,具体区别可观摩代码,有些不工作,如果读者有知道的还望能告知,谢谢!以下为示例代码:裁切组:<?xml version="1.0" encoding="UTF-8"?><!-- 裁剪(clip)代码示例 --><Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true"> <Wallpaper/> <Button w="720" h="1280"> <Triggers> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <!-- 未开启组裁剪 --> <Group x="#screen_width/2" y="200" w="#screen_width/2" h="300" align="center" clip="false" > <Circle x="#screen_width/4" y="150" r="200" fillColor="#00ff00" /> </Group> <Rectangle x="#screen_width/2" y="200" w="#screen_width/2" h="300" align="center" strokeColor="#ff0000" weight="2" /> <!-- 开启组裁剪 --> <Group x="#screen_width/2" y="800" w="#screen_width/2" h="300" align="center" clip="true" > <Circle x="#screen_width/4" y="150" r="200" fillColor="#00ff00" /> </Group> <Rectangle x="#screen_width/2" y="800" w="#screen_width/2" h="300" align="center" strokeColor="#ff0000" weight="2" /> <Text x="#screen_width/2" y="740" align="center" color="#ffffff" size="40" textExp="'开启组裁剪后(红框为组界限)'"/> <Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/> <!-- <Text x="100" y="720" color="" size="40" textExp=""/> <Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/> <Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/> <--></Lockscreen>颜色渲染模式:见附件代码演示,需要引入两个外部图片资源。<?xml version="1.0" encoding="UTF-8"?><!-- 层(layered)代码示例 --><Lockscreen frameRate="20" screenWidth="720" > <Group layered="true" > <Rectangle w="#screen_width" h="#screen_height" fillColor="#4e342e" layered="false" /> </Group> <Button w="720" h="1280"> <Triggers> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <Var name="gap_x" expression="24" const="true" /> <Var name="gap_y" expression="136" const="true" /> <!-- clear --> <Group x="#gap_x" y="#gap_y" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="clear" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'clear'"/> </Group> <!-- src_in --> <Group x="#gap_x*2+150" y="#gap_y" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="src_in" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'src_in'"/> </Group> <!-- dst_in --> <Group x="#gap_x*3+150*2" y="#gap_y" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="dst_in" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'dst_in'"/> </Group> <!-- src_out --> <Group x="#gap_x*4+150*3" y="#gap_y" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="src_out" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'src_out'"/> </Group> <!-- dst_out --> <Group x="#gap_x" y="#gap_y*2+150" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="dst_out" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'dst_out'"/> </Group> <!-- src_atop seems not work! --> <Group x="#gap_x*2+150" y="#gap_y*2+150" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="src_atop" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'src_atop'"/> </Group> <!-- dst_atop --> <Group x="#gap_x*3+150*2" y="#gap_y*2+150" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="dst_atop" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'dst_atop'"/> </Group> <!-- xor --> <Group x="#gap_x*4+150*3" y="#gap_y*2+150" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="xor" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'xor'"/> </Group> <!-- darken seems not work! --> <Group x="#gap_x" y="#gap_y*3+150*2" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="darken" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'darken'"/> </Group> <!-- lighten seems not work! --> <Group x="#gap_x*2+150" y="#gap_y*3+150*2" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="lighten" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'lighten'"/> </Group> <!-- mutiply seems not work! --> <Group x="#gap_x*3+150*2" y="#gap_y*3+150*2" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="mutiply" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'mutiply'"/> </Group> <!-- screen --> <Group x="#gap_x*4+150*3" y="#gap_y*3+150*2" h="200" w="200" layered="true" > <Rectangle w="150" h="150" fillColor="#00ff00" /> <Image x="75" y="75" src="2.png" align="center" alignV="center" xfermode="screen" /> <Text x="75" y="150" align="center" color="#ffffff" size="40" textExp="'screen'"/> </Group> <Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/> <!-- <Text x="100" y="720" color="" size="40" textExp=""/> <xfermode="dst_in" <Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/> <Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/> <--></Lockscreen>[size=14.0000pt][size=14.0000pt]l [size=14.0000pt]帧速[size=14.0000pt]/[size=14.0000pt]计算频率(frameRate)与动态帧速(frameRateController)的关系,可能wiki上把动态帧速列为高级技术,但其实很容易使用,首先在组的属性中加入[size=14.0000pt]frameRate=””[size=14.0000pt]是指组内数据更新频率,当然受制于系统的性能,或是代码的复杂度,可能最终的数据刷新频率要小于设定值,如果不设定则组内数据的刷新频率由上一级组的刷新频率决定,阅读wiki我们看到有一个全局变量frame_rate是指当前的屏幕帧率,它表示的是当前各个组数据刷新频率的最大值,当然受制于系统性能,代码的复杂度和自身计算的误差,可能有些许差别,一般是小于等于各个组的刷新频率最大值。那么动态帧速是怎么回事,与组又有什么关系呢,将动态帧速的元素放在一个组中,则它的值将影响这个组,关系是:组内数据刷新频率等于组内动态帧速在某个时间点上的刷新值和组指定的刷新值之中的最大值。如果这个组没有指定则其将影响组外直至上一级有指定刷新频率的组为止。具体可观摩示例代码观摩,以上只是我个人的理解,不能保证正确与否,只是期望官方能尽早完善代码wiki,使我等小白不再为此纠结和胡乱猜测。[size=14.0000pt] 帧速代码:[size=14.0000pt] [size=14.0000pt]<?xml version="1.0" encoding="UTF-8"?><!-- 组与帧速代码示例 --><Lockscreen frameRate="60" screenWidth="720" ><!-- 开关屏有个动画播放的设定,请在开屏后3秒后观摩效果 --> <ExternalCommands> <Triggers> <Trigger action="resume,pause"> <Command target="test_ani2.animation" value="play"/> <Command target="test_ani.animation" value="play"/> <Command target="framerate1.animation" value="play" /> <Command target="framerate2.animation" value="play" /> </Trigger> </Triggers> </ExternalCommands> <Rectangle w="#screen_width" h="#screen_height" fillColor="#4e342e" layered="false" /> <FramerateController name="framerate1" loop="true"> <ControlPoint time="0" frameRate="40"/> <ControlPoint time="2500" frameRate="40"/> <ControlPoint time="3000" frameRate="5" /> <ControlPoint time="100000000000000" frameRate="5" /> </FramerateController> <Button w="720" h="1280"> <Triggers> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <Var name="test_date1" expression="" /> <Var name="test_ani1" > <VariableAnimation > <AniFrame value="0" time="0"/> <AniFrame value="100000000" time="100000000"/> <AniFrame value="10000000" time="100000000000"/> </VariableAnimation> </Var> <Group frameRate="2" > <Var name="test_ani2" > <VariableAnimation > <AniFrame value="0" time="0"/> <AniFrame value="100000000" time="100000000"/> <AniFrame value="10000000" time="100000000000"/> </VariableAnimation> </Var> <Text y="280" color="#ffffff" size="27" textExp="'文本显示在刷新率为2的组内显示组外刷新率为60的数据: '"/> <Text y="307" color="#ffffff" size="27" textExp="#test_ani1"/> <FramerateController name="framerate2" loop="true"> <ControlPoint time="0" frameRate="40"/> <ControlPoint time="2500" frameRate="40"/> <ControlPoint time="3000" frameRate="2" /> <ControlPoint time="100000000000000" frameRate="2" /> </FramerateController> </Group> <Text y="200" color="#ffffff" size="27" textExp="'动画在锁屏组内刷新率为60的组内: '+#test_ani1"/> <Text y="240" color="#ffffff" size="27" textExp="'动画在指定刷新率为2的组内: '+#test_ani2"/> <Button x="50" y="900" w="300" h="300" > <Triggers> <Trigger action="up"> <Command target="framerate1.animation" value="play" /> </Trigger> </Triggers> <Group x="50" y="900" > <Rectangle w="300" h="300" fillColor="#00ff00" /> <Text x="150" y="150" size="27" color="#ffffff" align="center" alignV="center" textExp="'点击启动默认组动态帧速'" multiLine="true" width="270" /> </Group> <Pressed> <Rectangle x="50" y="900" w="300" h="300" fillColor="#64000000" /> </Pressed> </Button> <Button x="400" y="900" w="300" h="300" > <Triggers> <Trigger action="up"> <Command target="framerate2.animation" value="play" /> </Trigger> </Triggers> <Group x="400" y="900" > <Rectangle w="300" h="300" fillColor="#00ff00" /> <Text x="150" y="150" size="27" color="#ffffff" align="center" alignV="center" textExp="'点击启动指定组动态帧速'" multiLine="true" width="270" /> </Group> <Pressed> <Rectangle x="400" y="900" w="300" h="300" fillColor="#64000000" /> </Pressed> </Button> <!-- 如何获取组内真实的刷新频率内 可以采用定义一个变量自加1的方法,每一秒钟获取一次,便可获取组内的刷新频率,这里你可以自己定义,不赘述 --> <Text x="360" y="800" align="center" color="#ffffff" size="40" textExp="'屏幕帧速(frame_rate): '+#frame_rate"/> <Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/> </Lockscreen>[size=14.0000pt] [size=14.0000pt]具体也可以观看附件文件夹里的例子。[size=14.0000pt]
2015年07月02日
bynewspower
[size=16.0000pt]由于官方wiki的原因,有些特性主题组可能出于稳定性的考虑没有加入进来,或是其他原因吧,总之让我等小白看到一些官方代码的用法有些陌生,难免局促。况且有些新特性也解决了我们在我们的代码里变相实现的问题,精简了结构,提升了效率,所以有必要学习一下[size=16.0000pt]。[size=16.0000pt]受能力所限,我只是将我看到的一些百变框架里的新东西,加上我的理解和解释写出来,很不全面,也不能保证其理解的准确性,姑且抛砖引玉吧[size=16.0000pt]。[size=16.0000pt]也希望大家用的时候能多验证一下,对于本篇内容还望批评斧正,多交流,共同进步![size=16.0000pt]好多内容都是我记在笔记本上的,所以可能已经忘记在哪里看到的了。这些内容我在主题交流群中已经发过,现在贴在论坛里,只期能对一些初学者有所帮助。[size=16.0000pt][size=16.0000pt] [size=14.0000pt]1. [size=14.0000pt]文本[size=14.0000pt]color属性支持:1.常量 2.字符串变量 3.argb(A,R,G,B)函数式,其中A,R,G,B均为表达式[size=14.0000pt]。这个属性我是在主题论坛教程里看到的,具体在哪教程已经不记得了,具体例子见下面的color属性表达式代码示例。[size=14.0000pt]<?xml version="1.0" encoding="UTF-8"?><!-- color属性支持表达式示例 --><Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true"> <Button w="720" h="1280"> <Triggers> <Trigger action="up"> <VariableCommand name="x1" expression="#x1-1" /> </Trigger> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <!-- 颜色变量定义 --> <Var name="color_re" expression="'#ff0000'" type="string" /> <Var name="color_gr" expression="'#00ff00'" type="string" /> <Var name="color_bl" expression="'#0000ff'" type="string" /> <!-- 颜色变量引用示例 --> <Text x="100" y="220" color="@color_re" size="40" textExp="'永远相信美好的事情即将发生!'"/> <Text x="100" y="260" color="@color_gr" size="40" textExp="'永远相信美好的事情即将发生!'"/> <Text x="100" y="300" color="@color_bl" size="40" textExp="'永远相信美好的事情即将发生!'"/> <!-- 颜色表达式示例 --> <Var name="x1" expression="4" const="true" /> <Var name="a1" expression="gt(#x1,0)" /> <Var name="r1" expression="gt(#x1-3,0)" /> <Var name="g1" expression="gt(#x1-2,0)" /> <Var name="b1" expression="gt(#x1-1,0)" /> <Text x="50" y="720" color="argb(255*#a1,255*#r1,255*#g1,255*#b1)" size="80" textExp="'点击屏幕切换颜色'"/> <!-- <Text x="100" y="720" color="" size="40" textExp=""/> <Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/> <Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/> <--></Lockscreen>[size=14.0000pt][size=14.0000pt]2. [size=14.0000pt]图形代码生成目前看到的支持Rectangle(矩形),Circle(圆),Arc(圆弧),Line(直线段),具体应用实例可以研究系统更新动画部分代码,以下是我看到的上述图形的一些属性:[size=14.0000pt] [size=18.0000pt]l [size=18.0000pt]矩形:[size=9.0000pt] [size=9.0000pt][size=14.0000pt]其中: w:矩形宽h:矩形高fillColor:填色颜色strokeColor:描边颜色weight:描边宽度strokeAlign:描边对齐样式只见到 inner(内部)属性,默认应该是外部对齐cornerRadius:圆角,”x,y“ x为横向圆角半径,y为纵向圆角半径dash:虚线,”a,b,c,d“ a为第一段直线段长度,b为第一段直线段与第二段直线段距离,c为第二段直线段长度,d为第二段直线段与下一段直线段距离,循环重复可以得到虚线段。cap:顶点样式,默认应该是矩形,有round(圆)样式选择Image的属性除了src外应该都支持,另外还支持颜色表达式。[size=14.0000pt] [size=14.0000pt] [size=14.0000pt]具体见代码示例,上述符号,大小写可能又些差异,以代码示例为准。[size=14.0000pt] [size=14.0000pt]<?xml version="1.0" encoding="UTF-8"?><!-- 代码生成矩形示例 --><Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true"> <Wallpaper/> <Button w="720" h="1280"> <Triggers> <Trigger action="up"> <VariableCommand name="x1" expression="#x1-1" /> </Trigger> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <!-- 一些代码生成矩形的效果 --> <Rectangle x="100" y="100" w="200" h="200" fillColor="#00ff00" /> <Rectangle x="400" y="100" w="200" h="200" cornerRadius="20,20" fillColor="#00ff00" /> <Rectangle x="100" y="400" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" /> <Rectangle x="400" y="400" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" strokeAlign="inner" /> <Rectangle x="100" y="700" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" /> <Rectangle x="400" y="700" w="200" h="200" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" /> <Rectangle x="50" y="1000" w="200" h="200" cornerRadius="100,100" fillColor="#00ff00" /> <Rectangle x="300" y="1000" w="400" h="200" cornerRadius="100,100" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" strokeColor="#0000ff" weight="4" dash="10,20,20,15" cap="round" strokeAlign="inner" /> <!-- 同样支持颜色表达式 --> <Var name="x1" expression="4" const="true" /> <Var name="a1" expression="gt(#x1,0)" /> <Var name="r1" expression="gt(#x1-3,0)" /> <Var name="g1" expression="gt(#x1-2,0)" /> <Var name="b1" expression="gt(#x1-1,0)" /> <Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/> <!-- <Text x="100" y="720" color="" size="40" textExp=""/> <Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/> <Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/> <--></Lockscreen>[size=14.0000pt][size=14.0000pt][size=18.0000pt]l [size=18.0000pt]圆:[size=14.0000pt]<Circle x=[size=14.0000pt]”” y=”” r=”” fillColor=”” strokeColor=”” weight=”” strokeAlign=”” cap=””[size=14.0000pt]dash=”” />r:圆半径其余与矩形类似,不赘述[size=14.0000pt] [size=14.0000pt]<?xml version="1.0" encoding="UTF-8"?><!-- 代码生成圆示例 --><Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true"> <Wallpaper/> <Button w="720" h="1280"> <Triggers> <Trigger action="up"> <VariableCommand name="x1" expression="#x1-1" /> </Trigger> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <!-- 一些代码生成圆的效果 --> <Circle x="200" y="300" r="100" fillColor="#00ff00" /> <Circle x="500" y="300" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" /> <Circle x="200" y="600" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" strokeAlign="inner" /> <Circle x="500" y="600" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" /> <Circle x="200" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" /> <Circle x="500" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" strokeAlign="inner" /> <Circle x="350" y="1100" r="100" fillColor="#00ff00" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" /> <!-- 同样支持颜色表达式 --> <Var name="x1" expression="4" const="true" /> <Var name="a1" expression="gt(#x1,0)" /> <Var name="r1" expression="gt(#x1-3,0)" /> <Var name="g1" expression="gt(#x1-2,0)" /> <Var name="b1" expression="gt(#x1-1,0)" /> <Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/> <!-- <Text x="100" y="720" color="" size="40" textExp=""/> <Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/> <Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/> <--></Lockscreen>[size=14.0000pt] [size=14.0000pt] [size=14.0000pt]例子与矩形类似。[size=18.0000pt]l [size=18.0000pt]圆弧[size=14.0000pt]<Arc [size=14.0000pt] [size=14.0000pt]x=[size=14.0000pt]”” y=”” w=”” h=”” fillColor=”” startAngle=”” sweep=”” close=”” strokeColor=”” weight=”” strokeAlign=”” cap=”” dash=”” />w:圆弧宽度h:圆弧高度startAngle:圆弧起始角度顺时针为正,水平右向为0度sweep:角度范围,顺时针为正close:是否闭合,true为闭合,false为非闭合[size=14.0000pt] [size=14.0000pt] [size=14.0000pt]<?xml version="1.0" encoding="UTF-8"?><!-- 代码生成圆弧示例 --><Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true"> <Wallpaper/> <ExternalCommands> <Trigger action="resume,pause"> <Command target="angle_sweep.animation" value="play" /> <VariableCommand name="x1" expression="4" /> </Trigger> </ExternalCommands> <Button w="720" h="1280"> <Triggers> <Trigger action="up"> <VariableCommand name="x1" expression="#x1-1" /> </Trigger> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <!-- 一些代码生成圆弧的效果 --> <Arc x="200" y="200" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" close="true" /> <Arc x="500" y="200" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" close="false" /> <Arc x="200" y="500" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" strokeColor="#0000ff" weight="10" close="true" /> <Arc x="500" y="500" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" strokeColor="#0000ff" weight="10" strokeAlign="inner"close="false" /> <Arc x="200" y="800" w="200" h="200" startAngle="-90" sweep="-270" fillColor="#00ff00" strokeColor="#0000ff" weight="10" close="false" cap="round" /> <Arc x="500" y="800" w="200" h="200" startAngle="-90" sweep="#angle_sweep" fillColor="#0000ff00" strokeColor="#0000ff" weight="10" close="false" /> <Arc x="350" y="1100" w="200" h="200" startAngle="-90" sweep="#angle_sweep" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" strokeColor="#000000ff" weight="10" close="true" /> <!-- <Circle x="500" y="600" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" /> <Circle x="200" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" /> <Circle x="500" y="900" r="100" fillColor="#00ff00" strokeColor="#0000ff" weight="10" dash="10,20,20,15" cap="round" strokeAlign="inner" /> <Circle x="350" y="1100" r="100" fillColor="#00ff00" fillColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" /> --> <!-- 同样支持颜色表达式 --> <Var name="x1" expression="4" const="true" /> <Var name="a1" expression="gt(#x1,0)" /> <Var name="r1" expression="gt(#x1-3,0)" /> <Var name="g1" expression="gt(#x1-2,0)" /> <Var name="b1" expression="gt(#x1-1,0)" /> <Var name="angle_sweep" > <VariableAnimation> <AniFrame value="0" time="0"/> <AniFrame value="360" time="5000"/> <AniFrame value="-360" time="15000"/> <AniFrame value="3600000" time="100000000000000"/> </VariableAnimation> </Var> <Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/> <!-- <Text x="100" y="720" color="" size="40" textExp=""/> <Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/> <Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/> <--></Lockscreen>[size=14.0000pt] [size=14.0000pt] [size=18.0000pt]l [size=18.0000pt]直线段[size=14.0000pt]<Line x=[size=14.0000pt]”” y=”” x1=”” y1=””strokeColor=”” weight=”” />x:起始点横坐标y:起始点纵坐标x1:终点横坐标:y1:终点纵坐标其他与上述图形属性类似[size=14.0000pt] [size=14.0000pt]<?xml version="1.0" encoding="UTF-8"?><!-- 代码生成直线段示例 --><Lockscreen frameRate="20" screenWidth="720" showSysWallpaper="true"> <Wallpaper/> <Button w="720" h="1280"> <Triggers> <Trigger action="up"> <VariableCommand name="x1" expression="#x1-1" /> </Trigger> <Trigger action="double"> <ExternCommand command="unlock" /> </Trigger> </Triggers> </Button> <!-- 一些代码生成直线段的效果 --> <Line x="100" y="100" x1="600" y1="100" strokeColor="#00ff00" weight="5" /> <Line x="100" y="300" x1="600" y1="300" strokeColor="#00ff00" weight="5" cap="round" /> <Line x="100" y="500" x1="600" y1="500" strokeColor="#00ff00" weight="5" cap="round" dash="10,20,20,15" /> <Line x="110" y="700" x1="600" y1="700" strokeColor="argb(255*#a1,255*#r1,255*#g1,255*#b1)" weight="100" cap="round" /> <!-- 同样支持颜色表达式 --> <Var name="x1" expression="4" const="true" /> <Var name="a1" expression="gt(#x1,0)" /> <Var name="r1" expression="gt(#x1-3,0)" /> <Var name="g1" expression="gt(#x1-2,0)" /> <Var name="b1" expression="gt(#x1-1,0)" /> <Text x="360" y="1220" align="center" color="#ffffff" size="40" textExp="'双击解锁屏幕'"/> <!-- <Text x="100" y="720" color="" size="40" textExp=""/> <Text x="100" y="800" color="#ffff00" size="40" textExp="#frame_rate"/> <Text x="100" y="840" color="#ffff00" size="40" textExp="'pause_flag'+#pause_flag"/> --></Lockscreen>附件有word版,代码示例和说明文件。[size=14.0000pt]
2015年07月02日
bynewspower