如何实现连续拖放菜单效果?

时间:2012-01-10 23:42:12

标签: iphone ios xcode ipad

我正在尝试实现拖放菜单效果。我不知道如何解决这个问题,也许有人有这种确切影响的经验。

很简单,当用户触摸菜单项时,我希望图形显示在他们的触摸位置。他们的触摸现在将控制图形的平移。在释放触摸后,图形将位于其位置并呈现完整的alpha。

我已经熟悉创建平移手势和实例化图形。到目前为止,我可以创建触摸菜单项的图形。最大的问题是我如何“越过”触摸手势,这是一个单一的连续动作。

此外,菜单项应该是UIButton还是UIImageView?

任何帮助表示赞赏。谢谢 enter image description here

2 个答案:

答案 0 :(得分:1)

我对这个玩得很开心。以下代码将在触摸时从按钮中抓取图像,将该图像拖动到alpha = 0.5,并在您的触摸以alpha = 1.0结束时将其放下。之后它将继续拖延。

导入QuartzCore后,创建一个新文件。 .h应该是:

#import <Foundation/Foundation.h>
#import <QuartzCore/CAGradientLayer.h>
#import <QuartzCore/CALayer.h>

@interface DraggableImage : CAGradientLayer

- (void)draw:(UIImage *)image;

- (void)moveToFront;

- (void)appearDraggable;

- (void)appearNormal;

@end

和.m应该是:

#import "DraggableImage.h"

@implementation DraggableImage

- (void)draw:(UIImage *)image{
    CGRect buttonFrame = self.bounds;
    int buttonWidth = buttonFrame.size.width;
    int buttonHeight = buttonFrame.size.height;
    UIGraphicsBeginImageContext( CGSizeMake(buttonWidth, buttonHeight) );
    [image drawInRect:self.bounds];
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [newImage drawInRect:self.bounds];
}

- (void)moveToFront {
    CALayer *superlayer = self.superlayer;
    [self removeFromSuperlayer];
    [superlayer addSublayer:self];
}

- (void)appearDraggable {
    self.opacity = 0.5;
}


- (void)appearNormal {
    self.opacity = 1.0;
}

@end

现在在主视图控制器中,添加:

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
#import "DraggableImage.h"

@interface YourViewController : UIViewController{
    DraggableImage *heldImage;
    DraggableImage *imageForFrame[5]; // or however many
    UIButton *buttonPressed;
    int imageCount;
}
@property (weak, nonatomic) IBOutlet UIButton *imageButton;
-(IBAction)buildImageLayerForButton:(UIButton *)sender;
- (void)moveHeldImageToPoint:(CGPoint)location;
- (CALayer *)layerForTouch:(UITouch *)touch;

在这种情况下,imageButton将是你的苹果按钮。现在在.m文件中,添加:

@synthesize imageButton;

#pragma - mark Touches

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    CALayer *hitLayer = [self layerForTouch:[touches anyObject]];
    if ([hitLayer isKindOfClass:[DraggableImage class]]) {
        DraggableImage *image = (DraggableImage *)hitLayer;

        heldImage = image;
        [heldImage moveToFront];
    }
    hitLayer = nil;
    [super touchesBegan:touches withEvent:event];
}

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{

        if (heldImage) 
        {
            UITouch *touch = [touches anyObject];
            UIView *view = self.view;
            CGPoint location = [touch locationInView:view];
            [self moveHeldImageToPoint:location];
        }

}

