iOS-自定义分段控制

1.分段控制在App开发中是非常常见的，也有很多类似的demo实现的方式都是大同小异有UIScrollView加UIButton形式，UICollectionView形式，本文主要是UICollectionView的形式
实现方式

  1. 创建BaseView作为父类，在父类中添加可配置的属性如：颜色（选中和未选中），字体的大小，是否需要线条，等
  2. 继承父类创建对应的子类View，子类的view就是我们在开发中的分段控制的view，同时通过UICollectionView和自动化布局来实现，

直接上代码
1.OCSegmentBaseView

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

typedef NS_ENUM(NSUInteger, OCSegmentIndicatorViewAlign) {

    OCSegmentIndicatorViewAlignCenter = 0, // 局中对其
    OCSegmentIndicatorViewAlignLeft, // 左标题对其
};


@interface OCSegmentBaseView : UIView

// 标题颜色  默认：灰色 black
@property (nonatomic, strong) UIColor  *titleColor;

// 标题选中颜色 默认：红色  red
@property (nonatomic, strong) UIColor  *titleselectedColor;

// 标题颜色  默认：灰色 black
@property (nonatomic, strong) UIColor  *subTitleColor;

// 标题选中颜色 默认：红色  red
@property (nonatomic, strong) UIColor  *subTitleSelectedColor;

// 小线条颜色 默认：红色  red
@property (nonatomic, strong) UIColor  *indicatorColor;

//正常的字体大小
@property (nonatomic, strong) UIFont   *titleFont;

//选择的字体大小
@property (nonatomic, strong) UIFont   *titleSelectedFont;

//子标题的字体大小
@property (nonatomic, strong) UIFont   *subTitleFont;

//子标题选择的字体大小
@property (nonatomic, strong) UIFont   *subTitleSelectedFont;

//第一个按钮到左边的距离
@property (nonatomic, assign) CGFloat   leftPadding;

//两个按钮间的距离
@property (nonatomic, assign) CGFloat   spacing;

//最后一个按钮到右边的距离
@property (nonatomic, assign) CGFloat   rightPadding;

//是否显示下方的线 默认显示
@property (nonatomic, assign) BOOL      indicatorShow;

//指示器线的高度
@property (nonatomic, assign) CGFloat   indicatorHeight;

//指示器线的宽度
@property (nonatomic, assign) CGFloat   indicatorWidth;

//默认的index
@property (nonatomic, assign) NSInteger defaultIndex;

//是否等份，默认是NO，(在一个指定宽中度实现等份)
@property (nonatomic, assign) BOOL      equalParts;

//指示器的圆角剪切
@property (nonatomic, assign) CGFloat   cornerRadius;

//动画的持续时间
@property (nonatomic, assign) CGFloat   duration;

//indicatorView 对其方式
@property (nonatomic, assign) OCSegmentIndicatorViewAlign  align;


@end

NS_ASSUME_NONNULL_END


#import "OCSegmentBaseView.h"

@implementation OCSegmentBaseView

- (instancetype)initWithFrame:(CGRect)frame {
    
    if(self = [super initWithFrame:frame])
    {
        self.indicatorShow = YES;
        self.align = OCSegmentIndicatorViewAlignCenter;
        self.titleFont = [UIFont systemFontOfSize:14];
        self.subTitleFont = [UIFont systemFontOfSize:12];
        self.titleSelectedFont = [UIFont systemFontOfSize:15];
        self.subTitleSelectedFont = [UIFont systemFontOfSize:12];
        self.leftPadding = 0;
        self.rightPadding = 0;
        self.spacing = 0;
        self.indicatorHeight = 2;
        self.defaultIndex = 0;
        self.equalParts = NO;
        self.duration = 0.3;
        self.titleColor = [UIColor blackColor];
        self.titleselectedColor = [UIColor redColor];
        self.subTitleColor = [UIColor blackColor];
        self.subTitleSelectedColor = [UIColor redColor];
    }
    return self;
}

@end

2.OCSegmentTitleView

#import <UIKit/UIKit.h>
#import "OCSegmentBaseView.h"

@class OCSegmentTitleView;

@protocol OCSegmentTitleViewDelegate <NSObject>

