美文网首页iOS开发程序员iOS Developer
6.动态布局按钮(标签)

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

作者: Lee丶Way | 来源:发表于2017-03-10 16:15 被阅读95次

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

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

    上图:

    效果图

    解题思路

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

    所需技能

    UIKITNSStringDrawing中计算字符串CGRect的方法
    - (CGRect)boundingRectWithSize:(CGSize)size 
                           options:(NSStringDrawingOptions)options 
                        attributes:(nullable NSDictionary<NSString *, id> *)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{
    
    }
    

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

    相关文章

      网友评论

      • liwb:作者你好你说的 换行用Label,不换行就用Button 能解释下原因吗?
        Lee丶Way:已经在文章中修改,再次感谢。
        Lee丶Way:不好意思,当时的思路好像是错的,也就是说这句话我说错了。对不起,误导了您,也感谢您的指正。

      本文标题:6.动态布局按钮(标签)

      本文链接:https://www.haomeiwen.com/subject/iotogttx.html