倒计时对话框、时钟、地图定位~

2017-09-20 23:00:00 78点赞 382收藏 55评论

Zooper拥有内置的API 代码库,可以调用各种系统信息,例如日历、电池、位置、天气等。利用这些代码配合适当的图片,可以调整出属于自己的widget。

这里给大家演示

制作一款简单的倒计时对话框,非常的有**~先看一下酷友的作品吧

准备素材:安装好zooper、nova的手机、头像图片两张(这里我使用了一个图标和我的头像倒计时对话框、时钟、地图定位~ )。

之前看过上一篇文章的朋友应该对zooper的界面比较熟悉了,没有看过的朋友可查看一下~

安卓手机桌面终极美化小部件:Zooper widget pro 篇一:图标快捷方式制作moresure| 19 评论14 收藏97查看详情


首先分享一下酷友的作品

倒计时对话框、时钟、地图定位~

2 开始制作

首先在桌面新建小部件,这里我新建的窄一点。

倒计时对话框、时钟、地图定位~

新建一个矩形,设置圆角。显示在桌面上如图。

倒计时对话框、时钟、地图定位~

再次新建一个矩形,因为默认白色是看不见的,所以我调整为红色,这个矩形是用来制作对话框的小尖角的。如图,有一个弧度的调整选项,调整这个参数,适当修改矩形的长宽。

倒计时对话框、时钟、地图定位~

得到如图小扇形。

倒计时对话框、时钟、地图定位~

调整位置和旋转。

倒计时对话框、时钟、地图定位~

调整颜色为白色即可。添加一个头像,调整位置可一得到如下图:

倒计时对话框、时钟、地图定位~

添加文字:

倒计时对话框、时钟、地图定位~

这里把这个部件保存为自定义模块,方便后续新建。使用这个模版制作另一个对话框,得到如图:

倒计时对话框、时钟、地图定位~

这里需要实现文字的计时效果,需要使用内置的代码。选择文字模块,选择时间,添加如下文字。格式如下#D年月日时分Td#,这里199208270000就是指1992年8月27日0点0分。计算生日注意换算阳历哦~

同样的道理,电池信息、日历、地点等都是可以用内置的代码来表现出来~可以自己制作简单的数字时钟,电量信息,内存占用,天气状况等小部件。就不用多做介绍啦~

倒计时对话框、时钟、地图定位~

设定好后可以实现如下效果。

倒计时对话框、时钟、地图定位~

重复操作后:

倒计时对话框、时钟、地图定位~

时间、天气、电量这些代码表现的信息都是可以设置自己更新的,不需要手动维护。是不是非常简单,也很有意思呢~倒计时对话框、时钟、地图定位~ (以上文字都是使用“文字内容”编辑,高级模式可以使用“使用文字标记代码”,可以单独定义一句话中的个别字的颜色大小等。代码内容这里先不做介绍啦~)

关于对话框,有个软件叫 会话微件 。各项功能都定制好了,可以直接应用。没有图片处理能力的、并且有兴趣可以试试。


下面介绍一下时钟部件的制作,涉及的部分代码的编写调整~

首先介绍这几个需要用到的代码:

#DH# 一天中的第几个小时(0-23)

#Dmm# 现在是多少分钟(数字)

[ar]...[/ar] 定义物品偏离指定坐标的像素长度(设定物品偏离中心像素的多少)

[as]...[/as] 设置中心旋转的角度(旋转默认物品中心位置移动,物品本身不旋转)

[r]...[/r] 定义物品在指定坐标的选转角度(物品本身的旋转角度)


简单说明一下:这几个属性是定义指针旋转的。

随手做两个最简单示例一下,第一个未设置指针偏离中心。

高级参数设定时针代码:

