UIButon 控件的尺寸放大縮?。ㄒ部梢岳斫鉃閳D片的放大縮小，思路是一樣的）－學(xué)習(xí)筆記

圖片的放大縮小功能的簡單實(shí)現(xiàn)（以一個簡單的猜圖項(xiàng)目中的放大縮小為例）
思路：
1.創(chuàng)建一個UIButton * guessimage 控件，設(shè)定好位置，再創(chuàng)建一個button bigImage控件測試一下 放大圖片的方法 goToBig，同樣放好位置；

2.給 guessimage 設(shè)置邊距，尺寸大小，同樣 bigImage 也進(jìn)行設(shè)置等等；

3.給 bigImage 添加點(diǎn)擊 放大圖片的方法：goToBig， 在goToBig里面 定義 4個 座標(biāo)的值，也就是

CGFloat guessimageX,CGFloat guessimageY,CGFloat guessimageW,CGFloat guessimageH; 
(其中g(shù)uessimageW 是屏幕的寬，因?yàn)椴聢D用到的圖片是正方形，所以 guessimageH = guessimageW,當(dāng)然可以設(shè)置為其他的，guessimageX 的值為0，因?yàn)椴恍枰苿?，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) {// 這里寫的是當(dāng)上面的代碼完成后，需要移除的東西 }];

5.實(shí)現(xiàn)縮小功能，并為了美觀，添加多1個控件 UIButton *conerView 做遮蓋層，

1個屬性 @property (nonatomic,assign) CGRect imageSize;
做獲取原始尺寸，以便縮小。

6.給 conerView 的樣式設(shè)置為自定義，_conerView.frame的設(shè)置

_conerView.frame = self.view.bounds;//(也可以是 self.view.frame)
_conerView的背景顏色設(shè)置為 黑色，給 _conerView添加透明度 ： _conerView.alphe ＝ 0;//設(shè)置初始值為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) {// 這里寫的是當(dāng)上面的代碼完成后，需要移除的東西 }];

8.在放大功能方法最上面寫上代碼：

self.imageSize = self.guessimage.frame;//記錄圖片最開始的尺寸大小，
//給 _conerView 添加一個縮小功能方法：goTonarrowClick的點(diǎn)擊事件，
[_conerView addTarget:self action:@selector(goTonarrowClick) forControlEvents:UIControlEventTouchUpInside]; 
// 方法goTonarrowClick的詳細(xì)代碼如下：
//縮小圖片功能
-(void)goTonarrowClick
{
[UIView animateWithDuration:1.0 animations:^{
self.guessimage.frame = self.imageSize;//圖片縮回原來的尺寸
_conerView.alpha = 0;//把遮蓋層的透明度弄出透明，以便能點(diǎn)擊其他按鈕
} completion:^(BOOL finished) {
//當(dāng)動畫完成之后，移除遮蓋層，減少內(nèi)存
[_conerView removeFromSuperview];
}];
}

9.給 圖片按鈕_guessimage添加一個點(diǎn)擊放大縮小的方法事件：goToZoomInOrOutClick，代碼為：

[_guessimage addTarget:self action:@selector(goToZoomInOrOutClick) forControlEvents:UIControlEventTouchUpInside];
//方法goToZoomInOrOutClick的具體代碼為：
-(void)goToZoomInOrOutClick
{
//判斷什么時候進(jìn)行放大，什么時候進(jìn)行縮小
if (_conerView == nil) {
[self goToChoice];//當(dāng)_conerView == nil 時 點(diǎn)擊圖片會進(jìn)行放大圖片操作
} else {
[self goTonarrowClick];//當(dāng)_conerView 不為 nil 時 點(diǎn)擊圖片會進(jìn)行縮小圖片操作
}
}

最后說下，因?yàn)樾〉苁切率郑@只是寫給自己看的筆記，所以各位大神別噴！

全部具體代碼如下(至于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 ()
//純代碼進(jìn)行創(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];//設(shè)置button的樣式為自定義
_guessimage.frame = CGRectMake(88, 130, 200, 200);
_guessimage.backgroundColor = [UIColor whiteColor];
_guessimage.imageEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);//設(shè)置 button 按鈕顯示的圖像或者文字的邊距
/*
guessimage.imageEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);
guessimage.contentEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);//設(shè)置 button 按鈕顯示的圖像或者文字的邊距
以上2個都能設(shè)置圖片的邊距，在設(shè)置 button 邊距之前，先需要添加背景顏色，之后邊距才會顯示出顏色出來
guessimage.titleEdgeInsets = UIEdgeInsetsMake(5, 5, 5, 5);//設(shè)置 button 按鈕顯示的圖像或者文字的邊距
這個是設(shè)置 button 里面顯示文字的邊距，同樣需要先添加 button 背景顏色 ，才能在邊距中顯示出顏色出來
*/

[_guessimage setImage:[UIImage imageNamed:@"huo"] forState:UIControlStateNormal];
[_guessimage setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];//文字和圖片的對齊方式
//  [_guessimage setUserInteractionEnabled:NO];//設(shè)置button不可點(diǎn)擊且樣式不變
[_guessimage setAdjustsImageWhenHighlighted:NO];//為NO的時候，button 能點(diǎn)擊，但是點(diǎn)擊的效果不會變灰
[_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];//通過設(shè)定 button 的背景圖片從而使得 文字和圖片一起合并顯示

//    [prompt setImage:[UIImage imageNamed:@"icon_tip"] forState:UIControlStateNormal];//設(shè)置前方的小圖標(biāo)

[bigImage addTarget:self action:@selector(goToBig) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:bigImage];
}

//放大圖片功能
-(void)goToBig
{
//紀(jì)錄原始的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;//設(shè)置背景的透明度
[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;//設(shè)置背景的透明度  透明度從0逐漸變到0.5
} completion:^(BOOL finished) {
//        self.guessimage.backgroundColor = [UIColor redColor];
}];

//點(diǎn)擊遮蓋層 縮小圖片
[_conerView addTarget:self action:@selector(goTonarrowClick) forControlEvents:UIControlEventTouchUpInside];
[_conerView setAdjustsImageWhenHighlighted:NO];//為NO的時候，button 能點(diǎn)擊，但是點(diǎn)擊的效果不會變灰
}

//縮小圖片功能
-(void)goTonarrowClick
{
[UIView animateWithDuration:1.0 animations:^{
self.guessimage.frame = self.imageSize;//圖片縮回原來的尺寸
_conerView.alpha = 0;//把遮蓋層的透明度去掉
} completion:^(BOOL finished) {
//當(dāng)動畫完成之后，移除遮蓋層
[_conerView removeFromSuperview];
}];
}

//點(diǎn)擊圖片的時候進(jìn)行放大縮小
-(void)goToZoomInOrOutClick
{
//判斷什么時候進(jìn)行放大，什么時候進(jìn)行縮小
if (_conerView == nil) {
[self goToChoice];
} else {
[self goTonarrowClick];
}
}
@end
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容