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

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

图片.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
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,386评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,939评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,851评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,953评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,971评论 5赞 369
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,784评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,126评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,765评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,148评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,479评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,080评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2赞 343

推荐阅读更多精彩内容

  • 你像一阵风
    花开了，你还没有来看，是为了什么？ 我想大概是你像一阵风，怕来了，吹谢了它 怕辜负了太阳，春雨的期待 那么花已谢了...
    为你最欢喜阅读 202评论 0赞 0
  • CMAKE使用链接第三方SO库
    CMake 命名变量 set(INC_DIR /usr/local/include) set(LINK_DIR /...
    mypostwww阅读 21,595评论 0赞 2
  • 《谈美》美的初探
    读了朱光潜先生的《谈美》——装订精彩的小册子，布面精装，内附绘图，翻阅之中妙趣横生——对美学大概有了些粗浅的了解。...
    儀思阅读 560评论 0赞 1
  • 三十年后,你拿什么养活自己
    养老对于我们来说是一个迟早要面对的问题。想要过上什么样的晚年生活取决于年轻时候的我们准备了什么。 这本...
    司语柒阅读 435评论 0赞 1
  • 感恩日记补3.20
    感恩～z老师邀我一起散步，两个人一起走既不无聊，又保证了运动量，昨天我的微信计步显示一万四千多步，而且我也没觉得累...
    毛毛细雨mmxy阅读 91评论 0赞 0