[r]$(360/60*#dm#)$[/r]

指针第二种样式,就需要使用[ar]...[/ar]和[as]...[/as]。(物品围绕一个点旋转的同时,本身也要旋)

高级参数设定填写时钟代码(此处的代码对应时钟指示整点):

[ar]45[/ar]

[as]$(30*#DH#)$[/as]

[r]$(30*#DH#)$[/r]

倒计时对话框、时钟、地图定位~

介绍一下制作过程:

新建一个矩形(时针,这里调整高度,竖直矩形表示默认的对应刻度为0)

倒计时对话框、时钟、地图定位~


选择高级参数设定

倒计时对话框、时钟、地图定位~


写入如下代码。分析一下, 时针总长130,这里我保留时针尾部10的长度,所以时针需要向上位移55的高度,所以有[ar]55[/ar] 。一个小时对应的角度为30°,一分钟对应时钟偏转角度为30/60,就是0.5°,所以(30*#DH#+30/60*#Dmm#)对应的就是时针的旋转度数。[as]$(30*#DH#+30/60*#Dmm#)$[/as]表示时针中心旋转度数,此时时针还是竖直向上的。[r]$(30*#DH#+30/60*#Dmm#)$[/r]表示时针本身旋转度数,这个时候时针才是指示正确的方向。

倒计时对话框、时钟、地图定位~

同样道理设置分钟(这里分钟的颜色我设置了红色):

倒计时对话框、时钟、地图定位~


完成后如图:

倒计时对话框、时钟、地图定位~


再次添加矩形,设置宽、高,设置笔画宽度。(否则默认是实心白色),设置矩形钟框。(这里我添加了一个小矩形,设置圆角,作为钟的中心点。)

倒计时对话框、时钟、地图定位~

倒计时对话框、时钟、地图定位~


调整圆角可得到圆型钟框。

倒计时对话框、时钟、地图定位~


这里发现红色分钟被压在表框下面,在这个地方可以调整模块上下顺序。

倒计时对话框、时钟、地图定位~


得到如图:

倒计时对话框、时钟、地图定位~


以上就是最基本的时钟样式了,有需要可以自己添加数字制作表盘。因为使用zooper制作太多模块非常麻烦,这里可以自己用ps制作表盘,用png图片的格式插入进来。

倒计时对话框、时钟、地图定位~

实例:

倒计时对话框、时钟、地图定位~



多种样式都是可以自己尝试的!

做了一个稍微复杂一点的,不过比例不协调不是很好看,仅供参考吧:

倒计时对话框、时钟、地图定位~


有兴趣的朋友自己试一试吧,这里不不做多介绍啦~(因为我没有做很多 )

城市定位制作~

之前介绍的简单应用,对图片的处理能力基本没有要求,这篇给大家介绍一下地图定位的做法。

本来我提取了一个地图的png的,后来东西的都做差不多了,发现一个重大的问题,平面的世界地图,不是变形了,就是位置不对。没有找到合适的。(就是中心对应的经纬度是0,0的那种,并且从球体转换为平面的具体方法我不太清楚,就不去花费太多时间自己设计了。)

其实定位小图标用zooper也能画出来,不够后续调整就非常麻烦了,所以我直接选用png图片。网络上有非常多的地图素材和定位标识,有兴趣的朋友可以自己下载尝试制作。这里将两个图片拖入手机(自己能方便找到的位置)。做了个伪定位吧~(手动调整位置)这个不是标准的按照经纬度做xy轴的地图,比较美观。

倒计时对话框、时钟、地图定位~

因为这个软件定位需要番茄,而且我番茄了之后也无法自动定位,知道是版本问题还是什么原因,所以翻墙后我添加了预设地址是南京市区。

用他人做好的模版吧~主要就是需要里面的地图。下载文件,拖入到内部存储设备ZooperWidgetTemplates里面,手机载入模版即可。

跳过许多步骤。

打开模版后如图(听说是国外的大神做的,把地图做成文字,输入英文字幕,字体THEMER MAPS,就出现地图了):(后来我把地图做成png提取出来了...)(这个地图是标准经纬度作为xy轴的,顶部拉伸比较严重,优点是定位可以比较准确......)

倒计时对话框、时钟、地图定位~

第一个文字b就是对应地图了,这里分析一下定位表示的(最下面有个文字w)

#LLONG#表示经度,#LLAT#纬度(软件上的中文标注反了)0.84是经纬度和软件坐标的换算系数。22、31是矫正位移量。(地图的经纬度0,0对应软件坐标不是0,0,并且定位标识的定位的点是其中心的下方,所以是需要矫正的。)

倒计时对话框、时钟、地图定位~

这里在小部件位置中调整默认职位,定位就自动调整了~(选择的是南京,其他文字我就没有调整。)

倒计时对话框、时钟、地图定位~

自己尝试新做一个,修改了地图样式,添加到部件之后:

倒计时对话框、时钟、地图定位~

添加定位标识,定位表示的定位点是在坐标0,0的下方的,这里我调整了地图,移动了10个单位。定位点基本定位在0,0了。

倒计时对话框、时钟、地图定位~

计算一下换算系数

倒计时对话框、时钟、地图定位~

写入代码,注意y偏移是带有“-”号的。“-”表示向上移动。

倒计时对话框、时钟、地图定位~

经纬度能正常定位的话,会正常显示,如果不能定位,就只能手动定位了,下图我这里选择南京。

倒计时对话框、时钟、地图定位~

效果图如下:

倒计时对话框、时钟、地图定位~

搭配日期,时钟,天气等会非常的漂亮~,这里不做演示啦...(因为太累了......)

喜欢就打赏关注点赞留言吧~

倒计时对话框、时钟、地图定位~

如果这篇文章喜欢的朋友较多的话,我会继续更新负一屏的制作,包含进度条(比如电量的显示、ram占用等),天气图标添加替换等内容。不过上一篇文章普遍留言说没有折腾的心了,所以看情况吧~

嘿嘿

展开 收起
55评论

  • 精彩
  • 最新
  • 麻烦把标题改成:安卓手机桌面终极丑化。或许我会因为你标题说实话而打赏

    校验提示文案

    提交
    没事没事 您的金币还是留给你喜欢的文章吧😄

    校验提示文案

    提交
    收起所有回复
  • 时钟我选择谷歌时钟

    校验提示文案

    提交
    我用魔趣6.0有bug 下了个锤子……

    校验提示文案

    提交
    反正比文中的好看就行了。。。

    校验提示文案

    提交
    还有1条回复
    收起所有回复
  • 这标题图片放在首页,很难不被吸进来 [狂汗] [狂汗] [狂汗]

    校验提示文案

    提交
    图也是我自己设计的 基础的教程 谷歌商店里面人家做好的模板都可以下的 [抠鼻孔] 我没画太多时间去做而已😄

    校验提示文案

    提交
    收起所有回复
  • 感谢分享,1069

    校验提示文案

    提交
    1069是什么鬼d(ŐдŐ๑)

    校验提示文案

    提交
    分舵暗号d(ŐдŐ๑)

    校验提示文案

    提交
    收起所有回复
  • 好难得弄,升级太慢了

    校验提示文案

    提交
    要不要收一波模板给你😊

    校验提示文案

    提交
    模板来一套,可以有啊

    校验提示文案

    提交
    收起所有回复
  • 会卡吗??????

    校验提示文案

    提交
    不卡 [捂嘴] …………

    校验提示文案

    提交
    收起所有回复
  • 可定制的东西太多逼死选择障碍患者啊 [自杀]

    校验提示文案

    提交
    不是给你选择 而是啥都没有 你自己做...更自由666 [献黄瓜]

    校验提示文案

    提交
    不过google play 上有很多设计师打包好apk的 安装就好了 自己做好样式也可以打包apk

    校验提示文案

    提交
    收起所有回复
  • 很好很棒,但没心情搞搞震了

    校验提示文案

    提交
    有需要可以 关注公众号 zaiquhaowu 留言联系我~

    校验提示文案

    提交
    收起所有回复
  • 看来卤煮平时很闲

    校验提示文案

    提交
    看你很眼熟呢😄

    校验提示文案

    提交
    收起所有回复
  • 太复杂。。。。。。。。。。。

    校验提示文案

    提交
  • 老了,折腾不起。看你写得这么认真,送你10银

    校验提示文案

    提交
  • 作者只是告诉我们这个东西可以高度自定义并且怎么用,至于丑不丑?用不用?那是个人的问题啊,怎么总有人喷?

    校验提示文案

    提交
  • 有什么用????

    校验提示文案

    提交
  • 挺好玩!!

    校验提示文案

    提交
  • 这个太牛*了,我就不折腾了……

    校验提示文案

    提交
  • 学不来学不来。。。 [doge]

    校验提示文案

    提交
  • 有点意思儿。

    校验提示文案

    提交
  • 玩 zooper 的都是 Android 搞机的老玩家了 [喜极而泣] [喜极而泣]

    校验提示文案

    提交
  • 酷安 网易云 B站 ***张大妈

    校验提示文案

    提交
  • 还是安卓好玩一点

    校验提示文案

    提交
提示信息

取消
确认
评论举报

相关文章推荐

更多精彩文章
更多精彩文章
最新文章 热门文章
382
扫一下,分享更方便,购买更轻松