美文网首页
商品选择控件

商品选择控件

作者: sherlock_m | 来源:发表于2017-04-25 11:17 被阅读25次

    在项目中写这个控件的时候,细节还是很多的,比如如何根据后台传过来的json来布局里面的子控件。

    1.先来看看效果图

    DB931AEF-935F-426E-95D5-5D3D402EC88F.png

    2.看下控件的视图层级

    05EFFA2C-3A44-4811-A765-9E6863E471F3.png

    3.计算标签的核心代码

    '''

    [self.tagButtons removeAllObjects];
    for (int i = 0; i< items.count; i++) {
        UIButton *tagButton = [[UIButton alloc] init];
        [self.tagButtons addObject:tagButton];
        tagButton.backgroundColor = grayBgColor;
        tagButton.layer.cornerRadius = MXMargin;
        [tagButton setTitle:items[i] forState:UIControlStateNormal];
        tagButton.titleLabel.font = MXFont;
        // 应该要先设置文字和字体后,再进行计算
        [tagButton sizeToFit];
        tagButton.mx_width += 2 * MXTagMargin;
        tagButton.mx_height = shopTageButtonH;
        
        [tagButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [tagButton setTitleColor:[UIColor whiteColor] forState:UIControlStateDisabled];
        [self.btnView addSubview:tagButton];
        //添加点击事件
        [tagButton addTarget:self action:@selector(tagButtonClicked:) forControlEvents:UIControlEventTouchUpInside];
        
        // 设置位置
        if (i == 0) { // 最前面的标签
            tagButton.mx_x = 0;
            tagButton.mx_y = 0;
        } else { // 其他标签
            UIButton *lastTagButton = self.tagButtons[i - 1];
            // 计算当前行左边的宽度
            CGFloat leftWidth = CGRectGetMaxX(lastTagButton.frame) + MXTagMargin;
            // 计算当前行右边的宽度
            CGFloat rightWidth = self.btnView.mx_width - leftWidth;
            if (rightWidth >= tagButton.mx_width) { // 按钮显示在当前行
                tagButton.mx_y = lastTagButton.mx_y;
                tagButton.mx_x = leftWidth;
            } else { // 按钮显示在下一行
                tagButton.mx_x = 0;
                tagButton.mx_y = CGRectGetMaxY(lastTagButton.frame) + MXTagMargin;
            }
        }
    }
    // 最后一个标签
    UIButton *lastTagButton = [self.tagButtons lastObject];
    
    CGFloat h =  CGRectGetMaxY(lastTagButton.frame);
    
    //更新Frame
    self.btnView.mx_height = h;
    
    self.mx_height = h + 8 * MXMargin;
    
    self.sepLineView.mx_y = self.mx_height - seprLineH;
    

    '''

    相关文章

      网友评论

          本文标题:商品选择控件

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