iOS自定义Segment控件

在我们开发中经常会遇到这样的需求 如下图：

下面是我自定义这个控件的过程：

• 新建一个UIView

SegmentView.h中：
#import 
typedef void(^SelectIndexBlock)(NSInteger selectIndex);
@interface SegmentView : UIView

NS_ASSUME_NONNULL_BEGIN
//默认背景颜色
@property (nonatomic, strong) UIColor *bgColor;
//默认图片颜色
@property (nonatomic, strong) UIColor *imageColor;
//默认字体颜色
@property (nonatomic, strong) UIColor *titleColor;
//选中背景颜色
@property (nonatomic, strong) UIColor *selectBgColor;
//选中图片颜色
@property (nonatomic, strong) UIColor *selectImageColor;
//选中字体颜色
@property (nonatomic, strong) UIColor *selectTitleColor;
//滚动条颜色
@property (nonatomic, strong) UIColor *scrollViewColor;

@property (nonatomic, copy) SelectIndexBlock selectBlock;

@property (nonatomic, assign) NSInteger selectedIndex;
//外部调用的接口
- (instancetype)initWithFrame:(CGRect)frame imageArray:(NSArray *)imageArray selectImageArray:(NSArray *)selectImageArray titleArray:(NSArray *)titleArray defaultSelectIndex:(NSInteger)selectedIndex selectBlock:(SelectIndexBlock)selectBlock;

- (void)selectedIndex:(NSInteger)selectIndex;

@end
NS_ASSUME_NONNULL_END

SegmentView.m中：

#import "SegmentView.h"
#import "MacroDefinition.h"
#import "HJTCustomMD.h"
@interface SegmentView ()
@property (weak, nonatomic) IBOutlet UIButton *buttonOne;
@property (weak, nonatomic) IBOutlet UIButton *buttonTwo;
@property (weak, nonatomic) IBOutlet UIButton *buttonThree;
@property (weak, nonatomic) IBOutlet UIImageView *imageOne;
@property (weak, nonatomic) IBOutlet UIImageView *imageTwo;
@property (weak, nonatomic) IBOutlet UIImageView *imageThree;
@property (weak, nonatomic) IBOutlet UILabel *labelOne;
@property (weak, nonatomic) IBOutlet UILabel *labelTwo;
@property (weak, nonatomic) IBOutlet UILabel *labelThree;
@property (weak, nonatomic) IBOutlet UIView *selectedView;
@property (nonatomic, strong) NSArray *titleArray;
@property (nonatomic, strong) NSArray *imageArray;
@property (nonatomic, strong) NSArray *selectImageArray;


@property (nonatomic, strong) NSArray *labelArray;
@property (nonatomic, strong) NSArray *defaultImageArray;

@end
@implementation SegmentView

-(instancetype)initWithFrame:(CGRect)frame imageArray:(NSArray * __nonnull)imageArray selectImageArray:(NSArray * __nonnull)selectImageArray titleArray:(NSArray * __nonnull)titleArray defaultSelectIndex:(NSInteger)selectedIndex selectBlock:(SelectIndexBlock __nonnull)selectBlock{
    self = [[[NSBundle mainBundle] loadNibNamed:@"SegmentView" owner:self options:nil] objectAtIndex:0];
    if (self) {
        self.frame = frame;
        NSAssert([imageArray count] == 3 && [titleArray count] == 3 && [selectImageArray count] == 3, @"Parameters error");
        self.selectBlock = selectBlock;
        self.titleArray = titleArray;
        self.imageArray = imageArray;
        self.selectImageArray = selectImageArray;
        self.selectedIndex = selectedIndex;
        
        [self initViews];
    }
    return  self;
}


- (void)selectedIndex:(NSInteger)selectIndex
{
    NSAssert(selectIndex >= 0 && selectIndex <= 2, @"Parameters error");
    
    [self selectIndex:selectIndex];
}


