UIButon控件的尺寸放大缩小（也可以理解为图片的放大缩小，思路是一样的）－学习笔记

2019-11-14 18:20:01

字体：大中小

来源：转载

供稿：网友

图片的放大缩小功能的简单实现（以一个简单的猜图项目中的放大缩小为例）

思路：

1.创建一个UIButton * guessimage 控件，设定好位置，再创建一个button bigImage控件测试一下放大图片的方法 goToBig，同样放好位置；

2.给 guessimage 设置边距，尺寸大小，同样 bigImage 也进行设置等等；

3.给 bigImage 添加点击放大图片的方法：goToBig，在goToBig里面定义 4个座标的值，也就是 CGFloat guessimageX,CGFloat guessimageY,CGFloat guessimageW,CGFloat guessimageH; (其中guessimageW 是屏幕的宽，因为猜图用到的图片是正方形，所以 guessimageH = guessimageW,当然可以设置为其他的，guessimageX 的值为0，因为不需要移动，guessimageY 的值为（整个屏幕的高－放大后图片的高）／ 2； guessimageY ＝（self.view.frame.size.height - guessimageH）／ 2 )，然后，把

guessimage 置顶（在最顶层显示）代码为：[self.view bringSubviewToFront:self.guessimage];，最后放大中间图片的尺寸 _guessimage.frame ＝ CGRectMake (guessimageX,guessimageY,guessimageW,guessimageH);

4.为了给放大的图片没有那么突然的变大，添加动画效果的代码，

