自定义——描述分割标题视图

经常遇到分割标题这种视图（如下图），抽了点时间写了一个自定义的。标题不支持换行，如果遇到换行的情况，再进行拓展。

图片.png

可以根据分割线距离屏幕的间距、分割线距离标题的间距、标题的文字进行动态的改变分割线的宽度，可以改变七种属性(如下图)。


/**
 分割线颜色，默认颜色灰色RGBA(185, 193, 199, 1)
 */
@property(strong,nonatomic)UIColor  *lineColor;

/**
 分割线的高度，默认为1
 */
@property(assign,nonatomic)CGFloat lineHeight;

/**
 分割线距离屏幕的间距，默认30
 */
@property(assign,nonatomic)CGFloat edgeMargin;


/**
 分割线距离标题的间距，默认20
 */
@property(assign,nonatomic)CGFloat titleMargin;

/**
 标题的内容
 */
@property(copy,nonatomic)NSString *titleContent;

/**
 标题的颜色
 */
@property(strong,nonatomic)UIColor  *textColor;

/**
 设置标题的字体
 */
@property(strong,nonatomic)UIFont  *titleFont;

1.主要用到的控件有，左边分割线，中间标题，右侧分割线

/**
 左侧分割线
 */
@property(strong,nonatomic)UIView  *leftSegmentLine;

/**
 右侧分割线
 */
@property(strong,nonatomic)UIView  *rightSegmentLine;

/**
 标题，默认字号14，颜色灰色RGBA(185, 193, 199, 1)
 */
@property(strong,nonatomic)UILabel  *titleLB;

2.使用重复计算和设置frame的方式，进行初始化操作和动态调整

- (instancetype)init
{
    self = [super init];
    if (self) {
        
        [self setup];
    }
    return self;
}

- (void)setFrame:(CGRect)frame{
    [super setFrame:frame];
    
    // set frame
    [self updateViewFrame];
}


/**
 进行初始化设置
 */
- (void)setup{
    
    // 分割线与屏幕的间距
    self.edgeMargin = 30.0;
    
    // 分割线与标题的间距
    self.titleMargin = 20.0f;
    
    // 分割线的颜色
    self.lineColor = [UIColor colorWithRed:(185/255.0) green:(193/255.0) blue:(193/255.0) alpha:1];
    
    // 分割线的高度
    self.lineHeight = 1.0;
    
    // 左侧分割线
    UIView *leftSegmentLine = [[UIView alloc]init];
    leftSegmentLine.backgroundColor = self.lineColor;
    [self addSubview:leftSegmentLine];
    self.leftSegmentLine = leftSegmentLine;
    
    // 标题
    UILabel *titleLB = [[UILabel alloc]init];
    titleLB.text = @"这是分割线标题";
    titleLB.font = [UIFont systemFontOfSize:14];
    titleLB.textColor = self.lineColor;
    [self addSubview:titleLB];
    self.titleLB = titleLB;
    
    // 右侧分割线
    UIView *rightSegmentLine = [[UIView alloc]init];
    rightSegmentLine.backgroundColor = self.lineColor;
    [self addSubview:rightSegmentLine];
    self.rightSegmentLine = rightSegmentLine;
}

- (void)updateViewFrame{
    
    // 只有先设置了父视图的frame，才能对子控件进行布局
    if (!self.frame.size.width || !self.frame.size.height) {
        return;
    }
    
    CGFloat width  = self.frame.size.width;
    CGFloat height = self.frame.size.height;
    
    // 先设置标题，根据标题的宽度动态计算分割线的宽度
    NSString *lableText = self.titleLB.text;
    
    NSDictionary *lableAttriDic = @{NSFontAttributeName:self.titleLB.font};
    
    // 为了计算一行的高度
    CGFloat oneRowHeight = [lableText sizeWithAttributes:lableAttriDic].height;
    CGSize labelSize = CGSizeMake(width,oneRowHeight);
    
    CGRect lableFrame = [lableText boundingRectWithSize:labelSize options:NSStringDrawingUsesLineFragmentOrigin attributes:lableAttriDic context:nil];
    
    CGFloat labelwidth = ceilf(lableFrame.size.width);
    
    // 分割线的宽度
    CGFloat segementLineWidth = (width -labelwidth - self.edgeMargin * 2 - self.titleMargin * 2) * 0.5;
    
    // 左侧分割线
    CGFloat lineY = (height - self.lineHeight) * 0.5;
    self.leftSegmentLine.frame = CGRectMake(self.edgeMargin, lineY, segementLineWidth, self.lineHeight);

    // 中间title
    CGFloat labelY = (height - oneRowHeight) * 0.5;
    self.titleLB.frame = CGRectMake(CGRectGetMaxX(self.leftSegmentLine.frame) + self.titleMargin, labelY, labelwidth, oneRowHeight);
    
    // 右侧分割线
    self.rightSegmentLine.frame = CGRectMake(CGRectGetMaxX(self.titleLB.frame) + self.titleMargin, lineY, segementLineWidth, self.lineHeight);
}


