摘要
特别说明：本文适合于新手，老司机就没必要浪费时间去看了。
实现功能点
1.可自定义滚动标题个数
2.滚动标题切换有字体颜色效果
3.滚动标题点击可切换到对应的子控制器
4.滑动内容视图可切换到对应标题
运用场景：新闻类和电商类
接下来就是开始项目，我们要写分析界面结构，好做出相对应的思路。
1.先分析一下界面结构
我们可以发现view上包括了标题滚动条以及内容展示，所以需要添加标题和内容滚动视图。
注意：由于iOS7以后，导航控制器上的scrollview顶部会额外多出64的滚动区域，所以是导航控制器的就要注意了，添加以下代码可以解决：
self.automaticallyAdjustsScrollViewInsets = NO;
添加滚动视图代码如下：
//添加标题滚动视图
- (void)setupTitleScrollview {
self.titleScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 64, KWidth, 44)];
self.titleScrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:self.titleScrollView];
}
//添加内容展示滚动视图
- (void)setupContentScrollview {
CGFloat y = CGRectGetMaxY(self.titleScrollView.frame);
self.contentScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, y, KWidth, KHeight - y)];
[self.view addSubview:self.contentScrollView];
self.contentScrollView.delegate = self;
self.contentScrollView.showsHorizontalScrollIndicator = NO;//指示器
self.contentScrollView.pagingEnabled = YES;//分页
self.contentScrollView.bounces = NO;//边界是否允许滑动
}
2.添加标题以及子控制器
1 ）标题与子控制器一一对应，先添加标题还是子控制器呢，这里我采取的是先添加子控制器。
2 ）标题用button显示
//添加所有的子控制器
- (void)setupAllChildViewController {
//头条
TopLineViewController *topLineVC = [[TopLineViewController alloc] init];
topLineVC.title = @"头条";
[self addChildViewController:topLineVC];
//热点
HotViewController *hotVC = [[HotViewController alloc] init];
hotVC.title = @"热点";
[self addChildViewController:hotVC];
//视频
VideoViewController *videoVC = [[VideoViewController alloc] init];
videoVC.title = @"视频";
[self addChildViewController:videoVC];
//社会
ScoietyViewController *scoietyVC = [[ScoietyViewController alloc] init];
scoietyVC.title = @"社会";
[self addChildViewController:scoietyVC];
//订阅
ReaderViewController *readerVC = [[ReaderViewController alloc] init];
readerVC.title = @"订阅";
[self addChildViewController:readerVC];
//科技
ScienceViewController *scineceVC = [[ScienceViewController alloc] init];
scineceVC.title = @"科技";
[self addChildViewController:scineceVC];
}
//添加所有的标题按钮
- (void)setupAllTitle {
self.titleBtns = [NSMutableArray array];
NSInteger count = self.childViewControllers.count;
for (NSInteger i = 0; i < count; i ++) {
UIButton *titleBtn = [UIButton buttonWithType:UIButtonTypeCustom];
titleBtn.frame = CGRectMake(100 * i, 0, 100, self.titleScrollView.frame.size.height);
UIViewController *vc = self.childViewControllers[i];
[titleBtn setTitle:vc.title forState:UIControlStateNormal];
[titleBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//默认字体为黑色
titleBtn.titleLabel.font = [UIFont systemFontOfSize:16];
[titleBtn addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside];
titleBtn.tag = 10 + i;
[self.titleScrollView addSubview:titleBtn];
[self.titleBtns addObject:titleBtn];//保存标题按钮
//第一次手动调用
if (i == 0) {
[self titleClick:titleBtn];
}
}
self.titleScrollView.contentSize = CGSizeMake(100 * count, 0);
self.contentScrollView.contentSize = CGSizeMake(KWidth * count, 0);
}
3.处理标题按钮的点击事件
分析，按钮点击后需要做的事情是什么？
1 ）标题颜色 变成 红色。
2 ）把对应子控制器的view添加上去。
3 ）内容滚动视图滚动到对应的位置。
//标题按钮的点击事件
- (void)titleClick:(UIButton *)btn {
NSInteger i = btn.tag - 10;
//改变选中颜色
[self selectBtn:btn];
//添加对应的子控制器
[self setupViewController:i];
//设置内容展示的偏移位置
self.contentScrollView.contentOffset = CGPointMake(KWidth * i, 0);
}
//记录选中的按钮
@property (nonatomic, strong) UIButton *selectBtn;
//改变标题颜色
- (void)selectBtn:(UIButton *)btn {
[self.selectBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];//恢复原色
[btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];//选中颜色
[self setupTitleCenter:btn];//设置标题居中
self.selectBtn = btn;//记录选中按钮
}
//标题居中处理
- (void)setupTitleCenter:(UIButton *)btn {
CGFloat offsetX = btn.center.x - KWidth * 0.5;
if (offsetX < 0) {
offsetX = 0;
}
CGFloat maxOffsetX = self.titleScrollView.contentSize.width - KWidth;
if (offsetX > maxOffsetX) {
offsetX = maxOffsetX;
}
[self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}
//添加子控制器的view
- (void)setupViewController:(NSInteger)i {
UIViewController *vc = self.childViewControllers[i];
//避免重复加载
if (vc.view.superview) {
return;
}
vc.view.frame = CGRectMake(i * KWidth, 0, KWidth, self.contentScrollView.frame.size.height);
[self.contentScrollView addSubview:vc.view];
}
4.处理内容视图的业务逻辑(监听内容滚动)
设置代理，目的:监听内容滚动视图什么时候完成。
原因:
1.防SB用户,按住屏幕死循环着左右滑,每次都加载会很卡。
2.用户也有可能滑动到一半,不想看了,就没有必要加载出来,浪费用户流量。
代理方法：
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
NSInteger i = self.contentScrollView.contentOffset.x / KWidth;
//获取标题按钮
UIButton *btn = self.titleBtns[i];
//改变标题按钮颜色
[self selectBtn:btn];
//添加对应的子控制器view
[self setupViewController:i];
}
嗯，到这基本上就结束了。
如果在阅读中看到错误或者不懂得，欢迎提问。
