您的位置:

详细解析UISegmentedControl

一、使用UISegmentedControl实现选项卡功能

UISegmentedControl是iOS开发中十分常用的控件之一,特别是用于实现选项卡功能时非常方便。具体实现方式如下:

    NSArray *items = @[@"选项1", @"选项2", @"选项3"];
    UISegmentedControl *segmentedControl = [[UISegmentedControl alloc] initWithItems:items];
    segmentedControl.frame = CGRectMake(20, 100, self.view.frame.size.width-40, 30);
    segmentedControl.selectedSegmentIndex = 0;
    [segmentedControl addTarget:self action:@selector(segmentedControlDidChanged:) forControlEvents:UIControlEventValueChanged];
    [self.view addSubview:segmentedControl];

上述代码首先创建一个数组,用于存放选项卡的标题;然后使用这个数组初始化UISegmentedControl控件;接着设置选项卡控件的frame和默认选中的选项卡。最后添加响应方法,在选项卡发生变化时触发。

在响应方法中,我们可以根据不同的选项卡切换对应的内容。例如:

    - (void)segmentedControlDidChanged:(UISegmentedControl *)segmentedControl {
        NSInteger index = segmentedControl.selectedSegmentIndex;
        switch (index) {
            case 0:
                // 切换到选项卡1的内容
                break;
            case 1:
                // 切换到选项卡2的内容
                break;
            case 2:
                // 切换到选项卡3的内容
                break;
        }
    }

二、设置UISegmentedControl的外观

UISegmentedControl可以通过设置其属性来改变外观,例如设置背景色、字体、分段线等。

    segmentedControl.backgroundColor = [UIColor whiteColor]; // 设置背景色
    segmentedControl.tintColor = [UIColor redColor]; // 设置选中项的颜色
    NSDictionary *normalAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:14], NSForegroundColorAttributeName:[UIColor grayColor]};
    [segmentedControl setTitleTextAttributes:normalAttributes forState:UIControlStateNormal]; // 设置未选中项的字体颜色和字号
    NSDictionary *selectedAttributes = @{NSFontAttributeName:[UIFont systemFontOfSize:14], NSForegroundColorAttributeName:[UIColor whiteColor]};
    [segmentedControl setTitleTextAttributes:selectedAttributes forState:UIControlStateSelected]; // 设置选中项的字体颜色和字号
    segmentedControl.apportionsSegmentWidthsByContent = YES; // 设置分段线自适应宽度

上述代码分别设置了背景色、选中项的颜色、未选中项的字体、选中项的字体、分段线自适应宽度等属性。通过这些属性的设置,可以使得UISegmentedControl控件的外观更加符合设计要求。

三、设置UISegmentedControl的使用限制

在使用UISegmentedControl时,有一些限制需要注意,例如控件的宽度、选项卡的数量等。

首先,UISegmentedControl控件的宽度需要足够容纳所有选项卡,否则会导致选项卡显示异常。其次,控件的尺寸不支持Auto Layout,如果需要做Auto Layout处理,可以使用代码动态计算宽度的方式。

    [segmentedControl sizeToFit];// 计算需要的控件宽度
    CGRect frame = segmentedControl.frame;
    frame.size.width = [items.firstObject sizeWithAttributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]}].width * items.count + 20 * (items.count - 1);
    segmentedControl.frame = frame;

上述代码动态计算了选项卡宽度,并且设置分段线的间距为20,最终得到了正确的控件尺寸。

此外,由于选项卡过多会影响用户体验,因此推荐在一个控件中最多放置5个选项卡。

四、使用UISegmentedControl+UITableView实现筛选功能

UISegmentedControl还可以与UITableView控件一起使用,实现类似于筛选功能的效果。具体实现方式如下:

    - (void)viewDidLoad {
        [super viewDidLoad];
        NSArray *items = @[@"全部", @"未审核", @"已审核"];
        self.segmentedControl = [[UISegmentedControl alloc] initWithItems:items];
        self.segmentedControl.selectedSegmentIndex = 0;
        [self.segmentedControl addTarget:self action:@selector(segmentedControlDidChanged:) forControlEvents:UIControlEventValueChanged];
        self.navigationItem.titleView = self.segmentedControl;
    }
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
        return self.dataSource.count;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
        // 根据选项卡选中的值,过滤显示数据
        NSInteger index = self.segmentedControl.selectedSegmentIndex;
        if (index == 1) {
            // 只显示未审核的数据
            MyDataModel *model = self.dataSource[indexPath.row];
            if (model.status != 0) {
                return nil;
            }
        } else if (index == 2) {
            // 只显示已审核的数据
            MyDataModel *model = self.dataSource[indexPath.row];
            if (model.status != 1) {
                return nil;
            }
        }
        // 显示所有数据
        MyDataModel *model = self.dataSource[indexPath.row];
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
        if (!cell) {
            cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
        }
        cell.textLabel.text = model.title;
        return cell;
    }
    
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
        return 44;
    }
    
    - (void)segmentedControlDidChanged:(UISegmentedControl *)segmentedControl {
        [self.tableView reloadData];
    }

上述代码中,我们首先在ViewController的viewDidLoad方法中创建UISegmentedControl控件,并在tableView的headerView中显示;然后实现tableView的数据源方法和代理方法,根据选项卡选中的值过滤显示数据。最后,在响应方法中调用tableView的reloadData方法,实现数据刷新。

五、总结

本文详细解析了UISegmentedControl的使用方式和设置外观,还演示了两种常用的使用方式:实现选项卡和实现筛选功能。UISegmentedControl作为iOS开发中常见的控件之一,掌握其使用方法和限制非常重要。