IOS開發筆記-基礎UI（3）按鈕的使用（放大縮小、改變位置，首尾式動畫）和學習案例

2019-11-14 19:31:23

字體：大中小

來源：轉載

供稿：網友

UIKit框架提供了非常多的UI控件，但并不是每一個都很常用，有些控件可能1年內都用不上，有些控件天天用，比如UIButton、UILabel、UIImageView、UITableView等等，按鈕控件是非常重要且比較基礎的一個UI控件---UIButton，一般情況下，點擊某個控件后，會做出相應反應的都是按鈕，按鈕的功能比較多，既能顯示文字，又能顯示圖片，還能隨時調整內部圖片和文字的位置。

案例：

功能分析

(1)左下角4個方向按鈕，控制頭像按鈕的位置

(2)右下角分別是放大、縮小按鈕，控制頭像的尺寸

(3)頭像按鈕既有背景圖片，又有文字

步驟分析

(1)搭建UI界面

(2)監聽按鈕點擊

(3)修改頭像按鈕的屬性來調整位置和尺寸

1、先準備素材

Xcode5之后，都是把圖片素材，統一放到

點擊，拖拽即可

2、進行 UI 設計

按鈕的點擊狀態

在 ios7之后，出現的一個設置，在屬性查看器里，type 下默認選擇的是 system，就是讓系統去改變，如果改為 custom，就是自定義，可以自己定義變化，而不讓系統去幫我們改變。

比如：設計一個圖片式的按鈕之后，點的剎那是高亮的，松開就是恢復到原樣。

點擊之前的樣子

點擊下去的樣子，按鈕顯式高亮狀態，松開之后，回復到原樣

把屬性 type 改為 custom ，進行自定義的修改，同時修改state config 選項，也就是要修改高亮狀態，還有同時修改文本標題，文本顏色，按鈕的背景等。如下：

運行，再次點擊下去，高亮就不是以前那樣了，改變為：

松開之后，恢復原樣。

設置上下左右四個方向鍵（當相同的控件很多的時候，使用復制，粘貼，比較省事），同時記得修改高亮狀態下背景，點擊下，變為綠色。

連線，進行監聽

先設置 up 方向，學習修改控件屬性的過程三步驟：

@PRoperty(nonatomic) CGRect frame;

控件所在矩形框在父控件中的位置和尺寸(以父控件的左上角為坐標原點)，可以定義位置（origin），大小（size），frame 本身是結構體，里面的成員都是結構體屬性的成員。

 1 // 2 //  ViewController.m 3 //  按鈕使用1 4 // 5 //  Created by 大帥 on 15-2-28. 6 //  Copyright (c) 2015年 dashuai. All rights reserved. 7 // 8  9 #import "ViewController.h"10 11 @interface ViewController ()12 @property (weak, nonatomic) IBOutlet UIButton *HeadImageView;13 14 @end15 16 @implementation ViewController17 //up方向鍵進行連線18 -(IBAction)move19 {20     //使用 frame 修改headimageview 的位置21     //注意，在 oc 中，不可以直接修改"對象"的"結構體屬性"的"成員"22     //frame 是結構體，里面的 orign 等等都是結構體23     //并且，這里 orign 是 frame 的成員,不能直接去修改，如下寫法在 oc 是不對的24     25   //  self.HeadImageView.frame.origin.y = self.HeadImageView.frame.origin.y - 10;26     27     //應該間接修改28     //1、取出結構體屬性29     CGRect rect = self.HeadImageView.frame;30     //2、修改結構體里面的成員,此時取出之后，frame已經不是對象了31     rect.origin.y -= 20;32     //3、把值賦回來，就是這三個步驟。必須有這步。33     self.HeadImageView.frame = rect;34 }35 36 @end

三步驟：取出結構體屬性，修改結構體的成員，把值賦回來。

好嘞，熟悉之后，重新連接四個控件，把 move 對象方法修改為帶參數

-(IBAction)move:(UIButton *)button

刪掉舊的連接，重新連接新的 move 方法，點擊上下左右，都可以調用 move 方法，只要能區分就行了。使用 tag：

@property(nonatomic) NSInteger tag;

控件的ID(標識)，父控件可以通過tag來找到對應的子控件，在屬性查看器里，依次設置修改即可讓控件 button 通過 tag 的值，找到不同的子控件。

button.tag

魔法數字的概念（避免硬編碼）

