UIButton

• 继承自UIControl
• 非常重要的UI控件---UIButton，俗称“按钮”
  • 一般情况下，点击某个控件后，会做出相应反应的都是按钮
  • 按钮的功能比较多，既能显示文字，又能显示图片，还能随时调整内部图片和文字的位置

UIButton的状态

1. normal（普通状态）
   • 按钮默认状态（Default）
   • 对应的枚举常量：UIControlStateNormal

   [button setImage:image forState:UIControlStateNormal];
   

• highlighted（高亮状态）

  • 按钮被按下去的时候（手指还未松开）
  • 对应的枚举常量：UIControlStateHighlighted
  • 为了保证高亮状态下的图片正常显示，必须设置按钮的type为custom

  [button setImage:image forState:UIControlStateSelected];
  

• selected（选中状态）

  • 按钮被选中的时候
  • 对应的枚举常量：UIControlStateSelected

  [button setImage:image forState:UIControlStateSelected];
  

• disabled（失效状态）

  • 如果enabled属性为NO，就是处于disable状态，代表按钮不可以被点击
  • 失效状态会对按钮中的图片做“变淡”处理。如果不想出现这种效果，应该通过Btn.userInteractionEnabled = NO实现
  • 对应的枚举常量：UIControlStateDisabled

  [button setImage:image forState:UIControlStateDisabled];
  

UIButton 常用方法

// 设置按钮的文字
[button setTitle:@"点我啊" forState:UIControlStateNormal];
// 设置按钮的文字颜色
[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];

// 设置按钮内部的图片
[button setImage:image forState:UIControlStateNormal];

// 设置按钮的背景图片
[button setBackgroundImage:image forState:UIControlStateNormal];
// 设置按钮的背景颜色
[button setBackgroundColor:[UIColor redColor]];

// 监听按钮
// UIControlEventTouchUpInside：手指按下后抬起执行监听方法
[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];

// 设置边框颜色
button.layer.borderColor = [UIColor redColor].CGColor;
// 设置边框宽度
button.layer.borderWidth = 1;
// 设置圆形边框
button.layer.cornerRadius = button.frame.size.width * 0.5;

// 按钮可用设置
button.enabled = !button.enabled;

UIButton 其他方法

// 设置按钮的文字字体（需要拿到按钮内部的label来设置）
btn.titleLabel.font = [UIFont systemFontOfSize:13];

//水平对齐
[button setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
//垂直对齐
[button setContentVerticalAlignment:UIControlContentVerticalAlignmentBottom];

按钮常见的访问方法

// 获取当前状态按钮图片
[button imageForState:UIControlStateNormal].size;
button.currentImage.size;

// 获取当前状态按钮背景图片
[button backgroundImageForState:UIControlStateNormal];
button.currentBackgroundImage;

// 获取当前状态按钮文字
[button titleForState:UIControlStateNormal];
button.currentTitle;

// 获取当前状态按钮文字颜色
[button titleColorForState:UIControlStateNormal];
button.currentTitleColor;

按钮布局

• 方案一：调整按钮的内边距

  // 边距结构体
  typedef struct UIEdgeInsets {
  CGFloat top, left, bottom, right;
  

} UIEdgeInsets;

// 设置按钮内容的内边距（影响到imageView和titleLabel）
btn.contentEdgeInsets = UIEdgeInsetsMake(10, 0, 0, 0); //imageView和titleLabel均下移10

// 设置titleLabel的内边距（imageView不动，文本动）
btn.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0); //titleLabel右移10

// 设置imageView的内边距（文本不动，imageView动）
btn.imageEdgeInsets = UIEdgeInsetsMake(0, 0, 0, 10); //imageView左移10
```

• 方案二：layoutSubviews方法中重新布局按钮控件

  - (void)layoutSubviews
  {
      [super layoutSubviews];// 必须调用
  
      // 布局代码
  }
  

• 方案三：实现titleRectForContentRect:和imageRectForContentRect:方法，修改titleLabel和imageView的frame。

  • 方案二可以统一设置，所以一般不使用方案三

  -(CGRect)titleRectForContentRect:(CGRect)contentRect
  {
      // 文本控件布局代码
  }
  
  -(CGRect)imageRectForContentRect:(CGRect)contentRect
  {
      // 图片控件布局代码
  }
  

自定义按钮

• 手段：代码和xib都可以
• 步骤：
  • 提供类和对象初始化方法
  • 创建子控件，设置父子控件基本属性
  • layoutSubviews布局（xib可以不用）
  • 提供模型属性，重写set方法设置子控件变动属性
• 与通过UIView创建的差异：
  • 按钮是分状态显示的，所以图片和文本等要分状态设置，而UIView自定义控件不用；
  • 按钮有图片和背景图片两种，UIImageView只有一种
  • 通过往UIView中放入imageView和label设置图片和文本；而按钮自带的图片和文本分别是imageView和titleLabel
  • 调整内部子控件的frame，详见“按钮布局”

九宫格布局

[图片上传失败...(image-d148cc-1511343696229)]

// 每行最多显示数量
// maxNumPerRow = 3则是上图的九宫格；也可以不为3
#define maxNumPerRow 10

/** 计算位置 */
-(CGRect)calculateFrame
{
    /** 子控件数量 */
    NSInteger count = self.view.subviews.count;

    /** 计算行、列标 */
    NSInteger rowIndex = count / maxNumPerRow;
    NSInteger colIndex = count % maxNumPerRow;

    /** 设置间隔 */
    CGFloat marginX = 20;
    CGFloat marginY = 20;

    /** 计算控件的宽高 */
    CGFloat viewW = (self.view.frame.size.width - marginX * (maxNumPerRow - 1)) / maxNumPerRow;
    CGFloat viewH = viewW;

    /** 计算控件X,Y */
    CGFloat viewX = (viewW + marginX) *colIndex;
    CGFloat viewY = (viewH + marginY) *rowIndex;

    return CGRectMake(viewX, viewY, viewW, viewH);
}