-
網(wǎng)易新聞的頭部點擊切換不同界面主要運用到了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;
/** 按鈕數(shù)組 */
@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新聞";
// 不需要額外的滾動區(qū)域
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];
// 監(jiān)聽
[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);
}
// 監(jiān)聽按鈕點擊 切換文字顏色
- (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];
// 點擊按鈕就跳轉(zhuǎn)到當前的控制器
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 ============
/**
* 監(jiān)聽滑動，切換界面。還有切換按鈕
*/
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
// 1.取得角標
int index = (int)scrollView.contentOffset.x/screenW;
// 2.切換View
[self setUPOneChildViewController:index];
// 3.切換到選中的按鈕
[self btnClick:self.titleButtons[index]];
}
/**
* 監(jiān)聽滑動，來個漸變過程
*/
- (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比較麻煩，于是網(wǎng)上找了一個類似的效果圖在(注：本文代碼默認選中的titleButton會居中顯示)，如下：
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
