Touch and pull down a view

Question

I have a uiview at the top of the interface (below the status bar) that only the bottom part of it is shown.

Actually, I want to make the red uiview to slide down to be entirely shown by drag such as the notificationcenter in the native iOS and not just by taping a button.

What should I use to "touch and pull down" the uiview so it could be shown entirely ?

Answer 1

Make a subclass of UIView.

Override touchesBegan:withEvent and touchesMoved:withEvent.

In the touchesBegan perhaps make a visual change so the user knows they are touching the view. In the touchesMoved use [[touches anyObject] locationInView:self] and [[touches anyObject] previousLocationInView:self]

to calculate the difference between the current touch position and the last touch position (detect drag down or drag back up).

Then if you're custom drawing, call [self setNeedsDisplay] to tell your view to redraw in it's drawRect:(CGRect)rect method.

Note: this assumes multiple touch is not used by this view.

Answer 2

No needs to find a workaround of drag-n-drop. An UIScrollView can do it without any performance loss brought by listening on touches.

@interface PulldownView : UIScrollView

@end

@implementation PulldownView

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (!self) {
        return self;
    }
    self.pagingEnabled = YES;
    self.bounces = NO;
    self.showsVerticalScrollIndicator = NO;
    [self setBackgroundColor:[UIColor clearColor]];
    double pixelsOutside = 20;// How many pixels left outside.
    self.contentSize = CGSizeMake(320, frame.size.height * 2 - pixelsOutside);
    // redArea is the draggable area in red.
    UIView *redArea = [[UIView alloc] initWithFrame:frame];
    redArea.backgroundColor = [UIColor redColor];
    [self addSubview:redArea];
    return self;
}

// What this method does is to make sure that the user can only drag the view from inside the area in red.
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event
{
    if (point.y > height)
    {
        // Leaving useless touches to the views under it.
        return nil;
    }
    return [super hitTest:point withEvent:event];
}

@end

How to use:
1. Initialize an instance of PulldownView.
2. Add any content you want to display to the instance using [addSubview:].
3. Hide the area in red.

[pulldownView setContentOffset:CGPointMake(0, heightOfTheView - pixelsOutside)];

This is a simple example. You can add any features to it like adding a titled button bar on the bottom of the draggable area to implement click-n-drop, or adding some method to the interface to reposition it by the caller.

Answer 3

Refer to my answer in iPhone App: implementation of Drag and drop images in UIView

You just need to use TouchesBegin and TouchesEnded methods. In that example, I have shown how to use CGPoint, Instead of that you have to try to use setFrame or drawRect for your view.

As soon as TouchesMoved method is called you have to use setFrame or drawRect (not sure but which ever works, mostly setFrame) also take the height from CGPoint.