iOS 仿网易新闻结构

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 = tOffset.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 = tOffset.x / ScreenW;;UIButton *leftButton = self.titleButtons[leftI];//2.获得右边按钮NSInteger rightI = leftI + 1;UIButton *rightButton;if (rightI < unt) {rightButton = self.titleButtons[rightI];}// 0 ~ 1 => 1 ~ 1.2CGFloat scaleR = tOffset.x / ScreenW;scaleR -= leftI;CGFloat scaleL = 1 - scaleR;//3.缩放按钮ansform = CGAffineTransformMakeScale(scaleL * 0.2 + 1, scaleL * 0.2 + 1);ansform = CGAffineTransformMakeScale(scaleR * 0.2 + 1, scaleR * 0.2 + 1);//4.颜色渐变UIColor *rightColor = [UIColor colorWithRed:scaleR green:0 blue:0 alpha:1];UIColor *leftColor = [UIColor colorWithRed:scaleL green:0 blue:0 alpha:1];[rightButton setTitleColor:rightColor forState:UIControlStateNormal];[leftButton setTitleColor:leftColor forState:UIControlStateNormal];
}
#pragma mark - 设置所有标题
- (void)setupAllTitle {// 添加所有标题按钮CGFloat btnX = 0;CGFloat btnW = 100;CGFloat btnH = self.titleScrollView.frame.size.height;for (NSInteger i = 0; i < unt; i++) {UIButton *titleButton = [UIButton buttonWithType:UIButtonTypeCustom];titleButton.tag = i;btnX = i * btnW;titleButton.frame = CGRectMake(btnX, 0, 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) {//默认选中第0个标题[self titleButtonClick:titleButton];}}tSize = CGSizeMake(unt * btnW, 0);tSize = CGSizeMake(unt * ScreenW, 0);
}
#pragma mark - 选中按钮
- (void)selectedButton:(UIButton *)button {ansform = CGAffineTransformIdentity;[self.previousClickButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];[button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];//标题居中[self setupTitleCenter:button];//字体缩放ansform = CGAffineTransformMakeScale(1.2, 1.2);self.previousClickButton = button;
}
#pragma mark - 标题居中
- (void)setupTitleCenter:(UIButton *)button {//修改titleScrollView的偏移量CGFloat offSetX = x - ScreenW * 0.5;if (offSetX < 0) {offSetX = 0;}CGFloat maxOffsetX = tSize.width - ScreenW;if (offSetX > maxOffsetX) {offSetX = maxOffsetX;}[self.titleScrollView setContentOffset:CGPointMake(offSetX, 0) 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 = tScrollView.bounds.size.width;CGFloat childViewH = tScrollView.bounds.size.height;;CGFloat childViewX = i * childViewW;childVC.view.frame = CGRectMake(childViewX, 0, childViewW, childViewH);[tScrollView addSubview:childVC.view];
}
#pragma mark - 标题点击
- (void)titleButtonClick:(UIButton *)titleButton {// 1.标题颜色变红[self selectedButton:titleButton];// 2.加载对应子控制器View[self addOneViewController:titleButton.tag];// 3.内容滚动视图滚动到对应的位置tOffset = CGPointMake(titleButton.tag * tScrollView.bounds.size.width, 0);
}
#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 {//创建titleScrollViewUIScrollView *titleScrollView = [[UIScrollView alloc] init];CGFloat y = self.navigationController.navigationBarHidden ? 20 : 64;titleScrollView.frame = CGRectMake(0, y, ScreenW, 44);titleScrollView.showsHorizontalScrollIndicator = NO;[self.view addSubview:titleScrollView];_titleScrollView = titleScrollView;
}
#pragma mark - 添加内容滚动视图
- (void)setupContentScrollView {//创建contentScrollViewUIScrollView *contentScrollView = [[UIScrollView alloc] init];CGFloat y = CGRectGetMaxY(self.titleScrollView.frame);contentScrollView.frame = CGRectMake(0, 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