UIButton控件

UIButton繼承關系如下：

　　UIButton-->UIControl-->UIView-->UIResponder-->NSObject

由於繼承層次過多，下面只重點介紹UIButton中的常用方法和一些事件方法

 

---

 

1、創建一個UIButton對象

UIButton提供了如下類方法來創建一個指定類型的UIButton對象

+ (void)buttonWithType:(UIButtonType)buttonType

UIButtonType是一個枚舉類型

typedef enum{
    UIButtonTypeCustom = 0; //此屬性表明，該按鈕的外觀行為主要依靠開發者的設置
    UIButtonTypeSystem, //IOS系統默認的按鈕風格
    UIButtonTypeDetailDisclosure, //用於顯示當前列表項的詳情
    UIButtonTypeInfoLight, //該按鈕用於顯示簡短的說明
    UIButtonTypeInfoDark, //該按鈕用戶顯示簡短的說明
    UIButtonTypeContactAdd, //該按鈕通常用於添加聯系人
    UIButtonTypeRoundedRect, //圓角矩形的按鈕
} UIButtonType;

 下面用代碼來實現各種按鈕 看一看效果吧

    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button1 setFrame:CGRectMake(130, 50, 60, 30)];
    [button1 setTitle:@"按鈕一" forState:UIControlStateNormal];
    
    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    [button2 setFrame:CGRectMake(149, 100, 22, 22)];
    
    UIButton *button3 = [UIButton buttonWithType:UIButtonTypeInfoLight];
    [button3 setFrame:CGRectMake(149, 150, 22, 22)];
    
    UIButton *button4 = [UIButton buttonWithType:UIButtonTypeInfoDark];
    [button4 setFrame:CGRectMake(149, 200, 22, 22)];
    
    UIButton *button5 = [UIButton buttonWithType:UIButtonTypeContactAdd];
    [button5 setFrame:CGRectMake(149, 250, 22, 22)];
    
    UIButton *button6 = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [button6 setFrame:CGRectMake(130, 300, 60, 30)];
    [button6 setTitle:@"按鈕六" forState:UIControlStateNormal];

下面是各個按鈕在IOS6和IOS7下的表現

---

 

 

2、配置UIButton的樣式

2.1首先是一個只讀屬性

@property(nonatomic, readonly, retain) UILabel *titleLabel 

盡管這個屬性是只讀的，但是它本身是一個UILable，UILabel的屬性是可寫、可讀的。下面用這個屬性演示修改按鈕的文字效果。代碼如下：

    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button1 setFrame:CGRectMake(130, 50, 60, 30)];
    [button1 setTitle:@"按鈕一" forState:UIControlStateNormal];
    button1.titleLabel.font = [UIFont systemFontOfSize:12];
    button1.titleLabel.text = @"按鈕3";
    button1.titleLabel.textColor = [UIColor blueColor];

盡管上面代碼用titleLable屬性修改了按鈕的文本和顏色，但根據官方文檔中的說明，建議不要使用這個lable對象修改文本的顏色和陰影顏色，應該使用setTitleColor:forState:和setTitleShadowColor:forState:方法來代替做這些修改。

另外根據我自己的測試如果將上面的第三行注釋掉，在給按鈕設置文本會無效，不知道為什么。（希望哪位朋友可以告知原因，在下感激涕零） 

 

同樣一段代碼在IOS6和IOS7中的表現還不太一樣，在IOS6中按鈕文本已經修改過來啦但是IOS7中卻不起作用，同樣的設置大小都起作用啦，下面的按鈕是默認的按鈕用來對比修改效果的。看來這個tableLabel屬性挺不好駕馭啊。

 

2.2 為不同狀態的按鈕設置文本標題

- (void)setTitle:(NSString *)title forState:(UIControlState)state

其中的UIControlState是一個NSUInteger類型的整數值，該參數可以接受如下定義的一個枚舉值

enum {
   UIControlStateNormal               = 0, //代表按鈕的默認狀態
   UIControlStateHighlighted          = 1 << 0, //代表按鈕的高亮狀態
   UIControlStateDisabled             = 1 << 1, //代表按鈕的選中時的狀態
   UIControlStateSelected             = 1 << 2, //代表按鈕禁用后的狀態
   UIControlStateApplication          = 0x00FF0000, （這是個啥，我母雞啊）
   UIControlStateReserved             = 0xFF000000 //代表為內部框架使用而預留（不明覺厲啊）
};

 下面用代碼來實現各種狀態下的按鈕看看是個什么模樣的，Let‘s go！

    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button1 setFrame:CGRectMake(50, 50, 70, 30)];
    [button1 setTitle:@"默認狀態" forState:UIControlStateNormal];

    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button2 setFrame:CGRectMake(50, 100, 70, 30)];
    [button2 setTitle:@"高亮狀態" forState:UIControlStateHighlighted];
    [button2 setHighlighted:YES];
    
    UIButton *button3 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button3 setFrame:CGRectMake(50, 150, 70, 30)];
    [button3 setTitle:@"選中狀態" forState:UIControlStateSelected];
    [button3 setSelected:YES];
    
    UIButton *button4 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button4 setFrame:CGRectMake(50, 200, 70, 30)];
    [button4 setTitle:@"禁用狀態" forState:UIControlStateDisabled];
    [button4 setEnabled:NO];
    
    UIButton *button5 = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    [button5 setFrame:CGRectMake(130, 50, 70, 30)];
    [button5 setTitle:@"默認狀態" forState:UIControlStateNormal];
    
    UIButton *button6 = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    [button6 setFrame:CGRectMake(130, 100, 70, 30)];
    [button6 setTitle:@"高亮狀態" forState:UIControlStateHighlighted];
    [button6 setHighlighted:YES];
    
    UIButton *button7 = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    [button7 setFrame:CGRectMake(130, 150, 70, 30)];
    [button7 setTitle:@"選中狀態" forState:UIControlStateSelected];
    [button7 setSelected:YES];
    
    UIButton *button8 = [UIButton buttonWithType:UIButtonTypeDetailDisclosure];
    [button8 setFrame:CGRectMake(130, 200, 70, 30)];
    [button8 setTitle:@"禁用狀態" forState:UIControlStateDisabled];