- (void)initViews
{
    self.labelOne.text = self.titleArray[0];
    self.labelTwo.text = self.titleArray[1];
    self.labelThree.text = self.titleArray[2];
    
    self.imageOne.image = [UIImage imageNamed:self.imageArray[0]];
    self.imageTwo.image = [UIImage imageNamed:self.imageArray[1]];
    self.imageThree.image = [UIImage imageNamed:self.imageArray[2]];
    
    self.defaultImageArray = [NSArray arrayWithObjects:self.imageOne,self.imageTwo,self.imageThree, nil];
    self.labelArray = [NSArray arrayWithObjects:self.labelOne,self.labelTwo,self.labelThree, nil];
    
    self.selectedView.backgroundColor = RGB(135, 244, 224);
    
    self.imageOne.image = [UIImage imageNamed:self.selectImageArray[0]] ;
}

- (void)selectIndex:(NSInteger)selectIndex
{
    for (UILabel *label in self.labelArray) {
        label.textColor = RGB(158, 155, 156);
    }
    
    self.imageOne.image = [UIImage imageNamed:self.imageArray[0]];
    self.imageTwo.image = [UIImage imageNamed:self.imageArray[1]];
    self.imageThree.image = [UIImage imageNamed:self.imageArray[2]];
    
    switch (selectIndex) {
        case 0:
        {
            _labelOne.textColor = RGB(135, 244, 224);
            self.imageOne.image = [UIImage imageNamed:self.selectImageArray[0]];
            
            WS
            [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                SS
                strongSelf.selectedView.center = CGPointMake(strongSelf.buttonOne.center.x, strongSelf.selectedView.center.y);
            } completion:nil];
            
        }
            break;
            
        case 1:
        {
            _labelTwo.textColor = RGB(135, 244, 224);
            self.imageTwo.image = [UIImage imageNamed:self.selectImageArray[1]];
            
            WS
            [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                SS
                strongSelf.selectedView.center = CGPointMake(strongSelf.buttonTwo.center.x, strongSelf.selectedView.center.y);
            } completion:nil];
            
        }
            break;
            
        case 2:
        {
            _labelThree.textColor = RGB(135, 244, 224);
            self.imageThree.image = [UIImage imageNamed:self.selectImageArray[2]];
            
            
            WS
            [UIView animateWithDuration:0.5 delay:0 options:UIViewAnimationOptionCurveEaseOut animations:^{
                SS
                strongSelf.selectedView.center = CGPointMake(strongSelf.buttonThree.center.x, strongSelf.selectedView.center.y);
            } completion:nil];
            
            
        }
            break;
            
        default:
            break;
    }
}

- (IBAction)select:(UIButton *)sender {
    switch (sender.tag) {
        case 111:
        {
            [self selectIndex:0];
            self.selectBlock(0);
            
        }
            break;
            
        case 222:
        {
            [self selectIndex:1];
            self.selectBlock(1);
        }
            break;
            
        case 333:
        {
            [self selectIndex:2];
            self.selectBlock(2);
        }
            break;
            
        default:
            break;
    }
    
}


@end

• 新建一个XIB文件（新建这个xib的时候名字和刚才的UIView的类名保持一致）：

将其class设置为刚才建立的UIView的类名 并将其进行约束

• 下面简要说一下这个过程：
  （1）拖入一个UIButton，设置其在容器中居中对齐，设置上下约束。
  （2）复制两个UIButton分别设置距离容器左边距 、右边距和到中间Button的水平距离。
  （3）选中这三个Button设置它们水平中心线对齐，然后分别设置它们的tag值。
  （4）按钮上的Image和Label的设置和UIButton的约束方式是一样的就不在赘述。
  （5）最后是哪一条滚动的线条，设置它的宽、高以及和UIButton底部对齐。好了约束完了，这个控件也封装完了。

使用

(1)在需要使用的类中导入#import "SegmentView.h",将其声明为全局变量。

@interface ViewController (){
    SegmentView *segment;
}

segment = [[SegmentView alloc]initWithFrame:CGRectMake(0, 64, WIDTH, 68) imageArray:@[@"Search_repository-gray@2x", @"Search_community-gray@2x", @"Search_say-gray@2x"] selectImageArray:@[@"Search_repository@2x",@"Search_community@2x",@"Search_say@2x"] titleArray:@[@"one",@"two",@"three"] defaultSelectIndex:1 selectBlock:^(NSInteger selectIndex) {
        
    }];
    segment.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:segment];

Demo地址：https://github.com/hejintaochenxin/segMent