UISegmentedControl自定义

需求样式如下：

屏幕快照 2018-09-07 下午6.28.13.png

屏幕快照 2018-09-07 下午6.28.40.png

·每个segment都能被点击，相当于集成了多个button
·需求是点击不同button切换不能的View 切换不同的页面。

由于我们产品设计中，对于这样的切换设计很多，每个模块都会设计到。所以就想到了，封装一个segmentView,使用方便。
使用者，只需要创建segmentView（传入几个item，就是几个button）然后会暴露segmentSwitchBlock的事件，用于处理不同页面之间的切换问题。下面就是代码。

代码块：
.h

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

@interface SCSegmentView : UIView<SCViewProtocol>

@property (nonatomic,copy) void  (^segmentSwitchBlock) (long selectedSegmentIndex);

@property (nonatomic,assign) long selectedSegmentIndex;

- (instancetype)initWithItemList:(NSArray *)itemList;

@end

首先先针对这个SCViewProtocol协议说明一下：
SCViewProtocol这个协议定义了几个方法：
作用：省去了每次都要拼写的时间，让每一个参与该项目的开发者都遵循这个原则，对于排错有很好的帮助。清晰明了。
~传入的数组的目的：标题显示几个button会由数组的个数来决定，所以需要开发者传入一个数组，来显示标题内容。

#import <Foundation/Foundation.h>

@protocol SCViewProtocol <NSObject>
@optional;
//设置数据源
- (void)setViewWithModel:(id)obj;
//添加子视图
- (void)addSubViews;
//设置约束
- (void)setConstraints;

//初始化ui默认
- (void)configUIDefault;

- (void)reloadUI;

@end

@interface SCSegmentView ()
@property (nonatomic, strong) UISegmentedControl *segment;
@property (nonatomic, strong) NSArray *itemList;

@end

@implementation SCSegmentView

-(instancetype)initWithItemList:(NSArray *)itemList{
    if (self = [super init]) {
        self.itemList = itemList;
        self.backgroundColor = [UIColor SCLightBlueColor];
        [self addSubViews];
        [self setConstraints];
    }
    return self;
}

-(void)addSubViews{
    [self addSubview:self.segment];
}

-(void)setConstraints{
    [self.segment mas_makeConstraints:^(MASConstraintMaker *make) {
        make.height.mas_equalTo(30);
        make.top.mas_equalTo(self.mas_top).mas_offset(10);
        make.width.mas_equalTo(self.mas_width).mas_offset(-50);
        make.centerX.mas_equalTo(self.mas_centerX);
    }];
}

创建UISegmentedControl

- (UISegmentedControl *)segment{
    if (!_segment) {
        _segment = [[UISegmentedControl alloc]initWithItems:self.itemList];
        _segment.tintColor = [UIColor SCWhiteColor];
        _segment.selectedSegmentIndex = 0;//选中第几个segment 一般用于初始化时选中
        [_segment addTarget:self action:@selector(segmentValueChanged:) forControlEvents:UIControlEventValueChanged];
        UIFont *font = [UIFont boldSystemFontOfSize:14.0f];
        NSDictionary *attributes = [NSDictionary dictionaryWithObject:font forKey:NSFontAttributeName];
        [_segment setTitleTextAttributes:attributes forState:UIControlStateNormal];
        
        _segment.selectedSegmentIndex = 0;
        _segment.layer.masksToBounds = YES;
        _segment.layer.cornerRadius = 3;
        [_segment addTarget:self action:@selector(segmentValueChanged:) forControlEvents:UIControlEventValueChanged];
    }
    return _segment;
}

设置segment的字体：

//设置Segment的字体
    NSDictionary *dic = @{
                          //1.设置字体样式:例如黑体,和字体大小
                          NSFontAttributeName:[UIFont fontWithName:@"Arial-BoldMT" size:20],
                          //2.字体颜色
                          NSForegroundColorAttributeName:[UIColor grayColor]
                          };
    
    [segment setTitleTextAttributes:dic forState:UIControlStateNormal];

其他行为、外观、添加、删除等相关内容：

//设置segment的外观和字体颜色
    segment.tintColor = [UIColor redColor];
    //segment.segmentedControlStyle = UISegmentedControlStyleBar;此属性在ios7之后不再有任何效果
    
    [segment setEnabled:NO]; //设置segment是否可用 此方法是其父类UIControl的方法
    [segment setEnabled:NO forSegmentAtIndex:2];//设置下标为2的segment不可用
    [segment setWidth:100 forSegmentAtIndex:2]; //这时下表为2的segment的宽度
    [segment setContentOffset:CGSizeMake(10, 10) forSegmentAtIndex:2];//设置内容偏移
    segment.apportionsSegmentWidthsByContent = YES; //是否根据segment的内容改变segment的宽度

    [segment insertSegmentWithImage:[UIImage imageNamed:@"3"] atIndex:2 animated:YES]; //添加分页,并设置图片
    [segment insertSegmentWithTitle:@"ddd" atIndex:0 animated:YES];//添加分页,并设置标题
    [segment numberOfSegments];//得到segment的数量
    [segment removeAllSegments];//移出所有segment
    [segment removeSegmentAtIndex:2 animated:YES];//移出下标为2的segment
    segment.selectedSegmentIndex = 0;//选中第几个segment 一般用于初始化时选中

如果需要给这个segment增加图片，可以用下面的方法：

//设置下标为4的segment的图片
    [segment setImage:[UIImage imageNamed:@"kaixin"] forSegmentAtIndex:4];

切换事件

- (void)segmentValueChanged:(UISegmentedControl *)segment{
    self.segmentSwitchBlock?self.segmentSwitchBlock(segment.selectedSegmentIndex):nil;
}

存储当前点击segment的状态值

-(long)selectedSegmentIndex{
    return self.segment.selectedSegmentIndex;
}

具体使用：

-(SCSegmentView *)segmentView{
    if (!_segmentView) {
        _segmentView = [[SCSegmentView alloc]initWithItemList:@[@"我的待办",@"我的办结"]];
        @Weakify(self);
        _segmentView.segmentSwitchBlock = ^(long segmentIndex) {
        @Strongify(self);
        [self segmentValueChanged:segmentIndex];
        };
    }
    return _segmentView;
}

-(void)segmentValueChanged:(long)selectedSegmentIndex{
}

通过获取segmentView中index的值来刷新数据

 if (self.segmentView.selectedSegmentIndex==0){
}

以上就是针对UISegmentedControl的View简单的封装。

UISegmentedControl自定义

推荐阅读更多精彩内容