1.UIbutton基礎(chǔ)知識

第一次發(fā)這種東西(以后還會(huì)常發(fā)) ，如果你覺得有什么不妥 ，你可以

OK，先來一段官方描述...

A UIButton object is a view that executes your custom code in response to user interactions. When you tap a button, or select a button that has focus, the button performs any actions attached to it. You communicate the purpose of a button using a text label, an image, or both. The appearance of buttons is configurable, so you can tint buttons or format titles to match the design of your app.You can add buttons to your interface programmatically or using Interface Builder.

When adding a button to your interface, perform the following steps:
-Set the type of the button at creation time.
-Supply a title string or image; size the button appropriately for your content.
-Connect one or more action methods to the button.
-Set up Auto Layout rules to govern the size and position of the button in your interface.
-Provide accessibility information and localized strings.

1>UIButton.h中包含如下類和屬性,可以看出

• UIButton自帶Image,Label屬性且readolny
• 可以設(shè)置button中font, color, backgroundImage, type

@class UIImage, UIFont, UIColor, UIImageView, UILabel;

@property(nonatomic,readonly) UIButtonType buttonType;
@property(nullable, nonatomic,readonly,strong) UILabel     *titleLabel NS_AVAILABLE_IOS(3_0);
@property(nullable, nonatomic,readonly,strong) UIImageView *imageView  NS_AVAILABLE_IOS(3_0);
@property(nonatomic,strong) UIFont *font   NS_DEPRECATED_IOS(2_0, 3_0) __TVOS_PROHIBITED;

2>通過以下方法設(shè)置button,要注意的是button是有5種state —default, highlighted, focused, selected, disabled

• 設(shè)置button的狀態(tài)等，自行到UIButton UIContrl中查看相關(guān)方法

- (void)setTitle:(nullable NSString *)title forState:(UIControlState)state;                     // default is nil. title is assumed to be single line
- (void)setTitleColor:(nullable UIColor *)color forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default if nil. use opaque white
- (void)setImage:(nullable UIImage *)image forState:(UIControlState)state;                      // default is nil. should be same size if different for different states
- (void)setBackgroundImage:(nullable UIImage *)image forState:(UIControlState)state UI_APPEARANCE_SELECTOR; // default is nil

3>由于button中image和label默認(rèn)是左右排列的，可通過以下方法實(shí)現(xiàn)button自定義布局

1.通過以下方法return button的尺寸 注意返回值是CGRect 

- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;

 如：實(shí)現(xiàn)button image，label上下布局 
- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
   return CGRectMake(0, 0, contentRect.size.width, contentRect.size.height);
}
- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
    return CGRectMake(0, 30, 70, 30);   
}

2.layoutSubviews布局 

 如：實(shí)現(xiàn)button image，label上下布局
- (void)layoutSubviews
{
    [super layoutSubviews]; 
    
    CGFloat buttonW = self.frame.size.width;
    CGFloat buttonH = self.frame.size.height;   
    CGFloat imageH = buttonW - 10;
    
    self.imageView.frame = CGRectMake(0, 0, buttonW, imageH);   
    self.titleLabel.frame = CGRectMake(0, imageH, buttonW, buttonH - imageH);
}

4>titleEdgeInsets,imageEdgeInsets,contentEdgeInsets三個(gè)屬性設(shè)置button的title,image,image和title的內(nèi)部邊緣

如：對content的上下左右內(nèi)邊緣約束，title,image用法相同

self.button.contentEdgeInsets = UIEdgeInsetsMake(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right);

5>通過addTarget:action:forControlEvents:或者拖線實(shí)現(xiàn)button點(diǎn)擊方法

2.使用UIButton實(shí)現(xiàn)QQ聊天對話框效果

有兩個(gè)難點(diǎn)：

1.自定義非等高cell,使用第三方庫Masonry實(shí)現(xiàn)button隨著content的變化而變化

在cell中重寫set方法就實(shí)現(xiàn)布局

2.背景圖片拉伸和button邊緣約束

1.通過以下兩個(gè)方法實(shí)現(xiàn)圖片無損拉伸(屬于UIImage中的方法)
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode; 

2.以下三個(gè)屬性實(shí)現(xiàn)邊緣約束
titleEdgeInsets`,`imageEdgeInsets`,`contentEdgeInsets

3.使用UIButton實(shí)現(xiàn)自定義帶圖按鈕

難點(diǎn)主要是image,title的布局

- (CGRect)titleRectForContentRect:(CGRect)contentRect;
- (CGRect)imageRectForContentRect:(CGRect)contentRect;
- (CGRect)contentRectForBounds:(CGRect)bounds 
或者
layoutSubviews中計(jì)算frame布局