這種ui誰能給點思路？

01-11

這種可以滾動的弧形UI誰能給點建議

前兩天剛寫過一個圓弧形漸變的答案，請問這樣的界面是如何實現的？ - 知乎用戶的回答

效果類似，正好兩個一起答了。

最終的效果是這樣的

ui全部實現了，觸摸滑動的事件也實現了。

代碼在mutexliu/ZhihuAnswer · GitHub

基本思路是這樣的：

圓弧是分兩部分，一部分為白色，一部分為漸變色。

白色部分直接用drawArc函數就可以畫出來。

漸變色部分對畫筆設置SweepGradient就可以了。

mArcPaint.setShader(mSweepGradient);

然後在圓弧上畫灰色的線。

這些線段有旋轉對稱性。很適合用Canvas.rotate()這個函數。

for(int i = 0; i&<120;i++){ canvas.drawLine(x1, y1, x2, y2, mLinePaint); canvas.rotate(3,xCenter,yCenter); }

每次畫完一條線後將canvas旋轉3度，再在相同的坐標上畫線。

觸摸滑動的事件：

在onTouchEvent()中獲取當前點的坐標，然後判斷位置是否在圓弧內。

然後根據當前點的角度設置溫度，並invalidate()重繪即可。

兩張圖片，第一張是滿格的弧形圖，第二張是白色帶分隔線的弧形圖，畫足夠粗的半圓用xefmode與第一張疊加，再覆蓋第二張

給你推薦本書。

剛開始看的時候還沒看懂，後來發現在考數學。。你這個正好是它的加強版。

結合前面兩個回答，用surfaceView和兩張圖

一步一步教你如何實現阿里芝麻信用分儀錶盤效果

界面簡潔為上！

1. 把「製冷，低風」狀態顯示去掉，把「模式和風速」兩個按鈕挪到這個位置。「模式」和「風速」按鈕的文字顯示當前的狀態。

2. 溫度弧形顯示區可以直接用手指在滑動控制，把正中間的那個"+,-"什麼的去掉，太傳統，太土了。在APP第一次打開的時候，圖示告訴用戶怎麼用。

3. 電源按鈕放哪裡適合，視美觀而定。

提供一個思路，讓UI先畫出一個漸變的圓弧，然後用canvas畫白色的圓弧進行遮罩，只露出需要顯示的漸變圓弧，這樣比直接畫漸圓弧變要簡單

底部顏色條直接用漸變色就行，上面疊一層環，每格透底，這樣簡單點。

surefaceview

不知道這樣可否！進度條自定義背景圖，自定義進度載入圖，當進度到達一定進度比，就更換載入圖。

https://github.com/siwangqishiq/DiscView

http://www.eoeandroid.com/thread-536355-1-1.html?_dsign=a672526c這個是我寫的一個儀錶盤的源碼，跟這個是類似的，其實就是圓的數學公式，用一個for循環去畫短線，顏色的話就是不同色值的paint

直接canvas畫啊，用gradient畫漸變圓弧，再在弧上面畫灰線，就是算坐標麻煩，canvas好像有rotate之類的方法可以看一看