iOS 标簽自動布局

導入SKTagFrame

SKTagFrame *frame = [[SKTagFrame alloc] init];
        frame.tagsArray = self.bigModel.Tags;
        // 添加标簽
        CGFloat first_H = 0;
        CGFloat total_H = 0;
        for (NSInteger i = 0; i<  self.bigModel.Tags.count; i++) {
            UIButton *tagsBtn = [UIButton buttonWithType:UIButtonTypeCustom];
            [tagsBtn setTitle: self.bigModel.Tags[i] forState:UIControlStateNormal];
            tagsBtn.backgroundColor = [UIColor whiteColor];
            tagsBtn.layer.borderWidth = 1;
            tagsBtn.layer.borderColor = Color_666666.CGColor;
            tagsBtn.backgroundColor = Color_ffffff;
            [tagsBtn setTitleColor:Color_666666 forState:UIControlStateNormal];
            tagsBtn.titleLabel.font = Font(13.f);
            
            tagsBtn.layer.cornerRadius = 1.2;
            tagsBtn.layer.masksToBounds = YES;
            CGRect orgRect = CGRectFromString(frame.tagsFrames[i]);
            CGRect resRect = CGRectMake(orgRect.origin.x, orgRect.origin.y  , orgRect.size.width, orgRect.size.height);
            if (i == 0) {
                first_H = orgRect.origin.y + orgRect.size.height;
            }
            total_H = orgRect.origin.y + orgRect.size.height;
            
            if (total_H > first_H * 2) {
                tagsBtn.hidden = YES;
                
            }
            // 隻顯示兩行
            tagsBtn.frame = resRect;
            [bgView addSubview:tagsBtn];
        }
           

自動布局利器

h 檔案

//
//  SKTagFrame.h

//  Copyright © 2018 AlexanderYeah. All rights reserved.
//

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>

#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
#define TagsTitleFont [UIFont systemFontOfSize:13]


NS_ASSUME_NONNULL_BEGIN

@interface SKTagFrame : NSObject

/** 标簽名字數組 */
@property (nonatomic, strong) NSArray *tagsArray;
/** 标簽frame數組 */
@property (nonatomic, strong) NSMutableArray *tagsFrames;
/** 全部标簽的高度 */
@property (nonatomic, assign) CGFloat tagsHeight;
/** 标簽間距 default is 10*/
@property (nonatomic, assign) CGFloat tagsMargin;
/** 标簽行間距 default is 10*/
@property (nonatomic, assign) CGFloat tagsLineSpacing;
/** 标簽最小内邊距 default is 10*/
@property (nonatomic, assign) CGFloat tagsMinPadding;


@end

NS_ASSUME_NONNULL_END

           

.m 檔案

//
//  SKTagFrame.m

//  Copyright © 2018 AlexanderYeah. All rights reserved.
//

#import "SKTagFrame.h"
//  計算多個标簽的位置
//  标簽根據文字自适應寬度
//  每行超過的寬度平均配置設定給每個标簽
//  每行标簽左右對其

@implementation SKTagFrame


- (id)init
{
    //初始化
    self = [super init];
    if (self) {
        _tagsFrames = [NSMutableArray array];
        _tagsMinPadding = 6;// 文字四周的間距
        _tagsMargin = 8;// 豎向的間距
        _tagsLineSpacing = 10;//橫向的間距
    }
    return self;
}

- (void)setTagsArray:(NSArray *)tagsArray
{
    _tagsArray = tagsArray;
    CGFloat btnX = _tagsMargin;
    CGFloat btnW = 0;
    CGFloat nextWidth = 0;  // 下一個标簽的寬度
    CGFloat moreWidth = 0;  // 每一行多出來的寬度
    //每一行的最後一個tag的索引的數組和每一行多出來的寬度的數組
    NSMutableArray *lastIndexs = [NSMutableArray array];
    NSMutableArray *moreWidths = [NSMutableArray array];
    
    for (NSInteger i=0; i<tagsArray.count; i++) {
        btnW = [self sizeWithText:tagsArray[i] font:TagsTitleFont].width + _tagsMinPadding * 2;
        if (i < tagsArray.count-1) {
            nextWidth = [self sizeWithText:tagsArray[i+1] font:TagsTitleFont].width + _tagsMinPadding * 2;
        }
        CGFloat nextBtnX = btnX + btnW + _tagsMargin;
        // 如果下一個按鈕，标簽最右邊則換行
        if ((nextBtnX + nextWidth) > (WIDTH - _tagsMargin)) {
            // 計算超過的寬度
            moreWidth = WIDTH - nextBtnX;
            [lastIndexs addObject:[NSNumber numberWithInteger:i]];
            [moreWidths addObject:[NSNumber numberWithFloat:moreWidth]];
            btnX = _tagsMargin;
        }else{
            btnX += (btnW + _tagsMargin);
        }
        // 如果是最後一個且數組中沒有，則把最後一個加入數組
        if (i == tagsArray.count -1) {
            if (![lastIndexs containsObject:[NSNumber numberWithInteger:i]]) {
                [lastIndexs addObject:[NSNumber numberWithInteger:i]];
                [moreWidths addObject:[NSNumber numberWithFloat:0]];
            }
        }
    }
    NSInteger location = 0;  // 截取的位置
    NSInteger length = 0;    // 截取的長度
    CGFloat averageW = 0;    // 多出來的平均的寬度
    CGFloat tagW = 0;
    CGFloat tagH = 30;
    for (NSInteger i=0; i<lastIndexs.count; i++) {
        NSInteger lastIndex = [lastIndexs[i] integerValue];
        if (i == 0) {
            length = lastIndex + 1;
        }else{
            length = [lastIndexs[i] integerValue]-[lastIndexs[i-1] integerValue];
        }
        // 從數組中截取每一行的數組
        NSArray *newArr = [tagsArray subarrayWithRange:NSMakeRange(location, length)];
        location = lastIndex + 1;
        averageW = [moreWidths[i] floatValue]/newArr.count;
        CGFloat tagX = _tagsMargin;
        CGFloat tagY = _tagsLineSpacing + (_tagsLineSpacing + tagH) * i;
        
        for (NSInteger j=0; j<newArr.count; j++) {
            tagW = [self sizeWithText:newArr[j] font:TagsTitleFont].width + _tagsMinPadding * 2 + averageW;
            CGRect btnF = CGRectMake(tagX, tagY, tagW, tagH);
            [_tagsFrames addObject:NSStringFromCGRect(btnF)];
            tagX += (tagW+_tagsMargin);
        }
    }
    
    _tagsHeight = (tagH + _tagsLineSpacing) * lastIndexs.count + _tagsLineSpacing;
    
}

/**
 *  單行文本資料擷取寬高
 *
 *  @param text 文本
 *  @param font 字型
 *
 *  @return 寬高
 */
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font
{
    NSDictionary *attrs = @{NSFontAttributeName : font};
    return [text sizeWithAttributes:attrs];
}


@end