以上代碼只實現了系統默認按鈕和Detail按鈕的各種狀態 如果想查看其他按鈕的狀態可以修改buttonWithType:方法對應的參數來實現，請大家也親自動手做一下加深印象，上面代碼對應的效果如下：

 

IOS7下的Detail按鈕旁邊可以顯示文字，但是一般都不設置，圖上的狀態是按鈕的寬度不夠文字顯示不下的效果。

2.3為不同狀態的按鈕設置文本標題的顏色以及陰影的顏色

- (void)setTitleColor:(UIColor *)color forState:(UIControlState)state
- (void)setTitleShadowColor:(UIColor *)color forState:(UIControlState)state

這兩個方法都是與顏色有關的，就放在一起了。其中UIColor是一個類當中預定義了很多顏色的類方法將常用顏色都包括了，比如

+ (UIColor *)blackColor
+ (UIColor *)blueColor
+ (UIColor *)redColor

 

等等，假如以上顏色不能滿足你的需要還可以使用UIColor中的

 + (UIColor *)colorWithRed:(CGFloat)red green:(CGFloat)green blue:(CGFloat)blue alpha:(CGFloat)alpha 

使用RGB值和alpha值自定義各種顏色，其中的參數是CGFloat類型的，取值范圍從0.0到1.0。好了關於顏色就到這里，下面給按鈕文本設置顏色：

    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button1 setFrame:CGRectMake(125, 50, 70, 30)];
    [button1 setTitle:@"默認狀態" forState:UIControlStateNormal];
    [button1 setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; //為默認狀態的按鈕設置文本顏色為紅色
    [button1 setTitleShadowColor:[UIColor blackColor] forState:UIControlStateNormal]; //為默認狀態的按鈕設置文本陰影顏色為黑色
    [button1.titleLabel setShadowOffset: CGSizeMake(2, 2)]; //為按鈕文本的陰影設置偏移量 右下

    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button2 setFrame:CGRectMake(125, 100, 70, 30)];
    [button2 setTitle:@"高亮狀態" forState:UIControlStateHighlighted];
    [button2 setTitleColor:[UIColor greenColor] forState:UIControlStateHighlighted]; //為高亮狀態的按鈕設置文本顏色為綠色
    [button2 setTitleShadowColor:[UIColor yellowColor] forState:UIControlStateHighlighted]; //為高亮狀態的按鈕設置文本陰影顏色為黃色
    [button2.titleLabel setShadowOffset:CGSizeMake(2, -2)]; //為按鈕文本的陰影設置偏移量 右上
    [button2 setHighlighted:YES];

    UIButton *button3 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button3 setFrame:CGRectMake(125, 150, 70, 30)];
    [button3 setTitle:@"選中狀態" forState:UIControlStateSelected];
    [button3 setTitleColor:[UIColor blueColor] forState:UIControlStateSelected]; //為選中狀態的按鈕設置文本顏色為藍色
    [button3 setTitleShadowColor:[UIColor grayColor] forState:UIControlStateSelected]; //為選中狀態的按鈕設置文本陰影顏色為灰色
    [button3.titleLabel setShadowOffset:CGSizeMake(-2, 2)]; //為按鈕文本的陰影設置偏移量 左下
    [button3 setSelected:YES];

    UIButton *button4 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button4 setFrame:CGRectMake(125, 200, 70, 30)];
    [button4 setTitle:@"禁用狀態" forState:UIControlStateDisabled];
    [button4 setTitleColor:[UIColor purpleColor] forState:UIControlStateDisabled]; //為禁用狀態的按鈕設置文本顏色為紫色
    [button4 setTitleShadowColor:[UIColor darkGrayColor] forState:UIControlStateDisabled]; //為禁用狀態的按鈕設置文本陰影顏色為深灰色
    [button4.titleLabel setShadowOffset:CGSizeMake(-2, -2)]; //為按鈕文本的陰影設置偏移量 左上
    [button4 setEnabled:NO];

 

以上代碼對應的效果圖如下：

