效果图：
因为注释很详细 就不再单独讲，直接放上代码。
NewsViewController.m中：
#import "NewsViewController.h"
#import "TopLineViewController.h"
#import "HotViewController.h"
#import "SocietyViewController.h"
#import "VedioViewController.h"
#import "ReaderViewController.h"
#import "ScienceViewController.h"
static CGFloat const labelw = 100;
static CGFloat const radio = 1.3;
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
@interface NewsViewController ()<UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *titleScrollView;
@property (nonatomic,weak)UILabel *selectedLabel;
@property (weak, nonatomic) IBOutlet UIScrollView *contentScrollView;
@property (strong,nonatomic)NSMutableArray *titleLabels;
@end
@implementation NewsViewController
-(NSMutableArray *)titleLabels{
if(!_titleLabels){
_titleLabels = [NSMutableArray array];
}
return _titleLabels;
}
- (void)viewDidLoad {
[super viewDidLoad];
//添加所有子控制器
[self setUpAllChildViewController];
//添加所有子控制器对应的标题
[self setUpTitleLabel];
//iOS7会给导航试图控制器下所有的UIScorllView顶部添加额外的滚动区域 不需要 所以设置成NO
self.automaticallyAdjustsScrollViewInsets = NO;
//初始化UIScrollView
[self setUpScrollView];
}
-(void)setUpScrollView{
NSUInteger count = self.childViewControllers.count;
//设置标题滚动条
self.titleScrollView.contentSize = CGSizeMake(count*labelw, 0);
self.titleScrollView.showsHorizontalScrollIndicator = NO;
//设置内容滚动条
self.contentScrollView.contentSize = CGSizeMake(count*WIDTH, 0);
//开启分页
self.contentScrollView.pagingEnabled = YES;
//去掉弹簧效果
self.contentScrollView.bounces = NO;
//隐藏水平滚动条
self.contentScrollView.showsHorizontalScrollIndicator = NO;
//设置代理
self.contentScrollView.delegate = self;
}
-(void)setUpAllChildViewController{
TopLineViewController *topLine = [[TopLineViewController alloc]init];
topLine.title = @"头条";
[self addChildViewController:topLine];
HotViewController *hot = [[HotViewController alloc]init];
hot.title = @"热点";
[self addChildViewController:hot];
SocietyViewController *society = [[SocietyViewController alloc]init];
society.title = @"社会";
[self addChildViewController:society];
VedioViewController *vedio = [[VedioViewController alloc]init];
vedio.title = @"视频";
[self addChildViewController:vedio];
ReaderViewController*reader = [[ReaderViewController alloc]init];
reader.title = @"阅读";
[self addChildViewController:reader];
ScienceViewController *science = [[ScienceViewController alloc]init];
science.title = @"科技";
[self addChildViewController:science];
}
-(void)setUpTitleLabel{
NSUInteger count = self.childViewControllers.count;
CGFloat labelX = 0;
CGFloat labelY = 0;
CGFloat labelH = 44;
for(int i = 0; i < count; i++){
UIViewController *vc = self.childViewControllers[i];
UILabel *label = [[UILabel alloc]init];
//添加到titleLabels数组中
[self.titleLabels addObject:label];
labelX = i * labelw;
//设置尺寸
label.frame = CGRectMake(labelX, labelY, labelw, labelH);
//设置label的文字
label.text = vc.title;
//设置用户交互
label.userInteractionEnabled = YES;
//设置高亮文字颜色
label.highlightedTextColor = [UIColor redColor];
//设置label的tag
label.tag = i;
//设置label文字居中
label.textAlignment = NSTextAlignmentCenter;
//为label添加点击手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(titleClick:)];
//默认选中第0个label
if(i==0){
[self titleClick:tap];
}
[label addGestureRecognizer:tap];
[self.titleScrollView addSubview:label];
}
}
//使标题滚动 点击时居中
//设置标题居中
-(void)setUpTitleCenter:(UILabel *)centerLabel{
//计算偏移量
CGFloat offsetX = centerLabel.center.x - WIDTH*0.5;
if(offsetX < 0)offsetX = 0;//防止最左边滚动出现空余
//获取最大的滚动范围
CGFloat maxOffsetX = self.titleScrollView.contentSize.width - WIDTH;
if(offsetX > maxOffsetX) offsetX = maxOffsetX;//防止最右边出现空余 到最右边就不在滚动
//滚动标题滚动条
[self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}
#pragma mark --UIScrollViewDelegate
//监听scrollView的滚动
-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat curPage = scrollView.contentOffset.x / scrollView.bounds.size.width;
//左边label的角标
NSInteger leftIndex = curPage;
//右边label的角标
NSInteger rightIndex = leftIndex + 1;
//获取左边的label
UILabel *leftLabel = self.titleLabels[leftIndex];
//获取最右边
UILabel *rightLabel;
if(rightIndex < self.titleLabels.count-1){
rightLabel = self.titleLabels[rightIndex];
}
//计算缩放比例
CGFloat rightScale = curPage - leftIndex;
CGFloat leftScale = 1 - rightScale;
//缩放
leftLabel.transform = CGAffineTransformMakeScale(leftScale*0.3+1, leftScale*0.3+1);
rightLabel.transform = CGAffineTransformMakeScale(rightScale*0.3+1, rightScale*0.3+1);
leftLabel.textColor = [UIColor colorWithRed:leftScale green:0 blue:0 alpha:1];
rightLabel.textColor = [UIColor colorWithRed:rightScale green:0 blue:0 alpha:1];
}
//滚动完成的时候调用这个方法
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
//获取滚动到哪一页
NSInteger index = scrollView.contentOffset.x/scrollView.bounds.size.width;
//显示对应的视图控制器
[self showVc:index];
//把对应的label选中
UILabel *selLabel = self.titleLabels[index];
[self selectLabel:selLabel];
//让选中的标题居中
[self setUpTitleCenter:selLabel];
}
-(void)showVc:(NSInteger)index{
CGFloat offsetX = index * WIDTH;
//获取对应的子控制器
UIViewController *vc = self.childViewControllers[index];
//添加子控制器View
//如果控制器已经创建好了 就直接return不再创建了
if(vc.isViewLoaded)return;
vc.view.frame = CGRectMake(offsetX, 0, WIDTH, HEIGHT);
[self.contentScrollView addSubview:vc.view];
}
-(void)titleClick:(UITapGestureRecognizer*)sender{
UILabel *selLabel = (UILabel*)sender.view;
[self selectLabel:selLabel];
NSInteger index = selLabel.tag;
//计算滚动的位置
CGFloat offsetX = selLabel.tag * WIDTH;
self.contentScrollView.contentOffset = CGPointMake(offsetX, 0);
//给对应的位置添加控制器
[self showVc:index];
//让标题居中
[self setUpTitleCenter:selLabel];
}
//选中按钮的设置
-(void)selectLabel:(UILabel *)label{
//取消上一个选中
_selectedLabel.highlighted = NO;
//取消形变
_selectedLabel.transform = CGAffineTransformIdentity;
_selectedLabel.textColor = [UIColor blackColor];
label.highlighted = YES;
label.transform = CGAffineTransformMakeScale(radio, radio);
_selectedLabel = label;
}
@end