- (void)setLineColor:(UIColor *)lineColor{
    
    if (lineColor && (lineColor != _lineColor)) {
        _lineColor = lineColor;
        
        self.leftSegmentLine.backgroundColor = lineColor;
        self.rightSegmentLine.backgroundColor = lineColor;
    }
}

- (void)setLineHeight:(CGFloat)lineHeight{
    
    if (lineHeight && (lineHeight != _lineHeight)) {
        _lineHeight = lineHeight;
        
        [self updateViewFrame];
    }
}

- (void)setEdgeMargin:(CGFloat)edgeMargin{
    
    if (edgeMargin && (_edgeMargin != edgeMargin)) {
        _edgeMargin = edgeMargin;
        
        [self updateViewFrame];
    }
}

- (void)setTitleMargin:(CGFloat)titleMargin{
    
    if (titleMargin && (titleMargin != _titleMargin)) {
        _titleMargin = titleMargin;
        
        [self updateViewFrame];
    }
}

- (void)setTitleContent:(NSString *)titleContent{
    
    if (titleContent && (titleContent != _titleContent)) {
        _titleContent = titleContent;
        
        self.titleLB.text = _titleContent;
        [self updateViewFrame];
    }
}

- (void)setTextColor:(UIColor *)textColor{
    
    if (textColor && (textColor != _textColor)) {
        _textColor = textColor;
        
        self.titleLB.textColor = textColor;
    }
}

- (void)setTitleFont:(UIFont *)titleFont{
    
    if (titleFont && (titleFont != _titleFont)) {
        _titleFont = titleFont;
        
        self.titleLB.font = titleFont;
        [self updateViewFrame];
    }
}

3.项目中使用了Masonry进行自动布局，然后又写了一个自动布局版本的

- (instancetype)init
{
    self = [super init];
    if (self) {
        
        [self setup];
        [self updateViewFrame];

    }
    return self;
}

/**
 进行初始化设置
 */
- (void)setup{
    
    // 分割线与屏幕的间距
    self.edgeMargin = 30.0;
    
    // 分割线与标题的间距
    self.titleMargin = 20.0f;
    
    // 分割线的颜色
    self.lineColor = [UIColor colorWithRed:(185/255.0) green:(193/255.0) blue:(193/255.0) alpha:1];
    
    // 分割线的高度
    self.lineHeight = 1.0;
    
    // 左侧分割线
    UIView *leftSegmentLine = [[UIView alloc]init];
    leftSegmentLine.backgroundColor = self.lineColor;
    [self addSubview:leftSegmentLine];
    self.leftSegmentLine = leftSegmentLine;
    
    // 标题
    UILabel *titleLB = [[UILabel alloc]init];
    titleLB.text = @"这是分割线标题";
    titleLB.font = [UIFont systemFontOfSize:14];
    titleLB.textColor = self.lineColor;
    [self addSubview:titleLB];
    self.titleLB = titleLB;
    
    // 右侧分割线
    UIView *rightSegmentLine = [[UIView alloc]init];
    rightSegmentLine.backgroundColor = self.lineColor;
    [self addSubview:rightSegmentLine];
    self.rightSegmentLine = rightSegmentLine;
}

- (void)updateViewFrame{
    
    CGFloat width  = self.frame.size.width;
    
    // 先设置标题，根据标题的宽度动态计算分割线的宽度
    NSString *lableText = self.titleLB.text;
    
    NSDictionary *lableAttriDic = @{NSFontAttributeName:self.titleLB.font};
    
    // 为了计算一行的高度
    CGFloat oneRowHeight = [lableText sizeWithAttributes:lableAttriDic].height;
    CGSize labelSize = CGSizeMake(width,oneRowHeight);
    
    CGRect lableFrame = [lableText boundingRectWithSize:labelSize options:NSStringDrawingUsesLineFragmentOrigin attributes:lableAttriDic context:nil];
    
    CGFloat labelwidth = ceilf(lableFrame.size.width);
    
    WeakSelf
    [self.titleLB mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.equalTo(weakSelf);
        make.height.mas_equalTo(oneRowHeight);
        make.width.mas_equalTo(labelwidth);
    }];
    
    [self.leftSegmentLine mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(weakSelf).offset(weakSelf.edgeMargin);
        make.centerY.equalTo(weakSelf);
        make.height.mas_equalTo(weakSelf.lineHeight);
        make.right.equalTo(weakSelf.titleLB.mas_left).offset(-weakSelf.titleMargin);
    }];
    
    [self.rightSegmentLine mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(weakSelf).offset(-weakSelf.edgeMargin);
        make.centerY.equalTo(weakSelf);
        make.height.mas_equalTo(weakSelf.lineHeight);
        make.left.equalTo(weakSelf.titleLB.mas_right).offset(weakSelf.titleMargin);
    }];
}


