最近公司需要做類似分段選擇的功能,自己研究了下余寥,基本完成了業(yè)務(wù)需求肋杖,抽時間把這個控制器封裝了一遍:
1.下面先演示下實際效果:
2.使用的話比較簡單,在封裝控制器中提供了一個類方法
// 通過傳入標(biāo)題數(shù)組和控制器數(shù)組來創(chuàng)建當(dāng)前的根控制器
- (id)initWithTitleArray:(NSArray *)titleArray controllersArray:(NSArray *)controllersArray;
// 下面的代碼為演示方法
- (IBAction)jumpToSelectView:(id)sender {
NSArray *titleArray = @[@"第一頁",@"第二頁222",@"第三頁3",@"第四頁44444"];
NSMutableArray *controllersArray = [NSMutableArray array];
for (int i = 0; i < 4; i++) {
UIViewController *vc1 = [[UIViewController alloc] init];
vc1.view.backgroundColor = RandomColor;
[controllersArray addObject:vc1];
}
CWSegmentRootController *rootVc = [[CWSegmentRootController alloc] initWithTitleArray:titleArray controllersArray:controllersArray];
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:rootVc];
[self presentViewController:nav animated:YES completion:nil];
}
3.下面說下具體實現(xiàn)過程
. 首先整個視圖分為上面的標(biāo)題視圖以及下面的內(nèi)容視圖吊说,標(biāo)題視圖主要分為標(biāo)題Button和下面的指示器,具體的創(chuàng)建是根據(jù)標(biāo)題數(shù)組的數(shù)量確定的:
/**
* 設(shè)置頂部的標(biāo)簽欄
*/
- (void)setupTitlesView
{
// 標(biāo)簽欄整體
UIView *titlesView = [[UIView alloc] init];
titlesView.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:1.0];
titlesView.frame = CGRectMake(0, 64, self.view.frame.size.width, 35);
[self.view addSubview:titlesView];
self.titlesView = titlesView;
// 底部的紅色指示器
UIView *indicatorView = [[UIView alloc] init];
indicatorView.backgroundColor = [UIColor redColor];
indicatorView.tag = -1;
CGFloat indicatorViewW = self.view.frame.size.width/(self.titlesArray.count);
CGFloat indicatorViewH = 2;
CGFloat indicatorViewY = titlesView.frame.size.height - indicatorViewH;
indicatorView.frame = CGRectMake(0, indicatorViewY, indicatorViewW, indicatorViewH);
self.indicatorView = indicatorView;
// 內(nèi)部的子標(biāo)簽
CGFloat width = titlesView.frame.size.width / self.titlesArray.count;
CGFloat height = titlesView.frame.size.height;
for (NSInteger i = 0; i<self.titlesArray.count; i++) {
UIButton *button = [[UIButton alloc] init];
button.tag = i;
button.frame = CGRectMake(i*width, 0, width, height);
[button setTitle:self.titlesArray[i] forState:UIControlStateNormal];
// [button layoutIfNeeded]; // 強(qiáng)制布局(強(qiáng)制更新子控件的frame)
[button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateDisabled];
button.titleLabel.font = [UIFont systemFontOfSize:14];
[button addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside];
[titlesView addSubview:button];
// 默認(rèn)點擊了第一個按鈕
if (i == 0) {
button.enabled = NO;
self.selectedButton = button;
// 讓按鈕內(nèi)部的label根據(jù)文字內(nèi)容來計算尺寸
[button.titleLabel sizeToFit];
CGRect newFrame = indicatorView.frame;
newFrame.size.width = button.titleLabel.frame.size.width;
self.indicatorView.frame = newFrame;
CGPoint newCenter = self.indicatorView.center;
newCenter.x = button.center.x;
self.indicatorView.center = newCenter;
}
}
[titlesView addSubview:indicatorView];
}
. 然后是添加內(nèi)容容器ScrollView,這里注意設(shè)置ContentSize(根據(jù)控制器數(shù)組的數(shù)量確定的)
/**
* 底部的scrollView
*/
- (void)setupContentView
{
// 不要自動調(diào)整inset
self.automaticallyAdjustsScrollViewInsets = NO;
UIScrollView *contentView = [[UIScrollView alloc] init];
contentView.backgroundColor = [UIColor lightGrayColor];
// contentView.frame = self.view.bounds;
contentView.frame = CGRectMake(0, CGRectGetMaxY(self.titlesView.frame), self.view.frame.size.width, self.view.frame.size.height-CGRectGetMaxY(self.titlesView.frame));
contentView.delegate = self;
contentView.pagingEnabled = YES;
[self.view insertSubview:contentView atIndex:0];
contentView.contentSize = CGSizeMake(contentView.frame.size.width * self.childViewControllers.count, 0);
self.contentView = contentView;
// 添加第一個控制器的view
[self scrollViewDidEndScrollingAnimation:contentView];
}
. 最后需要將傳入的多個控制器傳入根控制器中:
/**
* 初始化子控制器
*/
- (void)setupChildVces
{
for (UIViewController *vc in self.controllersArray) {
[self addChildViewController:vc];
}
}
4.接下來需要監(jiān)聽標(biāo)題按鈕的點擊以及內(nèi)容視圖的滾動
// 標(biāo)題按鈕點擊時需要滾動視圖以及讓指示器移動
- (void)titleClick:(UIButton *)button
{
// 修改按鈕狀態(tài)
self.selectedButton.enabled = YES;
button.enabled = NO;
self.selectedButton = button;
// 動畫
[UIView animateWithDuration:0.25 animations:^{
CGRect newFrame = self.indicatorView.frame;
newFrame.size.width = button.titleLabel.frame.size.width;
self.indicatorView.frame = newFrame;
CGPoint newCenter = self.indicatorView.center;
newCenter.x = button.center.x;
self.indicatorView.center = newCenter;
}];
// 滾動
CGPoint offset = self.contentView.contentOffset;
offset.x = button.tag * self.contentView.frame.size.width;
[self.contentView setContentOffset:offset animated:YES];
}
5.最后需要監(jiān)聽ScrollView的代理方法
#pragma mark - <UIScrollViewDelegate>
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
// 當(dāng)前的索引
NSInteger index = scrollView.contentOffset.x / scrollView.frame.size.width;
// 取出子控制器
UIViewController *vc = self.childViewControllers[index];
vc.view.frame = CGRectMake(scrollView.contentOffset.x, 0, scrollView.frame.size.width, scrollView.frame.size.height);
[scrollView addSubview:vc.view];
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self scrollViewDidEndScrollingAnimation:scrollView];
// 點擊按鈕
NSInteger index = scrollView.contentOffset.x / scrollView.frame.size.width;
[self titleClick:self.titlesView.subviews[index]];
}