iOS 仿網易新聞結構

1.首頁效果

2.滑動過程中顔色漸變，文字縮放

3.滑動結束邊緣标題自動适當居中

實作代碼：

//
//  ViewController.m
//  網易新聞
//
//  Created by llkj on 2017/11/20.
//  Copyright © 2017年 LayneCheung. All rights reserved.
//

#import "ViewController.h"
#import "TopLineViewController.h"
#import "HotViewController.h"
#import "VideoViewController.h"
#import "SocietyViewController.h"
#import "TechViewController.h"
#import "ReadViewController.h"

#define ScreenW [UIScreen mainScreen].bounds.size.width
#define ScreenH [UIScreen mainScreen].bounds.size.height

@interface ViewController ()<UIScrollViewDelegate>
/** 标題scrollView */
@property (nonatomic, weak) UIScrollView *titleScrollView;
/** 内容scrollView */
@property (nonatomic, weak) UIScrollView *contentScrollView;
/** 标題數組 */
@property (nonatomic, strong) NSArray *titles;
/** 上一次點選選中的按鈕 */
@property (nonatomic, weak) UIButton *previousClickButton;
/** 儲存所有标題按鈕的數組 */
@property (nonatomic, strong) NSMutableArray *titleButtons;
@end

@implementation ViewController

#pragma mark - 懶加載
- (NSMutableArray *)titleButtons {
    if (_titleButtons == nil) {
        _titleButtons = [NSMutableArray array];
    }
    return _titleButtons;
}
- (NSArray *)titles {
    if (_titles == nil) {
        _titles = @[@"頭條", @"熱點", @"視訊", @"社會", @"訂閱", @"科技",];
    }
    return _titles;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    self.navigationItem.title = @"網易新聞";
    //1.添加标題滾動視圖
    [self setupTitleScrollView];

    //2.添加内容滾動視圖
    [self setupContentScrollView];

    //3.添加所有子控制器
    [self setupAllChildVC];

    //4.設定所有标題
    [self setupAllTitle];


}

