Drag UIImageView images using UITouch Methods - ios

I have a UITableViewCell with UIImageViews embedded. I understand it's not common practice but I'm using the UITouch methods to accomplish horizontal swipes. I retrieve images from a url/api . The issue is I wish to drag one image at a time from either left to right. The problem is, when i drag my finger on across the imageView, all loaded images slide through quickly. I want to focus on one image at a time during the drag. Hope I was clear.
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
startLocation = [[touches anyObject] locationInView:self];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
CGPoint point = [[touches anyObject] locationInView:self];
UITouch * touch = [touches anyObject];
self.viewOne.center = CGPointMake(self.viewOne.center.x+point.x - startLocation.x, self.viewOne.center.y);
if (startLocation.x < point.x) {
//Swipe Right
if ([self.photo.photoURLS isKindOfClass:[NSArray class]]) {
if (self.isSwiping == NO) {
self.isSwiping = YES;
self.currentImage--;
if (self.currentImage == -1) {
self.currentImage = 12;
}
self.viewBack.frame = CGRectMake(-self.frame.size.width,0.0f, self.frame.size.width, self.frame.size.height);
self.viewBack.hidden = NO;
self.loadingImage.hidden = NO;
NSURL *imageURL = [[NSURL alloc] initWithString:self.photo.photoURLS[self.currentImage]];
[self asyncLoadImageFromURL:imageURL andPhotoID:self.photo.id withCallback:^(UIImage *image, NSString *photoID) {
self.loadingImage.hidden = YES;
[imageCache setImage:image forKey:self.photo.photoURLS[self.currentImage]];
self.viewBack.image = image;
//new
self.viewOne.frame = CGRectMake(0.0f, 0.0f, self.frame.size.width, self.frame.size.height);
self.viewOne.image = self.viewBack.image;
self.isSwiping = NO;
self.pageControl.currentPage = self.currentImage;
self.viewBack.hidden = YES;
}];
}
}
}
} else {
//Swipe Left
}
}

It's not entirely clear what you're asking or what the issue is, but the following lines are suspect:
CGPoint point = [[touches anyObject] locationInView:self.vehicleImage];
self.viewOne.center = CGPointMake(self.viewOne.center.x+point.x -startLocation.x, self.viewOne.center.y);
if (startLocation.x < endLocation.x)
You are not setting endLocation until after you've finished touching the screen. During your touchesMoved responder, you'll be using bad endLocation data. You should be using the value of point in this function to determine motion.
It's also not really clear what is the relationship between self.vehicleImage and self.viewOne. If self.vehicleImage is a subview of self.viewOne (or otherwise moves during your frame changes), your locationInView will return seemingly inconsistent values, exaggerating the motion of your finger. Instead, you should be picking a view that will stay static during this process (perhaps your ViewController's self.view).

Related

multiple touch in xcode iOS objective C