[UIView animateWithDuration:1.0 animations:^{//把最后放大图片尺寸的代码放大里面来就会在放大时有一个动画功能_guessimage.frame ＝ CGRectMake (guessimageX,guessimageY,guessimageW,guessimageH);} completion:^(BOOL finished) {// 这里写的是当上面的代码完成后，需要移除的东西 }];

5.实现缩小功能，并为了美观，添加多1个控件 UIButton *conerView 做遮盖层，

1个属性 @PRoperty (nonatomic,assign) CGRect imageSize; 做获取原始尺寸，以便缩小。

6.给 conerView 的样式设置为自定义，_conerView.frame的设置 _conerView.frame = self.view.bounds;//(也可以是 self.view.frame)

_conerView的背景颜色设置为黑色，给 _conerView添加透明度： _conerView.alphe ＝ 0;//设置初始值为0，也就是透明

然后把conerView在View中显示出来 [self.view addSubview:_conerView];

7.在动画效果代码里添加透明度，也就是：

[UIView animateWithDuration:1.0 animations:^{//把最后放大图片尺寸的代码放大里面来就会在放大时有一个动画功能_guessimage.frame ＝ CGRectMake (guessimageX,guessimageY,guessimageW,guessimageH);_conerView.alphe = 0.5;//出现半透明效果} completion:^(BOOL finished) {// 这里写的是当上面的代码完成后，需要移除的东西 }];

8.在放大功能方法最上面写上代码：self.imageSize = self.guessimage.frame;//记录图片最开始的尺寸大小，给 _conerView 添加一个缩小功能方法：goTonarrowClick的点击事件，[_conerView addTarget:self action:@selector(goTonarrowClick) forControlEvents:UIControlEventTouchUpInside]; 方法goTonarrowClick的详细代码如下：

//缩小图片功能-(void)goTonarrowClick{    [UIView animateWithDuration:1.0 animations:^{        self.guessimage.frame = self.imageSize;//图片缩回原来的尺寸         _conerView.alpha = 0;//把遮盖层的透明度弄出透明，以便能点击其他按钮    } completion:^(BOOL finished) {        //当动画完成之后，移除遮盖层，减少内存        [_conerView removeFromSuperview];    }];    }

9.给图片按钮_guessimage添加一个点击放大缩小的方法事件：goToZoomInOrOutClick，代码为：

//这个是放在添加和设置按钮位置代码处；[_guessimage addTarget:self action:@selector(goToZoomInOrOutClick) forControlEvents:UIControlEventTouchUpInside];

方法goToZoomInOrOutClick的具体代码为：

-(void)goToZoomInOrOutClick{        //判断什么时候进行放大，什么时候进行缩小    if (_conerView == nil) {        [self goToChoice];//当_conerView == nil 时 点击图片会进行放大图片操作    } else {        [self goTonarrowClick];//当_conerView 不为 nil 时 点击图片会进行缩小图片操作    }}

最后说下，因为小弟是新手，这只是写给自己看的笔记，所以各位大神别喷！

全部具体代码如下(至于AppDelegate.m 里面的代码就不写了，不外乎创建window 窗口等操作):

////  ViewController.m//  放大图片////  Created by wenjim on 15/9/14.//  Copyright (c) 2015年 WenJim. All rights reserved.//#import "ViewController.h"@interface ViewController ()//纯代码进行创建图片的放大缩小@property (weak, nonatomic)  UIButton *guessimage;//作图片按钮显示@property (weak,nonatomic) UIButton *conerView;//做遮盖层@property (nonatomic,assign) CGRect imageSize;//获取图片的原始位置（也就是enlargeImage1 的原始尺寸）@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    [self setUpAllControl];//把所有控件在view上显示出来}#pragma mark - 添加控件-(void)setUpAllControl{        //猜图展现出来的图片    _guessimage = [UIButton buttonWithType:UIButtonTypeCustom];//设置button的样式为自定义    _guessimage.frame = CGRectMake(88, 130, 200, 200);    _guessimage.backgroundColor = [UIColor whiteColor];    _guessimage.imageEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);//设置 button 按钮显示的图像或者文字的边距    /*     guessimage.imageEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);     guessimage.contentEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);//设置 button 按钮显示的图像或者文字的边距     以上2个都能设置图片的边距，在设置 button 边距之前，先需要添加背景颜色，之后边距才会显示出颜色出来          guessimage.titleEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);//设置 button 按钮显示的图像或者文字的边距     这个是设置 button 里面显示文字的边距，同样需要先添加 button 背景颜色 ，才能在边距中显示出颜色出来     */    [_guessimage setImage:[UIImage imageNamed:@"huo"] forState:UIControlStateNormal];    [_guessimage setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];//文字和图片的对齐方式    //  [_guessimage setUserInteractionEnabled:NO];//设置button不可点击且样式不变    [_guessimage setAdjustsImageWhenHighlighted:NO];//为NO的时候，button 能点击，但是点击的效果不会变灰    [_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];//通过设定 button 的背景图片从而使得 文字和图片一起合并显示    //    [prompt setImage:[UIImage imageNamed:@"icon_tip"] forState:UIControlStateNormal];//设置前方的小图标    [bigImage addTarget:self action:@selector(goToBig) forControlEvents:UIControlEventTouchUpInside];    [self.view addSubview:bigImage];}//放大图片功能-(void)goToBig{    //纪录原始的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;        //生成遮盖的View（按钮）    _conerView = [UIButton buttonWithType:UIButtonTypeCustom];    _conerView.frame = self.view.bounds;    _conerView.backgroundColor = [UIColor blackColor];    _conerView.alpha = 0;//设置背景的透明度    [self.view addSubview:_conerView];        //把一个子控件置于顶层    [self.view bringSubviewToFront:self.guessimage];        //动画效果    [UIView animateWithDuration:1.0 animations:^{        self.guessimage.frame = CGRectMake(guessimageX, guessimageY, guessimageW, guessimageH);//放大中间猜图的尺寸        _conerView.alpha = 0.5;//设置背景的透明度   透明度从0逐渐变到0.5            } completion:^(BOOL finished) {                //        self.guessimage.backgroundColor = [UIColor redColor];    }];        //点击遮盖层 缩小图片    [_conerView addTarget:self action:@selector(goTonarrowClick) forControlEvents:UIControlEventTouchUpInside];    [_conerView setAdjustsImageWhenHighlighted:NO];//为NO的时候，button 能点击，但是点击的效果不会变灰}//缩小图片功能-(void)goTonarrowClick{    [UIView animateWithDuration:1.0 animations:^{        self.guessimage.frame = self.imageSize;//图片缩回原来的尺寸        _conerView.alpha = 0;//把遮盖层的透明度去掉    } completion:^(BOOL finished) {        //当动画完成之后，移除遮盖层        [_conerView removeFromSuperview];    }];    } //点击图片的时候进行放大缩小-(void)goToZoomInOrOutClick{        //判断什么时候进行放大，什么时候进行缩小    if (_conerView == nil) {        [self goToChoice];    } else {        [self goTonarrowClick];    }}@end