UIButton和UITextField一樣都不是UIView的直接子類，都是UIView子類UIControl的子類。

UIButton介紹

UIButton是按鈕控制元件，用於使用者點選和程式進行互動。按鈕的互動是最簡單也是最直接的，只需要點選就可以進行操作，所以這個控制元件也是最常用的。按鈕的知識點比較簡單，比較難的一點就是按鈕上圖文排布上面，有的時候可能會因為設計需要我們要讓按鈕上的圖片和文字按照要求排列，這個時候就要有一點計算能力了。本文最後再說具體的實現方式。

UIButton建立

    //UIButton建立
    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
 

UIButton的建立和UIView的建立有所不同，一般情況我們建立按鈕使用一個類方法，同時對按鈕樣式進行賦值。

+ (instancetype)buttonWithType:(UIButtonType)buttonType;

按鈕型別的typedef如下：

typedef NS_ENUM(NSInteger, UIButtonType) {
    UIButtonTypeCustom = 0,                         // no button type
    UIButtonTypeSystem NS_ENUM_AVAILABLE_IOS(7_0),  // standard system button

    UIButtonTypeDetailDisclosure,
    UIButtonTypeInfoLight,
    UIButtonTypeInfoDark,
    UIButtonTypeContactAdd,

    UIButtonTypePlain API_AVAILABLE(tvos(11.0)) API_UNAVAILABLE(ios, watchos), // standard system button without the blurred background view

    UIButtonTypeRoundedRect = UIButtonTypeSystem   // Deprecated, use UIButtonTypeSystem instead
};
 

在開發中我們常用的樣式是UIButtonTypeCustom，這個可以理解為自定義樣式，也就是可以根據程式設計師的需求自行設定。其他的比如UIButtonTypeContactAdd這個就是建立一個“+”樣式的按鈕，要是專案中有這樣的需求可以快捷建立設定。

按鈕建立完成後需要使用frame屬性設定位置和大小。

    //設定按鈕的位置和大小
    button.frame = CGRectMake(100, 200, 50, 30);

UIButton的屬性

1、titleLabel屬性

    @property(nullable, nonatomic,readonly,strong) UILabel     *titleLabel NS_AVAILABLE_IOS(3_0);
 

從上面可以看出titleLabel屬性是一個readonly屬性，這個屬性常用來獲取按鈕上的展示文字的Label。而按鈕上文字的設定是要和狀態state關聯的。所以設定按鈕上的文字使用方法設定。 2、imageView屬性

@property(nullable, nonatomic,readonly,strong) UIImageView *imageView  NS_AVAILABLE_IOS(3_0);

和上面的titleLabel屬性一樣，這個屬性也是一個readonly屬性。常用來獲取按鈕上展示圖片的imageView。

UIButton的方法

1、設定按鈕上的文字和狀態 - (void)setTitle:(nullable NSString *)title forState:(UIControlState)state; 這個方法是設定按鈕上展示的文字和文字展示時的狀態。

    //設定按鈕上的文字 設定為預設狀態
    [button setTitle:@"點一下" forState:UIControlStateNormal];
    //設定按鈕上的文字 設定為點選狀態
    [button setTitle:@"點了一下" forState:UIControlStateSelected];

state的typedef如下，可以根據需要進行設定。

typedef NS_OPTIONS(NSUInteger, UIControlState) {
        UIControlStateNormal       = 0,
        UIControlStateHighlighted  = 1 << 0,                  // used when UIControl isHighlighted is set
        UIControlStateDisabled     = 1 << 1,
        UIControlStateSelected     = 1 << 2,                  // flag usable by app (see below)
        UIControlStateFocused NS_ENUM_AVAILABLE_IOS(9_0) = 1 << 3, // Applicable only when the screen supports focus
        UIControlStateApplication  = 0x00FF0000,              // additional flags available for application use
        UIControlStateReserved     = 0xFF000000               // flags reserved for internal framework use
};

2、設定按鈕上文字顏色

- (void)setTitleColor:(nullable UIColor *)color forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default if nil. use opaque white

    //設定按鈕上文字顏色 預設狀態為藍色，點選狀態為紅色
    [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateSelected];

