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

2023-08-16 13:26:58

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，为正数时向下偏移，负数向上偏移。所以对子控件进行布局时一定要明确最初所处的位置。

码农公寓

UIButton

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

UIButton 内部布局变化

UIButton 默认布局

label居中问题

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

相关文章

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