UIButon控件的尺寸放大縮小（也可以理解為圖片的放大縮小，思路是一樣的）－學習筆記

2019-11-14 18:20:01

字體：大中小

來源：轉載

供稿：網(wǎng)友

圖片的放大縮小功能的簡單實現(xiàn)（以一個簡單的猜圖項目中的放大縮小為例）

思路：

1.創(chuàng)建一個UIButton * guessimage 控件，設定好位置，再創(chuàng)建一個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.實現(xiàn)縮小功能，并為了美觀，添加多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;//出現(xiàn)半透明效果} 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 里面的代碼就不寫了，不外乎創(chuàng)建window 窗口等操作):

////  ViewController.m//  放大圖片////  Created by wenjim on 15/9/14.//  Copyright (c) 2015年 WenJim. All rights reserved.//#import "ViewController.h"@interface ViewController ()//純代碼進行創(chuàng)建圖片的放大縮小@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{        //猜圖展現(xiàn)出來的圖片    _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_t//設置前方的小圖標    [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