UIButton常用小结

UIButton常用小结

1.UIbutton基础知识

第一次发这种东西(以后还会常发) ，如果你觉得有什么不妥 ，你可以

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
• 可以设置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>通过以下方法设置button,要注意的是button是有5种state —default, highlighted, focused, selected, disabled

• 设置button的状态等，自行到UIButton UIContrl中查看相关方法

- (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默认是左右排列的，可通过以下方法实现button自定义布局

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

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

 如：实现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布局 

 如：实现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三个属性设置button的title,image,image和title的内部边缘

如：对content的上下左右内边缘约束，title,image用法相同

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

5>通过addTarget:action:forControlEvents:或者拖线实现button点击方法

2.使用UIButton实现QQ聊天对话框效果

有两个难点：

1.自定义非等高cell,使用第三方库Masonry实现button随着content的变化而变化
在cell中重写set方法就实现布局
2.背景图片拉伸和button边缘约束

1.通过以下两个方法实现图片无损拉伸(属于UIImage中的方法)
- (UIImage *)stretchableImageWithLeftCapWidth:(NSInteger)leftCapWidth topCapHeight:(NSInteger)topCapHeight;
- (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets resizingMode:(UIImageResizingMode)resizingMode; 

2.以下三个属性实现边缘约束
titleEdgeInsets`,`imageEdgeInsets`,`contentEdgeInsets

3.使用UIButton实现自定义带图按钮

难点主要是image,title的布局

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