前言
NS_CLASS_AVAILABLE_IOS(2_0) @interface UISegmentedControl : UIControl <NSCoding>
@available(iOS 2.0, *) public class UISegmentedControl : UIControl, NSCoding
UISegmentedControl 的 Items 有两种样式,一种是字符串设置的标题样式,一种是图片设置的样式。
-
图片设置的样式需要处理图片的渲染模式,以原图显示。处理阴影,如果直接设置 image 出现阴影,这时候需要设置图片的渲染模式以原样显示。
UIImage *image = [UIImage imageNamed:@"hehe.png”];
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
1、UISegmentedControl 的创建
-
Objective-C
// 不设置 frame 时为系统默认大小
UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems: @[@"大娃", @"二娃", @"三娃", @"四娃"]];
// 将 segmentedControl 添加到 view
[self.view addSubview:segmentedControl];
-
Swift
// 不设置 frame 时为系统默认大小
let segmentedControl:UISegmentedControl = UISegmentedControl(items: ["大娃", "二娃", "三娃", "四娃"])
// 将 segmentedControl 添加到 view
self.view.addSubview(segmentedControl)
2、UISegmentedControl 的设置
-
Objective-C
// 设置 frame
segmentedControl.frame = CGRectMake(10, 30, 300, 50);
// 设置位置
segmentedControl.center = self.view.center;
// 设置背景颜色
segmentedControl.backgroundColor = [UIColor lightGrayColor];
// 设置 标题文字、边框、选中项 的颜色
segmentedControl.tintColor = [UIColor redColor];
// 设置标题文字的 颜色、字体 等属性
[segmentedControl setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor blueColor],
NSFontAttributeName: [UIFont boldSystemFontOfSize:20]}
forState: UIControlStateNormal];
// 设置分段标题
[segmentedControl setTitle:@"123" forSegmentAtIndex:2];
// 设置分段的图片
[segmentedControl setImage:[[UIImage imageNamed:@"hehe"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
forSegmentAtIndex:0];
// 设置分段标题的偏移量
[segmentedControl setContentOffset:CGSizeMake(10, 7) forSegmentAtIndex:1];
// 设置默认选中值
segmentedControl.selectedSegmentIndex = 1;
// 获取选中的分段的索引号
NSInteger selectIndex = [segmentedControl selectedSegmentIndex];
// 获取选中的分段的标题
NSString *selectTitle = [segmentedControl titleForSegmentAtIndex:[segmentedControl selectedSegmentIndex]];
// 获取分段个数
NSUInteger numberOfSegments = segmentedControl.numberOfSegments;
// 插入新分段
// 插入标题文字
[segmentedControl insertSegmentWithTitle:@"蛇精" atIndex:1 animated:YES];
// 插入图片
[segmentedControl insertSegmentWithImage:[[UIImage imageNamed:@"hihi"]
imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]
atIndex:4
animated:YES];
// 删除分段
// 删除指定分段
[segmentedControl removeSegmentAtIndex:0 animated:YES];
// 删除全部分段
[segmentedControl removeAllSegments];
// 添加点击触发事件
[segmentedControl addTarget:self
action:@selector(segmentedControlClick:)
forControlEvents:UIControlEventValueChanged];
-
Swift
// 设置 frame
segmentedControl.frame = CGRectMake(10, 30, 300, 50)
// 设置位置
segmentedControl.center = self.view.center
// 设置背景颜色
segmentedControl.backgroundColor = UIColor.lightGrayColor()
// 设置 标题文字、边框、选中项 的颜色
segmentedControl.tintColor = UIColor.redColor()
// 设置标题文字的 颜色、字体 等属性
segmentedControl.setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.blueColor(),
NSFontAttributeName: UIFont.boldSystemFontOfSize(20)],
forState: UIControlState.Normal)
// 设置分段标题
segmentedControl.setTitle("123", forSegmentAtIndex: 2)
// 设置分段的图片
segmentedControl.setImage(UIImage(named: "hehe")?.imageWithRenderingMode(.AlwaysOriginal),
forSegmentAtIndex: 0)
// 设置分段标题的偏移量
segmentedControl.setContentOffset(CGSizeMake(10, 7), forSegmentAtIndex: 1)
// 设置默认选中值
segmentedControl.selectedSegmentIndex = 1
// 获取选中的分段的索引号
let selectIndex:NSInteger = segmentedControl.selectedSegmentIndex
// 获取选中的分段的标题
let selectTitle:String? = segmentedControl.titleForSegmentAtIndex(segmentedControl.selectedSegmentIndex)
// 获取分段个数
let numberOfSegments:Int = segmentedControl.numberOfSegments
// 插入新分段
// 插入标题文字
segmentedControl.insertSegmentWithTitle("蛇精", atIndex: 1, animated: true)
// 插入图片
segmentedControl.insertSegmentWithImage(UIImage(named: "hihi")!
.imageWithRenderingMode(.AlwaysOriginal),
atIndex: 4,
animated: true)
// 删除分段
segmentedControl.removeSegmentAtIndex(0, animated: true) // 删除指定分段
segmentedControl.removeAllSegments() // 删除全部分段
// 添加点击触发事件
segmentedControl.addTarget(self,
action: #selector(UiSegmentedControl.segmentedControlClick(_:)),
forControlEvents: .ValueChanged)
3、Storyboard 中设置
-
在 Storyboard 场景中设置
-
Segmented Control 设置
![Segment1]()
| Style |
类型 |
| State Momentary |
状态 |
| Segments |
分段数 |
|
| Segment |
选择分段 |
| Title |
分段标题文字 |
| Image |
分段图片 |
| Behavior |
|
| -- Enable |
可用 |
| -- Selected |
选中 |
| Content Offset |
文字偏移量 |
-
Control 设置
![Segment2]()
| Alignment |
文字对齐方式 |
|
| Content |
|
| -- Selected |
选中 |
| -- Enable |
可用 |
| -- Highlighted |
高亮 |