被一个圆形 slider 困扰两天了

2015-06-04 15:47:25 +08:00
 SeanChense
在项目里需要实现一个圆形的 slider 来设置倒计时间。用手滑动一圈就相当于设置了一个小时倒计时,两圈就是两小时。我找到了一个叫 EFCircularSlider 的开源库,圆形滑动样样都有了。关键就在于如何判断用户滑满一圈。


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

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

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


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

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




遇到这种需求,你们怎么做的呢?
3907 次点击
所在节点    iDev
29 条回复
mhycy
2015-06-04 15:53:07 +08:00
别的不说,如果我需要精确的55秒我该怎么划?慢慢的控制手指滑动到55这个点么?
抱歉我手比较粗,只能找个能用数字输入的APP了
mawing
2015-06-04 15:55:18 +08:00
是啊,现在定时器应用和闹钟应用都是按来按去的,能不能提供个键盘输入的选项
SeanChense
2015-06-04 15:56:07 +08:00
@mhycy 能比较精确滑到的,因为这个圈比较大的,大概能占据整个屏幕的一半。我也想给他做成直接输入的啊,哈哈。可惜不是我定需求啊
mawing
2015-06-04 15:56:17 +08:00
@mawing 拨来拨去
ainopara
2015-06-04 15:56:32 +08:00
68 - 49 = 19 < 41 = 49 - 8
SeanChense
2015-06-04 15:57:22 +08:00
@mawing 问题是这是个外包项目,需求不是我定 :(
SeanChense
2015-06-04 16:01:27 +08:00
@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
@mhycy 感觉陷进去了就忘记出来了,谢谢指点。
@Elethom E 大回复我了,哈哈哈。主要是马上期末考试了,想赶紧速战速决没想到掉坑里了。加上自己不一定能写一个出来 :(
Elethom
2015-06-04 16:39:03 +08:00
@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
2015-06-04 20:40:22 +08:00
@SeanChense 其实有时候你没办法区分,用户可以直接从12点钟方向竖直滑倒6点钟方向……
GordianZ
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 组那边的实现效果就都解决了这些问题。直接划过去的话,我观察了下要么是加一个小时,要么是减一个小时。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/196100

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX