请问这样的界面是如何实现的？-H5教程-PHP中文网

请问这样的界面是如何实现的？

php中文网

发布： 2016-06-07 08:41:41

原创

1740人浏览过

回复内容：

今天下午各种Google之后终于实现了这个界面的各种效果。最终的界面这样的，基本实现了问题里面的所有元素。

代码在mutexliu/ZhihuAnswer · GitHub
画图的过程碰到的问题有：
1.画圆角。

<code class="java"><span class="n">Path</span> <span class="n">path</span> <span class="o">=</span> <span class="k">new</span> <span class="n">Path</span><span class="o">();</span>
<span class="n">path</span><span class="o">.</span><span class="na">moveTo</span><span class="o">(</span><span class="n">left</span><span class="o">,</span> <span class="n">top</span><span class="o">);</span>
<span class="n">path</span><span class="o">.</span><span class="na">lineTo</span><span class="o">(</span><span class="n">right</span><span class="o">-</span><span class="n">radius</span><span class="o">,</span> <span class="n">top</span><span class="o">);</span>
<span class="n">path</span><span class="o">.</span><span class="na">quadTo</span><span class="o">(</span><span class="n">right</span><span class="o">,</span><span class="n">top</span><span class="o">,</span><span class="n">right</span><span class="o">,</span> <span class="n">top</span><span class="o">+</span><span class="n">radius</span><span class="o">);</span>
</code>

登录后复制

我写过一个控件lzyzsd/CircleProgress · GitHub

我怎么觉得这种界面的难点在美工，配色等方面。一般纯程序员搞出来的总有股子山寨气息，就是配色和美工搞不好。。。大半夜更新。。。( •̀∀•́ )

///12.25 23点

and

闲着没事忽然发现，QQ是酱紫的。。。

这种自定义UI组件算是从事Android开发必备的技能之一吧。多写多练很快就能掌握这里面的技巧，掌握了技巧之后遇到具体需求和设计的时候，就会很快做出成果。
努力做到举一反三，而不是拘泥于一两个特定的案例。

。。

具体实现楼上已经讲的很清楚了，还有源码

不过一定要动手实现一遍我知道的只有自定义View = =
（对于程序猿来说。。。ui的实现就是多写代码）正好最近在做类似的实现。
Canvas里面有专门画圆弧的函数：

<code class="java"><span class="kd">public</span> <span class="kt">void</span> <span class="nf">drawArc</span> <span class="o">(</span><span class="n">RectF</span> <span class="n">oval</span><span class="o">,</span> <span class="kt">float</span> <span class="n">startAngle</span><span class="o">,</span> <span class="kt">float</span> <span class="n">sweepAngle</span><span class="o">,</span> <span class="kt">boolean</span> <span class="n">useCenter</span><span class="o">,</span> <span class="n">Paint</span> <span class="n">paint</span><span class="o">)</span>
</code>登录后复制

circleprogress