3、設定按鈕上的圖片

- (void)setImage:(nullable UIImage *)image forState:(UIControlState)state; 

和設定文字一樣，根據設定需要設定不同狀態下的圖片

    //設定按鈕上的圖片，預設狀態下為圖片add   點選狀態下為圖片del
    [button setImage:[UIImage imageNamed:@"add"] forState:UIControlStateNormal];
    [button setImage:[UIImage imageNamed:@"del"] forState:UIControlStateSelected];

4、設定按鈕上的背景圖片

- (void)setBackgroundImage:(nullable UIImage *)image forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default is nil

這裡的背景圖片和上面的圖片不同，背景圖片是作為按鈕的背景。一般不會涉及到和文字的排布問題。 使用方法和上面一樣，這裡就不寫了。（程式設計師都很懶。。。。。）下面來說一下重點的按鈕上文字和圖片的排布。

重點

一般帶有圖片和文字的按鈕設計分兩種，第一種是圖片為背景，上面有文字，這樣的設計實現起來很簡單，直接設定按鈕的背景圖和文字即可。第二種就是亂七八糟設計，圖片和文字的位置可以是任何位置。程式設計師看到這樣的設計就頭疼，就不能簡單點麼？

按鈕上圖文混排要說到按鈕的兩個屬性：titleEdgeInsets和imageEdgeInsets。 titleEdgeInsets是titleLabel相對於其上下左右的inset，跟tableView的contentInset是類似的；呼叫的方法分別是setTitleEdgeInsets:和setImageEdgeInsets:。這兩個方法的引數都是一個UIEdgeInsetsMake，

UIKIT_STATIC_INLINE UIEdgeInsets UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right) {
    UIEdgeInsets insets = {top, left, bottom, right};
    return insets;
}

UIEdgeInsetsMake的4個值分別是上、左、下、右。通過對這4個值的設定就可以進行圖文混排。

先來說一下按鈕上圖片和文字相對於按鈕的關係：

情況1：在按鈕上只有文字的時候，這個時候，文字所在的Label的位置是相對於按鈕的。 在上面這張圖片上，按鈕上文字設定是居中的，文字label的位置是相對於按鈕本身的居中。

情況2：在按鈕上只有圖片，這個情況和上面的情況一樣，圖片的位置設定也是相對於按鈕本身的。

情況3：按鈕上既有圖片也有文字，這個時候在預設設定情況下，圖片在左，文字在右。這個時候圖片的上下左是相對於按鈕的，右是相對於文字的。同理，文字的上下右是相對於按鈕的，左是相對於圖片的。

對上面的關係有了瞭解我們就可以對按鈕上圖文混排進行設計了。 簡單的上下排布：

    //使圖片和文字水平居中顯示
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignmentCenter;
    //文字距離上邊框的距離增加imageView的高度，距離左邊框減少imageView的寬度，距離下邊框和右邊框距離不變
    [button setTitleEdgeInsets:UIEdgeInsetsMake(button.imageView.frame.size.height+10 ,-button.imageView.frame.size.width, 0.0,0.0)];
    //圖片距離右邊框距離減少圖片的寬度，其它不邊
    [button setImageEdgeInsets:UIEdgeInsetsMake(-10, 0.0,0.0, button.titleLabel.bounds.size.width)];

簡單的左右換位排布：

    //文字距離按鈕邊框的上下不變 左邊距-圖片寬度 右邊距+圖片寬度
    [button setTitleEdgeInsets:UIEdgeInsetsMake(0, -button.imageView.bounds.size.width, 0, button.imageView.bounds.size.width)];
    //圖片距離按鈕邊框的上下不變 左邊距+文字寬度 右邊距-文字寬度
    [button setImageEdgeInsets:UIEdgeInsetsMake(0, button.titleLabel.bounds.size.width, 0, -button.titleLabel.bounds.size.width)];

既然是混排肯定就不是隻有上下和左右。關於其他的排列方式這裡就不介紹了。百度一下能找到很多關於混排的類別。這裡放一個別人帖子的連線iOS Button的文字和圖片上下或左右排列的方法