@optional
- (void)segmentView:(OCSegmentTitleView *)segmentView didSelectItemAtIndex:(NSInteger)index;

@end

@interface OCSegmentTitleView : OCSegmentBaseView

//标题
@property (nonatomic, strong) NSArray<NSString *>  *titleArray;

//子标题
@property (nonatomic, strong) NSArray<NSString *>  *subTitleArray;

//指示器的View
@property (nonatomic, strong) UIView               *indicatorView;

//选择的下标 只读的
@property (nonatomic, assign, readonly) NSInteger  selectedIndex;

@property (nonatomic, weak)   id<OCSegmentTitleViewDelegate> delegate;

@property (nonatomic, copy)   void(^didSelectItemAtIndexBlock)(NSInteger index);
@property (nonatomic, copy)   void(^didSelectItemAtIndexAndValueBlock)(NSInteger index, NSString *indexValue);

- (void)reloadData;

@end

#import "OCSegmentTitleView.h"
#import "OCSegmentTitleCCell.h"

@interface OCSegmentTitleView ()
<
UICollectionViewDataSource,
UICollectionViewDelegate,
UICollectionViewDelegateFlowLayout
>

@property (nonatomic, strong) UICollectionView  *collectionView;
@property (nonatomic, strong) NSIndexPath       *indexPath;

//YES 第一次出现，NO 不是
@property (nonatomic, assign) BOOL              firstAppear;

@property (nonatomic, strong) UICollectionViewFlowLayout *flowLayout;

@end

@implementation OCSegmentTitleView

- (instancetype)initWithFrame:(CGRect)frame {
    
    if (self = [super initWithFrame:frame])
    {
        self.firstAppear = YES;
        self.indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
        [self addSubview:self.collectionView];
        [self.collectionView addSubview:self.indicatorView];
        [self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {

            make.left.top.right.bottom.equalTo(self).offset(0);
        }];
    }
    return self;
}

#pragma mark -- setter

@synthesize defaultIndex = _defaultIndex;

- (void)setDefaultIndex:(NSInteger)defaultIndex {

    _defaultIndex = defaultIndex;
    //默认的indexPath
    self.indexPath = [NSIndexPath indexPathForRow:self.defaultIndex inSection:0];
}

- (NSInteger)selectedIndex {
    
    return self.indexPath.row;
}

#pragma mark -- private Method

- (void)reloadData {
    
    //可以立即获得到frame
    [self layoutIfNeeded];
    self.firstAppear = YES;
    [self.collectionView reloadData];
    
    //设置边距 top,left,bottom,right
    self.flowLayout.sectionInset = UIEdgeInsetsMake(0, self.leftPadding, self.indicatorHeight, self.rightPadding);
    
    //线条颜色
    self.indicatorView.backgroundColor = self.indicatorColor;
    
    //剪切圆角
    self.indicatorView.layer.cornerRadius = self.cornerRadius;
    
    if(self.titleArray.count > 0 && self.titleArray.count > self.indexPath.row)
    {
        [self.collectionView scrollToItemAtIndexPath:self.indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
    }
    else
    {   //设置为0 没有标题，或者 indexPath.row 大于等于 数组的数量
        self.indexPath = [NSIndexPath indexPathForRow:0 inSection:0];
    }
    
    [self.collectionView reloadData];
}

#pragma mark -- UICollectionViewDataSource,UICollectionViewDelegate

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    
    return self.titleArray.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    OCSegmentTitleCCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"collectionCell" forIndexPath:indexPath] ;
    cell.titleLabel.text = self.titleArray[indexPath.item];
    
    if(self.subTitleArray.count > 0 && self.subTitleArray.count > indexPath.item)
    {//子标题赋值
        cell.subTitleLabel.text = self.subTitleArray[indexPath.item];
    }
    
    if(self.indexPath == indexPath )
    {//当前点击的
        cell.titleLabel.font = self.titleSelectedFont;
        cell.titleLabel.textColor = self.titleselectedColor;
        cell.subTitleLabel.font = self.subTitleSelectedFont;
        cell.subTitleLabel.textColor = self.subTitleSelectedColor;
        
        if(self.indicatorShow)
        {//显示--indicatorView
            [self indicatorViewPosition:cell cellForItemAtIndexPath:indexPath];
        }
    }
    else
    {//其他未点击的
        cell.titleLabel.font = self.titleFont;
        cell.titleLabel.textColor = self.titleColor;
        cell.subTitleLabel.font = self.subTitleFont;
        cell.subTitleLabel.textColor = self.subTitleColor;
    }
    return cell ;
}

- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
    
    if(self.indexPath == indexPath)
    {//点击已经选中的不做处理了
        return;
    }
    
    self.firstAppear = NO;
    self.indexPath = indexPath;
    [self.collectionView scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
    [self.collectionView reloadData];
    
    if([self.delegate respondsToSelector:@selector(segmentView:didSelectItemAtIndex:)])
    {
        [self.delegate segmentView:self didSelectItemAtIndex:indexPath.row];
    }
    if(self.didSelectItemAtIndexBlock)
    {
        self.didSelectItemAtIndexBlock(indexPath.row);
    }
    if(self.didSelectItemAtIndexAndValueBlock)
    {
        self.didSelectItemAtIndexAndValueBlock(indexPath.row, self.titleArray[indexPath.row]);
    }
}

#pragma mark - UICollectionViewDelegateFlowLayout
//返回cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    if(self.equalParts == YES)
    {//平均分段
        CGFloat width = (self.frame.size.width - (self.titleArray.count - 1)*self.spacing) /self.titleArray.count;
        return CGSizeMake(width, self.frame.size.height - self.indicatorHeight);
    }
    else
    {
        CGSize size;
        CGSize subSize;
        if(self.indexPath.row == indexPath.row)
        {
            if(self.subTitleArray.count > 0 && self.subTitleArray.count > indexPath.row)
            {
                subSize = [self labelFont:self.subTitleSelectedFont textString:self.subTitleArray[indexPath.row]];
            }
            size = [self labelFont:self.titleSelectedFont textString:self.titleArray[indexPath.row]];
        }
        else
        {
            if(self.subTitleArray.count > 0 && self.subTitleArray.count > indexPath.row)
            {
                subSize = [self labelFont:self.subTitleFont textString:self.subTitleArray[indexPath.row]];
            }
            size = [self labelFont:self.titleFont textString:self.titleArray[indexPath.row]];
        }
        return CGSizeMake(size.width + subSize.width, self.frame.size.height - self.indicatorHeight);
    }
}

//水平方向间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section {
    
    return self.spacing;
}
//水平方向间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section {
    
    return 0;
}

#pragma mark -- private method

- (CGFloat)labefont:(UIFont *)font textArray:(NSArray *)textArray indexpath:(NSIndexPath *)indexPath {
    
    CGSize size;
    if(textArray.count > 0 && textArray.count > indexPath.item)
    {
        size = [self labelFont:font textString:textArray[indexPath.item]];
    }
    return size.width;
}

/* 根据文字长度返回size */
- (CGSize)labelFont:(UIFont *)font textString:(NSString *)str {
    
    UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, MAXFLOAT, 0)];
    label.text = str;
    label.numberOfLines = 0;
    label.font = font;
    //让label通过文字设置size
    [label sizeToFit];
    //获取label 的size
    CGSize size = label.frame.size;
    //返回出去
    return size;
}

