您的位置:首页 > 产品设计 > UI/UE

UI12-分段视图

2017-08-22 17:57 507 查看
//先生成存放标题的数据
NSArray *array = [NSArray arrayWithObjects:@"家具",@"灯饰",@"建材",@"装饰", nil];
//初始化UISegmentedControl
UISegmentedControl *segment = [[UISegmentedControl alloc]initWithItems:array];
//设置frame
segment.frame = CGRectMake(10, 100, self.view.frame.size.width-20, 30);
//添加到视图
[self.view addSubview:segment];


这样一个简单的分段控制器就生成了,这样还不能使用,我们实际开发中需要根据它的属性去进一步设置.

//添加一个分段(在指定下标下插入,并设置动画效果)
[segment insertSegmentWithTitle:@"五金电料" atIndex:2 animated:NO];
//插入图片分段
//[segment insertSegmentWithImage:[UIImage imageNamed:@"需要插入图片的名字"] atIndex:2 animated:YES];
//移除一个分段(根据下标)
//[segme removeSegmentAtIndex:0 animated:YES];


插入标题效果

我们还可以设置其他属性
//根据下标修改分段标题(修改下标为2的分段)
[segme setTitle:@"巧克力" forSegmentAtIndex:2];
//根据内容定分段宽度
segme.apportionsSegmentWidthsByContent = YES;
//开始时默认选中下标(第一个下标默认是0)
segme.selectedSegmentIndex = 2;
//控件渲染色(也就是外观字体颜色)
segment.tintColor = [UIColor redColor];
//按下是否会自动释放:
//segment.momentary = YES;


除了以上属性,我们也可以设置每一个分段的属性
// 设置指定索引选项的宽度(设置下标为2的分段宽度)
[segment setWidth:70.0 forSegmentAtIndex:2];
// 设置分段中标题的位置(0,0点为中心)
[segment setContentOffset:CGSizeMake(10,10) forSegmentAtIndex:3];


当然最重要的是我们要给segment添加事件
//添加事件
[segme addTarget:self action:@selector(change:) forControlEvents:UIControlEventValueChanged];


实现添加的事件
//点击不同分段就会有不同的事件进行相应
-(void)change:(UISegmentedControl *)sender{
NSLog(@"测试");
if (sender.selectedSegmentIndex == 0) {
NSLog(@"1");
}else if (sender.selectedSegmentIndex == 1){
NSLog(@"2");
}else if (sender.selectedSegmentIndex == 2){
NSLog(@"3");
}else if (sender.selectedSegmentIndex == 3){
NSLog(@"4");
}


如果开发中有需求,我们可以让其在导航栏显示,只需要我们稍微改变下添加到视图的方法
//显示在导航栏上
self.navigationItem.titleView = segmentedControl;


文/呼噜ZR(简书作者)
原文链接:http://www.jianshu.com/p/7d9e4d4368c8
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息