UIButon controls zoom in and out (you can also think of them as image zoom in and out, the idea is the same)-learning notes, uibuton zoom in and out

UIButon controls zoom in and out (you can also think of them as image zoom in and out, the idea is the same)-learning notes, uibuton zoom in and out

A simple implementation of the Image zoom-in and zoom-out function (taking a simple guess image project as an example)

Ideas:

1. Create a UIButton * guessimage control, set the location, and then create a button bigImage control to test the method of enlarging the image goToBig;

2. Set the margin, size, and bigImage for guessimage;

3. add a click-to-zoom image to bigImage: goToBig defines the values of four coordinates in goToBig, that is, CGFloat guessimageX, CGFloat guessimageY, CGFloat guessimageW, CGFloat guessimageH; (guessimageW is the screen width. Because the picture used by the guess graph is square, guessimageH = guessimageW can be set to others. The guessimageX value is 0 because it does not need to be moved, the value of guessimageY is (the height of the entire Screen-the height of the enlarged image)/2; guessimageY = (self. view. frame. size. height-guessimageH)/2 ),

The code for setting guessimage to the top (displayed on the top) is: [self. view bringSubviewToFront: self. guessimage];, and finally enlarge the size of the intermediate image _ guessimage. frame = CGRectMake (guessimageX, guessimageY, guessimageW, guessimageH );

 

4. Add the animation effect code to the enlarged image,

