iOS多标签情况添加展开收起按钮

378 阅读1分钟

大致思路:

  1. 首先计算标签总长度是否超过1行,超过一行添加展开收起按钮,不超过1行原样展示
  2. 超过1行的话,计算添加展开收起按钮的位置,根据不同的状态组装标签

效果图如下:

展开默认状态效果图.png

收起状态效果图.jpg

大致代码如下:

    - (void)setupScollView {
        for (UIView *view in self.tagScrollView.subviews) {
            if ([view isKindOfClass:[UILabel class]] || ([view isKindOfClass:[UIButton class]])) {
                [view removeFromSuperview];
            }
        }
        CGFloat maxWidth = kScreenWidth - 35 - 110 - 15; // 标签展示最大宽度
        CGFloat openButtonWidth = 45; // 展开按钮宽度
        CGFloat buttonHeight = 15;    // 标签高度
        CGFloat numberOfLine = 1;     // 标签总列数
        CGFloat lastRight = self.hushenImg.hidden ? 0 : 35; // 标签的左边距
        int i = 0;
        BOOL isOpen = self.companyModel.isOpenTag; // 标签展开或者收起
        // 展开按钮
        UIButton *openButton = [UIButton buttonWithType:UIButtonTypeCustom];
        openButton.titleLabel.font = kFontPingFangRegular(10);
        openButton.backgroundColor = [UIColor colorWithHexString:@"#5491FF"];
        [openButton setTitle:@"展开 " forState:UIControlStateNormal];
        [openButton setTitleColor:[UIColor colorWithHexString:@"#ECF2FF"] forState:UIControlStateNormal];
        [openButton setImage:[UIImage imageNamed:@"common_company_tag_open"] forState:UIControlStateNormal];
        openButton.layer.masksToBounds = YES;
        openButton.layer.cornerRadius = 4;
        openButton.layer.borderWidth = 0.5;
        openButton.layer.borderColor = [UIColor colorWithHexString:@"#5491FF"].CGColor;
        openButton.semanticContentAttribute = UISemanticContentAttributeForceRightToLeft;
        [openButton addTarget:self action:@selector(didOpenTags) forControlEvents:UIControlEventTouchUpInside];
        if (isOpen) {
            [openButton setTitle:@"收起 " forState:UIControlStateNormal];
            [openButton setImage:[UIImage imageNamed:@"common_company_tag_unopen"] forState:UIControlStateNormal];
        }
        openButton.adjustsImageWhenHighlighted = NO;
        NSMutableArray *tagArray = [[NSMutableArray alloc] init];
    // 1.计算标签总长度
        CGFloat totalLength = lastRight;
        CGFloat isHideOpenButton = YES;
        for (NSString *tags in self.tagArray) {
            NSString *tag = [NSString stringWithFormat:@"  %@  ",tags];
            CGSize titleSize = [tag sizeWithAttributes:[NSDictionary dictionaryWithObject:kFontPingFangRegular(10) forKey:NSFontAttributeName]];
            if ([tags containsString:@"展开"]) {
                titleSize.width = openButtonWidth;
            }
            totalLength = totalLength + 10 + titleSize.width;
        }
      // 2. 判断标签长度是否超过1行
        if (totalLength - 10 > maxWidth) { // 整体超过一行; 添加展开收起;
            int p = 0;
            CGFloat lastLength = lastRight;
      // 3.计算插入位置,根据不同的场景组装数据
            for (NSString *tags in self.tagArray) {
                NSString *tag = [NSString stringWithFormat:@"  %@  ",tags];
                CGSize titleSize = [tag sizeWithAttributes:[NSDictionary dictionaryWithObject:kFontPingFangRegular(10) forKey:NSFontAttributeName]];
                if ([tags containsString:@"展开"]) {
                    titleSize.width = openButtonWidth;
                }
                if ((lastLength + openButtonWidth < maxWidth) && (lastLength + 10 + titleSize.width + openButtonWidth > maxWidth)) {
                    break;
                }
                lastLength = lastLength + 10 + titleSize.width;
                p++;
            }
            if (!isOpen && p != 0 && i != self.tagArray.count) { // 收起状态
                for (int i=0;i < p;i++) {
                    [tagArray addObject:self.tagArray[i]];
                }
                [tagArray addObject:@"展开 "];
            } else if (isOpen) {
                [tagArray addObjectsFromArray:self.tagArray];
                [tagArray addObject:@"收起 "];
            } else {
                [tagArray addObjectsFromArray:self.tagArray];
            }
        } else {
            [tagArray addObjectsFromArray:self.tagArray];
        }
        // 4.根据不同的情况组装好数据后,插入展开按钮UI
        for (NSString *tags in tagArray) {
           UILabel *lab = [[UILabel alloc] init];
           lab.font = kFontPingFangRegular(10);
           lab.textColor = [UIColor colorWithHexString:@"#ECF2FF"];
           lab.layer.masksToBounds = YES;
           lab.layer.cornerRadius = 4;
           lab.layer.borderWidth = 0.5;
           lab.layer.borderColor = [UIColor colorWithHexString:@"#93B2F5"].CGColor;;
           lab.text = [NSString stringWithFormat:@"  %@  ",tags];
            BOOL isOpenAction = NO;
            if ([tags isKindOfClass:[NSString class]] && ([tags containsString:@"展开"] || [tags containsString:@"收起"])) {
                [self.tagScrollView addSubview:openButton];
                isOpenAction = YES;
            } else {
                [self.tagScrollView addSubview:lab];
            }
            
            CGFloat left = lastRight;
            CGSize titleSize = [lab.text sizeWithAttributes:[NSDictionary dictionaryWithObject:lab.font forKey:NSFontAttributeName]];
            if ([tags containsString:@"展开"]) {
                titleSize.width = openButtonWidth;
            }
            if (titleSize.width+lastRight> maxWidth) {
                numberOfLine++;
            }
            if (titleSize.width + lastRight > maxWidth) {
                lastRight = 0;
            }
            if (isOpenAction) {
                [openButton mas_remakeConstraints:^(MASConstraintMaker *make) {
                    make.left.mas_equalTo(lastRight);
                    make.top.mas_equalTo((numberOfLine - 1)*buttonHeight+(numberOfLine - 1) *10);
                    make.height.mas_equalTo(15);
                    make.width.mas_equalTo(openButtonWidth);
                }];
            } else {
                [lab mas_remakeConstraints:^(MASConstraintMaker *make) {
                    make.left.mas_equalTo(lastRight);
                    make.top.mas_equalTo((numberOfLine - 1)*buttonHeight+(numberOfLine - 1) *10);
                    make.height.mas_equalTo(15);
                }];
            }
            
            lastRight = titleSize.width + lastRight + 10;
            i++;
        }
        [self.tagScrollView mas_remakeConstraints:^(MASConstraintMaker *make) {
            make.right.mas_equalTo(self.financingLabel.mas_left).offset(-15);
            make.top.mas_equalTo(self.orgCodeLabel.mas_bottom).offset(12);
            make.left.mas_equalTo(self.companyImg);
            make.height.mas_equalTo(numberOfLine*buttonHeight+(numberOfLine-1)*10);
        }];
    }