如何实现连续拖放菜单效果？ [英] How to achieve continuous drag drop menu effect?

问题描述

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

I'm trying to achieve a Drag and Drop menu affect. I'm not sure how to go about this, perhaps someone has experience with this exact effect.

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

Quite simply, when a user touches down on a menu item, I want a graphic to appear at their touch location. Their touch will now control the panning of the graphic. Upon releasing the touch, the graphic will sit in its place and assume full alpha.

我已经熟悉创建平移手势和实例化图形。到目前为止，我可以创建触摸菜单项的图形。最大的问题是我如何传递触摸手势，因此它是单个连续动作。

I'm already familiar with creating pan gestures and instantiating a graphic. So far, I can create the graphic where the menu item is touched. The biggest issue is how I "pass over" the touch gesture so it is a single and continuous motion.

此外，菜单项应该是UIButton还是UIImageView？

Also, should the menu item be UIButton or UIImageView?

任何帮助表示赞赏。谢谢

Any help appreciated. Thanks

推荐答案

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

I had some fun with this one. The following code will grab the image from the button when touched, drag that image at alpha=0.5, and drop it wherever your touches end at alpha=1.0. It will continue to be draggable thereafter.

导入QuartzCore后，创建一个新文件。 .h应为：

After importing QuartzCore, create a new file. The .h should read:

#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

现在在主视图控制器中，添加：

Now in your main view controller, add:

#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文件中，添加：

The imageButton in this case would be your apple Button. Now in your .m file, add this:

@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];
}

瞧瞧！连接您的按钮，设置其图像，并在整个屏幕上投放副本。 ：）

Et voila! Connect your button, set its image, and throw copies all over the screen. :)

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

Note: I didn't comment much, but would be happy to answer any questions.

干杯！

编辑：修正 - （无效）绘图:( UIImage *）图片{} 以便它会正确调整图像大小。

fixed the -(void)draw:(UIImage *)image{} so that it would resize the image properly.

这篇关于如何实现连续拖放菜单效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！