iOS-分段控制器大全ZFJSegmentedControl

前言

最近写的好几个项目，都用到分段控制器，而且而不相同，这里我就封装了一个ZFJSegmentedControl，包含了很多种方式，大家可以通过开放的属性，自定义自己想要的样式；

还可以通过scrollView滚动分页进行手动选中某一个按钮。

1.下划线分段控制器

titleColor：按钮的字体颜色；

titleFont：按钮的字体样式；

selectBtnSpace：按钮之间的间距；

selectBtnWID：按钮的宽度，如果不设置就均分控制器的宽度来设置按钮的宽度；

SCType_Underline_HEI：下划线的高度，宽度是设置和按钮一样宽的；

selectType：为选中回调；

ZFJSegmentedControl *zvc = [[ZFJSegmentedControl alloc]initwithTitleArr:titleArr iconArr:nil SCType:SCType_Underline];
zvc.frame = CGRectMake((ScreenWidth - 300)/2, 35, 300, 40);
zvc.backgroundColor = [UIColor whiteColor];
zvc.titleColor = [UIColor lightGrayColor];
zvc.selectBtnSpace = 5;//设置按钮间的间距
zvc.selectBtnWID = 70;//设置按钮的宽度 不设就是均分
zvc.SCType_Underline_HEI = 2;//设置底部横线的高度
zvc.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:16];
zvc.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
};
[self.scrollView addSubview:zvc];

如图：

2.圆点样式

当类型为SCType_Dot的时候，SCType_Underline_HEI则为圆点的直径，其他属性和上面一样；

ZFJSegmentedControl *zvc2 = [[ZFJSegmentedControl alloc]initwithTitleArr:titleArr iconArr:nil SCType:SCType_Dot];
zvc2.frame = CGRectMake((ScreenWidth - 300)/2, CGRectGetMaxY(zvc13.frame) + 40, 300, 40);
zvc2.backgroundColor = [UIColor whiteColor];
zvc2.titleColor = [UIColor lightGrayColor];//按钮的默认颜色
zvc2.selectBtnSpace = 5;//按钮之间的间距
zvc2.selectBtnWID = 70;//按钮的宽度
zvc2.SCType_Underline_HEI = 4;//圆点的直径
zvc2.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:16];
zvc2.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
};
[self.scrollView addSubview:zvc2];

如图：

3.背景视图

这里的背景视图可以是矩形，也可以是椭圆，通过设置cornerRadius来实现，cornerRadius为0的时候是显示矩形的，其他按钮的属性照旧；

ZFJSegmentedControl *zvc3 = [[ZFJSegmentedControl alloc]initwithTitleArr:titleArr iconArr:nil SCType:SCType_Ellipse];
zvc3.frame = CGRectMake((ScreenWidth - 300)/2, CGRectGetMaxY(zvc2.frame) + 40, 300, 40);
zvc3.backgroundColor = [UIColor whiteColor];
zvc3.titleColor = [UIColor lightGrayColor];
zvc3.selectBtnSpace = 5;
zvc3.selectBtnWID = 70;
zvc3.cornerRadius = 20;//椭圆的圆角
zvc3.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:16];
zvc3.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
};
[self.scrollView addSubview:zvc3];

可以通过ellipseBackColor设置背景视图的背景颜色；

ZFJSegmentedControl *zvc6 = [[ZFJSegmentedControl alloc]initwithTitleArr:titleArr iconArr:nil SCType:SCType_Ellipse];
zvc6.frame = CGRectMake((ScreenWidth - 300)/2, CGRectGetMaxY(zvc3.frame) + 40, 300, 40);
zvc6.backgroundColor = [UIColor whiteColor];
zvc6.titleColor = [UIColor blackColor];
zvc6.selectTitleColor = [UIColor redColor];
zvc6.selectBtnSpace = 5;
zvc6.selectBtnWID = 70;
zvc6.cornerRadius = 20;//椭圆的圆角
zvc6.ellipseBackColor = [UIColor yellowColor];
zvc6.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:16];
zvc6.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
};
[self.scrollView addSubview:zvc6];

如图：

4.填充样式

分段控制器有一个边框，有个填充背景视图；

borderWidth：设置分段控制器的边框宽度；

titleColor：边框的颜色可填充的颜色；

selectTitleColor：选中按钮的颜色；

selectBtnFont：选中按钮的字体样式；

ZFJSegmentedControl *zvc10 = [[ZFJSegmentedControl alloc]initwithTitleArr:myTitleArr iconArr:nil SCType:SCType_BorderStyle];
zvc10.frame = CGRectMake((ScreenWidth - 300)/2, CGRectGetMaxY(zvc9.frame) + 40, 300, 40);
zvc10.backgroundColor = [UIColor whiteColor];
zvc10.titleColor = [UIColor colorWithRed:0.655 green:0.204 blue:0.890 alpha:1.00];
zvc10.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:12];
zvc10.selectBtnFont = [UIFont boldSystemFontOfSize:14];
zvc10.selectTitleColor = [UIColor whiteColor];
zvc10.borderWidth = 1.0;
zvc10.titleBtnBackColor = [UIColor whiteColor];
zvc10.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
};
[self.scrollView addSubview:zvc10];

