UIButton内部子控件自定义布局-“UIEdgeInsets”

UIButton

UIButton做frame动画时，不响应点击

• 在一个View内部加入几个按钮，然后改变这个view的frame来做动画，但是按钮不响应点击事件。

• 问题代码

    __block CGRect rect = _scrollView.frame;
    CGFloat width = [UIScreen mainScreen].bounds.size.width;
    [UIView setAnimationsEnabled:YES];
    [UIView animateWithDuration:0.3f animations:^{
        rect.origin.x -= 10;
        if (rect.origin.x <= - width) {
             // 添加下一个scrollView到self
            [UIView setAnimationsEnabled:NO];
            rect.origin.x = width + 10;
            
        }
        _scrollView.frame = rect;
    } completion:^(BOOL finished) {
        
    }];

• 解决问题

    [UIView animateWithDuration:0.3f delay:0 options:UIViewAnimationOptionAllowUserInteraction animations:^{
        rect.origin.x -= 10;
        if (rect.origin.x <= - width) {
            // 添加下一个scrollView到self
            [UIView setAnimationsEnabled:NO];
            rect.origin.x = width + 10;
        }
        _scrollView.frame = rect;
    } completion:^(BOOL finished) {
        
    }];

• 结论
  - 应该是在改变一个控件的frame做动画时，控件的交互被关闭了，所以要在做动画时改变方法，手动开启交互。

UIButton 内部布局变化

• 控件竖排

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    _focusBtn  = [UIButton buttonWithType:UIButtonTypeCustom];
    _focusBtn.frame = CGRectMake(10, 100, 52, 52);
    _focusBtn.backgroundColor = [UIColor greenColor];
    [_focusBtn setTitle:@"关注" forState:UIControlStateNormal];
    
    CGFloat buttonWidth = 52;
    CGFloat textWidth = 30;
    CGFloat imageWidth = 19;
    [_focusBtn setImage:[UIImage imageNamed:@"focusBtn"] forState:UIControlStateNormal];
    [_focusBtn setBackgroundImage:[UIImage imageNamed:@"redcolor"] forState:UIControlStateNormal];
    [_focusBtn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
    [_focusBtn setContentVerticalAlignment:UIControlContentVerticalAlignmentTop];
    
    [_focusBtn setImageEdgeInsets:UIEdgeInsetsMake(6,(52-20)/2, 0, _focusBtn.titleLabel.bounds.size.width )];
    [_focusBtn setTitleEdgeInsets:UIEdgeInsetsMake(17.5 + 6 , - ([_focusBtn currentImage].size.width)  + 7 , 9,0 )];
   
    
    [self.view addSubview:_focusBtn];

    
}

UIButton 默认布局

