效果圖：
因為註釋很詳細 就不再單獨講，直接放上程式碼。
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
複製程式碼