The size of the Uibuton control zooms in and out (it can also be understood as the image zooms out, the idea is the same)-Learn notes

A simple implementation of the zoom-out function of a picture (in the case of zooming in on a simple guessing project)

Ideas:

1. Create a UIButton * Guessimage control, set the position, and then create a button bigimage control test the way to enlarge the image gotobig, the same place;

2. Set the margin for guessimage, size, the same bigimage also set up and so on;

3. Add a click to Bigimage to enlarge the image: Gotobig, in Gotobig, define 4 values of the coordinates, that is cgfloat guessimagex,cgfloat guessimagey,cgfloat Guessimagew, CGFloat Guessimageh; (where Guessimagew is the width of the screen, because the image used to guess the picture is a square, so Guessimageh = Guessimagew, of course, can be set to other, Guessimagex value is 0, because there is no need to move, the value of Guessimagey is (High of the entire screen-the height of the picture after enlargement)/2; guessimagey = (Self.view.frame.size.height-guessimageh)/2), then,

The Guessimage top (shown at the topmost) code is: [Self.view bringSubviewToFront:self.guessimage]; Finally, enlarge the size of the middle picture _guessimage.frame = CGRectMake (Guessimagex,guessimagey,guessimagew,guessimageh);

4. In order to enlarge the picture not so suddenly big, add animation effect of the Code,

