infinite scrolling boxes

Discussion in 'iOS Programming' started by yunyunyun, Sep 8, 2014.

  1. yunyunyun macrumors newbie

    Joined:
    Sep 8, 2014
    #1
    I'm a beginner at objective C learning to program, please bear with me.

    I am currently trying to draw a column of boxes (UIControls) on the screen, and be able to scroll them upward or downward infinitely. So when one goes off the bottom of the screen its shifted to the bottom and reused.

    I know there must be a lot of mistakes in the code. But the gist of what I am trying to do is: The boxes are all in an array (imArray). When a box scrolls off the bottom of the screen its taken off the end of the array, and inserted at the beginning. Then the box inserts itself graphically into the top of the column.

    The first if statement deals with scrolling off the bottom of the screen, and it works fine. But the second if statement, where i try to do the opposite with similar code works only when i scroll slowly, when i scroll quickly the spacing between boxes becomes uneven, and sometimes a box just locks up on the screen and stops moving.

    Any help is appreciated, and I will try to provide any more clarity that may be needed.

    Code:
    -(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
    {
    
    CGPoint pt = [touch locationInView:self];
    int yTouchEnd = pt.y;
    int yTouchChange = yTouchEnd - yTouchStart;
    
    //iterate through all boxes in imArray
    for(int i = 0; i < self.numberOfSections; i++)
    {
        //1. get box
        STTimeMarker *label = self.imArray[i];
        //2. calculate new label transform
        label.transform = CGAffineTransformTranslate(label.startTransform, 0, yTouchChange);
        CGRect frame = label.frame;
        //3. if the box goes out of the screen on the bottom 
        if (frame.origin.y > [[UIScreen mainScreen]bounds].size.height)
        {
    
            //1. move box that left the screen to to beginning of array
            [self.imArray removeObjectAtIndex:i];
            [self.imArray insertObject:label atIndex:0];
            //2. get y value of box closest to top of screen. 
            STTimeMarker *labelTwo = self.imArray[1];
            CGRect frameTwo =labelTwo.frame;
            //3. put box that just left the screen in front of the box I just got y value of. 
            frame.origin.y = frameTwo.origin.y - self.container.bounds.size.height/self.numberOfSections;
            label.frame=frame;
         }
    
        //1. if the box goes out of the frame on the top
        // (box is 40 pixels tall)
        if (frame.origin.y < -40)
        {  
            [self.imArray removeObjectAtIndex:i];
            [self.imArray addObject:label];
            STTimeMarker *labelTwo = self.imArray[self.numberOfSections-1];
            CGRect frameTwo =labelTwo.frame;
            frame.origin.y = frameTwo.origin.y + self.container.bounds.size.height/self.numberOfSections;
    
            label.frame=frame;
    
        }
    }
    
    return YES;
    }
     
  2. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #2
    You should use a UIScrollView or UITableView or UICollectionView for this. These all have the basic functionality that you're looking for.
     
  3. yunyunyun thread starter macrumors newbie

    Joined:
    Sep 8, 2014
    #3
    I see, already finding many examples. Great to know what to search for. Thanks for the tip!

    However as a next step I would like to try twisting the row of squares into a circle shape, and resetting the squares as the pass a certain point on the circle. And for that I probably can't use uiscrollview?

    If possible I would still like to figure out whats wrong with my current code to make the next step easier.
     
  4. PhoneyDeveloper macrumors 68030

    PhoneyDeveloper

    Joined:
    Sep 2, 2008
    #4
    Couple thoughts.

    The best way to learn iOS development is to follow some course or book. See this for some suggestions. http://forums.macrumors.com/showthread.php?t=518968

    You will learn about table views and scrollviews in any book or course on iOS development.

    Your code seems to be iterating over an array and changing its content while doing that, which can be a problem. You might add some log statements to your code to print out the frames and the array inside your loop. It will probably reveal what is wrong.
     
  5. yunyunyun thread starter macrumors newbie

    Joined:
    Sep 8, 2014
    #5
    thanks for the links! Will start going through the resources.

    As for the code, I actually deleted all the log statements before posting. But it seems like as I scroll up, the array assignments and position assignments work correctly, just 1 iteration too late.

    The boxes calculate where they should be by getting the position of the box that should come right after it, and subtracting or adding a value. So by the time box 1 calculates where it should be relative to box 2 and positions itself, box 2 has moved and the position is wrong. Oddly this only happens when i scroll up, but not down.

    (feeling kind of guilty, im not trying to hold you hostage here with replies, very glad for the help you have already given).
     

Share This Page