Create a screen like the iPhone home screen with Scrollview and Buttons

Question

I'm working on a project and need to create a screen similar to the iPhone home screen:

• A scrollview with multiple pages
• A bunch of icons
• When not in edit mode, swipe through different pages (even I started the touch on an icon)
• When not in edit mode, tap an icon to do something
• When in edit mode, drag the icon to swap places, and even swap to different pages
• When in edit mode, tap an icon to remove it

Previously I read from several forums that I have to subclass UIScrollview in order to have touch input for the UIViews on top of it. So I subclassed it overriding the methods to handle touches:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    //If not dragging, send event to next responder
    if (!self.dragging)
        [self.nextResponder touchesBegan:touches withEvent:event];
    else
        [super touchesBegan:touches withEvent:event];
}

In general I've override the touchesBegan:, touchesMoved: and touchesEnded: methods similarly.

Then in the view controller, I added to following code:

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
    UITouch *touch = [touches anyObject];
    UIView *hitView = (UIView *)touch.view;
    if ([hitView isKindOfClass:[UIView class]]) {
        [hitView doSomething];
        NSLog(@"touchesBegan");
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
    // Some codes to move the icons
    NSLog(@"touchesMoved");
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
    NSLog(@"touchesEnded");
}

When I run the app, I have the touchesBegan method detected correctly. However, when I tried to drag the icon, the icon just moved a tiny bit and then the page started to scroll. In console, it logged with 2 or 3 "touchesMoved" message only. However, I learned from another project that it should logged tonnes of "touchesMoved" message as long as I'm still dragging on the screen.

(I'm suspecting I have the delaysContentTouches set to YES, so it delays a little bit when I tried to drag the icons. After that minor delay, it sends to signal back to the scrollview to scroll through the page. Please correct me if I'm wrong.)

So if any help on the code to perform the above tasks would be greatly appreciated. I've stuck in this place for nearly a week with no hope. Thanks a lot.

Answer 1

Very Good Example For Uiscrollview Like iphone Home Screen

https://github.com/jarada/myLauncher

Answer 2

Here i have been working on an app that is like the weather app…here is what you should do… Go to the apple developer website and search for an example app called PageControl. Then once you get that scrolllview to work with your app you should have a custom method that calculates the height and the width of the UIViews (ie the icons) and you [UIColor colorWithPatternImage:(UIImage *)image)] so you can give it an image. Then you throw the view s in a mutable array and the animation i would play around with the CA animations and the UIView animations or even going custom.

Answer 3

If you are targeting iOS 3.2+ I recommend using UIGestureRecognizer . For your use case UIPanGestureRecognizer is the right choice.

The gesture handling code should be look something like this:

- (void)handlePanGesture:(UIGestureRecognizer *)gestureRecognizer;
{   
    if (gestureRecognizer.state == UIGestureRecognizerStateBegan) {
       panOffset = [gestureRecognizer locationOfTouch:0 inView:topView];
    }

    if (gestureRecognizer.state == UIGestureRecognizerStateChanged) {
        CGPoint delta = self.scrollView.contentOffset;
            delta += ([gestureRecognizer locationOfTouch:0 inView:scrollView].x - panOffset.x);
        self.scrollView.contentOffset = delta;
    }
    if (gestureRecognizer.state == UIGestureRecognizerStateEnded) {
                if(self.scrollView.contentOffset >= (self.scrollView.bounds.size.width / 2)) {
                   // animate to the next multiple of self.scrollView.bounds.size.width
                } else {
                   // animate to previous multiple
                }

    }
}