• 默认布局是横排：图片在左，label在右，并且居中方式是水平居中对齐，垂直居中对齐。
  • 
  • 紫色是image的frame，绿色是label的frame，黄色是button的frame
  • 如果要改变为竖排，那么首先要把对齐方式改为水平靠左，垂直靠上。
  • 
  • 然后再设置每个子控件的UIEdgeInsets
  • 最终展示效果是这样的
  • 
  • 中间过渡过程是这样的
  • 
  • 由此图可见，image要的left要右移，也就是增大正数，但是label的left要左移，也就是要减小为负数。
  • 这里总结一下，UIEdgeInsets的top，left，bottom，right属性，分别表示处于父控件的内部边距，如left，为正数，表示右移多少，为负数，表示左移多少。

    [_focusBtn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
    [_focusBtn setContentVerticalAlignment:UIControlContentVerticalAlignmentTop];

• 注：在iOS中，UIEdgeInsets跟web中的padding一样的分top，left，bottom和right，正数就表示与周围的距离变大，例如：默认在是0，我把top变成了10，这时该元素与顶端的距离就会增加10，即元素下移，距离变大。如果是负数的话效果就相反了，距离拉近。

     [_focusBtn setImageEdgeInsets:UIEdgeInsetsMake(6,(52-20)/2, 0, _focusBtn.titleLabel.bounds.size.width )];
    [_focusBtn setTitleEdgeInsets:UIEdgeInsetsMake(17.5 + 6 , - ([_focusBtn currentImage].size.width)  + 7 , 9,0 )];

• 这样的效果就是
  • 

label居中问题

• 下午计算文字的宽度的时候一直出问题，主要是根据文字宽度计算内边距，但是文字长度不等，对这个布局有很大影响。
• 
• 
• 

- (void)focusedBtn:(NSInteger)number
{
    _focusedBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 100, 52, 52)];
    NSString *title = @"";
    if (number >= 10000)
    {
        title = [NSString stringWithFormat:@"%.1f万",number/10000.0];
    }
    else
    {
        title = [NSString stringWithFormat:@"%zd",number];

    }
        
    [_focusedBtn setTitle:title forState:UIControlStateNormal];
    
    UILabel *lab = [[UILabel alloc] init];
    lab.text = @"1";
    lab.font = [UIFont systemFontOfSize:12]; // font 12 ： label.width 7
    [lab sizeToFit];
    NSLog(@"%@",NSStringFromCGSize(lab.bounds.size));
    
    NSLog(@"buttuon:%@",NSStringFromCGRect(_focusedBtn.frame));
    NSLog(@"imageView:%@",NSStringFromCGRect(_focusedBtn.imageView.frame));
    NSLog(@"textLabel:%@",NSStringFromCGRect(_focusedBtn.titleLabel.frame));
    NSLog(@"---------------------");

    CGFloat buttonWidth = 52;
    CGFloat textWidth = 40;
    CGFloat imageWidth = 19;
    CGFloat imageHeight = 19;
    [_focusedBtn setImage:[UIImage imageNamed:@"focusBtn"] forState:UIControlStateNormal]; // 关注后这个图片改变了
    [_focusedBtn setBackgroundImage:[UIImage imageNamed:@"redcolor"] forState:UIControlStateNormal];
    [_focusedBtn setContentHorizontalAlignment:UIControlContentHorizontalAlignmentLeft];
    [_focusedBtn setContentVerticalAlignment:UIControlContentVerticalAlignmentTop];
    
    [_focusedBtn setImageEdgeInsets:UIEdgeInsetsMake(6,(buttonWidth-imageWidth)/2, 0, 0 )];
  
    [_focusedBtn.titleLabel setFont:[UIFont systemFontOfSize:12.0f]];
    [_focusedBtn.titleLabel setContentMode:UIViewContentModeCenter];
    _focusedBtn.titleLabel.textAlignment = NSTextAlignmentCenter;
    [_focusedBtn.titleLabel sizeToFit];
    // 我尝试在label宽度基础上加上一个字符宽度。只要字符不超过一定长度，显示就没有问题,这个调整具体问题具体分析
    [_focusedBtn setTitleEdgeInsets:UIEdgeInsetsMake(imageHeight + 10 ,- _focusedBtn.titleLabel.bounds.size.width/2 + 7, 9,0)];
    
    
    NSLog(@"buttuon:%@",NSStringFromCGRect(_focusedBtn.frame));
    NSLog(@"imageView:%@",NSStringFromCGRect(_focusedBtn.imageView.frame));
    NSLog(@"textLabel:%@",NSStringFromCGRect(_focusedBtn.titleLabel.frame));
    
    [self.view addSubview:_focusedBtn];
}

总结： 这个UIButton的内部控件的自定义，位置调整最重要。

- 1、首先要改变内部控件的对其方式，`setContentHorizontalAlignment` `setContentVerticalAlignment`
- 2、然后重新设置每个子控件的内部间距，这个设置要注意，如果要实现比较好的效果，需要精细调整。
- 3、其实主要是理解`UIEdgeInsets`的使用。`UIEdgeInsets`内部包含四个值{top，left，bottom,right}，每个值都是以自身位置为标准进行偏移。比如top，为正数时向下偏移，负数向上偏移。所以对子控件进行布局时一定要明确最初所处的位置。