免费开源的iOS开发学习平台

UISegmentedControl详解:2-UISegmentedControl实例

此篇文章我们通过创建UISegmentedControl控件,通过点击其中不同的按钮可以实现不同控制器的切换。

准备工作

  • 创建两个控制器类MainViewController和SubViewController。其中,MainViewController做为父控制器,SubViewController做为子控制器。通过父控制器上的UISegmentedControl控件,可以切换各个子控制器视图。为了区分各个子控制器,我们可以在SubViewController.m文件中添加如下代码,为其设置不同的背景颜色。
-(void)viewDidLoad{
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor colorWithRed:(arc4random()%255)/255.0 green:(arc4random()%255)/255.0 blue:(arc4random()%255)/255.0 alpha:1.0];
}
  • 在AppDelegate.m文件中,创建一个导航控制器,并且设置一个MainViewController对象为其根控制器
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    MainViewController *mainVC = [[MainViewController alloc] init];
    UINavigationController *naviVC = [[UINavigationController alloc] initWithRootViewController:mainVC];
    naviVC.navigationBar.translucent = NO;
    self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
    self.window.rootViewController = naviVC;
    [self.window makeKeyAndVisible];
    return YES;
}
  • 在MainViewController类中,添加一个UISegmentedControl类的属性以及一个UIScrollView类的属性,其中scrollView用于容纳子控制器的view。
#define kScreenWidth ([UIScreen mainScreen].bounds.size.width)
#define kNumber (self.segmentedControl.numberOfSegments)

@interface MainViewController () <UIScrollViewDelegate>
@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UISegmentedControl *segmentedControl;
@end
  • 使用懒加载,设置scrollView属性
-(UIScrollView *)scrollView {
    if (_scrollView == nil) {
        _scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
        _scrollView.contentSize = CGSizeMake(kScreenWidth * kNumber, 0);
        _scrollView.backgroundColor = [UIColor yellowColor];
        _scrollView.pagingEnabled = YES;
        _scrollView.showsHorizontalScrollIndicator = NO;     
        _scrollView.delegate = self;
    }
    return _scrollView;
}
  • 在viewDidLoad方法中,创建3个子控制器,并且把子控制器view都添加到scrollView上。除此之外,把titleView属性设置为展示segmentedControl对象。
-(void) viewDidLoad{
    [super viewDidLoad];
    self.navigationItem.titleView = self.segmentedControl;
    [self.view addSubview:self.scrollView];
    for (int i = 0; i < kNumber; i++) {
        SubViewController *subVC = [[SubViewController alloc] init];
        CGFloat x = kScreenWidth * i;
        subVC.view.frame = CGRectMake(x, 0, kScreenWidth, [UIScreen mainScreen].bounds.size.height);
        [self.scrollView addSubview:subVC.view];
    }
}

设置UISegmentedControl对象

对于UISegmentedControl对象,我们可以监听UIControlEventValueChanged事件,当选中的索引值发生改变时,可以调用自定义方法。

-(UISegmentedControl *)segmentedControl{
    if (_segmentedControl == nil) {
        _segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"最新",@"最热",@"经典"]];
        _segmentedControl.tintColor = [UIColor redColor];
        _segmentedControl.selectedSegmentIndex = 0;
        [_segmentedControl addTarget:self action:@selector(changeIndex) forControlEvents:UIControlEventValueChanged];
    }
    return _segmentedControl;
}

当用户点击segmentedControl中的选项时,会调用changeIndex方法,此时会切换显示的视图。

-(void) changeIndex {
    CGFloat offsetX = kScreenWidth * self.segmentedControl.selectedSegmentIndex;
    self.scrollView.contentOffset = CGPointMake(offsetX, 0);
}

实现滑动切换UISegmentedControl的值

由于子控制器view都添加在scrollView上,借助UIScrollViewDelegate代理协议中的方法可以监听用户的滑动手势,因此可以同步实现滑动切换segmentedControl的当前选项。

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{    
    CGFloat offsetX = self.scrollView.contentOffset.x;
    CGFloat x = offsetX / kScreenWidth;
    int index = (int)round(x);
    self.segmentedControl.selectedSegmentIndex = index;
}

运行结果如下,通过点击UISegmentedControl控件以及滑动UIScrollView,都可以时间控制器视图的切换效果。

示例代码

https://github.com/99ios/10.7.2