如图：

5.无跟随状态，设置选中状态

类似于今日头条上面的按钮，选中某一个按钮后字体变大；

ZFJSegmentedControl *zvc7 = [[ZFJSegmentedControl alloc]initwithTitleArr:titleArr iconArr:nil SCType:SCType_None];
zvc7.frame = CGRectMake((ScreenWidth - 300)/2, CGRectGetMaxY(zvc10.frame) + 40, 300, 40);
zvc7.backgroundColor = [UIColor whiteColor];
zvc7.titleColor = [UIColor lightGrayColor];
zvc7.selectBtnSpace = 5;//设置按钮间的间距
zvc7.selectBtnWID = 70;//设置按钮的宽度 不设就是均分
zvc7.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:16];//按钮的常态样式
zvc7.selectBtnFont = [UIFont boldSystemFontOfSize:20];//按钮的选中状态的样式
zvc7.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
};
[self.scrollView addSubview:zvc7];

如图：

6.图片按钮

只需要初始化的时候，把图片数组传进去就OK了；

ZFJSegmentedControl *zvc4 = [[ZFJSegmentedControl alloc]initwithTitleArr:nil iconArr:iconArr30 SCType:SCType_Dot];
zvc4.frame = CGRectMake((ScreenWidth - 300)/2, CGRectGetMaxY(zvc.frame) + 40, 300, 40);
zvc4.backgroundColor = [UIColor whiteColor];
zvc4.titleColor = [UIColor lightGrayColor];
zvc4.selectBtnSpace = 5;//设置按钮间的间距
zvc4.selectBtnWID = 70;//设置按钮的宽度 不设就是均分
zvc4.SCType_Underline_HEI = 4;
zvc4.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:16];
zvc4.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
zvc.selectIndex = selectIndex;
};
[self.scrollView addSubview:zvc4];

如图：

7.图片文字混合

如果图片和问题都设置了，我这里提供了五种方法；

如下面代码：

typedef NS_ENUM(NSUInteger, ZFJButtonEdgeInsetsStyle) {
ZFJButtonEdgeInsetsStyleTop,    // image在上，label在下
ZFJButtonEdgeInsetsStyleLeft,   // image在左，label在右
ZFJButtonEdgeInsetsStyleBottom, // image在下，label在上
ZFJButtonEdgeInsetsStyleRight,  // image在右，label在左
ZFJButtonEdgeInsetsStyleNone    //如果设置的不合适可以自己设置
};

ZFJSegmentedControl *zvc5 = [[ZFJSegmentedControl alloc]initwithTitleArr:titleArr iconArr:iconArr20 SCType:SCType_Underline];
zvc5.frame = CGRectMake((ScreenWidth - 300)/2, CGRectGetMaxY(zvc4.frame) + 40, 300, 40);
zvc5.backgroundColor = [UIColor whiteColor];
zvc5.titleColor = [UIColor lightGrayColor];
zvc5.selectBtnSpace = 5;//设置按钮间的间距
zvc5.selectBtnWID = 70;//设置按钮的宽度 不设就是均分
zvc5.SCType_Underline_HEI = 2;
zvc5.edgeInsetsStyle = ZFJButtonEdgeInsetsStyleNone;
//top, left, bottom, right
zvc5.imageEdgeInsets = UIEdgeInsetsMake(-20, 25, 0, 0);
zvc5.labelEdgeInsets = UIEdgeInsetsMake(20, -10, 0, 0);;
zvc5.titleFont = [UIFont fontWithName:@"STHeitiSC-Light" size:14];
zvc5.selectType = ^(NSInteger selectIndex,NSString *selectIndexTitle){
NSLog(@"selectIndexTitle == %@",selectIndexTitle);
self.textLabel.text = [NSString stringWithFormat:@"index = %ld,buttonTitle = %@",selectIndex,selectIndexTitle];
};
[self.scrollView addSubview:zvc5];

a.image在上，label在下
zvc11.edgeInsetsStyle = ZFJButtonEdgeInsetsStyleTop;

b.image在左，label在右

zvc11.edgeInsetsStyle = ZFJButtonEdgeInsetsStyleLeft;

c.image在下，label在上

zvc11.edgeInsetsStyle = ZFJButtonEdgeInsetsStyleBottom;

d.image在右，label在左

zvc11.edgeInsetsStyle = ZFJButtonEdgeInsetsStyleRight;

e.自定义位置

zvc5.edgeInsetsStyle = ZFJButtonEdgeInsetsStyleNone;

//top, left, bottom, right

zvc5.imageEdgeInsets = UIEdgeInsetsMake(-20, 25, 0, 0);

zvc5.labelEdgeInsets = UIEdgeInsetsMake(20, -10, 0, 0);

f.如图：

8.整体效果

9.DEMO下载

点击下载
http://download.csdn.net/detail/u014220518/9724577