(iOS) Drag and drop, Snap to grid, Check proper area - ios

I've read all the stuff about drag'n'drop and gestureRecognizer but haven't found the solution.
I got "gamefield" 10x10 and I want to implement drag'n'drop with snap to grid and check if element placed on "gamefield".
I got my 8 "TempButtons" added to UIView buttonsSuperView with action:#selector(imageMoved:withEvent:).
- (IBAction) imageMoved:(id) sender withEvent:(UIEvent *) event
{
UIControl *control = sender;
originalPosition = [self getButton:sender];
UITouch *touch = [[event allTouches] anyObject];
point = [touch locationInView:control];
float step = 31.0; // Grid step size.
CGPoint center = control.center;
center.x += step * floor((point.x / step));
center.y += step * floor((point.y / step));
control.center = center;
}
It works, I can move any button with grid step 31px. I can place it everywhere, but I have to put it on UIView fieldView. If it placed right there it's OK and I can replace it on another tile. But if I place it outside fieldView the button should return on its place. Something like this:
if ([self.fieldView pointInside:point withEvent:nil])
{
control.center = center;
} else {
[UIView animateWithDuration:0.4
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
control.center = originalPosition;
// to
}
completion:^(BOOL finished) {}];
}
If this code placed on - (IBAction) imageMoved:(id) sender withEvent:(UIEvent *) event method it makes button get back to its "originalposition" all the time its moving. But I need to check if its placed properly only on 'touchesEnded'. But that's another method and I don't understand how to realize which button pressed and its original coords to get back if placed improperly.
Maybe there's a better way to use 'UIView' instead of 'UIButton' but I still don't understand how to do that.
Thanks in advance.
Kind Regards,
Nick

Since no one answered my question I've spent some time and found working solution.
- (IBAction) imageMoved:(id) sender withEvent:(UIEvent *) event
{
dragObject = sender;
originalPosition = [self getButton:sender];
UITouch *touch = [[event allTouches] anyObject];
point = [touch locationInView:dragObject];
float step = 31.0; // Grid step size.
CGPoint center = dragObject.center;
center.x += step * floor((point.x / step));
center.y += step * floor((point.y / step));
dragObject.center = center;
[sender addTarget:self action:#selector(touchesEnded:withEvent:) forControlEvents:UIControlEventTouchUpInside];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
if (![fieldView pointInside:dragObject.center withEvent:nil])
{
[UIView animateWithDuration:0.4
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
dragObject.center = CGPointMake(originalPosition.x + 15.5, originalPosition.y + 15.5);
}
completion:^(BOOL finished) {}];
}
}
Now it works like charm and I can move along. My buttons moving freely snapped to grid and when pleced outside game field they move back to their original position.
Regards,
Nick

Related

How to get end CGPoint of the screen?

Is there a way to find the endpoint of the screen? Let's say a screen of size (100x100) have the midpoint at (50,) and starting point (0,) and the endpoint as (100,). I can hard code to get the end point based on the device screen size, but that would be a too much work based on assumptions.
I am making a custom UIView animation based on UIBezierPath.
Here is what I am trying to do:
As you can see the animation is stopped after it reaches some point.And I want this point to be the end of the screen,so that UIView is covered whole screen. To be more clear, I drag the UIView to point A, and it animates to point B (end point,so B>A)
I am not sure how to calculate B, so that when I drag UIView to A, it animates to the end of the screen (endpoint of the screen).
Here is the code to get better understanding:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.dragView];
if (touchLocation.x<250) {
if (!startBackSlide) {
_circleDragView.touchdragPoint=touchLocation.y;
_circleDragView.dragToPoint=CGPointMake(touchLocation.x+40, touchLocation.y);
[_circleDragView setNeedsDisplay];
_savedPoint=touchLocation;
}else{
//move the top and bot points backwards along with slide
[self animateCOmpleteBezier:touchLocation];
_circleDragView.touchdragPoint=touchLocation.y;
_circleDragView.dragToPoint=CGPointMake(touchLocation.x+54, touchLocation.y);
[_circleDragView setNeedsDisplay];
_savedPoint=touchLocation;
if (touchLocation.x<20) {
startBackSlide=NO;
snapped=YES;
}
}
}
if (touchLocation.x>=250) {
if (snapped) {
snapped=NO;
//move the top and bottom points to the specified point(In this case the end point)
}
}
}
-(void)animateCOmpleteBezier:(CGPoint) value{
[UIView animateWithDuration:0.01 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
_circleDragView.topWidthPoint=value.x-10;
_circleDragView.botWidthPoint=value.x-10;
[_circleDragView setNeedsDisplay];
} completion:^(BOOL finished) {
}];
}
The endpoint of screen is equal to it's width and height:
CGSize screenSize = [UIScreen mainScreen].bounds.size;
CGPoint endPoint = CGPointMake(screenSize.width, screenSize.height);
https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIScreen_Class/#//apple_ref/occ/instp/UIScreen/bounds

