V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
iOS 开发实用技术导航
NSHipster 中文版
http://nshipster.cn/
cocos2d 开源 2D 游戏引擎
http://www.cocos2d-iphone.org/
CocoaPods
http://cocoapods.org/
Google Analytics for Mobile 统计解决方案
http://code.google.com/mobile/analytics/
WWDC
https://developer.apple.com/wwdc/
Design Guides and Resources
https://developer.apple.com/design/
Transcripts of WWDC sessions
http://asciiwwdc.com
Cocoa with Love
http://cocoawithlove.com/
Cocoa Dev Central
http://cocoadevcentral.com/
NSHipster
http://nshipster.com/
Style Guides
Google Objective-C Style Guide
NYTimes Objective-C Style Guide
Useful Tools and Services
Charles Web Debugging Proxy
Smore
SeanChense
V2EX  ›  iDev

被一个圆形 slider 困扰两天了

  •  
  •   SeanChense · 2015-06-04 15:47:25 +08:00 via iPhone · 3881 次点击
    这是一个创建于 3451 天前的主题,其中的信息可能已经有所发展或是发生改变。
    在项目里需要实现一个圆形的 slider 来设置倒计时间。用手滑动一圈就相当于设置了一个小时倒计时,两圈就是两小时。我找到了一个叫 EFCircularSlider 的开源库,圆形滑动样样都有了。关键就在于如何判断用户滑满一圈。


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

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

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


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

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




    遇到这种需求,你们怎么做的呢?
    29 条回复    2015-07-15 17:52:18 +08:00
    mhycy
        1
    mhycy  
       2015-06-04 15:53:07 +08:00
    别的不说,如果我需要精确的55秒我该怎么划?慢慢的控制手指滑动到55这个点么?
    抱歉我手比较粗,只能找个能用数字输入的APP了
    mawing
        2
    mawing  
       2015-06-04 15:55:18 +08:00 via Android
    是啊,现在定时器应用和闹钟应用都是按来按去的,能不能提供个键盘输入的选项
    SeanChense
        3
    SeanChense  
    OP
       2015-06-04 15:56:07 +08:00 via iPhone
    @mhycy 能比较精确滑到的,因为这个圈比较大的,大概能占据整个屏幕的一半。我也想给他做成直接输入的啊,哈哈。可惜不是我定需求啊
    mawing
        4
    mawing  
       2015-06-04 15:56:17 +08:00 via Android
    @mawing 拨来拨去
    ainopara
        5
    ainopara  
       2015-06-04 15:56:32 +08:00 via iPhone
    68 - 49 = 19 < 41 = 49 - 8
    SeanChense
        6
    SeanChense  
    OP
       2015-06-04 15:57:22 +08:00 via iPhone
    @mawing 问题是这是个外包项目,需求不是我定 :(
    SeanChense
        7
    SeanChense  
    OP
       2015-06-04 16:01:27 +08:00 via iPhone
    @ainopara 抱歉,没看懂 :-I
    mhycy
        8
    mhycy  
       2015-06-04 16:02:21 +08:00
    忽略你那个库...
    应该是记录用户手指各点, 以圆心为坐标轴原点, 判断滑动轨迹.
    手指抬起清零.依据轨迹滑动判定滑动了多少圈,多少度...
    Elethom
        9
    Elethom  
       2015-06-04 16:06:05 +08:00
    ˊ_>ˋ 這種兩天就夠自己寫一個出來了吧⋯⋯
    SeanChense
        10
    SeanChense  
    OP
       2015-06-04 16:15:14 +08:00 via iPhone
    @mhycy 感觉陷进去了就忘记出来了,谢谢指点。
    @Elethom E 大回复我了,哈哈哈。主要是马上期末考试了,想赶紧速战速决没想到掉坑里了。加上自己不一定能写一个出来 :(
    Elethom
        11
    Elethom  
       2015-06-04 16:39:03 +08:00 via iPhone   ❤️ 1
    @SeanChense
    並不難,一個 bezier path 加一個 gesture recognizer。之前寫過類似的東西,不過是公司項目不能開源出來。你可以找個有環形進度條的項目比如 MBProgressHUD 參考下,至於超過 100% 的判定可以從 gesture recognizer 取路徑點的座標和中心點做比較。
    SeanChense
        12
    SeanChense  
    OP
       2015-06-04 16:53:39 +08:00
    @Elethom Thank you a lot.
    ruoyu0088
        13
    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
        14
    402645707  
       2015-06-04 19:38:36 +08:00
    这是不华为的安卓闹钟吗
    402645707
        15
    402645707  
       2015-06-04 19:38:49 +08:00
    @402645707 这不是
    SeanChense
        16
    SeanChense  
    OP
       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
        17
    SeanChense  
    OP
       2015-06-04 19:41:14 +08:00
    @402645707 可能是吧,我没有用到过
    GordianZ
        18
    GordianZ  
    MOD
       2015-06-04 20:40:22 +08:00
    @SeanChense 其实有时候你没办法区分,用户可以直接从12点钟方向竖直滑倒6点钟方向……
    GordianZ
        19
    GordianZ  
    MOD
       2015-06-04 20:43:43 +08:00
    @SeanChense 或者有个蛋疼的办法,给这个 slider 设置一个速度 max, 两次数值之间的步进只能是 10 度,滑快了就不行,只要你的 max 步进比 pi 要小就只可能是一个方向。
    SeanChense
        20
    SeanChense  
    OP
       2015-06-04 20:44:01 +08:00
    @GordianZ 这大概是最极端的情况吧。 Android 组那边的实现效果就都解决了这些问题。直接划过去的话,我观察了下要么是加一个小时,要么是减一个小时。
    SeanChense
        21
    SeanChense  
    OP
       2015-06-04 20:49:46 +08:00
    @GordianZ 就相当于把整个圆周化成了 12 离散的点,动一下就进一格。逆时针从 1 点钟方向回到 11 点方向是最复杂的了,一方面要判断方向另一方面要判断有没有倒着回到 12 点这个位置来给小时数减一。我现在建议一整个圈代表二十四个小时,划满就清零。这样最简单省事了 我也是刚刚下了个闹钟应用看到是这么做的。
    Elethom
        22
    Elethom  
       2015-06-04 22:42:38 +08:00
    @SeanChense
    這是一個很簡單的問題,你自己沒有想清楚而已。
    SeanChense
        23
    SeanChense  
    OP
       2015-06-04 23:36:16 +08:00
    @Elethom 既然您这么说,那便是有解决办法了。I will work it out.
    int64ago
        24
    int64ago  
       2015-06-04 23:54:01 +08:00
    其实并没有滑动一圈,那个只有上下左右。。。
    kinwa
        25
    kinwa  
       2015-06-05 16:02:14 +08:00
    android的闹钟就是这样设置的,当然是有刻度的。还有数字。原生系统就是这样的。
    SeanChense
        26
    SeanChense  
    OP
       2015-07-15 13:07:53 +08:00 via iPhone
    @Elethom 我现在还是卡在超过 100% 的判断上。您能详细说说吗?
    Elethom
        27
    Elethom  
       2015-07-15 15:55:20 +08:00
    @SeanChense
    拖一個多月也是醉,不用賠違約金麼。重點根本不在於是否超過 100%,而是連續的兩個點判斷增加還是減少。
    Elethom
        28
    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
        29
    SeanChense  
    OP
       2015-07-15 17:52:18 +08:00 via iPhone
    @Elethom 谢谢,我继续试试
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1037 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 22:07 · PVG 06:07 · LAX 14:07 · JFK 17:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.