/* 指示器View的位置显示 */
- (void)indicatorViewPosition:(OCSegmentTitleCCell *)cell cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    CGFloat lineWidth;
    __weak typeof(self) weakSelf = self;
    if(self.align == OCSegmentIndicatorViewAlignLeft)
    {//左标题对其
        CGFloat subWidth = [self labefont:self.subTitleSelectedFont textArray:self.subTitleArray indexpath:indexPath];
        lineWidth = self.indicatorWidth > 0 ? self.indicatorWidth : cell.frame.size.width - subWidth;
    }
    else
    {
        lineWidth = self.indicatorWidth > 0 ? self.indicatorWidth : cell.frame.size.width;
    }
    
    if(self.firstAppear == YES)
    {//第一次出现
        self.indicatorView.frame = CGRectMake(0, self.frame.size.height - self.indicatorHeight, lineWidth, self.indicatorHeight);
        
        if(self.align == OCSegmentIndicatorViewAlignLeft)
        {//左标题对其
            CGFloat subWidth = [self labefont:self.subTitleSelectedFont textArray:self.subTitleArray indexpath:indexPath];
            self.indicatorView.center = CGPointMake(cell.center.x - subWidth/2, self.frame.size.height - self.indicatorHeight);
        }
        else
        {
            self.indicatorView.center = CGPointMake(cell.center.x, self.frame.size.height - self.indicatorHeight);
        }
    }
    else
    {
        [UIView animateWithDuration:self.duration animations:^{
        
            weakSelf.indicatorView.frame = CGRectMake(0, weakSelf.frame.size.height - weakSelf.indicatorHeight, lineWidth, weakSelf.indicatorHeight);
            
            if(weakSelf.align == OCSegmentIndicatorViewAlignLeft)
            {//左标题对其
                CGFloat subWidth = [weakSelf labefont:weakSelf.subTitleSelectedFont textArray:weakSelf.subTitleArray indexpath:indexPath];
                weakSelf.indicatorView.center = CGPointMake(cell.center.x - subWidth/2, weakSelf.frame.size.height - weakSelf.indicatorHeight);
            }
            else
            {
                weakSelf.indicatorView.center = CGPointMake(cell.center.x, weakSelf.frame.size.height - weakSelf.indicatorHeight);
            }
        }];
    }
}

#pragma mark -- lazy

- (UICollectionView *)collectionView {
    
    if(_collectionView == nil)
    {
        self.flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:self.flowLayout];
        [_collectionView registerClass:[OCSegmentTitleCCell class] forCellWithReuseIdentifier:@"collectionCell"];
        _collectionView.showsVerticalScrollIndicator = NO;
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.showsHorizontalScrollIndicator = NO;
        _collectionView.backgroundColor = [UIColor clearColor];
    }
    return _collectionView;
}

- (UICollectionViewFlowLayout *)flowLayout {
    
    if (_flowLayout == nil)
    {
        _flowLayout = [[UICollectionViewFlowLayout alloc] init] ;
    }
    return _flowLayout;
}

- (UIView *)indicatorView {
    
    if(_indicatorView == nil)
    {
        _indicatorView = [[UIView alloc] init];
        _indicatorView.backgroundColor = [UIColor blackColor];
    }
    return _indicatorView;
}

@end

3.cell

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface OCSegmentTitleCCell : UICollectionViewCell

@property (nonatomic, strong) UILabel   *titleLabel;
@property (nonatomic, strong) UILabel   *subTitleLabel;

@end

NS_ASSUME_NONNULL_END
#import "OCSegmentTitleCCell.h"

@interface OCSegmentTitleCCell ()

@property (nonatomic, strong) UIView    *labelView;

@end

@implementation OCSegmentTitleCCell

- (instancetype)initWithFrame:(CGRect)frame {
    
    if(self = [super initWithFrame:frame])
    {
        [self makeConstraints];
    }
    return self;
}


#pragma mark -- 布局

- (void)makeConstraints {
    
    [self.contentView addSubview:self.labelView];
    [self.labelView addSubview:self.titleLabel];
    [self.labelView addSubview:self.subTitleLabel];
    
    [self.labelView mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.center.equalTo(self.contentView);
        make.left.right.equalTo(self.contentView).offset(0);
    }];
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.left.top.bottom.equalTo(self.labelView).offset(0);
    }];
    [self.subTitleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
       
        make.right.top.bottom.equalTo(self.labelView).offset(0);
        make.left.equalTo(self.titleLabel.mas_right).offset(0);
    }];
}

#pragma mark -- lazy

- (UIView *)labelView {
    
    if(_labelView == nil)
    {
        _labelView = [[UIView alloc] init];
    }
    return _labelView;
}
- (UILabel *)titleLabel {
    
    if(_titleLabel == nil)
    {
        _titleLabel = [[UILabel alloc] init];
    }
    return _titleLabel;
}
- (UILabel *)subTitleLabel {
    
    if(_subTitleLabel == nil)
    {
        _subTitleLabel = [[UILabel alloc] init];
    }
    return _subTitleLabel;
}

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