MKMapView pin drag from another view

I'm thinking about a Google Map street view pin drag and drop system on iOS. The user selects a pin from another view (let's say UINavigationBar) and drag it to a position on map and then drop it.
I'm a bit lost with it. Do you have a workflow for this type of interaction ?
It is quite a complex task but it can be divided into a couple of simple steps.
Make a custom UIView, which after touching will follow the touch movement.
Example
-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
_originalPosition = self.view.center;
_touchOffset = CGPointMake(self.view.center.x-position.x,self.view.center.y-position.y);
}
-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint position = [touch locationInView: self.view.superview];
[UIView animateWithDuration:.001
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
self.view.center = CGPointMake(position.x+_touchOffset.x, position.y+_touchOffset.y);
}
completion:^(BOOL finished) {}];
}
-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
CGPoint positionInView = [touch locationInView:self.view];
CGPoint newPosition;
if (CGRectContainsPoint(_desiredView.frame, positionInView)) {
newPosition = positionInView;
// _desiredView is view where the user can drag the view
} else {
newPosition = _originalPosition;
// its outside the desired view so lets move the view back to start position
}
[UIView animateWithDuration:0.4
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
self.view.center = newPosition
// to
}
completion:^(BOOL finished) {}];
}
When user releases the finger, you will have to get the location of the touch.
Calculate the touch location in map view coordinates and place the pin.
Hope it points you to the right direction.

Adding drag and drop component to iOS app

