被一个圆形 slider 困扰两天了

在项目里需要实现一个圆形的 slider 来设置倒计时间。用手滑动一圈就相当于设置了一个小时倒计时，两圈就是两小时。我找到了一个叫 EFCircularSlider 的开源库，圆形滑动样样都有了。关键就在于如何判断用户滑满一圈。

可以使用 currentValue 来得到当前值，如果简单的判断 currentValue 是否等于最大值 60 来判断是否满一圈会有问题，如果从 0 附近逆时针转回来 currentValue 的值又会再次马上从 0 变成 60。

另外，如果用户滑动的非常快，currentValue 的值可能从 49.0000 直接跳到 8.0000 了，直接跳过 60 这个节点值。

如果设置一个区间，满足这个区间就判定为满一圈，那 currentValue 在速度比较慢的时候一到达左端点就满一圈了。

要是 currentValue 达到 60 可以不清零就好了。

于是开始看源码怎么实现了，看懂了大概，改了改没达到目的 😄😄

遇到这种需求，你们怎么做的呢？

滑动

Slider

圆形

29 条回复 • 2015-07-15 17:52:18 +08:00

mhycy

2015-06-04 15:53:07 +08:00

别的不说,如果我需要精确的55秒我该怎么划?慢慢的控制手指滑动到55这个点么?
抱歉我手比较粗,只能找个能用数字输入的APP了

mawing

2015-06-04 15:55:18 +08:00 via Android

是啊，现在定时器应用和闹钟应用都是按来按去的，能不能提供个键盘输入的选项

SeanChense

2015-06-04 15:56:07 +08:00 via iPhone

@mhycy 能比较精确滑到的，因为这个圈比较大的，大概能占据整个屏幕的一半。我也想给他做成直接输入的啊，哈哈。可惜不是我定需求啊

mawing

2015-06-04 15:56:17 +08:00 via Android

@mawing 拨来拨去

ainopara

2015-06-04 15:56:32 +08:00 via iPhone

68 - 49 = 19 < 41 = 49 - 8

SeanChense

2015-06-04 15:57:22 +08:00 via iPhone

@mawing 问题是这是个外包项目，需求不是我定 :(

SeanChense

2015-06-04 16:01:27 +08:00 via iPhone

@ainopara 抱歉，没看懂 :-I

mhycy

2015-06-04 16:02:21 +08:00

忽略你那个库...
应该是记录用户手指各点, 以圆心为坐标轴原点, 判断滑动轨迹.
手指抬起清零.依据轨迹滑动判定滑动了多少圈,多少度...

Elethom

2015-06-04 16:06:05 +08:00

ˊ_>ˋ 這種兩天就夠自己寫一個出來了吧⋯⋯

SeanChense

2015-06-04 16:15:14 +08:00 via iPhone

@mhycy 感觉陷进去了就忘记出来了，谢谢指点。
@Elethom E 大回复我了，哈哈哈。主要是马上期末考试了，想赶紧速战速决没想到掉坑里了。加上自己不一定能写一个出来 :(

Elethom

2015-06-04 16:39:03 +08:00 via iPhone

@SeanChense
並不難，一個 bezier path 加一個 gesture recognizer。之前寫過類似的東西，不過是公司項目不能開源出來。你可以找個有環形進度條的項目比如 MBProgressHUD 參考下，至於超過 100% 的判定可以從 gesture recognizer 取路徑點的座標和中心點做比較。

SeanChense

2015-06-04 16:53:39 +08:00

@Elethom Thank you a lot.

ruoyu0088

2015-06-04 18:30:12 +08:00

用一个angle变量对前后两次读数的差累加：

diff = currentValue - lastValue
if (diff > 30) diff -= 60
elif(diff < -30) diff += 60
angle += diff

402645707

2015-06-04 19:38:36 +08:00

这是不华为的安卓闹钟吗

402645707

2015-06-04 19:38:49 +08:00

@402645707 这不是

SeanChense

2015-06-04 19:40:34 +08:00

@Elethom 嘿。我已经开始用 UIBezierPath 在写了，但是我发现重点还是在超过一圈的问题上。假设 touch 的起始点为 A ，终点为 B ，center 为 O。如果用户画满多圈则 ∠AOB 是个 2kπ + α 的值，不满一圈才是 α。问题还是又还原了，我怎么知道用户画满一圈了囧。

path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.bounds.size.width * 0.5, self.bounds.size.height * 0.5)
radius:70
startAngle:DEGREES_TO_RADIANS(-90)
endAngle:DEGREES_TO_RADIANS(toAngle)
clockwise:YES];

SeanChense

2015-06-04 19:41:14 +08:00

@402645707 可能是吧，我没有用到过

GordianZ

MOD

2015-06-04 20:40:22 +08:00

@SeanChense 其实有时候你没办法区分，用户可以直接从12点钟方向竖直滑倒6点钟方向……

GordianZ

MOD

2015-06-04 20:43:43 +08:00

@SeanChense 或者有个蛋疼的办法，给这个 slider 设置一个速度 max, 两次数值之间的步进只能是 10 度，滑快了就不行，只要你的 max 步进比 pi 要小就只可能是一个方向。

SeanChense

2015-06-04 20:44:01 +08:00

@GordianZ 这大概是最极端的情况吧。 Android 组那边的实现效果就都解决了这些问题。直接划过去的话，我观察了下要么是加一个小时，要么是减一个小时。

SeanChense

2015-06-04 20:49:46 +08:00

@GordianZ 就相当于把整个圆周化成了 12 离散的点，动一下就进一格。逆时针从 1 点钟方向回到 11 点方向是最复杂的了，一方面要判断方向另一方面要判断有没有倒着回到 12 点这个位置来给小时数减一。我现在建议一整个圈代表二十四个小时，划满就清零。这样最简单省事了我也是刚刚下了个闹钟应用看到是这么做的。

Elethom

2015-06-04 22:42:38 +08:00

@SeanChense
這是一個很簡單的問題，你自己沒有想清楚而已。

SeanChense

2015-06-04 23:36:16 +08:00

@Elethom 既然您这么说，那便是有解决办法了。I will work it out.

int64ago

2015-06-04 23:54:01 +08:00

其实并没有滑动一圈，那个只有上下左右。。。

kinwa

2015-06-05 16:02:14 +08:00

android的闹钟就是这样设置的，当然是有刻度的。还有数字。原生系统就是这样的。

SeanChense

2015-07-15 13:07:53 +08:00 via iPhone

@Elethom 我现在还是卡在超过 100% 的判断上。您能详细说说吗？

Elethom

2015-07-15 15:55:20 +08:00

@SeanChense
拖一個多月也是醉，不用賠違約金麼。重點根本不在於是否超過 100%，而是連續的兩個點判斷增加還是減少。

Elethom

2015-07-15 16:13:19 +08:00

算了我再解釋一下吧。
比如連續的兩個點相對於 12 點方向的 radian，currentRad 和 lastRad。
增加時有兩種可能
1. (currentRad > lastRad && currentRad - lastRad < M_PI)
2. (currentRad < lastRad && lastRad - currentRad > M_PI)
1 || 2 的時候可以看做是增加，反之則是減少，且 1 不跨過 12 點方向圈數不增加，2 跨過 12 點方向圈數增加，至於你圈數和當前 radian 是否分別存儲就隨意了。

SeanChense

2015-07-15 17:52:18 +08:00 via iPhone

@Elethom 谢谢，我继续试试