Scrollview的运用之新闻滚动条 Scrollview的运用之新闻滚动条

摘要特别说明：本文适合于新手，老司机就没必要浪费时间去看了。
实现功能点
1.可自定义滚动标题个数
2.滚动标题切换有字体颜色效果
3.滚动标题点击可切换到对应的子控制器
4.滑动内容视图可切换到对应标题
运用场景：新闻类和电商类
【Scrollview的运用之新闻滚动条】接下来就是开始项目，我们要写分析界面结构，好做出相对应的思路。
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]; }

嗯，到这基本上就结束了。
如果在阅读中看到错误或者不懂得，欢迎提问。