I currently have a UIImageView which I can move/drag around the view.
How does on detect for the edge of the screen when the image moves and stop the image from being able to be moved out of the screens view?
You can find the rectangle of the UIImageView in the coordinates of your (outermost) view using
CGRect r = [iv convertRect:iv.bounds toView:self.view];
Then it's a matter of checking if r goes out of bounds, e.g. like this:
CGRect i = CGRectIntersect(r,self.view.bounds);
if ( CGRectIsNull(i) )
{
NSLog(#"way out of bounds");
} else if ( !CGRectEqualToRect(i,r) ) {
NSLog(#"partly out of bounds");
} else {
NSLog(#"self.view envelopes imageview");
}
Of course, this should be put in your dragging code, with the NSLog() statements replaced with appropriate handling (e.g. by only updating location in the last case, or by translating the rect back into view if needed)
Related
I have the following set-up:
Where the light blue view, let's call it parentView, has a rectangular subview (the purple view) called childView. The user can use pan touches to rotate and stretch childView by putting their finger on the point exhibited by the red dot and pushing it or pulling it.
It's possible that the childView could be scaled small enough to that after the user is finished with its touches, the point denoted by the red dot would be inside of the parentView.
My goal is to create a method that can detect if the red point is in the parentView or not. I've written the following code:
CGPoint childViewRedPoint = CGPointMake(self.bounds.size.width, self.bounds.size.height / 2);
CGPoint rotatedChildViewRedPoint = CGPointApplyAffineTransform(childViewRedPoint, CGAffineTransformMakeRotation(self.rotateAngle));
CGPoint convertedChildViewRedPoint = [self convertPoint:rotatedChildViewRedPoint toView:self.superview];
if (CGRectContainsPoint(self.superview.bounds, convertedChildViewRedPoint))
{
return YES;
}
else
{
return NO;
}
First I find the red point as defined within the childView, then I rotate it by the amount that the view has been rotated, then I convert it to be in the parentViews coordinates.
The points I'm getting don't seem to make sense and this isn't working. Was wondering if anyone knows where I'm going wrong here? Am I not taking parentViews superview into account?
I am not 100% sure, but I think that convertPoint: already takes a rotation (or any other transformation) into account, so you only need:
CGPoint childViewRedPoint = CGPointMake(self.bounds.size.width, self.bounds.size.height / 2);
CGPoint convertedChildViewRedPoint = [self convertPoint:childViewRedPoint toView:self.superview];
if (CGRectContainsPoint(self.superview.bounds, convertedChildViewRedPoint))
...
I'm using a piece of code I found to pass touch events through transparent parts of a UIImageView. I'm subclassing UIImageView and adding this:
- (BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event
{
unsigned char pixel[1] = {0};
CGContextRef context = CGBitmapContextCreate(pixel,
1, 1, 8, 1, NULL,
kCGImageAlphaOnly);
UIGraphicsPushContext(context);
[self.image drawAtPoint:CGPointMake(-point.x, -point.y)];
UIGraphicsPopContext();
CGContextRelease(context);
CGFloat alpha = pixel[0]/255.0;
BOOL transparent = alpha < 0.01;
if(transparent){
return NO;
} else {
return YES;
}
}
So far its working great in my iPad version. However, in my iPhone version, I set the image frames to be half of the image's actual size (self.image.frame.size.width/2). This code is interfering with my pan gestures in an odd way, where if I touch the top left of the image I cannot access my pan gesture, but I can access it to the far bottom right, past the actual image into a transparent zone.
Removing the code returns the pan gesture to normal. However, I would still like to keep the ability to ignore touches on transparent parts. Does anyone know what part of this code is messing with my touch points or any other reason its acting like this?
Thanks
I know this question is very old, but I just had to use this on a project and my problem was that I was setting the imageView frame manually. What helped was changing the code so resizing was only done through transforms.
If the imageView is initially the same size as the image inside it, you can use this code and it will work with any transform applied to the imageView afterwards.
So in your iPhone version, you could set the frame of the imageView to the size of the image inside it and then apply a scaling transform to it so it's half the size.
I have an instance of UIScrollView with images inside it.
It is possible to scroll the scroll view horizontally, and view more images.
I want to magnify the images, according the their distance from the middle of the scroll view, so it should look like this.
I thought about the simplest way to do that, using the following code:
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
//Change the frames of all the visible images here.
}
This way does not work smoothly on some of the preceding devices, such as iPod 2G.
Is there a better way to perform the image magnification than the one I described?
If so, please let me know.
Thanks!
EDIT:
This is the implementation of the body of the method above:
-(void) magnifyImages {
//This method magnifies all the images.
for (NSString *name in [imagesDict allKeys]) {
UIImageView *imageView = [imagesDict objectForKey:name];
[self magnifyImageView:imageView];
}
}
static float kMaxMagnification = 1.5;
-(void) magnifyImageView:(UIImageView *)imageView {
CGRect frame = imageView.frame;
float imageMiddleLine = frame.origin.x+frame.size.width/2-scrollView.contentOffset.x;
//Check if the image's middle line is visible = whether it is needed to magnify the image.
if (imageMiddleLine +frame.size.width/2>0
&& imageMiddleLine-frame.size.width/2<scrollView.frame.size.width) {
float magnification = fabs(160-imageMiddleLine);
//Mathematical formula that calculates the magnification.
magnification = (kMaxMagnification-1)*(kDeviceWidth/2-magnification)/160+1;
//'normalImageSize' is a property of the image that returns the image's normal size (when not magnified).
CGSize imgSize = imageView.normalImageSize;
frame=CGRectMake(frame.origin.x-(imgSize.width*magnification-frame.size.width)/2,
frame.origin.y-(imgSize.height*magnification-frame.size.height)/2,
imgSize.width*magnification, imgSize.height*magnification);
imageView.frame=frame;
}
}
http://developer.apple.com/library/ios/#samplecode/Touches/Introduction/Intro.html
I'm new to IOS development, and have been playing around with the IOS dev sample code, trying to learn how things work, etc... I came across this sample code (the classic version, not the gesture recognizers ver.) that does everything I'm looking for, except one thing. When the image views are dragged over another image view, they begin stacking up, and you have to double click the image to separate them.
I've spent forever trying to figure out how to make them not stack up. I think I have to store that a piece is getting being moved in an ivar, and stop it from getting the position of the other views... But I'm not sure how to go about doing it. If someone has the time to modify the sample code to not stack pieces, I'd really appreciate it! I'm dying to find out the solution after the forever I spent trying to do it!
I'll try to be a little specific with what I'm trying to do here... I've made 26 of these image views, making them each a letter of the alphabet. I have 13 image views in two rows. A-M & N-Z. Currently, if I drag the A tile down from the top row, moving it down to a "spelling area" I have to cross over the N-Z row. When I do, the "A" tile (image view) picks up any tile it hovers over. So if I drag the A straight down, it's going to pick up the N tile, because it's going to hover right over it, before getting down to the "spelling" area.
Thanks in advance for any help or direction you can give me!
Well you have this function in the sample code
// Checks to see which view, or views, the point is in and then calls a method to perform the closing animation,
// which is to return the piece to its original size, as if it is being put down by the user.
-(void)dispatchTouchEndEvent:(UIView *)theView toPosition:(CGPoint)position
{
// Check to see which view, or views, the point is in and then animate to that position.
if (CGRectContainsPoint([firstPieceView frame], position)) {
[self animateView:firstPieceView toPosition: position];
}
if (CGRectContainsPoint([secondPieceView frame], position)) {
[self animateView:secondPieceView toPosition: position];
}
if (CGRectContainsPoint([thirdPieceView frame], position)) {
[self animateView:thirdPieceView toPosition: position];
}
// If one piece obscures another, display a message so the user can move the pieces apart
if (CGPointEqualToPoint(firstPieceView.center, secondPieceView.center) ||
CGPointEqualToPoint(firstPieceView.center, thirdPieceView.center) ||
CGPointEqualToPoint(secondPieceView.center, thirdPieceView.center)) {
touchInstructionsText.text = #"Double tap the background to move the pieces apart.";
piecesOnTop = YES;
} else {
piecesOnTop = NO;
}
}
wich you can try to modify to
// Checks to see which view, or views, the point is in and then calls a method to perform the closing animation,
// which is to return the piece to its original size, as if it is being put down by the user.
-(void)dispatchTouchEndEvent:(UIView *)theView toPosition:(CGPoint)position
{
// Check to see which view, or views, the point is in and then animate to that position.
if (CGRectContainsPoint([firstPieceView frame], position)) {
[self animateView:firstPieceView toPosition: position];
}
if (CGRectContainsPoint([secondPieceView frame], position)) {
[self animateView:secondPieceView toPosition: position];
}
if (CGRectContainsPoint([thirdPieceView frame], position)) {
[self animateView:thirdPieceView toPosition: position];
}
// If one piece obscures another, display a message so the user can move the pieces apart
if (CGPointEqualToPoint(firstPieceView.center, secondPieceView.center) ||
CGPointEqualToPoint(firstPieceView.center, thirdPieceView.center) ||
CGPointEqualToPoint(secondPieceView.center, thirdPieceView.center)) {
if (firstPieceView.center.x == secondPieceView.center.x)
secondPieceView.center = CGPointMake(firstPieceView.center.x - 50, firstPieceView.center.y - 50);
if (firstPieceView.center.x == thirdPieceView.center.x)
thirdPieceView.center = CGPointMake(firstPieceView.center.x + 50, firstPieceView.center.y + 50);
if (secondPieceView.center.x == thirdPieceView.center.x)
thirdPieceView.center = CGPointMake(secondPieceView.center.x + 50, secondPieceView.center.y + 50);
touchInstructionsText.text = #"";
} else {
piecesOnTop = NO;
}
}
Let me know if it does what you want...
My goal is simple; I want to create a program that displays an UIImage, and when swiped from bottom to top, displays another UIImage. The images here could be a happy face/sad face. The sad face should be the starting point, the happy face the end point. When swiping your finger the part below the finger should be showing the happy face.
So far I tried solving this with the frame and bounds properties of the UIImageview I used for the happy face image.
What this piece of code does is wrong, because the transition starts in the center of the screen and not the bottom. Notice that the origin of both frame and bounds are at 0,0...
I have read numerous pages about frames and bounds, but I don't get it. Any help is appreciated!
The loadimages is called only once.
- (void)loadImages {
sadface = [UIImage imageNamed:#"face-sad.jpg"];
happyface = [UIImage imageNamed:#"face-happy.jpg"];
UIImageView *face1view = [[UIImageView alloc]init];
face1view.image = sadface;
[self.view addSubview:face1view];
CGRect frame;
CGRect contentRect = self.view.frame;
frame = CGRectMake(0, 0, contentRect.size.width, contentRect.size.height);
face1view.frame = frame;
face2view = [[UIImageView alloc]init];
face2view.layer.masksToBounds = YES;
face2view.contentMode = UIViewContentModeScaleAspectFill;
face2view.image = happyface;
[self.view addSubview:face2view];
frame = CGRectMake(startpoint.x, 0, contentRect.size.width, contentRect.size.height);
face2view.frame = frame;
face2view.clipsToBounds = YES;
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
CGPoint movepoint = [[touches anyObject] locationInView: self.view];
NSLog(#"movepoint: %f %f", movepoint.x, movepoint.y);
face2view.bounds = CGRectMake(0, 0, 320, 480 - movepoint.y);
}
The UIImages and UIImageViews are properly disposed of in the dealloc function.
Indeed, you seem to be confused about frames and bounds. In fact, they are easy. Always remember that any view has its own coordinate system. The frame, center and transform properties are expressed in superview's coordinates, while the bounds is expressed in the view's own coordinate system. If a view doesn't have a superview (not installed into a view hierarchy yet), it still has a frame. In iOS the frame property is calculated from the view's bounds, center and transform. You may ask what the hell frame and center mean when there's no superview. They are used when you add the view to another view, allowing to position the view before it's actually visible.
The most common example when a view's bounds differ from its frame is when it is not in the upper left corner of its superview: its bounds.origin may be CGPointZero, while its frame.origin is not. Another classic example is UIScrollView, which frequently modifies its bounds.origin to make subviews scroll (in fact, modifying the origin of the coordinate system automatically moves every subview without affecting their frames), while its own frame is constant.
Back to your code. First of all, when you already have images to display in image views, it makes sense to init the views with their images:
UIImageView *face1view = [[UIImageView alloc] initWithImage: sadface];
That helps the image view to immediately size itself properly. It is not recommended to init views with -init because that might skip some important code in their designated initializer, -initWithFrame:.
Since you add face1view to self.view, you should really use its bounds rather than its frame:
face1view.frame = self.view.bounds;
Same goes for the happier face. Then in -touchesMoved:… you should either change face2view's frame to move it inside self.view or (if self.view does not contain any other subviews besides faces) modify self.view's bounds to move both faces inside it together. Instead, you do something weird like vertically stretching the happy face inside face2view. If you want the happy face to slide from the bottom of self.view, you should initially set its frame like this (not visible initially):
face2view.frame = CGRectOffset(face2view.frame, 0, CGRectGetHeight(self.view.bounds));
If you choose to swap faces by changing image views' frames (contrasted with changing self.view's bounds), I guess you might want to change both the views' frame origins, so that the sad face slides up out and the happy face slides up in. Alternatively, if you want the happy face to cover the sad one:
face2view.frame = face1view.frame;
Your problem seems to have something to do with the face2view.bounds in touchesMoved.
You are setting the bounds of this view to the rect, x:0, y:0, width:320, height:480 - y
x = 0 == left on the x axis
y = 0 == top on the y axis
So you are putting this image frame at the upper left corner, and making it fill the whole view. That's not what you want. The image simply becomes centered in this imageView.