6.动态布局按钮(标签)

我就像那一只林中的小鸟
努力挣脱冲向蓝天怀抱

今天开始,改一改自己的写作方式,尽可能的在开始用图片展示一下今天要做的事情前提是图能说明问题

上图:

6.动态布局按钮(标签)_第1张图片
效果图

解题思路

  1. 文字的长度
  2. 当下一个按钮的宽度,不满足该行的剩余宽度,换行
  3. 要考虑当文字长度超过了该行的最大宽度,是否应该换行个人建议换行用Label,不换行就用Button(这句话我说错了,感谢@liwb的指正

所需技能

UIKITNSStringDrawing中计算字符串CGRect的方法
- (CGRect)boundingRectWithSize:(CGSize)size 
                       options:(NSStringDrawingOptions)options 
                    attributes:(nullable NSDictionary *)attributes 
                       context:(nullable NSStringDrawingContext *)context;

用这个方法可以根据指定的sizeNSStringDrawingOptions以及字体的attributes计算出文字所占的CGRect
根据需求,按钮的高度是一定的,所以这里size就是CGSizeMake(MAXFLOAT, btnHeigh)

实现代码

1.循环构建button
        CGFloat margin = 10; //间距
        CGFloat offsetX = 10; //x坐标值
        CGFloat offsetY = 0; //y坐标值
        for (int i = 0; i < array.count; i++) {
            NSString* titleString = array[i];
            CGFloat btnHeigh = 20; //按钮的高度
            CGSize size = [titleString boundingRectWithSize:CGSizeMake(MAXFLOAT, btnHeigh)
                                             options:NSStringDrawingTruncatesLastVisibleLine
                                          attributes:@{
                                              NSFontAttributeName : [UIFont systemFontOfSize:12]
                                          }
                                             context:nil].size;
            CGFloat btnWidth = size.width + 10;//为了使按钮更加好看,计算宽度时,多加10pt
            CGFloat Screen_Width =[UIScreen mainScreen].bounds.size.width; 
            if (btnWidth >= Screen_Width - 20) {
                btnWidth = Screen_Width - 30; // -30的缘故是,下面与-20作比较时是加上margin的
            }else if (btnWidth < 50) { // 让按钮不至于太窄,显得难看
                btnWidth = 50; 
            }
            UIButton* button =
              [self createTagBtnWithRect:CGRectMake(offsetX, offsetY * 27 + 10, btnWidth, btnHeigh) title:titleString];
            [button addTarget:self
                        action:@selector(buttonClick:)
              forControlEvents:UIControlEventTouchUpInside];
            if (margin + button.width <= (Screen_Width - 20)) {
                offsetX += button.width + margin;
            } else {
                offsetX = 10 + btnWidth + margin; // 10pt指的是最初时 offsetX的值是10
                offsetY++;
                button.frame = CGRectMake(margin, offsetY * 27 + 10, btnWidth, btnHeigh);
            }
          }
2.button的创建方法
- (UIButton*)createTagBtnWithRect:(CGRect)rect title:(NSString*)title {

    UIButton* btn = [[UIButton alloc] initWithFrame:rect];
    btn.titleLabel.font = [UIFont systemFontOfSize:12];
    btn.layer.borderColor = [UIColor grayColor].CGColor;
    btn.layer.borderWidth = 0.5f;
    [btn setBackgroundColor:[UIColor whiteColor]];
    [btn setTitle:title forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor orangeColor] forState:UIControlStateHighlighted];

    return btn;
}
- (void)buttonClick:(UIButton*)sender{

}

那带血的羽毛不向命运乞讨
跌倒只能让我越飞越高

你可能感兴趣的:(6.动态布局按钮(标签))