I have a character in my game that I can move left/right and jump. I am using touchesBegan to do that. But when I move left ( keep touching the screen -> makes character faster and faster ), it only jumps when i release it. I would like to jump and move left at the same time.
Here is some of my code :
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self.view];
if((point.x < moveLeftButton.frame.size.width))
{
if((point.y > JumpButton.frame.size.height))
{
leftSide = YES;
sanchez.image = [UIImage imageNamed:#"characterL2"];
}
}
if((point.x) > (backGround.frame.size.width - moveRightButton.frame.size.width))
{
if((point.y > JumpButton.frame.size.height))
{
rightSide = YES;
sanchez.image = [UIImage imageNamed:#"characterR2"];
}
}
if( notJumping && (point.y < JumpButton.frame.size.height) && (sanchezStopAll == NO))
{
AudioServicesPlaySystemSound(jump);
sanchezJumping = 5.5;
notJumping = NO;
}
[self animation];
}
I am not using buttonPressed because they are hidden and I think you can't click hidden buttons.
This is how it looks like if its not hidden:
Thanks for any Help.
You'll only get a single touch by default unless you set multipleTouchEnabled = YES. Then your code should work as expected.
For example:
- (void)viewDidLoad
{
[super viewDidLoad];
self.view.multipleTouchEnabled = YES;
}

TouchesMoved only moves a little

I am trying to allow the user to drag a label around the screen, but in the simulator it only moves a little each time I touch somewhere on the screen. It will jump to the location and then drag slightly, but then it will stop dragging and I have to touch a different location to get it to move again. Here is my code in my .m file.
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *Drag = [[event allTouches] anyObject];
firstInitial.center = [Drag locationInView: self.view];
}
My ultimate goal is to be able to drag three different labels on the screen, but I'm just trying to tackle this problem first. I would greatly appreciate any help!
Thanks.
Try using a UIGestureRecognizer instead of -touchesMoved:withEvent:. And implementing something similar to the following code.
//Inside viewDidLoad
UIPanGestureRecognizer *panGesture = [[UIPanGestureRecognizer alloc]initWithTarget:self action:#selector(dragonMoved:)];
panGesture.minimumNumberOfTouches = 1;
[self addGestureRecognizer:panGesture];
//**********
- (void)dragonMoved:(UIPanGestureRecognizer *)gesture{
CGPoint touchLocation = [gesture locationInView:self];
static UIView *currentDragObject;
if(UIGestureRecognizerStateBegan == gesture.state){
for(DragObect *dragView in self.dragObjects){
if(CGRectContainsPoint(dragView.frame, touchLocation)){
currentDragObject = dragView;
break;
}
}
}else if(UIGestureRecognizerStateChanged == gesture.state){
currentDragObject.center = touchLocation;
}else if (UIGestureRecognizerStateEnded == gesture.state){
currentDragObject = nil;
}
}

How to set parameters on iPhone

Im sorry I wasn't sure of the terminology for this question but I hope you can understand and help me out. (Also if the terminology is wrong correct me for future reference..Thanks!)
I am trying to set parameters for my iOS game so that when you click either side of the screen the player will turn to that side.
The code I have works to make the player move although it is set to the whole screen therefore only goes in one direction...
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
X = -7;
Player.image = [UIImage imageNamed:#"Player Left.png"];
}
What needs to be added so that ONLY when the user touches the left side of the screen does this code run.
Thanks in advance and I hope you understand.
I am very sorry for any wrong terminology.
Check if touch point is in left side of screen.. e.g -
if ([touches count] == 1) {
// one finger
CGPoint touchPoint = [[touches anyObject] locationInView:self.view];
if (touchPoint.x <= [UIScreen mainScreen].bounds.size.width*0.50) {
Player.image = [UIImage imageNamed:#"Player Left.png"];
}else{
Player.image = [UIImage imageNamed:#"Player Right.png"];
}
}
Just define your "reactable" area by defining a CGRect. Then try to define if the touch is inside by using CGRectContainsPoint(). Something like that (not tested) :
CGRect reactable = CGRectMake(0, 0, 10, 10); // A square of 10 px
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self];
if (CGRectContainsPoint(reactable, touchLocation)
Player.image = [UIImage imageNamed:#"Player Left.png"];

Slide out viewcontroller from right of screen

I want to create a slide out menu from the right of my main view controller. However I want the slide out menu to appear on top of the main view and not push it to one side.
I've looked at ECSlidingViewController 2 and it allows sliding out from either side, however the slide out menus appear cut off on the exposed edges. It creates the effect of the top view controller moving left or right to reveal the hidden menu under it. I want it to appear that the hidden menu sliding out is going onto of the main view controller and that we can see its left edge so no content is cut off.
Is this at all possible and would ECSlidingViewController 2 work for this?
Edit
This is what I have tried:
To detect the touch started:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
BBAppDelegate *myAppDelegate = (BBAppDelegate*)[UIApplication sharedApplication].delegate;
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.view];
NSArray *myViewArray = [[NSBundle mainBundle] loadNibNamed:#"FilterView" owner:self options:nil];
self.filterView = myViewArray[0];
[myAppDelegate.window addSubview:self.filterView];
if (CGRectContainsPoint(self.filterView.frame, touchLocation)) {
dragging = YES;
oldX = touchLocation.x;
oldY = touchLocation.y;
}
}
And then dragging:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:self.view];
if (dragging) {
CGRect frame = self.filterView.frame;
frame.origin.x = self.filterView.frame.origin.x + touchLocation.x;
frame.origin.y = self.filterView.frame.origin.y + touchLocation.y;
self.filterView.frame = frame;
}
}
However, when I start a touch, the filterView replaces all views and doesn't slide or animate in anyway. I though it was due to not providing a starting point - so I instated self.filterView like so:
self.filterView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, 120, 564)];
However changing these values have no effect on the position / size of the view when its displayed.
Edit 2
Okay, I started a new project for testing and managed to get a view on screen to move around by following my touches.
I am using UIPanGestureRecognizer
Like so:
viewDidLoad
- (void)viewDidLoad
{
[super viewDidLoad];
NSArray *myViewArray = [[NSBundle mainBundle] loadNibNamed:#"View" owner:self options:nil];
UIView *myView = myViewArray[0];
self.filterView = myView;
self.filterView.frame = CGRectMake(100, 100, 200, 200);
UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc]initWithTarget:self
action:#selector(dragging:)];
pan.delegate = self;
[self.filterView addGestureRecognizer:pan];
[self.view addSubview:self.filterView];
}
Then in the dragging method:
-(void)dragging:(UIPanGestureRecognizer *)gesture
{
if(gesture.state == UIGestureRecognizerStateBegan)
{
NSLog(#"Received a pan gesture");
self.panCoord = [gesture locationInView:gesture.view];
}
CGPoint newCoord = [gesture locationInView:gesture.view];
float dX = newCoord.x-self.panCoord.x;
gesture.view.frame = CGRectMake(gesture.view.frame.origin.x+dX, gesture.view.frame.origin.y, gesture.view.frame.size.width, gesture.view.frame.size.height);
}
This allows the view to move horizontally only.
Almost there - what I am trying to figure out now is getting it to snap to a location when the user lifts their finger. And how to move this view when its start position is off screen.
Edit 3
Okay, so I wanted to control the speed and velocity of the view coming out onto screen. If the user swipes quickly, the view goes into place at the speed they swipe. If they swipe slowly, it goes into place slowly. However I also set the lowest time - so if they take a long time - it defaults to the min amount.
Here is the code:
{
float start;
float end;
NSDate *methodStart;
NSDate *methodEnd;
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
methodStart = [NSDate date];
UITouch *touch = [touches anyObject];
CGPoint location = [touch locationInView:touch.view];
start = location.x;}
-(void)dragging:(UIPanGestureRecognizer *)gesture{
if(gesture.state == UIGestureRecognizerStateBegan)
{
self.panCoord = [gesture locationInView:gesture.view];
}
CGPoint newCoord = [gesture locationInView:gesture.view];
float dX = newCoord.x-self.panCoord.x;
gesture.view.frame = CGRectMake(gesture.view.frame.origin.x+dX, gesture.view.frame.origin.y, gesture.view.frame.size.width, gesture.view.frame.size.height);
if (gesture.state == UIGestureRecognizerStateEnded){
methodEnd = [NSDate date];
NSTimeInterval executionTime = [methodEnd timeIntervalSinceDate:methodStart];
double time = executionTime;
float distance = start - end;
int distanceOverTime = distance / time;
float veloticty = distanceOverTime / 100;
double miniTimeToUse = 0.5;
double newMinTime;
if (time < miniTimeToUse){
newMinTime = miniTimeToUse;
}else {
newMinTime = time;
}
if (gesture.view.frame.origin.x+dX >= 180){
[UIView animateWithDuration:newMinTime
delay:0
usingSpringWithDamping:0.9
initialSpringVelocity:veloticty
options:0
animations:^{
self.filterView.frame = CGRectMake(300, 100, 200, 200);
} completion:nil];
}
if (gesture.view.frame.origin.x+dX <= 181){
[UIView animateWithDuration:newMinTime
delay:0
usingSpringWithDamping:0.9
initialSpringVelocity:veloticty
options:0
animations:^{
self.filterView.frame = CGRectMake(50, 100, 200, 200);
} completion:nil];
}
}
}
Now just to get it to work on pulling the view off from the side.

Displaying a view over an imageview which is moveable

I currently have an application where a user takes a photo or chooses from their library.
On the next controller it will show the image that was selected/taken.
What I would like to do now is show a view of some sort on top of the image view. The view would be translucent round the edges and have a circle which would show the image beneath (not transulcent). Basically this is selected a part of the image.
I then need to save some how where the view is on screen, as it should also be moveable by the user.
What is the best way to approach this?
I need an overlay view which can be moved. The circle would be a fixed size always the inside shows the imageview beneath and the outside would be a 0.5 translucency so you can still see the image but not completely. Then to save the location of the moved around circle?
---- EDIT -----
This is the example image I have created.
I have a view which has a photo as the UIImageView (bottom layer). On top of this I am trying to add a view (like the picture above). Note, the picture above is actually a png as suggested. However, this overlay is moveable. The circle is transparent (0) so you can completely see the photo below it. The outer (grey) is transparent partially (0.5) so you can still see just not completely.
The top view (circle part) would be moved around on the photo to mark a specific point on the photo. In this example if the circle is moved the side (grey) ends on screen, therefore I would need to make a huge image which takes into account the moving of the view -- which is not the best way to do this surely?
EDIT 2 ----
I now have one UIImageView over the top of the photoView (another UIImageView). The overlay is 4 times the screen with a circle in the middle of it.
When the item is moved I have a gesture recognizer that runs:
-(void)handlePan:(UIPanGestureRecognizer *)gesture {
NSLog(#"Pan Gesture");
gesture.view.center = [gesture locationInView:self.view];
}
At present from the above the UIImageView is moved from the middle point, that way the circle is what looks to be moving when the finger moves.
That is all great, but how do I implement the suggested answers into my handlePan method. So I need to check that the middle point is not too close the edge. Ideally I would like a 50 margin around the screen so the circle does not look to go completely (or mostly) off screen?
I understand from the question that you know how to do the movement of the overlay, so what I meant is just that you can simply use image views big enough to make sure that their border isn't visible.
Let's say the UIImageView would be called
UIImageView *photoImageView;
And the overlay with translucent and semi-translucent areas would be
UIImageView *imageOverlayView;
The way I see it, you need 3 different images for that imageOverlayView, depending on the device it's running on - 1 for iPad, 1 for iPhone 5 and 1 for other iPhones.
Width of that image should be equal to (screen width - circle radius) * 2, height should
CGFloat circleRadius; //this would be the radius of translucent circle
So if you set the frame of the overlay properly:
CGRect imageFrame = photoImageView.frame;
imageOverlayView.frame = CGRectMake(circleRadius - imageFrame.size.width/2, circleRadius - imageFrame.size.height/2, (imageFrame.size.width - circleRadius)*2, (imageFrame.size.height - circleRadius)*2); //origin is set to the middle of the image.
you'd never see the edge of the grey area. MZimmerman6's answer for implementation of the movement is good, but you should also make sure you block the circle from getting out of the borders of underlying image.
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint new = [touch locationInView:imageOverlayView];
delX = new.x - prevPoint.x;
delY = new.y - prevPoint.y;
CGRect overFrame = imageOverlayView.frame;
overFrame.origin.x += delX;
if (overFrame.origin.x < -imageFrame.size.width) {
overFrame.origin.x = -imageFrame.size.width;
}
else if (overFrame.origin.x > 0) {
overFrame.origin.x = 0;
}
overFrame.origin.y += delY;
if (overFrame.origin.y < -imageFrame.size.height) {
overFrame.origin.y = -imageFrame.size.height;
}
else if (overFrame.origin.y > 0) {
overFrame.origin.y = 0;
}
[overlayView setFrame:overFrame];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint new = [touch locationInView:imageOverlayView];
delX = new.x - prevPoint.x;
delY = new.y - prevPoint.y;
CGRect overFrame = imageOverlayView.frame;
overFrame.origin.x += delX;
if (overFrame.origin.x < -imageFrame.size.width) {
overFrame.origin.x = -imageFrame.size.width;
}
else if (overFrame.origin.x > 0) {
overFrame.origin.x = 0;
}
overFrame.origin.y += delY;
if (overFrame.origin.y < -imageFrame.size.height) {
overFrame.origin.y = -imageFrame.size.height;
}
else if (overFrame.origin.y > 0) {
overFrame.origin.y = 0;
}
[overlayView setFrame:overFrame];
}
EDIT
With your pan gesture recognizer, checking if you aren't going too far needs a little change to the handlePan: method.
-(void)handlePan:(UIPanGestureRecognizer *)gesture {
CGPoint newCenter = [gesture locationInView:self.view];
if (newCenter.x < 50) {
newCenter.x = 50;
}
else if (newCenter.x > self.view.frame.size.width - 50) {
newCenter.x = self.view.frame.size.width - 50;
}
if (newCenter.y < 50) {
newCenter.y = 50;
}
else if (newCenter.y > self.view.frame.size.height - 50) {
newCenter.y = self.view.frame.size.height - 50;
}
gesture.view.center = newCenter;
}
If that 50 points margin is equal to circle radius, this will make sure your circle able to touch the edges of the screen, but unable to go beyond them.
I would first initialize some UIImageView with a png image in it that will easily handle this moving frame with a hole in the center. You can the add this to your screen. Once this is done, use the touchesBegan, touchesMoved and other touch commands to find whether a user is touching that box and from that determine how far the user has moved from the previous point. Use this difference to then add or subtract values from the images current frame origin or center, and voila you have a moving box.
EDIT
In View.h
CGPoint prevPoint;
float delX;
float delY;
UIView *overlayView;
In View.m
-(void) viewDidLoad {
overlayView = [UIView alloc] initWithFrame:CGRectMake(100,100,100,100)];
[overlayView setBackgroundColor:[UIColor clearColor]];
[self.view addSubview:overlayView];
UIImageView *circImage = [[UIImageView alloc] initWithFrame:CGRectMake(0,0,overlayView.frame.width,overlayView.frame.height)];
[circImage setImage:[UIImage imageNamed:#"SomeImage.png"]];
[overlayView addSubview:circImage];
[self.view setNeedsDisplay];
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
prevPoint = [touch locationInView:overlayView];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint new = [touch locationInView:overlayView];
delX = new.x - prevPoint.x;
delY = new.y - prevPoint.y;
CGRect overFrame = overlayView.frame;
overFrame.x += delX;
overFrame.y += delY;
[overlayView setFrame:overFrame];
[self.view setNeedsDisplay];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint new = [touch locationInView:overlayView];
delX = new.x - prevPoint.x;
delY = new.y - prevPoint.y;
CGRect overFrame = overlayView.frame;
overFrame.x += delX;
overFrame.y += delY;
[overlayView setFrame:overFrame];
[self.view setNeedsDisplay];
}

Resources