在IOS7中的按鈕樣式發生了很大改變，為高亮狀態的按鈕設置的陰影是黃色，有些看不清了。

2.4為不同狀態的按鈕設置背景圖片和圖片按鈕

- (void)setBackgroundImage:(UIImage *)image forState:(UIControlState)state //用於希望既有圖片背景又有按鈕文本的情況
- (void)setImage:(UIImage *)image forState:(UIControlState)state //該方法會讓按鈕呈現為一個圖片按鈕，使前面為按鈕設置的Title屬性不起作用

我們首先准備兩張圖片用一個矩形的圖片作為按鈕背景，再來一個不是矩形的圖片作為圖片按鈕：

     

就用上面的兩個圖片來實現一下看看效果，代碼如下：

    UIButton *button1 = [UIButton buttonWithType:UIButtonTypeSystem];
    [button1 setFrame:CGRectMake(125, 50, 70, 30)];
    [button1 setTitle:@"按鈕一" forState:UIControlStateNormal];
    [button1 setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; //為默認狀態的按鈕設置文本顏色為紅色
    [button1 setBackgroundImage:[UIImage imageNamed:@"buttonBg.png"] forState:UIControlStateNormal]; //給圖片設置一個背景圖

    UIButton *button2 = [UIButton buttonWithType:UIButtonTypeCustom]; //創建一個自定義的按鈕類型
    [button2 setFrame:CGRectMake(135, 100, 50, 50)];
    [button2 setTitle:@"按鈕二" forState:UIControlStateHighlighted]; //此語句不起作用
    [button2 setImage:[UIImage imageNamed:@"camaraBtn.png"] forState:UIControlStateNormal]; //因為我們使用了圖片作為按鈕，所以上面為按鈕設置的文本就不起作用了。
    //另外還要將按鈕的類型改為自定義才會顯示出圖片
    //還可以為不同狀態的按鈕設置不同的圖片創造出自己的按鈕

以上代碼在IOS6和IOS7中是一樣的所以就來一張IOS7中的圖片好了。

 

3.按鈕的事件處理

按鈕最主要的作用不就是響應用戶的的操作嘛，上面說了那么多設置按鈕樣式的方法，沒有事件處理的方法叫什么按鈕是不是。

UIButton繼承了UIControl所以可以使用UIControl提供的事件處理方法，常用的有如下：

- (void)addTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents //給目標添加事件
- (void)removeTarget:(id)target action:(SEL)action forControlEvents:(UIControlEvents)controlEvents //移除目標上的事件

 

我們就用上面的照相機按鈕例子給按鈕添加一個事件，彈出一個警告對話框（UIAlertView），在警告對話框中的按鈕再移除照相機按鈕的事件，廢話不多說開整：

按鈕初始化及綁定事件部分

    self.camaraBtn = [UIButton buttonWithType:UIButtonTypeCustom]; //創建一個自定義的按鈕類型
    [self.camaraBtn setFrame:CGRectMake(135, 100, 50, 50)];
    [self.camaraBtn setTitle:@"按鈕二" forState:UIControlStateHighlighted]; //此語句不起作用
    [self.camaraBtn setImage:[UIImage imageNamed:@"camaraBtn.png"] forState:UIControlStateNormal]; //因為我們使用了圖片作為按鈕，所以上面為按鈕設置的文本就不起作用了。
    //另外還要將按鈕的類型改為自定義才會顯示出圖片
    //還可以為不同狀態的按鈕設置不同的圖片創造出自己的按鈕
    
    [self.camaraBtn addTarget:self action:@selector(clicked:) forControlEvents:UIControlEventTouchUpInside]; //給按鈕添加事件，目標位為self就是當前這個試圖控制器，事件處理方法為clicked:，后面是事件名稱，是當在按鈕范圍之中按下並抬起時觸發，這個名字那么長其實就跟click差不多
    [self.view addSubview:self.camaraBtn]; //將按鈕添加到當前視圖中

 

這里我將camaraBtn作為了實例變量，以便事件處理方法可以引用到這個按鈕，需要在頭文件中寫入：

@property (nonatomic,strong) UIButton *camaraBtn;

 

下面是事件處理方法了

//這個是照相機按鈕的事件處理方法
- (void)clicked:(id)sender
{
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"事件響應" message:@"我是個照相機！" delegate:self cancelButtonTitle:@"確定" otherButtonTitles:nil];
    [alert show];//這里創建了一個警告框並顯示了出來
}
//這個是警告框上按鈕的事件處理方法，由於警告框（UIAlertView）沒有繼承UIControl所以必須實現UIAlertViewDelegate來重寫這個方法實現事件處理
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
{
    if (!buttonIndex){
        //警告框中的確定按鈕的index是0所以會執行這個移除事件方法
        [self.camaraBtn removeTarget:self action:@selector(clicked:) forControlEvents:UIControlEventTouchUpInside];
        //將照相機按鈕上的事件移除
    }
}

 

所以上面的照相機按鈕彈出一個警告框后點擊確定照相機按鈕就無效了。來看看效果吧：

 

先寫這么多常用的以后再更新..