術語：其他程序員看到后，不能見名知意的數字，不是好習慣，在程序開發中需要避免出現魔法數字(Magic Number)，在 oc ，可以使用枚舉類型，宏定義來避免在程序中出現魔法數字。在其它一些編程語言里，也類似，要避免硬編碼。

1> 枚舉類型實質上就是一個整數，其作用就是用來替代魔法數字

2> 枚舉類型中，指定了第一個整數之后，后面的數字會遞增

記住，定死的一些東西，統一放到程序主體的上面，統一定義，避免硬編碼

 1 #import "ViewController.h" 2  3 //10是 up，11是 down，12是 left，13是 right 4 //枚舉， 5 typedef enum 6 { 7     kMovingDirTop = 10, 8     kMovingDirBottom, 9     kMovingDirLeft,10     kMovingDirRight11 } kMovingDir;12 //宏定義 偏移量13 #define kMovingDelta 2014 15 @interface ViewController ()16 @property (weak, nonatomic) IBOutlet UIButton *HeadImageView;17 18 @end19 20 @implementation ViewController21 //方向鍵進行連線22 -(IBAction)move:(UIButton *)button23 {24     //1、取出結構體屬性25     CGRect rect = self.HeadImageView.frame;26     //2、修改結構體里面的成員,此時取出之后，frame已經不是對象了27     switch (button.tag) {28         case kMovingDirTop:29             rect.origin.y -= kMovingDelta;30             break;31         case kMovingDirBottom:32             rect.origin.y += kMovingDelta;33             break;34         case kMovingDirLeft:35             rect.origin.x -= kMovingDelta;36             break;37         case kMovingDirRight:38             rect.origin.x += kMovingDelta;39             break;40         default:41             break;42     }43     //3、把值賦回來，就是這三個步驟。必須有這步。44     self.HeadImageView.frame = rect;45 }

效果如下：

繼續，放大縮小的功能實現

不要和 move 的方法混在一起，因為做的是兩類事情，分來實現。類似位置的改變，orign

//該位置是 orign，改大小是 size屬性- (IBAction)zoom:(UIButton *)button {    CGRect rect = self.HeadImageView.frame;    //如果為1，則是放大，否則縮小    if (button.tag) {        rect.size.height += kMovingDelta;        rect.size.width += kMovingDelta;    } else {        rect.size.height -= kMovingDelta;        rect.size.width -= kMovingDelta;    }        self.HeadImageView.frame = rect;}

oc 從 Xcode4.6開始，有了一個自動布局系統 autolayout，由于這個系統，一些設置和改變，就不會起效，蘋果規定，當使用了自動布局系統之后，就不要在使用代碼控制位置了。在程序運行中，每個控件的大小和位置，都應該交給自動布局系統來決定。所以不會發生改變。

把它勾掉，就可以起效了

那么問題來了，縮小放大的時候原點不變。因為改變的是 size 屬性，沒有改變原點位置，記住：

1> frame可以修改對象的位置和尺寸

2> bounds可以修改對象的尺寸（這里使用 bounds 可以實現四周的增大縮小，而不是原點不變了，bounds 的寬高和邊框是相等的！先記住。）

3> center可以修改對象的位置