- (void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event{
    if (heldImage) {
        [heldImage appearNormal];
        heldImage = nil;
    }
}

- (void)dragBegan:(UIControl *)c withEvent:ev {
}
- (void)dragMoving:(UIControl *)c withEvent:ev {
    UITouch *touch = [[ev allTouches] anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    [self moveHeldImageToPoint:touchPoint];
}

- (void)dragEnded:(UIControl *)c withEvent:ev {
    UITouch *touch = [[ev allTouches] anyObject];
    CGPoint touchPoint = [touch locationInView:self.view];
    [self moveHeldImageToPoint:touchPoint];
    [heldImage appearNormal];
    heldImage = nil;
}



-(IBAction)buildImageLayerForButton:(UIButton *)sender{


        DraggableImage *image = [[DraggableImage alloc] init];
        buttonPressed = sender;
        CGRect buttonFrame = sender.bounds;
        int buttonWidth = buttonFrame.size.width;
        int buttonHeight = buttonFrame.size.height;

        image.frame = CGRectMake(120, 24, buttonWidth*3, buttonHeight*3);
        image.backgroundColor = [UIColor lightGrayColor].CGColor;
        image.delegate = self;
        imageForFrame[imageCount] = image;
        [self.view.layer addSublayer:image];
        [image setNeedsDisplay];
        [image moveToFront];
        [image appearDraggable];
        heldImage = image;
        [self moveHeldImageToPoint:sender.center];

        imageCount++;

}
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx {
    UIGraphicsPushContext(ctx);

    DraggableImage *image = (DraggableImage *)layer;
    [image draw:[buttonPressed imageForState:UIControlStateNormal]];

    UIGraphicsPopContext();
}

- (void)moveHeldImageToPoint:(CGPoint)location 
{
    float dx = location.x;
    float dy = location.y;
    CGPoint newPosition = CGPointMake(dx, dy);

    [CATransaction begin];
    [CATransaction setDisableActions:TRUE];
    heldImage.position = newPosition;
    [CATransaction commit];
}

- (CALayer *)layerForTouch:(UITouch *)touch 
{
    UIView *view = self.view;

    CGPoint location = [touch locationInView:view];
    location = [view convertPoint:location toView:nil];

    CALayer *hitPresentationLayer = [view.layer.presentationLayer hitTest:location];
    if (hitPresentationLayer) 
    {
        return hitPresentationLayer.modelLayer;
    }

    return nil;
}

-(void)viewDidLoad{
    [imageButton addTarget:self action:@selector(dragBegan:withEvent:) forControlEvents: UIControlEventTouchDown];
    [imageButton addTarget:self action:@selector(dragMoving:withEvent:) forControlEvents: UIControlEventTouchDragInside | UIControlEventTouchDragOutside];
    [imageButton addTarget:self action:@selector(dragEnded:withEvent:) forControlEvents: UIControlEventTouchUpInside | UIControlEventTouchUpOutside];
    [super viewDidLoad];
}

- (void)viewDidUnload {
    [self setImageButton:nil];
    [super viewDidUnload];
}

瞧瞧!连接您的按钮,设置其图像,并在整个屏幕上投放副本。 :)

注意:我没有多评论,但很乐意回答任何问题。

干杯!

编辑:修正了-(void)draw:(UIImage *)image{},以便正确调整图片大小。

答案 1 :(得分:0)

如果你想要的是将触摸功能传递给第二个图形(大图)我认为你可以做这样的事情

on .h你必须声明你要拖动的图像和浮动变量以记住可拖动按钮的前一点(我假设你使用的是IOS 5 SDK)

@property(nonatomic, strong) UIImageView* myImage;
@property float pointX;
@property float pointY;

然后,在.m你可以做到这一点

myImage = [[UIImageView alloc]initWithImage:@"appleImage.jpg"];
myImage.alpha = 0;

//default UIImageView interaction is disabled, so lets enabled it first
myImage.userInteractionEnabled = YES;

[button addTarget:self action:@selector(wasDragged:withEvent:) forControlEvents:UIControlEventTouchDragInside];

然后制作拖动功能

- (void)wasDragged:(UIButton *)button withEvent:(UIEvent *)event
{

        self.myImage.alpha = 0.5;

    UITouch *touch = [[event touchesForView:button] anyObject];


    CGPoint previousLocation = [touch previousLocationInView:button];
    CGPoint location = [touch locationInView:button];
    CGFloat delta_x = location.x - previousLocation.x;
    CGFloat delta_y = location.y - previousLocation.y;

    // move button, to keep the dragging effect 
    button.center = CGPointMake(button.center.x + delta_x,
                                button.center.y + delta_y);

        // moving the image
        button.center = CGPointMake(button.center.x + delta_x,
                                button.center.y + delta_y);

    self.pointX = previousLocation.x;
    self.pointY = previousLocation.y;

    [button addTarget:self action:@selector(dragRelease:withEvent:) forControlEvents:UIControlEventTouchUpInside];
}

最后,制作dragRelease函数,将按钮返回到原始位置,并将图像的alpha设置为1

-(void)dragRelease:(UIButton *)button withEvent:(UIEvent *)event
{
     self.myImage.alpha = 1;
     button.center = CGPointMake(pointX, pointY);
}

你已经完成了:3

这只是基本的想法,也许这不是你想要的,但我希望这有帮助

编辑*:哦,不要忘记综合所有属性,如果你使用5.0以下的SDK,你可以将“强”属性改为“保留”