美文网首页
iOS-标签从中间往两边布局

iOS-标签从中间往两边布局

作者: Simple_Code | 来源:发表于2019-06-04 11:00 被阅读0次
- (void)createLabel {
    
    NSDictionary *dic = [self getFirstLabelLeft:0];
    NSInteger changeLineIndex = [dic.allKeys.firstObject integerValue];
    CGFloat rectX = [dic.allValues.firstObject floatValue];
    CGFloat rectY = 10.0;
    
    // 标签按钮
    for (int i = 0; i < self.textData.count; i ++) {
        NSString *labelText = self.textData[i];
        
        UILabel *centerLabel = [[UILabel alloc] init];
        centerLabel.font = [UIFont systemFontOfSize:10];
        centerLabel.textAlignment = NSTextAlignmentCenter;
        centerLabel.text = labelText;
        centerLabel.textColor = HYBrownColor;
        centerLabel.layer.borderColor = HYBrownColor.CGColor;
        centerLabel.layer.borderWidth = 0.5;
        centerLabel.layer.masksToBounds = YES;
        [centerLabel sizeToFit];
        
        CGFloat rectW = centerLabel.bounds.size.width + 16.0;
        
        if (i > 0) {
            // 前一个label
            NSString *foreLabelText = self.textData[i - 1];
            UILabel *foreLabel = [[UILabel alloc] init];
            foreLabel.font = [UIFont systemFontOfSize:10];
            foreLabel.textAlignment = NSTextAlignmentCenter;
            foreLabel.text = foreLabelText;
            [foreLabel sizeToFit];
            _labelWidth = foreLabel.frame.size.width + 16.0;
            
            // 判断是否是换行的icon
            if (i == changeLineIndex) {
                rectY = rectY + 10.0 * 2 + 5;
                NSDictionary *secondDic = [self getFirstLabelLeft:changeLineIndex];
                rectX = [secondDic.allValues.firstObject floatValue];
                changeLineIndex = [secondDic.allKeys.firstObject integerValue];
            } else {
                rectX = rectX + _labelWidth + 12.0;
            }
        }
        centerLabel.frame = CGRectMake(rectX, rectY, rectW, centerLabel.bounds.size.height + 10.0/2.f);
        centerLabel.tag = i + 100;
        centerLabel.layer.cornerRadius = centerLabel.bounds.size.height/2.f;
        [self.backgroundView addSubview:centerLabel];
        
        _centerLabelBottom = CGRectGetMaxY(centerLabel.frame);
    }
    
    self.backgroundView.frame = CGRectMake(0.0, self.titleLabel.ge_maxY, [UIScreen mainScreen].bounds.size.width, _centerLabelBottom + 10.0);
}

/**
 获取每行首个label的x坐标
 
 @param index <#index description#>
 @return <#return value description#>
 */
- (NSDictionary *)getFirstLabelLeft:(NSInteger)index {
    CGFloat labelWidth = 0.0;
    NSInteger endIndex = 0;
    for (NSInteger i = index; i < self.textData.count; i ++) {
        NSString *labelText = self.textData[i];
        
        UILabel *centerLabel = [[UILabel alloc] init];
        centerLabel.font = [UIFont systemFontOfSize:10];
        centerLabel.textAlignment = NSTextAlignmentCenter;
        centerLabel.text = labelText;
        centerLabel.textColor = [UIColor brownColor];
        centerLabel.layer.borderColor = HYBrownColor.CGColor;
        centerLabel.layer.borderWidth = 0.5;
        centerLabel.layer.cornerRadius = 2;
        centerLabel.layer.masksToBounds = YES;
        [centerLabel sizeToFit];
        
        labelWidth += centerLabel.bounds.size.width + 16.0 + 12.0;
        
        if (labelWidth >= [UIScreen mainScreen].bounds.size.width - 10.0 * 6) {
            labelWidth = labelWidth - centerLabel.bounds.size.width - 16.0 - 12.0;
            endIndex = i;
            break ;
        }
    }
    
    return @{[NSString stringWithFormat:@"%zd", endIndex] : [NSNumber numberWithFloat:([UIScreen mainScreen].bounds.size.width - labelWidth) / 2.0]};
}

相关文章

  • iOS-标签从中间往两边布局

  • 实现两边定宽,中间自适应

    标签(空格分隔): css 圣杯布局和双飞翼布局、flex布局 定义 圣杯布局(双飞翼布局):两边定宽,中间宽度自...

  • 中间自适应,两边固定的布局三种实现方式

    圣杯布局 圣杯布局两边跟中间同级,中间处在两边的上面。不妨假设两边的宽度为200px。实现过程: 父级盒子不要给宽...

  • 两栏布局

    一、典型的布局(左右两边固定,中间区块是自适应的)两栏布局:头部、尾部、中间部分有左三栏布局:左侧边栏有侧边栏中间...

  • 三栏布局:圣杯、双飞翼、flex、栅格

    --- 布局:圣杯、双飞翼、flex布局 三列布局,中间宽度自适应,两边定宽; 中间栏要在浏览器中优先展示渲染; ...

  • LeetCode 167. Two Sum II - Input

    Two Sum II 这个solution用two pointers从两边往中间找,如果numbers[l] + ...

  • 我还是要说的布局

    两栏布局 左边固定右边自适应 使用float布局 使用position布局    三栏布局 左右两边固定中间自适应...

  • 三列布局——flex布局

    使用 flex 布局实现中间自适应两边固定的三列布局! 代码 效果图

  • 圣杯布局

    圣杯(grail)布局实现的是三栏布局,两边的盒子宽度固定,中间盒子自适应的布局。中间栏要在放在文档流前面以优先渲...

  • 圣杯布局与双飞翼布局

    圣杯布局和双飞翼布局的布局要求 三列布局,两边宽度固定,中间宽度自适应 中间栏在浏览器中要优先渲染 (这就对DOM...

网友评论

      本文标题:iOS-标签从中间往两边布局

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