Horizontal UIScrollView - Creating an Incrementing Tape Measure

Question

I would like to create draggable ruler - which when drag increments a counter above.

I understand i will need to use a UIScrollView. However I am unsure as to how to increase a counter when the scroll view dragged to the left, and decrease a counter when dragged to the right? Is there a way to measure this?

Aesthetically, I would also like the UIScrollView to be "tape measure styled" which repeats continuously when dragged. Theoretically I need to continuously repeat an image however in concept am unsure. Could there be a better way?

Answer 1

To know on which page you are, and so, increment or decrement a counter, you can know the page number using this:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
    CGFloat ratio = scrollView.contentOffset.x/scrollView.frame.size.width;
    self.pageControl.currentPage = (int)floor(ratio); // page number
}

To detect the scrolling direction, you can use this:

//somewhere in the header
@property (nonatomic, assign) CGFloat lastContentOffset;
@property (nonatomic, assign) int counter;
//
- (void)scrollViewDidScroll:(UIScrollView *)sender 
{
   ScrollDirection scrollDirection;
   if (self.lastContentOffset > scrollView.contentOffset.x)
      scrollDirection = ScrollDirectionRight;
   else if (self.lastContentOffset < scrollView.contentOffset.x) 
      scrollDirection = ScrollDirectionLeft;

   self.lastContentOffset = scrollView.contentOffset.x;

   // do whatever you need to with scrollDirection here.

   self.counter = (scrollDirection == ScrollDirectionRight) ? self.counter++ : self.counter--;

}

Seen on this post