I apologise if this seems very vague but I'm not sure how else to word it.
I am trying to build an ipad app that will let users populate a workspace with tools they need. I need an example of letting a user drag and drop components into the app interface. So for example if i had an app that the user can make a form and I want the user to be able to drag text boxes, lists, radio buttons etc to make the form, how would i go about doing that? The items that i am using will be in a popup menu so that the user drags up and then will see all the items that i need inside that popup. Im just not sure how to let them drag from the popup to the canvas and also be able to reuse the same item (so have 3 or 4 text boxes in the example). Is this possible? Can anyone direct me to a tutorial on this? I have searched but cant find anything.
If this is laid out wrong or is a stupid quest please let me know how to do it, this is my first time posting on here.
Thank you
There are already many answers explaining this question.
Basically you can make custom UIView, which after touching will be following the touch movement.
Something like this:
-(void) touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
_originalPosition = self.view.center;
_touchOffset = CGPointMake(self.view.center.x-position.x,self.view.center.y-position.y);
}
-(void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint position = [touch locationInView: self.view.superview];
[UIView animateWithDuration:.001
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
self.view.center = CGPointMake(position.x+_touchOffset.x, position.y+_touchOffset.y);
}
completion:^(BOOL finished) {}];
}
-(void) touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
CGPoint positionInView = [touch locationInView:self.view];
CGPoint newPosition;
if (CGRectContainsPoint(_desiredView.frame, positionInView)) {
newPosition = positionInView;
// _desiredView is view where the user can drag the view
} else {
newPosition = _originalPosition;
// its outside the desired view so lets move the view back to start position
}
[UIView animateWithDuration:0.4
delay:0.0
options:UIViewAnimationOptionCurveEaseInOut
animations:^ {
self.view.center = newPosition
// to
}
completion:^(BOOL finished) {}];
}
Similar questions
iPhone App: implementation of Drag and drop images in UIView
Basic Drag and Drop in iOS
iPhone drag/drop
From the Question i thing you are going to Build a feature like Add to cart in Most of the Shopping Apps like Amazon, Flip kart and etc..
- (void)viewDidLoad {
[super viewDidLoad];
shoeImageView1 = [[UIImageView alloc]initWithFrame:CGRectMake(46,222, 51 , 51)];
shoeImageView1.image = [UIImage imageNamed:#"shoe.png"];
shoeImageView2 = [[UIImageView alloc]initWithFrame:CGRectMake(150,222, 51 , 51)];
shoeImageView2.image = [UIImage imageNamed:#"shoe1.png"];
shoeImageView3 = [[UIImageView alloc]initWithFrame:CGRectMake(225,222, 51 , 51)];
shoeImageView3.image = [UIImage imageNamed:#"shoe2.png"];
addTOCart = [[UIImageView alloc]initWithFrame:CGRectMake(132,400, 80, 80)];
addTOCart.image = [UIImage imageNamed:#"basket.png"];
[self.view addSubview:addTOCart];
imageViewArray = [[NSMutableArray alloc]initWithObjects: shoeImageView1,shoeImageView2 ,shoeImageView3,nil];
for (int i=0; i<imageViewArray.count; i++) {
[self.view addSubview:[imageViewArray objectAtIndex:i]];
[[imageViewArray objectAtIndex:i]setUserInteractionEnabled:YES];
//[self touchesBegan:imageViewArray[i] withEvent:nil];
}
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
for(int i=0 ; i< imageViewArray.count; i++)
{
CGPoint pt = [[touches anyObject]locationInView:self.view];
startLocation = pt;
newtemp = [imageViewArray objectAtIndex:i];
UITouch* bTouch = [touches anyObject];
if ([bTouch.view isEqual:newtemp])
{
firstTouchPoint = [bTouch locationInView:[self view]];
oldX = firstTouchPoint.x - [[bTouch view]center].x;
oldY = firstTouchPoint.y - [[bTouch view]center].y;
}
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
for(int i=0 ; i< imageViewArray.count; i++)
{
newtemp = [imageViewArray objectAtIndex:i];
//oldLoc = newtemp.frame;
if (CGRectContainsPoint(addTOCart.frame , newtemp.frame.origin))
{
NSLog(#"touched");
dragging = NO;
UIAlertView *alert = [[UIAlertView alloc]initWithTitle:#"Cart" message:#"Added to Cart" delegate:self cancelButtonTitle:#"OK" otherButtonTitles:nil, nil];
[[imageViewArray objectAtIndex:i] setImage:[UIImage imageNamed:#""]];
[imageViewArray removeObjectAtIndex:i];
[alert show];
break;
}
else
{
//[newtemp setCenter:CGPointMake(startLocation.x-oldX, startLocation.y-oldY)];
}
// self.view.userInteractionEnabled= NO;
}
dragging = NO;
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch* mTouch = [touches anyObject];
// if ([mTouch.view isEqual: newtemp]) {
CGPoint cp = [mTouch locationInView:[self view]];
[[mTouch view]setCenter:CGPointMake(cp.x-oldX, cp.y-oldY)];
// }
}
you can use these codes to implement these feauture. Using these code u can drag the object any where in the screen.
for sample project you can use this Link.

If I'm making a UITableViewCell slideable (for quick delete) how do I make it so it's still tappable?

I've successfully made it that my UITableViewCell can be slid right and left to mark the cell as read, or to delete it (sort of like how the Reeder app does it) but now it doesn't allow me to simply tap it. How do I allow it to be tapped as well?
I used this article for the structure of the concept, so more information is available there.
I implemented the sliding as follows:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
_firstTouchPoint = [[touches anyObject] locationInView:self];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
CGPoint touchPoint = [[touches anyObject] locationInView:self];
// Holds the value of how far away from the first touch the finger has moved
CGFloat xPos;
// If the first touch point is left of the current point, it means the user is moving their finger right and the cell must move right
if (_firstTouchPoint.x < touchPoint.x) {
xPos = touchPoint.x - _firstTouchPoint.x;
if (xPos <= 0) {
xPos = 0;
}
}
else {
xPos = -(_firstTouchPoint.x - touchPoint.x);
if (xPos >= 0) {
xPos = 0;
}
}
// Change our cellFront's origin to the xPos we defined
CGRect frame = self.cellFront.frame;
frame.origin = CGPointMake(xPos, 0);
self.cellFront.frame = frame;
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
[self springBack];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
[self springBack];
}
- (void)springBack {
CGFloat cellXPositionBeforeSpringBack = self.cellFront.frame.origin.x;
CGRect frame = self.cellFront.frame;
frame.origin = CGPointMake(0, 0);
[UIView animateWithDuration:0.1 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
self.cellFront.frame = frame;
} completion:^(BOOL finished) {
}];
if (cellXPositionBeforeSpringBack >= 80 || cellXPositionBeforeSpringBack <= -80) {
NSLog(#"YA");
}
}
When I tap it though, nothing happens.
Just use UIPanGestureRecognizer.
the touchesBegan approach is so old.
With the pan Gesture you will not lose the touch event on your cell.
The easiest to solve it, is actually to build your own gesture for sliding right and left.
After you build it, just add this gesture to the view, and add the tap gesture as well.
If you allow the both gestures (tap gesture and slide gesture) to live simultaneously by implementing the 'shouldRecognizeSimultaneouslyWithGestureRecognizer' method, iOS will take care of it for you very easily.
Here how to build custom gesture recogniser:
http://blog.federicomestrone.com/2012/01/31/creating-custom-gesture-recognisers-for-ios/

Move UIView left to right while they move down the screen

I am trying to create an iOS app with blocks floating down the screen(UIViews). I have them floating down the screen but I also want the user to be able to move them on the x axis as they are falling. I tried to do it with the code below but they just fall and don't move left to right. My problem is I am trying to move it with my finger left to right as it is already moving town the screen. How can I adapt the code below to work?
Note: I was able to move the views left to right without them moving down the screen and I was able to move them down the screen without moving them left to right. The problem arises when I combine both.
ANIMATION FOR Y AXIS
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:letView.speed];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
letView.layer.frame = CGRectMake(letView.layer.frame.origin.x, [[UIScreen mainScreen] bounds].size.height, letView.layer.frame.size.width, letView.layer.frame.size.height);
[UIView commitAnimations];
ANIMATION FOR TOUCH
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.view];
//Goes through an array of views to see which one to move
for (LetterView * view in _viewArray) {
if (CGRectContainsPoint(view.frame, touchLocation)) {
dragging = YES;
currentDragView = view;
[currentDragView.layer removeAllAnimations];
}
}
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.view];
if (dragging) {
CGPoint location = touchLocation;
currentDragView.center = CGPointMake(location.x, currentDragView.center.y);
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
dragging = NO;
[self checkForCorrectWord];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:currentDragView.speed];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
currentDragView
.layer.frame = CGRectMake(currentDragView.layer.frame.origin.x, [[UIScreen mainScreen] bounds].size.height, currentDragView.layer.frame.size.width, currentDragView.layer.frame.size.height);
[UIView commitAnimations];
}
I've got a demo project that shows you how to make a "boat" animate down the screen in an s-curve, like this:
The solution I use is to make a keyframe animation (actually it's a keyframe animation that forms part of a grouped animation, but you might not need the rest of the grouped animation: it is the keyframe animation that makes the curved path shape). Perhaps you could adapt what I'm doing, modifying it to your own purposes?
The code is available for download here:
https://github.com/mattneub/Programming-iOS-Book-Examples/tree/master/ch17p501groupedAnimation
It is discussed in detail in my book. Keyframe animations generally:
http://www.apeth.com/iOSBook/ch17.html#_keyframe_animation
This particular example:
http://www.apeth.com/iOSBook/ch17.html#_grouped_animations

Resources