2012-01-10 8 views
4

私はドラッグアンドドロップメニューの効果を達成しようとしています。私はこれについてどうやって行くのかわからない、おそらく誰かがこの正確な効果の経験を持っています。どのように連続ドラッグドロップメニューの効果を達成するには?

ユーザーがメニュー項目をタッチすると、タッチ位置にグラフィックが表示されます。彼らのタッチは、グラフィックのパンを制御するようになりました。タッチを離すと、グラフィックはその場所に座り完全なアルファを引き受けます。

私はパンのジェスチャーを作成し、グラフィックをインスタンス化することに既に精通しています。これまでは、メニュー項目をタッチしたときにグラフィックを作成することができます。最大の問題は、タッチジェスチャーをどのように「乗り越えて」、それが単一かつ連続的な動きであるかです。

また、メニュー項目はUIButtonまたはUIImageViewですか?

助けてください。何をしたいが第2のグラフィック(大1)にタッチ機能を通過させることである場合のおかげ enter image description here

答えて

1

次のコードは、タッチ時にボタンから画像を取得し、アルファ= 0.5でその画像をドラッグし、タッチがアルファ= 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]; 
} 

Et voila!あなたのボタンを接続し、イメージを設定し、画面上にコピーを投げる。 :)

注:私はあまりコメントしませんでしたが、どんな質問にもお答えできます。

乾杯!

EDIT:-(void)draw:(UIImage *)image{}を修正して、画像のサイズを適切に調整しました。

0

は、私はあなたがあなたの「画像を宣言する必要が.hの上でこの

ような何かを行うことができると思います.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]; 
を行うことができ、その後、ドラッグ可能ボタン(私はあなたがIOS 5 SDKを使用すると仮定している)の前のポイントを覚えておく

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

を変数をドラッグしてフロートに行くの再その後、

そして最後に、あなたは元の場所にボタンを戻し、1

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

への画像のアルファを設定し、あなたがしているdragRelease機能を作る

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

ドラッグ機能を作ります行わ:3

これはただの基本的な考え方は、多分これはあなたが望むものではありませんが、私はこれが

編集を役に立てば幸い、しかしです*:ああ、すべてのプロパティを合成することを忘れないでください。5.0より下のSDKを使用している場合は、「強い」プロパティを「保持」に変更することもできます。

+0

こんにちは、それを与えてくれてありがとう。 私はあなたのコードに2つの変更を加えました:UIControlEventTouchDragInsideとUIControlEventTouchDragOutsideを使用しました。 しかし、私は効果を得ることができませんでした。ドラッグすると、50%の不透明度の大きな画像ではなくボタンのみが移動します。解放すると、ボタンが左上にスローされます。私はそれを変更し続け、私が得ることができるものを見ていきます。追加のコードが評価されました。ありがとう! – user339946

+0

あなたは、ビューにサブビューとして画像を追加しましたか? [self.view addSubview:myImage]を使用します。 ??? –

+0

アップロードまたは共有できる実用的なコードサンプルがありますか?ありがとう – user339946