- (IBAction)zoom:(UIButton *)button {    CGRect rect = self.HeadImageView.bounds;    //如果為1，則是放大，否則縮小    if (button.tag) {        rect.size.height += kMovingDelta;        rect.size.width += kMovingDelta;    } else {        rect.size.height -= kMovingDelta;        rect.size.width -= kMovingDelta;    }        self.HeadImageView.bounds = rect;}

這樣修改之后效果就是四周的變大縮小，而不是原點不變

介紹一個動畫效果：首尾式動畫效果代碼實現

// beginAnimations表示此后的代碼要“參與到”動畫中[UIView beginAnimations:nil context:nil];// setAnimationDuration用來指定動畫持續時間[UIView setAnimationDuration:2.0];self.headImageView.bounds = rect;......// commitAnimations，將beginAnimation之后的所有動畫提交并生成動畫[UIView commitAnimations];

有了動畫效果之后，是先修改寬和高，再修改中心點，可以設置持續的時間。不加動畫之前，看不出來，很快。

//該位置是 orign，改大小是 size屬性- (IBAction)zoom:(UIButton *)button {    CGRect rect = self.HeadImageView.bounds;    //如果為1，則是放大，否則縮小    if (button.tag) {        rect.size.height += kMovingDelta;        rect.size.width += kMovingDelta;    } else {        rect.size.height -= kMovingDelta;        rect.size.width -= kMovingDelta;    }    //動畫開始，以后的代碼全部參與到動畫里    [UIView beginAnimations:nil context:nil];    //設置動畫持續時間2秒    [UIView setAnimationDuration:2.0];    self.HeadImageView.bounds = rect;    //oc里透明度，1是完全看見，0是完全看不見,變變化大小，邊消失的效果    self.HeadImageView.alpha = 0;    //提交，并生成動畫    [UIView commitAnimations];}

也可以使用 center 屬性改變對象位置（只能改變位置，不能改變大小，而 orign 可以改變大小和位置）

關于 git

點擊上圖中的標志，可以查看和上次提交的版本不一樣的地方，也就是修改的情況的查看

通過此操作，來實現代碼的版本提交

如下，文件后面有 m 表示這個文件被修改過。

一旦 xcode 退出后，在使用撤銷就不管用了，那么此時 git 出來了，通過查看和上次版本的變化，很有用，幫助提高開發效率，和改錯，回顧。故創建項目的時候，要勾選 git，當階段性開發告一段落，選擇提交到 git，餅編寫注釋，下次通過版本查看即可。即使關閉 xcode，打開之后還能撤銷上次的修改，很方便。

小結：

1、cmd+shift+h 是模擬器里 home 健的快捷鍵

2、當相同的控件很多的時候，使用復制，粘貼，比較省事，但是注意，這樣也會把相應的連線給一起復制。

3、oc中，大多數控件的監聽方法的第一個參數就是控件本身，也就是 sender 發送者，且回憶，方法名是name：，不要丟冒號。

4、

UIView的常見屬性

@property(nonatomic,readonly) UIView *superview;獲得自己的父控件對象

@property(nonatomic,readonly,copy) NSArray *subviews;獲得自己的所有子控件對象（一個父親可 u 有多個兒子，但是一個兒子只有一個父親）

@property(nonatomic) NSInteger tag;控件的ID(標識)，父控件可以通過tag來找到對應的子控件

@property(nonatomic) CGAffineTransform transform;控件的形變屬性(可以設置旋轉角度、比例縮放、平移等屬性)

@property(nonatomic) CGRect frame;控件所在矩形框在父控件中的位置和尺寸(以父控件的左上角為坐標原點)

可以定義位置（origin），大小（size）

@property(nonatomic) CGRect bounds;控件所在矩形框的位置和尺寸(以自己左上角為坐標原點，所以bounds的x、y一般為0，這個屬性很神奇，暫時先這么理解，以后鉆研)

可以定義大小（size），無法定義位置

@property(nonatomic) CGPoint center;控件中點的位置(以父控件的左上角為坐標原點)

可以定義位置，無法定義大小

UIView的常見方法

- (void)addSubview:(UIView *)view;添加一個子控件view

- (void)removeFromSuperview;從父控件中移除

- (UIView *)viewWithTag:(NSInteger)tag;根據一個tag標識找出對應的控件（一般都是子控件）

5、注意指針的問題，修改屬性，不是指針和是指針的區別，比如：

    //應該間接修改    //1、取出結構體屬性    CGRect rect = self.HeadImageView.frame;    //2、修改結構體里面的成員,此時取出之后，frame已經不是對象了    rect.origin.y -= 20;    //3、把值賦回來，就是這三個步驟。必須有這步。    self.HeadImageView.frame = rect;

如果沒有第三步，則無法成功修改屬性，因為 rect 不是指針，地址和 frame 的地址不一樣，修改完畢，必須重新賦值回去，才能生效。

修改結構體屬性的成員方法如下：

1> 使用臨時變量記錄對象的結構體屬性

2> 修改臨時變量的屬性

3> 將臨時變量重新設置給對象的結構體屬性

6、同一個項目中，盡量不要重復的代碼去完成類似的功能，不要經常性的復制一樣的代碼。造成很大冗余。要盡量精簡。

7、Xcode5之后，經常會有一些莫名其妙的問題出現，解決不了，可以嘗試退出重新打開，再看看。

8、在 oc 中，不可以直接修改"對象"的"結構體屬性"的"成員"，要三部曲間接修改。

9、switch 語句中的default

當變量的取值不在分支里任何一個case的情況下，語句要做的處理，其實也是一種case，只不過就是指“除了指定的幾個case以外的其他情況”，是一個中安全的編程方式。

10、注意魔法數字的問題避免，枚舉的作用，宏定義

11、圖片素材統一放到images.xcassets里面，從Xcode5開始，圖片資源都放到Images.xcassets中進行管理