Borders and Frames: How to Display a Part of UIImage

My goal is simple; I want to create a program that displays a UIImage, and when scrolling from bottom to top, displays another UIImage. Images here may be a happy face / sad face. A sad face should be the starting point, the happy face of the end point. When scrolling the finger, the part under the finger should show a happy face.

So far, I have tried to solve this with the UIImageview frame and border properties, which I used to portray a happy face.

What makes this piece of code wrong is because the transition begins in the center of the screen, not at the bottom. Note that the start of both frames and borders is 0.0 ...

I read numerous pages about frames and borders, but I do not understand. Any help is appreciated!

Loads are displayed 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); } 

UIImages and UIImageViews are correctly removed in the dealloc function.

+4
source share
2 answers

In fact, you seem to be confused about frames and boundaries. In fact, they are light. Always remember that any view has its own coordinate system. The properties of the frame, center, and transformation are expressed in the coordinates of the observation, and the boundaries are expressed in the view's own coordinate system. If the view does not have a supervisor (not yet installed in the view hierarchy), it still has a frame. In iOS, the frame property is computed from the boundaries of the view, center, and transform. You may ask, what is the feature of the frame and the center when there is no supervisor. They are used when you add a view to another view, allowing you to position the view before it is actually displayed.

The most common example where the boundaries of a view are different from its frame is when it is not in the upper left corner of its supervisor: its bounds.origin may be CGPointZero, but its frame.origin may not. Another classic example is UIScrollView, which often modifies its bounds.origin to do scroll scrolling (in fact, changing the origin of the coordinate system automatically moves each subquery without affecting their frames), while its own frame is constant.

Return to your code. First of all, when you already have images to display in images, it makes sense to initiate views with their images:

 UIImageView *face1view = [[UIImageView alloc] initWithImage: sadface]; 

This helps the correct image size. It is not recommended to initialize views with -init , because this may skip some important code in their initializer, -initWithFrame:

Since you are adding face1view to self.view, you really should use its borders, not your frame:

 face1view.frame = self.view.bounds; 

The same goes for a happy face. Then in -touchesMoved:โ€ฆ you need to either change the face2view frame to move it inside self.view, or (if self.view does not contain any other views except faces), change the frames of self.view to move both sides inside . Instead, you do something strange, like vertically stretching a happy face inside face2view. If you want a happy face to slide from the bottom of self.view, you must first set its frame as this (not visible at first):

 face2view.frame = CGRectOffset(face2view.frame, 0, CGRectGetHeight(self.view.bounds)); 

If you decide to exchange faces by changing the borders of the images (as opposed to changing the boundaries of self.view), I think you might want to change both the original images of the representations, and the sad face will pop out and the happy face will slide up. Alternatively, if you want a happy face to embrace a sad:

 face2view.frame = face1view.frame; 
+2
source

Your problem seems to have something to do with face2view.bounds in touchhesMoved. You set the boundaries of this view to rect, x: 0, y: 0, width: 320, height: 480 - y

x = 0 == left on the x axis

y = 0 == top of the y axis

So, you put this image frame in the upper left corner and make it fill the whole view. This is not what you want. The image is simply centered in that image.

0
source

All Articles