convert uitouch dragging points to custom logic of goal selection

Question

Right now i am working on custom control for fitness related app following is the image of control i have developed so far.

enter image description here

the red view can be draggable vertically only from inner most circle to outer circle.

i have so far managed to drag view vertically from inner most circle to outer circle.

here what i want to achieve,

each circle represent 2500 steps for e.g. innermost circle is 0,then 2500,5000 till outer circle 15000

user can select goal in increment of 500 only

so i am stuck at how to convert red view's sliding points to steps

also i have noticed when i swipe fast i got irregular interval of current touch points so steps increment are low on fast swipe & high on low speed swipe.

any help pointing towards solution is highly appreciated.

here is my code so far.

Circle Code

You can use distance of drag view from the centre of inner most circle to calculate steps — Vijay Masiwal, May 22 '15 at 06:53
@VijayMasiwal can you look at my code i think i am close to solution but don't know what is my mistake? — P R J, May 22 '15 at 07:18

aytunch · Answer 1 · 2015-05-22T08:21:34.300

I would use an overlay UIScrollView for the red draggable part. And only allow vertical scrolling and set pagingEnabled to NO. And set its delegate as the viewcontroller.

Then, you can make your custom paging for 500step per page as follows by setting kCellHeigth to the number of pixels corresponding to 500steps in your image:

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
    CGFloat kMaxIndex = 30; //=15000/500
    CGFloat targetY = scrollView.contentOffset.y + velocity.y * 60.0;
    CGFloat targetIndex = round(targetY / (kCellHeigth + kCellSpacing));
    if (targetIndex < 0)
        targetIndex = 0;
    if (targetIndex > kMaxIndex)
        targetIndex = kMaxIndex;
    targetContentOffset->y = targetIndex * (kCellHeigth + kCellSpacing);
}

-- New Solution After looking at your code --

I see that for iPhone5(width=320) the radius delta between adjacent circles are roughly 20 points. And this space corresponds to 2500steps.

So 1 point = 125 steps Since you want 500 step increments, it corresponds to 4 points in the iPhone5/5s screen. Maybe when the users touch ends, you can try to snap the navigator to the closest 4 point grid:

-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    NSLog(@"%s",__FUNCTION__);
    UITouch *touch = [touches anyObject];
    touchPoint = [touch locationInView:_navView];
    CGPoint newCenter = CGPointMake(_navView.center.x, _navView.center.y + (touchPoint.y - touchStart.y));
    CGFloat yDelta = newCenter.y - _navMinPoint.y;
    int yDeltaMultiple = yDelta / 4;
    int newYDelta = yDeltaMultiple * 4;
    newCenter.y = newYDelta;
    _navView.center = newCenter;
    _labelSteps.center = [self setStepsLabelfromNavView];
}

I didn't write these in Xcode so there might be typos/errors. If this works in iPhone 5/5s, then we will need to change 4 points to a variable.

Thanks for your answer but i have to rebuild whole thing to test your code snippet & i have to deliver it before today end of the day so it would be appreciated if you can provide some solution using my current code i have provided code in question please have a look at it. — P R J, May 22 '15 at 07:45
yeah, I realized you have posted code after answering. I am looking at it now.. It looks highly customized. — aytunch, May 22 '15 at 07:56

convert uitouch dragging points to custom logic of goal selection

1 Answers1