-
网易新闻的头部点击切换不同界面主要运用到了iOS中父子控制器知识点。
// ViewController.m
// 01-MG新闻
//
// Created by ming on 15/12/13.
// Copyright © 2015年 ming. All rights reserved.
#import "ViewController.h"
#import "HotViewController.h"
#import "ReaderVeiwController.h"
#import "ScienceVeiwController.h"
#import "SocietyVeiwController.h"
#import "TopVeiwController.h"
#import "VideoVeiwController.h"
#define screenW [UIScreen mainScreen].bounds.size.width
#define screenH [UIScreen mainScreen].bounds.size.height
@interface ViewController ()<UIScrollViewDelegate>
/** titleScrollView */
@property (nonatomic,weak) UIScrollView *titleScrollView;
/** contentScrollView */
@property (nonatomic,weak) UIScrollView *contentScrollView;
/** 按钮数组 */
@property (nonatomic,strong) NSMutableArray *titleButtons;
/** 选中按钮 */
@property (nonatomic,weak) UIButton *seltitleButton;
@end
#pragma mark ========= 常量 ============
CGFloat const LYMNavHeight = 64;
CGFloat const titleScrollViewH = 44;
static CGFloat const maxTitleScale = 1.35;
@implementation ViewController
#pragma mark ========= 懒加载 ============
- (NSMutableArray *)titleButtons{
if (!_titleButtons) {
_titleButtons = [NSMutableArray array];
}
return _titleButtons;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"MG新闻";
// 不需要额外的滚动区域
self.automaticallyAdjustsScrollViewInsets = NO;
// 1.初始化标题TitleScrollView
[self setUPTittelscrollView];
// 2.初始化标题ContentlscrollView
[self setUPContentlscrollView];
// 3.初始化所有的子控制器
[self setUPAllChildViewController];
// 4.添加所有标题按钮
[self setupAllTitleButton];
}
#pragma mark ========= 初始化标题TitleScrollView ============
// 1.初始化标题TitleScrollView
- (void)setUPTittelscrollView{
UIScrollView *titleScrollView = [[UIScrollView alloc] init];
CGRect frame = titleScrollView.frame;
frame.origin.y = LYMNavHeight;
frame.size.width = screenW;
frame.size.height = titleScrollViewH;
titleScrollView.frame = frame;
titleScrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:titleScrollView];
self.titleScrollView = titleScrollView;
titleScrollView.backgroundColor = [UIColor grayColor];
}
// 添加所有标题按钮
- (void)setupAllTitleButton{
CGFloat buttonW = 100;
CGFloat buttonH = titleScrollViewH;
CGFloat buttonX = 0;
CGFloat buttonY = 0;
NSInteger count = self.childViewControllers.count;
for (int i = 0; i<count; i++) {
UIButton *titleBtn = [[UIButton alloc] init];
// 绑定tag
titleBtn.tag = i;
// 设置尺寸
buttonX = i * buttonW;
titleBtn.frame = CGRectMake( buttonX, buttonY, buttonW, buttonH);
// 设置文字
[titleBtn setTitle:self.childViewControllers[i].title forState:UIControlStateNormal];
[titleBtn setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
// 监听
[titleBtn addTarget:self action:@selector(titleBtnClick:) forControlEvents:UIControlEventTouchDown];
[self.titleScrollView addSubview:titleBtn];
[self.titleButtons addObject:titleBtn];
// 默认第一个为选中按钮
if (i == 0) {
[self btnClick:titleBtn];
}
}
// 设置titleScrollView的滚动范围
self.titleScrollView.contentSize = CGSizeMake(count * buttonW, 0);
self.contentScrollView.contentSize = CGSizeMake(count * screenW, 0);
}
// 监听按钮点击 切换文字颜色
- (void)titleBtnClick:(UIButton *)btn{
[self btnClick:btn];
// 点击按钮，加载对应的View
NSInteger j = btn.tag;
// 计算每一个View的位置
[self setUPOneChildViewController:j];
}
- (void)btnClick:(UIButton *)btn{
// 三部曲
[self.seltitleButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
// 之前选中的恢复原样
self.seltitleButton.transform = CGAffineTransformIdentity;
[btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
// 当前选中的放大
btn.transform = CGAffineTransformMakeScale(maxTitleScale, maxTitleScale);
[self setselButtonOnCenter:btn];
self.seltitleButton = btn;
}
#pragma mark ========= 初始化标题子控制器 ============
- (void)setUPOneChildViewController:(NSInteger)j{
// 获取对应控制器
UIViewController *vc = self.childViewControllers[j];
CGFloat x = j * screenW;
CGFloat y = 0;
CGFloat width = screenW;
CGFloat height = self.contentScrollView.frame.size.height;
vc.view.frame = CGRectMake(x, y, width, height);
[self.contentScrollView addSubview:vc.view];
// 点击按钮就跳转到当前的控制器
self.contentScrollView.contentOffset = CGPointMake(j * screenW, 0);
}
#pragma mark ========= 初始化标题ContentlscrollView ============
// 2.初始化标题ContentlscrollView
- (void)setUPContentlscrollView{
UIScrollView *contentScrollView = [[UIScrollView alloc] init];
CGRect frame = contentScrollView.frame;
frame.origin.y = CGRectGetMaxY(self.titleScrollView.frame);
frame.size.width = screenW;
frame.size.height = screenH - frame.origin.y;
contentScrollView.frame = frame;
// 开启分页功能
contentScrollView.pagingEnabled = YES;
// 隐藏水平条
contentScrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:contentScrollView];
self.contentScrollView = contentScrollView;
// 设置代理
contentScrollView.delegate = self;
// contentScrollView.backgroundColor = [UIColor yellowColor];
}
#pragma mark ========= UIScrollViewDelegate ============
/**
* 监听滑动，切换界面。还有切换按钮
*/
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
// 1.取得角标
int index = (int)scrollView.contentOffset.x/screenW;
// 2.切换View
[self setUPOneChildViewController:index];
// 3.切换到选中的按钮
[self btnClick:self.titleButtons[index]];
}
/**
* 监听滑动，来个渐变过程
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat offsetX = scrollView.contentOffset.x;
// 1.取得角标
int indexL = (int)offsetX/screenW;
int indexR = indexL + 1;
// 2.取得左边的按钮
UIButton *leftButton = self.titleButtons[indexL];
UIButton *rightButton = nil;
if (indexR < self.titleButtons.count) {
// 取得左边的按钮
rightButton = self.titleButtons[indexR];
}
// 2.让按钮缩放,计算缩放比例
CGFloat scaleR = (offsetX/screenW - indexL);
CGFloat scaleL = 1 - scaleR;
CGFloat transformScale = maxTitleScale - 1;
// 2.1 让左边按钮缩放
leftButton.transform = CGAffineTransformMakeScale(transformScale * scaleL + 1, transformScale * scaleL + 1);
// 2.2 让右边按钮缩放
rightButton.transform = CGAffineTransformMakeScale(transformScale * scaleR + 1, transformScale * scaleR + 1);
// 3.让按钮颜色渐变
// RGB
// 黑色:0 0 0
// 白色:1 1 1
// 红色:1 0 0
// 黑色 -> 红色 R:0 -> 1
// 红色 -> 黑色 R:1 -> 0
UIColor *leftColor = [UIColor colorWithRed:scaleL green:0 blue:0 alpha:1];
UIColor *rightColor = [UIColor colorWithRed:0 green:scaleR blue:0 alpha:1];
// 3.1 让左边按钮的颜色
[leftButton setTitleColor:leftColor forState:UIControlStateNormal];
// 3.2 让左边按钮的颜色
[rightButton setTitleColor:rightColor forState:UIControlStateNormal];
}
#pragma mark ========= 让选中按钮居中显示的方法 ============
- (void)setselButtonOnCenter:(UIButton *)btn{
CGFloat offsetX = btn.center.x - 0.5 * screenW;
if (offsetX < 0) {
offsetX = 0;
}
CGFloat maxOffsetX = self.titleScrollView.contentSize.width - screenW;
if (offsetX > maxOffsetX) {
offsetX = maxOffsetX;
}
[self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}
#pragma mark ========= 初始化所有的子控制器 ============
// 3.初始化所有的子控制器
- (void)setUPAllChildViewController{
// 头条
TopVeiwController *toptVC = [[TopVeiwController alloc] init];
toptVC.title = @"头条";
[self addChildViewController:toptVC];
// 热点
HotViewController *hotVC = [[HotViewController alloc] init];
hotVC.title = @"热点";
[self addChildViewController:hotVC];
// 视频
VideoVeiwController *videoVC = [[VideoVeiwController alloc] init];
videoVC.title = @"视频";
[self addChildViewController:videoVC];
// 社会
SocietyVeiwController *scoietyVC = [[SocietyVeiwController alloc] init];
scoietyVC.title = @"社会";
[self addChildViewController:scoietyVC];
// 订阅
ReaderVeiwController *readerVC = [[ReaderVeiwController alloc] init];
readerVC.title = @"订阅";
[self addChildViewController:readerVC];
// 科技
ScienceVeiwController *scienceVC = [[ScienceVeiwController alloc] init];
scienceVC.title = @"科技";
[self addChildViewController:scienceVC];
}
@end```
- ###效果：由于制作GIF比较麻烦，于是网上找了一个类似的效果图在(注：本文代码默认选中的titleButton会居中显示)，如下：