#pragma mark - <UIScrollViewDelegate>
//滾動完成調用
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    //擷取目前角标
    NSInteger i = scrollView.contentOffset.x / scrollView.frame.size.width;
    //擷取标題按鈕
    UIButton *titleButton = self.titleButtons[i];

    //1.選中标題
    [self selectedButton:titleButton];

    //2.把對應子控制器的View添加上去
    [self addOneViewController:i];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    //字型縮放

    //1.獲得左邊按鈕
    NSInteger leftI = scrollView.contentOffset.x / ScreenW;;
    UIButton *leftButton = self.titleButtons[leftI];
    //2.獲得右邊按鈕
    NSInteger rightI = leftI + ;
    UIButton *rightButton;
    if (rightI < self.titleButtons.count) {
        rightButton = self.titleButtons[rightI];
    }
    // 0 ~ 1 => 1 ~ 1.2
    CGFloat scaleR = scrollView.contentOffset.x / ScreenW;
    scaleR -= leftI;

    CGFloat scaleL =  - scaleR;
    //3.縮放按鈕
    leftButton.transform = CGAffineTransformMakeScale(scaleL *  + , scaleL *  + );
    rightButton.transform = CGAffineTransformMakeScale(scaleR *  + , scaleR *  + );
    //4.顔色漸變
    UIColor *rightColor = [UIColor colorWithRed:scaleR green: blue: alpha:];
    UIColor *leftColor = [UIColor colorWithRed:scaleL green: blue: alpha:];
    [rightButton setTitleColor:rightColor forState:UIControlStateNormal];
    [leftButton setTitleColor:leftColor forState:UIControlStateNormal];
}
#pragma mark - 設定所有标題
- (void)setupAllTitle {

    // 添加所有标題按鈕
    CGFloat btnX = ;
    CGFloat btnW = ;
    CGFloat btnH = self.titleScrollView.frame.size.height;
    for (NSInteger i = ; i < self.titles.count; i++) {
        UIButton *titleButton = [UIButton buttonWithType:UIButtonTypeCustom];
        titleButton.tag = i;
        btnX = i * btnW;
        titleButton.frame = CGRectMake(btnX, , btnW, btnH);
        [titleButton setTitle:self.titles[i] forState:UIControlStateNormal];
        [titleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        [titleButton addTarget:self action:@selector(titleButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        [self .titleScrollView addSubview:titleButton];
        //把按鈕儲存在titleButtons數組中
        [self.titleButtons addObject:titleButton];
        if (i == ) {//預設選中第0個标題
            [self titleButtonClick:titleButton];
        }
    }
    self.titleScrollView.contentSize = CGSizeMake(self.titles.count * btnW, );
    self.contentScrollView.contentSize = CGSizeMake(self.titles.count * ScreenW, );
}
#pragma mark - 選中按鈕
- (void)selectedButton:(UIButton *)button {
    self.previousClickButton.transform = CGAffineTransformIdentity;

    [self.previousClickButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    //标題居中
    [self setupTitleCenter:button];
    //字型縮放
    button.transform = CGAffineTransformMakeScale(, );

    self.previousClickButton = button;
}
#pragma mark - 标題居中
- (void)setupTitleCenter:(UIButton *)button {
    //修改titleScrollView的偏移量
    CGFloat offSetX = button.center.x - ScreenW * ;
    if (offSetX < ) {
        offSetX = ;
    }
    CGFloat maxOffsetX = self.titleScrollView.contentSize.width - ScreenW;
    if (offSetX > maxOffsetX) {
        offSetX = maxOffsetX;
    }
    [self.titleScrollView setContentOffset:CGPointMake(offSetX, ) animated:YES];
}
#pragma mark - 加載對應子控制器View
- (void)addOneViewController:(NSInteger)i {
    UIViewController *childVC = self.childViewControllers[i];
    //如果View已經被加載直接傳回
//    if (childVC.view.superview) return;
    if (childVC.viewIfLoaded) return; //ios 9.0之後可以使用
    CGFloat childViewW = self.contentScrollView.bounds.size.width;
    CGFloat childViewH = self.contentScrollView.bounds.size.height;;
    CGFloat childViewX = i * childViewW;
    childVC.view.frame = CGRectMake(childViewX, , childViewW, childViewH);
    [self.contentScrollView addSubview:childVC.view];
}
#pragma mark - 标題點選
- (void)titleButtonClick:(UIButton *)titleButton {
    // 1.标題顔色變紅
    [self selectedButton:titleButton];
    // 2.加載對應子控制器View
    [self addOneViewController:titleButton.tag];
    // 3.内容滾動視圖滾動到對應的位置
    self.contentScrollView.contentOffset = CGPointMake(titleButton.tag * self.contentScrollView.bounds.size.width, );
}
#pragma mark - 添加所有子控制器
- (void)setupAllChildVC {
    //注意:控制器加載的順序要和titles中的一一對應，順序和數量自己也可以調整
    // 頭條
    [self addChildViewController:[[TopLineViewController alloc] init]];
    // 熱點
    [self addChildViewController:[[HotViewController alloc] init]];
    // 視訊
    [self addChildViewController:[[VideoViewController alloc] init]];
    // 社會
    [self addChildViewController:[[SocietyViewController alloc] init]];
    // 訂閱
    [self addChildViewController:[[ReadViewController alloc] init]];
    // 科技
    [self addChildViewController:[[TechViewController alloc] init]];
}
#pragma mark - 添加标題滾動視圖
- (void)setupTitleScrollView {
    //建立titleScrollView
    UIScrollView *titleScrollView = [[UIScrollView alloc] init];
    CGFloat y = self.navigationController.navigationBarHidden ?  : ;
    titleScrollView.frame = CGRectMake(, y, ScreenW, );
    titleScrollView.showsHorizontalScrollIndicator = NO;
    [self.view addSubview:titleScrollView];
    _titleScrollView = titleScrollView;
}
#pragma mark - 添加内容滾動視圖
- (void)setupContentScrollView {
    //建立contentScrollView
    UIScrollView *contentScrollView = [[UIScrollView alloc] init];
    CGFloat y = CGRectGetMaxY(self.titleScrollView.frame);
    contentScrollView.frame = CGRectMake(, y, ScreenW, ScreenH - y);
    contentScrollView.pagingEnabled = YES;
    contentScrollView.showsHorizontalScrollIndicator = NO;
    contentScrollView.bounces = NO;
    contentScrollView.delegate = self;
    [self.view addSubview:contentScrollView];
    _contentScrollView = contentScrollView;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
@end