切换控件-UISegmentedControl

• 作为iOS原生的切换控件,我觉得UISegmentedControl是非常的好用,其实在上一篇文章 中,我也是有提到的,那里是作为UISearchBar的扩展栏来使用.直接上代码来认识一下UISegmentedControl.

- (void)viewDidLoad {
    [super viewDidLoad];
    // 创建UISegmentedControl
    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"视频", @"声音",@"图片"]];
    segmentedControl.frame = CGRectMake(40, 100, 300, 40);
    [self.view addSubview:segmentedControl];
    // 默认选中下标为1的item
    segmentedControl.selectedSegmentIndex = 1;
}

• 显示如图

  
  Snip20161208_5.png

• 按照我们原来的步骤讲一下UISegmentedControl中常用的属性以及方法,其实在创建出来默认是没有选中的按钮的,所以就要通过一些属性以及方法来设置了,直接上代码

    // 默认选中下标为1的item
    segmentedControl.selectedSegmentIndex = 1;
    // 设置点击按钮是否选中
    segmentedControl.momentary = YES;

• UISegmentedControl切换模块按钮的增,删,改以及布局操作

• 对于UISegmentedControl来说,还以一些比较强大的功能,可以动态的对其内部的切换模块进行增,删,改操作,展示很流畅的动画效果,十分有利于用户体验,下面直接上来演示一下

    // 插入一个切换模块按钮,这些有一个平滑的效果
    // 插入背景为hyf图片的按钮
    [segmentedControl insertSegmentWithImage:[UIImage imageNamed:@"hyf"] atIndex:1 animated:YES];
    // 插入标题为新增的按钮
    [segmentedControl insertSegmentWithTitle:@"新增" atIndex:0 animated:YES];
    // 删除操作
    [segmentedControl removeSegmentAtIndex:1 animated:YES];
    // 删除所有的模块按钮
    [segmentedControl removeAllSegments];
    // 修改指定下标模块按钮的标题
    [segmentedControl setTitle:@"修改" forSegmentAtIndex:1];
    // 修改指定下标模块按钮的背景图片
    [segmentedControl setImage:[UIImage imageNamed:@"hyf改"] forSegmentAtIndex:1];
    // 自动根据内容计算模块按钮的宽度
    segmentedControl.apportionsSegmentWidthsByContent = YES;

• 根据之前的文章,讲述了UIButton添加触发方法,那么大家应该可以联想到,切换控件也可以添加触发方法,其实每个控件的都是差不的,思想都是一样的.那么这里就讲述一下给UISegmentedControl控件对象添加触发方法,直接上代码

- (void)viewDidLoad {
    [super viewDidLoad];
    // 创建UISegmentedControl
    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"视频", @"声音",@"图片"]];
    segmentedControl.frame = CGRectMake(40, 100, 300, 40);
    [self.view addSubview:segmentedControl];
    // 默认选中下标为1的item
    segmentedControl.selectedSegmentIndex = 1;
   // 自动根据内容计算模块按钮的宽度
    segmentedControl.apportionsSegmentWidthsByContent = YES;
   // 添加触发方法
    [segmentedControl addTarget:self action:@selector(click:) forControlEvents:UIControlEventValueChanged];
}
// 点击修改背景颜色
-(void)click:(UISegmentedControl *)seg {
    // 获取当前选中的按钮编号
    NSInteger index = seg.selectedSegmentIndex;
    // 根据获取到的index,修改背景颜色
    switch (index)
    {
        case 0:
            self.view.backgroundColor = [UIColor redColor]; break;
        case 1: 
            self.view.backgroundColor = [UIColor yellowColor]; break;
        case 2:
            self.view.backgroundColor = [UIColor blueColor]; break;
        default:  break;  
   }
}

• 效果如下

  
  UISegmentedControl.gif

• 代码比较简单。关键是理解UISegmentedControl的应用场景，灵活运用,在以前,我很多时候会把UISegmentedControl嵌套在UINavigationBar里面使用，以减少UINnavigationView之间的层级数量，给用户较好的体验.