[UIView animateWithDuration: 1.0 animations: ^ {// Add the code to enlarge the image size. Then, an animation function _ guessimage is provided. frame = CGRectMake (guessimageX, guessimageY, guessimageW, guessimageH);} completion: ^ (BOOL finished) {// After the preceding code is completed, items to be removed}];

 

5. Implement the zoom-out function, and add one more control UIButton * conerView for the sake of appearance as the covering layer,

One attribute @ property (nonatomic, assign) CGRect imageSize; obtain the original size to narrow down.

6. Set the conerView style to custom, and set _ conerView. frame _ conerView. frame = self. view. bounds; // (or self. view. frame)

_ ConerView: Set the background color to black and add transparency to _ conerView: _ conerView. alphe = 0; // set the initial value to 0, that is, transparency.

Then, display the conerView in the View [self. view addSubview: _ conerView];

7. add transparency in the animation effect code, that is:

[UIView animateWithDuration: 1.0 animations: ^ {// Add the code to enlarge the image size. Then, an animation function _ guessimage is provided. frame = CGRectMake (guessimageX, guessimageY, guessimageW, guessimageH); _ conerView. alphe = 0.5; // translucent effect} completion: ^ (BOOL finished) {// the code to be removed after the preceding code is written here}];

 

8. write the code self at the top of the zoom-in function method. imageSize = self. guessimage. frame; // record the initial size of the image. Add the following method to _ conerView: Click Event of goTonarrowClick. [_ conerView addTarget: self action: @ selector (goTonarrowClick) forControlEvents: UIControlEventTouchUpInside]; Detailed code for the goTonarrowClick method is as follows:

// Zoom out the image function-(void) goTonarrowClick {[UIView animateWithDuration: 1.0 animations: ^ {self. guessimage. frame = self. imageSize; // scale the image back to the original size _ conerView. alpha = 0; // make the transparency of the covering layer transparent so that you can click another button} completion: ^ (BOOL finished) {// After the animation is complete, remove the covering layer, reduce memory [_ conerView removeFromSuperview];}

 

9. Add a method event to the image button _ guessimage: goToZoomInOrOutClick. The Code is as follows:

// Place the code in the ADD and set button locations. [_ guessimage addTarget: self action: @ selector (goToZoomInOrOutClick) forControlEvents: UIControlEventTouchUpInside];

The code for goToZoomInOrOutClick is as follows:

 

-(Void) goToZoomInOrOutClick {// determine when to zoom in and when to zoom out if (_ conerView = nil) {[self goToChoice]; // click the image when _ conerView = nil to enlarge the image} else {[self goTonarrowClick]; // when _ conerView is not nil, clicking the image will narrow down the image }}

In the end, because the younger brother is a newbie, this is just a note for himself, so don't try it!

 

The specific code is as follows (the code in AppDelegate. m will not be written, but it is similar to creating a window and other operations ):

//// ViewController. m // enlarge the image /// Created by wenjim on 15/9/14. // Copyright (c) 2015 WenJim. all rights reserved. // # import "ViewController. h "@ interface ViewController () // zoom in and out the image creation using pure code @ property (weak, nonatomic) UIButton * guessimage; // display the image button @ property (weak, nonatomic) UIButton * conerView; // mask layer @ property (nonatomic, assign) CGRect imageSize; // obtain the original image location (that is, the original size of enlargeImage1) @ end @ implementation ViewController-(void) viewDidLoad {[super viewDidLoad]; [self setUpAllControl]; // display all controls on the view} # pragma mark-add control-(void) setUpAllControl {// guess the image displayed in the figure _ guessimage = [UIButton buttonWithType: UIButtonTypeCustom]; // set the button style to custom _ guessimage. frame = CGRectMake (88,130,200,200); _ guessimage. backgroundColor = [UIColor whiteColor]; _ guessimage. imageEdgeInsets = UIEdgeInsetsMake (5, 5, 5, 5); // set the margin of the image or text displayed by the button/* guessimage. imageEdgeInsets = UIEdgeInsetsMake (5, 5, 5); guessimage. contentEdgeInsets = UIEdgeInsetsMake (5, 5, 5, 5); // set the margins of the image or text displayed by the button. Before setting the button margin, the background color must be added before the margin is displayed as guessimage. titleEdgeInsets = UIEdgeInsetsMake (5, 5, 5, 5); // set the margin of the image or text displayed by the button. This is the margin of the text displayed in the button, you also need to add the button background color to display the color in the margin */[_ guessimage setImage: [UIImage imageNamed: @ "huo"] forState: UIControlStateNormal]; [_ guessimage align: align]; // The alignment of text and image // [_ guessimage setUserInteractionEnabled: NO]; // The set button cannot be clicked and the style remains unchanged [_ guessimage setAdjustsImageWhenHighlighted: NO]; // when it is NO, the button can be clicked, but the clicking effect will not become grayed out [_ guessimage addTarget: self action: @ selector (goToZoomInOrOutClick) forControlEvents: UIControlEventTouchUpInside]; [self. view addSubview: _ guessimage]; // BigImage UIButton * bigImage = [UIButton buttonWithType: UIButtonTypeCustom]; bigImage. frame = CGRectMake (150, 70, 70, 36); [bigImage setTitle: @ "" forState: UIControlStateNormal]; // [prompt] // [prompt setBackgroundImage: [UIImage imageNamed: @ "btn_left"] forState: UIControlStateNormal]; // you can set the background image of the button to merge the text and image for display. // [prompt setImage: [UIImage imageNamed: @ "icon_tip"] forState: UIControlStateNormal]; // set the front icon [bigImage addTarget: self action: @ selector (goToBig) forControlEvents: UIControlEventTouchUpInside]; [self. view addSubview: bigImage];} // enlarge the image function-(void) goToBig {// record the original frame self. imageSize = self. guessimage. frame; CGFloat guessimageW = (self. view. frame. size. width)-10; CGFloat guessimageH = guessimageW; CGFloat guessimageX = 5; CGFloat guessimageY = (self. view. frame. size. height-guessimageH)/2; // generate a hidden View (button) _ conerView = [UIButton buttonWithType: UIButtonTypeCustom]; _ conerView. frame = self. view. bounds; _ conerView. backgroundColor = [UIColor blackColor]; _ conerView. alpha = 0; // set the background transparency [self. view addSubview: _ conerView]; // place a sub-control on the top layer [self. view bringSubviewToFront: self. guessimage]; // animation effect [UIView animateWithDuration: 1.0 animations: ^ {self. guessimage. frame = CGRectMake (guessimageX, guessimageY, guessimageW, guessimageH); // enlarge the conerView of the intermediate guess. alpha = 0.5; // sets the transparency of the background from 0 to 0.5} completion: ^ (BOOL finished) {// self. guessimage. backgroundColor = [UIColor redColor];}]; // click the cover layer to narrow down the image [_ conerView addTarget: self action: @ selector (goTonarrowClick) forControlEvents: UIControlEventTouchUpInside]; [_ conerView details: NO]; // when it is NO, the button can be clicked, but the click effect will not become grayed out} // The image shrinking function-(void) goTonarrowClick {[UIView animateWithDuration: 1.0 animations: ^ {self. guessimage. frame = self. imageSize; // scale the image back to the original size _ conerView. alpha = 0; // remove the transparency of the covering layer} completion: ^ (BOOL finished) {// After the animation is complete, remove the covering layer [_ conerView removeFromSuperview];} // zoom in and out when you click an image-(void) goToZoomInOrOutClick {// determine when to zoom in, when to narrow down if (_ conerView = nil) {[self goToChoice];} else {[self goTonarrowClick];} @ end