[UIView animatewithduration:1.0 animations:^{// enlarge the size of the last enlarged image and it will have an animated function when zoomed in.  _guessimage.frame = CGRectMake (Guessimagex,guessimagey,guessimagew,guessimageh);} Completion:^ (BOOL Finished) {//  What is written here is what needs to be removed when the above code is completed}];

5. Realize the function of reducing, and for the sake of aesthetics, add one more control UIButton *conerview do cover layer,

1 attributes @property (nonatomic,assign) CGRect imageSize; Do get the original size in order to zoom out.

6. Set the Conerview style to custom, _conerview.frame settings _conerview.frame = self.view.bounds;//(also can be self.view.frame)

The background color of _conerview is set to black, adding transparency to _conerview: _conerview.alphe = 0;//Setting initial value is 0, which is transparent

Then the Conerview is displayed in the view [Self.view Addsubview:_conerview];

7. Add transparency to the animation effect code, i.e.:

[UIView animatewithduration:1.0 animations:^{// enlarge the size of the last enlarged image and it will have an animated function when zoomed in.   0.5; // Translucent effects appear } Completion:^ (BOOL finished) {//  What is written here is what needs to be removed when the above code is completed}];

8. On the top of the amplification function method, write the code: self.imagesize = self.guessimage.frame;//record the initial size of the picture, give  _conerview Add a reduced functionality method: Gotonarrowclick Click event, [_conerview addtarget:self Action: @selector (Gotonarrowclick) forControlEvents: The detailed code for the uicontroleventtouchupinside];   method Gotonarrowclick is as follows:

// reduced image function -(void) gotonarrowclick{    [UIView animatewithduration:1.0 Animations : ^{        = self.imagesize;   the picture retracts to the original size           0;   make the opacity of the overlay transparent so that you can click the other button     } completion:^(BOOL finished        ) {//  When the animation is complete, remove the masking layer and reduce the memory         [_conerview Removefromsuperview];}    ];    }

9. Add a click-to-zoom method event to the picture button _guessimage: Gotozoominoroutclick, the code is:

// This is placed in the Add and Set button location code; [_guessimage addtarget:self Action: @selector (Gotozoominoroutclick) forcontrolevents:uicontroleventtouchupinside];  

The specific code for the method Gotozoominoroutclick is:

-(void) gotozoominoroutclick{        // determine when to zoom in and when to zoom out    if (_ Conerview = = nil) {        [self gotochoice]; // when _conerview = = nil, click on the picture will enlarge the picture operation else { [self        gotonarrowclick];       // when _conerview is not nil, clicking on the image will reduce the image operation .     }}

Finally, because the younger brother is a novice, this is only to write their own read notes, so you big God do not spray!

All the specific code is as follows (as far as the code inside the APPDELEGATE.M is not written, it is nothing more than creating window windows):

////VIEWCONTROLLER.M//Enlarge Image////Created by Wenjim on 15/9/14.//Copyright (c) 2015 Wenjim. All rights reserved.//#import "ViewController.h"@interfaceViewcontroller ()//zoom in to create a picture with pure code@property (Weak, nonatomic) UIButton *guessimage;//make Picture button display@property (weak,nonatomic) UIButton*conerview;//cover layer.@property (nonatomic,assign) cgrect imageSize;//gets the original position of the picture (that is, the original size of the EnlargeImage1)@end@implementationViewcontroller- (void) viewdidload {[Super viewdidload]; [Self Setupallcontrol];//Show all controls on the view}#pragmaMark-Add Control-(void) setupallcontrol{//figure out the picture shown_guessimage = [UIButton buttonwithtype:uibuttontypecustom];//Set the button's style to custom_guessimage.frame = CGRectMake ( the, the, $, $); _guessimage.backgroundcolor=[Uicolor Whitecolor]; _guessimage.imageedgeinsets= Uiedgeinsetsmake (5,5,5,5);//sets the image or margin of text displayed by the button buttons    /*guessimage.imageedgeinsets = Uiedgeinsetsmake (5, 5, 5, 5); Guessimage.contentedgeinsets = Uiedgeinsetsmake (5, 5, 5, 5);//Setting the button button to display the image or the margin of text above 2 can set the margin of the picture, before setting the button margin, first You need to add a background color before the margin will show the color guessimage.titleedgeinsets = Uiedgeinsetsmake (5, 5, 5, 5);//Set the button button to display the image or the margin of text is to set the margin of the text displayed in the button, you also need to add a button background color to display the color in the margin*/[_guessimage setimage:[uiimage imagenamed:@"Huo"] Forstate:uicontrolstatenormal]; [_guessimage Setcontenthorizontalalignment:uicontrolcontenthorizontalalignmentcenter];//how text and pictures are aligned//[_guessimage Setuserinteractionenabled:no];//Set button is not clickable and the style is not changed[_guessimage Setadjustsimagewhenhighlighted:no];//when no, button can click, but the effect of the click will not be dimmed[_guessimage addtarget:self Action: @selector (Gotozoominoroutclick) forControlEvents:    UIControlEventTouchUpInside];        [Self.view Addsubview:_guessimage]; //big Picture (Bigimage)UIButton * Bigimage =[UIButton Buttonwithtype:uibuttontypecustom]; Bigimage.frame= CGRectMake ( Max, -, -, $); [Bigimage settitle:@"Big Picture"Forstate:uicontrolstatenormal]; //[Prompt]//[Prompt Setbackgroundimage:[uiimage imagenamed:@ "btn_left"] forstate:uicontrolstatenormal];//the background image of the button is set so that the text and the picture are combined to display//[Prompt Setimage:[uiimage imagenamed:@ "Icon_tip"] forstate:uicontrolstatenormal];//set Small icons in front[Bigimage addtarget:self Action: @selector (Gotobig) forcontrolevents:uicontroleventtouchupinside]; [Self.view addsubview:bigimage];}//Enlarge picture Function-(void) gotobig{//record the original frameSelf.imagesize =Self.guessimage.frame; CGFloat Guessimagew= (self.view.frame.size.width)-Ten; CGFloat Guessimageh=Guessimagew; CGFloat Guessimagex=5; CGFloat Guessimagey= (Self.view.frame.size.height-guessimageh)/2; //Generate a shaded view (button)_conerview =[UIButton Buttonwithtype:uibuttontypecustom]; _conerview.frame=Self.view.bounds; _conerview.backgroundcolor=[Uicolor Blackcolor]; _conerview.alpha=0;//set the transparency of the background[Self.view Addsubview:_conerview]; //Place a child control on the top level[Self.view BringSubviewToFront:self.guessimage]; //animation effects[UIView animatewithduration:1.0animations:^{self.guessimage.frame= CGRectMake (Guessimagex, Guessimagey, Guessimagew, Guessimageh);//enlarge the size of the middle guessing plot_conerview.alpha =0.5;//set the transparency transparency of the background from 0 to 0.5} Completion:^(BOOL finished) {//Self.guessimage.backgroundColor = [Uicolor redcolor];    }]; //Click on the overlay to shrink the image[_conerview addtarget:self Action: @selector (Gotonarrowclick) forcontrolevents:uicontroleventtouchupinside]; [_conerview Setadjustsimagewhenhighlighted:no];//when no, button can click, but the effect of the click will not be dimmed}//reduce the image function-(void) gotonarrowclick{[UIView animatewithduration:1.0animations:^{self.guessimage.frame= Self.imagesize;//picture retracted to its original size_conerview.alpha=0;//Remove the opacity of the cover layer} completion:^(BOOL finished) {//when the animation is complete, remove the masking layer[_conerview Removefromsuperview];    }]; } //zoom in and out when you click on a picture-(void) gotozoominoroutclick{//determine when to zoom in and when to zoom out    if(_conerview = =Nil)    {[Self gotochoice]; } Else{[Self gotonarrowclick]; }}@end

The size of the Uibuton control zooms in and out (it can also be understood as the image zooms out, the idea is the same)-Learn notes