在我們開(kāi)發(fā)中經(jīng)常會(huì)遇到這樣的需求 如下圖：
下面是我自定義這個(gè)控件的過(guò)程：
- 新建一個(gè)UIView
SegmentView.h中：
#import <UIKit/UIKit.h>
typedef void(^SelectIndexBlock)(NSInteger selectIndex);
@interface SegmentView : UIView
NS_ASSUME_NONNULL_BEGIN
//默認(rèn)背景顏色
@property (nonatomic, strong) UIColor *bgColor;
//默認(rèn)圖片顏色
@property (nonatomic, strong) UIColor *imageColor;
//默認(rèn)字體顏色
@property (nonatomic, strong) UIColor *titleColor;
//選中背景顏色
@property (nonatomic, strong) UIColor *selectBgColor;
//選中圖片顏色
@property (nonatomic, strong) UIColor *selectImageColor;
//選中字體顏色
@property (nonatomic, strong) UIColor *selectTitleColor;
//滾動(dòng)條顏色
@property (nonatomic, strong) UIColor *scrollViewColor;
@property (nonatomic, copy) SelectIndexBlock selectBlock;
@property (nonatomic, assign) NSInteger selectedIndex;
//外部調(diào)用的接口
- (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
- 新建一個(gè)XIB文件（新建這個(gè)xib的時(shí)候名字和剛才的UIView的類(lèi)名保持一致）：
將其class設(shè)置為剛才建立的UIView的類(lèi)名 并將其進(jìn)行約束
- 下面簡(jiǎn)要說(shuō)一下這個(gè)過(guò)程：
（1）拖入一個(gè)UIButton飞蛹，設(shè)置其在容器中居中對(duì)齊巾腕，設(shè)置上下約束。
（2）復(fù)制兩個(gè)UIButton分別設(shè)置距離容器左邊距 擦盾、右邊距和到中間Button的水平距離怎憋。
（3）選中這三個(gè)Button設(shè)置它們水平中心線對(duì)齊姨丈，然后分別設(shè)置它們的tag值。
（4）按鈕上的Image和Label的設(shè)置和UIButton的約束方式是一樣的就不在贅述埃难。
（5）最后是哪一條滾動(dòng)的線條莹弊，設(shè)置它的寬、高以及和UIButton底部對(duì)齊凯砍。好了約束完了箱硕，這個(gè)控件也封裝完了。
使用
(1)在需要使用的類(lèi)中導(dǎo)入#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];
