在我们开发中经常会遇到这样的需求 如下图：
下面是我自定义这个控件的过程：
- 新建一个UIView
SegmentView.h中：
#import <UIKit/UIKit.h>
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];
