請問這樣的界面是如何實現的？

請問這樣的界面是如何實現的？希望大神來解答。

---

今天下午各種Google之後終於實現了這個界面的各種效果。最終的界面這樣的，基本實現了問題裡面的所有元素。

代碼在mutexliu/ZhihuAnswer · GitHub

畫圖的過程碰到的問題有：

1.畫圓角。

Path path = new Path();
path.moveTo(left, top);
path.lineTo(right-radius, top);
path.quadTo(right,top,right, top+radius);


其中

Path.quadTo (float x1, float y1, float x2, float y2)


表示添加一條貝塞爾曲線，起點為Path的當前位置，(x1,y1)為貝塞爾曲線控制點，(x2,y2)為貝塞爾曲線的終點。當起點，控制點和終點成直角的時候就會得到一條1/4圓弧。

2.圓弧終點的圓角。

Canvas.drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)


設置Paint的Style為Stroke，之後畫出來的結果是這樣的

在圓弧的終點有很尖銳的角度。

各種Google之後找到設置筆刷樣式的函數

Paint.setStrokeCap(Paint.Cap.ROUND);


3.圓形漸變色。

int[] colors = {0xFF9A9BF8,0xFF9AA2F7, 0xFF65CCD1,0xFF63D0CD,0xFF68CBD0,0xFF999AF6,0xFF9A9BF8};
float[] positions = {0,1f/6,2f/6,3f/6,4f/6,5f/6,1};
SweepGradient mSweepGradient = new SweepGradient(mArcCenterX, mArcCenterX, colors , positions);

mStrokePaint.setShader(mSweepGradient);


4.畫虛線

mLinePaint.setPathEffect(new DashPathEffect(new float[] {10,3}, 0));
canvas.drawLine(xPos, yPos, mWidth - xPos, yPos,mLinePaint);


DashPathEffect生效需要把硬體加速關掉。

setLayerType(View.LAYER_TYPE_SOFTWARE, null);


---

我寫過一個控制項lzyzsd/CircleProgress · GitHub

---

我怎麼覺得這種界面的難點在美工，配色等方面。一般純程序員搞出來的總有股子山寨氣息，就是配色和美工搞不好。。。

---

正好最近在做類似的實現。

Canvas裡面有專門畫圓弧的函數：

public void drawArc (RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)


畫筆可以設置圓：

Paint#public void setStrokeCap (Paint.Cap cap)
Paint.Cap ROUND


然後添加漸變(Linear, Sweep, whatever)：

Paint#public Shader setShader (Shader shader)


如果你有興趣，還可以通過Interpolator來算個轉圈角度的動畫：

public abstract float getInterpolation (float input)


底下的柱狀圖同理，可以通過drawRect和drawLine完成。

PS：有關通過Interpolator算動畫效果其實很有意思的，推薦研究一下。

############

阿里智能的健康也是這個鳥樣，還完全不考慮安卓實現，WTF

---

大半夜更新。。。( ????? )

///12.25 23點

and

閑著沒事忽然發現，QQ是醬紫的。。。

這種自定義UI組件算是從事Android開發必備的技能之一吧。多寫多練很快就能掌握這裡面的技巧，掌握了技巧之後遇到具體需求和設計的時候，就會很快做出成果。

努力做到舉一反三，而不是拘泥於一兩個特定的案例。

。。

具體實現樓上已經講的很清楚了，還有源碼

不過一定要動手實現一遍

---

circleprogress

---

我知道的只有自定義View = =

（對於程序猿來說。。。ui的實現就是多寫代碼）

---

推薦閱讀：