- (void)setLineColor:(UIColor *)lineColor{
    
    if (lineColor && (lineColor != _lineColor)) {
        _lineColor = lineColor;
        
        self.leftSegmentLine.backgroundColor = lineColor;
        self.rightSegmentLine.backgroundColor = lineColor;
    }
}

- (void)setLineHeight:(CGFloat)lineHeight{
    
    if (lineHeight && (lineHeight != _lineHeight)) {
        _lineHeight = lineHeight;
        
        [self.leftSegmentLine mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(lineHeight);
        }];
        
        [self.rightSegmentLine mas_updateConstraints:^(MASConstraintMaker *make) {
            make.height.mas_equalTo(lineHeight);
        }];
    }
}

- (void)setEdgeMargin:(CGFloat)edgeMargin{
    
    if (edgeMargin && (_edgeMargin != edgeMargin)) {
        _edgeMargin = edgeMargin;
        
        WeakSelf
        [self.leftSegmentLine mas_updateConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(weakSelf).offset(weakSelf.edgeMargin);
        }];
        
        [self.rightSegmentLine mas_updateConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(weakSelf).offset(-weakSelf.edgeMargin);
        }];
    }
}

- (void)setTitleMargin:(CGFloat)titleMargin{
    
    if (titleMargin && (titleMargin != _titleMargin)) {
        _titleMargin = titleMargin;
        
        WeakSelf
        [self.leftSegmentLine mas_updateConstraints:^(MASConstraintMaker *make) {
            make.right.equalTo(weakSelf.titleLB.mas_left).offset(-weakSelf.titleMargin);
        }];
        
        [self.rightSegmentLine mas_updateConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(weakSelf.titleLB.mas_right).offset(weakSelf.titleMargin);
        }];
    }
}

- (void)setTitleContent:(NSString *)titleContent{
    
    if (titleContent && (titleContent != _titleContent)) {
        _titleContent = titleContent;
        
        self.titleLB.text = _titleContent;
        
        CGFloat width  = self.frame.size.width;
        
        // 先设置标题，根据标题的宽度动态计算分割线的宽度
        NSString *lableText = self.titleLB.text;
        
        NSDictionary *lableAttriDic = @{NSFontAttributeName:self.titleLB.font};
        
        // 为了计算一行的高度
        CGFloat oneRowHeight = [lableText sizeWithAttributes:lableAttriDic].height;
        CGSize labelSize = CGSizeMake(width,oneRowHeight);
        
        CGRect lableFrame = [lableText boundingRectWithSize:labelSize options:NSStringDrawingUsesLineFragmentOrigin attributes:lableAttriDic context:nil];
        
        CGFloat labelwidth = ceilf(lableFrame.size.width);
        
        [self.titleLB mas_updateConstraints:^(MASConstraintMaker *make) {
            make.width.mas_equalTo(labelwidth);
        }];
    }
}

- (void)setTextColor:(UIColor *)textColor{
    
    if (textColor && (textColor != _textColor)) {
        _textColor = textColor;
        
        self.titleLB.textColor = textColor;
    }
}

- (void)setTitleFont:(UIFont *)titleFont{
    
    if (titleFont && (titleFont != _titleFont)) {
        _titleFont = titleFont;
        
        self.titleLB.font = titleFont;
        
        NSString *lableText = self.titleLB.text;
        NSDictionary *lableAttriDic = @{NSFontAttributeName:self.titleLB.font};
        CGFloat oneRowHeight = [lableText sizeWithAttributes:lableAttriDic].height;

        [self.titleLB mas_updateConstraints:^(MASConstraintMaker *make) {
            
            make.height.mas_equalTo(oneRowHeight);
        }];
    }
}

最终效果图，代码地址

4B8F4A70B8828451F7371CF8D5AC98A1.jpg

自定义——描述分割标题视图

经常遇到分割标题这种视图（如下图），抽了点时间写了一个自定义的。标题不支持换行，如果遇到换行的情况，再进行拓展。

可以根据分割线距离屏幕的间距、分割线距离标题的间距、标题的文字进行动态的改变分割线的宽度，可以改变七种属性(如下图)。

1.主要用到的控件有，左边分割线，中间标题，右侧分割线

2.使用重复计算和设置frame的方式，进行初始化操作和动态调整

3.项目中使用了Masonry进行自动布局，然后又写了一个自动布局版本的

最终效果图，代码地址

你可能感兴趣的:(自定义——描述分割标题视图)