英勇的应战:诞生一个自定义圆环进展条 View

我像往常相同,在网上冲浪。一则评论引起了我的注意,评论来自 Android自定义 View 圆环的绘制

ChatGPT 能够写出自定义 view 么

当 ChatGPT 遇上 Android 自定义圆环进度条

作者写的自定义 View ,作用是这样的:

当 ChatGPT 遇上 Android 自定义圆环进度条

说实话,看起来有一点点复杂。不过以我这几个月和 ChatGPT 的共处,我对它的实力仍是有信心的。写个自定义 View 应该不成问题。不过我也很好奇成果会是咋样,究竟没有试过。那就废话不多说,直接开始!

上 Prompt,(基本上是参照作者的完成用言语翻译了一遍):

当 ChatGPT 遇上 Android 自定义圆环进度条

几秒之后,代码写好了,赶紧打开 AS 新建工程跑了起来,作用是这样的:

当 ChatGPT 遇上 Android 自定义圆环进度条

额,差距有点大。不过,我也不能怪它,究竟我说的好像便是这个作用。

将魔法注入 XML:色彩装备之道

代码初始化完成了,但是为了让自定义圆环进展条 View 愈加灵敏易用,我们决定将色彩属性放入 XML 文件。凭借context.obtainStyledAttributes() 的魔法,我们从 AttributeSet 中获取了相关色彩装备。

总之,操作之后,代码看起来愈加舒服了,简略摘抄一下这部分的对话内容:

当 ChatGPT 遇上 Android 自定义圆环进度条

细节至上:款式微调的艺术

接下来便是一些对齐 “规划稿” 的操作了,我自己手动调整了色彩,文字大小,圆环大小等。碰到不清楚的,就问它。

关于暗影设置和圆角圆圈相关的问答:

当 ChatGPT 遇上 Android 自定义圆环进度条

当 ChatGPT 遇上 Android 自定义圆环进度条

当 ChatGPT 遇上 Android 自定义圆环进度条

不清楚的当地也就暗影和画笔圆角这两部分,其他的代码多少都有所了解,能够自己尝试着改改。假如你对自定义 View 不是很清楚,问它问题,相信它也能很完美的答复上来。

调整完之后的作用,和 “规划稿” 大差不差了:

当 ChatGPT 遇上 Android 自定义圆环进度条

让圆环动起来:百分比动画的奥秘

一场视觉盛宴当然离不开动画作用。为了让圆环进展条愈加生动有趣,我们使用了 ValueAnimator 为进展弧添加了动画作用。通过创立一个滑润过渡的动画,我们让进展弧在短短一秒钟内呈现出吸引人的改变。

为了简略起见,我直接把我的代码 copy 给了它:

当 ChatGPT 遇上 Android 自定义圆环进度条

它的答复也很准确,这里涉及到多个变量(出勤率的百分比,圆环的百分比)的改变,用 ValueAnimator 会愈加适宜。

当 ChatGPT 遇上 Android 自定义圆环进度条

当 ChatGPT 遇上 Android 自定义圆环进度条

花费的时刻并没有多久,全体的作用已经完美复原了。说实话,假如是让我自己写出来,确实是没问题的。无非是需求花费更多时刻罢了。ChatGPT 和我一同写,大约花费 2h 的工作量。参考技术博客去写,大约需求 0.5d ~ 1d 吧,并且进程想想就会比较痛苦(究竟是自定义 View)。

如下是最终的作用:

当 ChatGPT 遇上 Android 自定义圆环进度条

最后的最后

GPT-4 写自定义 View,完全是没问题的。GPT-3.5 我不知道,没有尝试过,感兴趣的朋友也能够试试。

要是在几个月之后,GPT-4 开放了图片上传的接口,那能够预见的是,能够完成 Figma 规划稿 -> UI Code Any Platform。

人类会被 GPT 淘汰吗?我感觉不学习的人会被淘汰。

就我自己和 ChatGPT 对话的体验来说,学习常识,简直是一种享受。它就像一个什么都懂的高手,在用你能承受的常识的层次,你能理解的言语,来答复你的问题。这比去网上看大佬的技术博客来的学的快多了。详细得自行体验才能感受到。

十分等待 GPT 今后的发展,让人类从当时繁杂的劳动中脱离出来,(然后进入到另一个充满深重劳动的范畴 :-)。

Related Links

和 ChatGPT的对话详情(后边一部分的代码在导出为图片时被吃掉了)

Github Source Code

Android自定义View的绘制,往往都是从圆环开始