最近項(xiàng)目中用到了模仿網(wǎng)易新聞的標(biāo)題欄，盡管現(xiàn)在gitHub和code4app上有好多第三方，但是還是想搞清楚是怎么實(shí)現(xiàn)的，特此記錄。有可以滾動(dòng)和不可以滾動(dòng)的。
一 、模仿網(wǎng)易：
效果：
網(wǎng)易.gif
代碼：
#import "WangYiMainVC.h"
#import "OneVC.h"
#import "TwoVC.h"
#import "ThreeVC.h"
#import "FourVC.h"
static CGFloat const labelW = 100;
static CGFloat const radio = 1.3;
@interface WangYiMainVC ()<UIScrollViewDelegate>
@property (nonatomic , weak) UIScrollView *titleScrollView;
@property (weak , nonatomic) UIScrollView *contentScrollView;
@property (nonatomic, weak) UILabel *selLabel;
@property (nonatomic, strong) NSMutableArray *titleLabels;
@end
@implementation WangYiMainVC
/*
網(wǎng)易新聞實(shí)現(xiàn)步驟:
1.搭建結(jié)構(gòu)(導(dǎo)航控制器)
* 自定義導(dǎo)航控制器根控制器NewsViewController
* 搭建NewsViewController界面(上下滾動(dòng)條)
* 確定NewsViewController有多少個(gè)子控制器,添加子控制器
2.設(shè)置上面滾動(dòng)條標(biāo)題
* 遍歷所有子控制器
3.監(jiān)聽滾動(dòng)條標(biāo)題點(diǎn)擊
* 3.1 讓標(biāo)題選中,文字變?yōu)榧t色
* 3.2 滾動(dòng)到對(duì)應(yīng)的位置
* 3.3 在對(duì)應(yīng)的位置添加子控制器view
4.監(jiān)聽滾動(dòng)完成時(shí)候
* 4.1 在對(duì)應(yīng)的位置添加子控制器view
* 4.2 選中子控制器對(duì)應(yīng)的標(biāo)題
*/
// 懶加載
- (NSMutableArray *)titleLabels
{
if (_titleLabels == nil) {
_titleLabels = [NSMutableArray array];
}
return _titleLabels;
}
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"網(wǎng)易";
self.view.backgroundColor = [UIColor whiteColor];
// iOS7會(huì)給導(dǎo)航控制器下所有的UIScrollView頂部添加額外滾動(dòng)區(qū)域
// 不想要添加
self.automaticallyAdjustsScrollViewInsets = NO;
//1.初始化子控制器
[self setUpChildViewControllers];
[self setUpSubViews];
//設(shè)置標(biāo)題欄
[self setUpTitleViews];
}
-(void)setUpSubViews{
//設(shè)置標(biāo)題欄
UIScrollView *titleView = [[UIScrollView alloc] init];
titleView.width = self.view.width;
// titleView.backgroundColor = [UIColor redColor];
titleView.height = 44;
titleView.x = 0;
titleView.y = 64;
self.titleScrollView = titleView;
// 設(shè)置標(biāo)題滾動(dòng)條
NSInteger count = self.childViewControllers.count;
self.titleScrollView.contentSize = CGSizeMake(count * labelW, 0);
self.titleScrollView.showsHorizontalScrollIndicator = NO;
[self.view addSubview:titleView];
UIScrollView *contentView = [[UIScrollView alloc] init];
contentView.width = self.view.width;
// contentView.backgroundColor = [UIColor blueColor];
contentView.height = self.view.height - self.titleScrollView.height - 44;
contentView.x = 0;
contentView.y = self.titleScrollView.height + self.titleScrollView.y;
self.contentScrollView = contentView;
[self.view addSubview:contentView];
// 設(shè)置內(nèi)容滾動(dòng)條
self.contentScrollView.contentSize = CGSizeMake(count * XMGScreenW, 0);
// 開啟分頁(yè)
self.contentScrollView.pagingEnabled = YES;
// 沒有彈簧效果
self.contentScrollView.bounces = NO;
// 隱藏水平滾動(dòng)條
self.contentScrollView.showsHorizontalScrollIndicator = NO;
// 設(shè)置代理
self.contentScrollView.delegate = self;
}
//設(shè)置titleScrollerView
-(void)setUpTitleViews{
NSUInteger count = self.childViewControllers.count;
//設(shè)置標(biāo)題
CGFloat lableX = 0;
CGFloat lableY = 0;
CGFloat lableH = 44;
for ( int i = 0; i<count; i++) {
UILabel *lable =[[UILabel alloc] init];
// lable.backgroundColor = [UIColor redColor];
lableX = i * labelW;
//設(shè)置尺寸
lable.frame = CGRectMake(lableX, lableY, labelW, lableH);
//設(shè)置lable文字
UIViewController *vc = self.childViewControllers[i];
lable.text = vc.title;
// 設(shè)置高亮文字顏色
lable.highlightedTextColor = [UIColor redColor];
// 文字居中
lable.textAlignment = NSTextAlignmentCenter;
// 設(shè)置label的tag
lable.tag = i;
// 添加到titleLabels數(shù)組
[self.titleLabels addObject:lable];
// 添加點(diǎn)按手勢(shì)
lable.userInteractionEnabled = YES;
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(titleClick:)];
[lable addGestureRecognizer:tap];
// 默認(rèn)選中第0個(gè)label
if (i == 0) {
[self titleClick:tap];
}
[self.titleScrollView addSubview:lable];
}
}
// 設(shè)置標(biāo)題居中
- (void)setUpTitleCenter:(UILabel *)centerLabel
{
// 計(jì)算偏移量
CGFloat offsetX = centerLabel.center.x - XMGScreenW * 0.5;
if (offsetX < 0) offsetX = 0;
// 獲取最大滾動(dòng)范圍
CGFloat maxOffsetX = self.titleScrollView.contentSize.width - XMGScreenW;
if (offsetX > maxOffsetX) offsetX = maxOffsetX;
// 滾動(dòng)標(biāo)題滾動(dòng)條
[self.titleScrollView setContentOffset:CGPointMake(offsetX, 0) animated:YES];
}
// 點(diǎn)擊標(biāo)題的時(shí)候就會(huì)調(diào)用
- (void)titleClick:(UITapGestureRecognizer *)tap
{
// NSLog(@"%s",__func__);
// NSLog(@"%@",tap.view);
// 0.獲取選中的label
UILabel *selLabel = (UILabel *)tap.view;
// 1.標(biāo)題顏色變成紅色,設(shè)置高亮狀態(tài)下的顏色
[self selectLabel:selLabel];
// 2.滾動(dòng)到對(duì)應(yīng)的位置
NSInteger index = selLabel.tag;
// 2.1 計(jì)算滾動(dòng)的位置
CGFloat offsetX = index * XMGScreenW;
self.contentScrollView.contentOffset = CGPointMake(offsetX, 0);
// 3.給對(duì)應(yīng)位置添加對(duì)應(yīng)子控制器
[self showVc:index];
// 4.讓選中的標(biāo)題居中
[self setUpTitleCenter:selLabel];
}
// 顯示控制器的view
- (void)showVc:(NSInteger)index
{
CGFloat offsetX = index * XMGScreenW;
UIViewController *vc = self.childViewControllers[index];
// NSLog(@"選中的view===%@===%@",vc.view,[vc.view class]);
// 判斷控制器的view有沒有加載過,如果已經(jīng)加載過,就不需要加載
if (vc.isViewLoaded) return;
[self.contentScrollView addSubview:vc.view];
vc.view.frame = CGRectMake(offsetX, 0, XMGScreenW, XMGScreenH);
}
// 選中l(wèi)abel
- (void)selectLabel:(UILabel *)label
{
// 取消高亮
_selLabel.highlighted = NO;
// 取消形變
_selLabel.transform = CGAffineTransformIdentity;
// 顏色恢復(fù)
_selLabel.textColor = [UIColor blackColor];
// 高亮
label.highlighted = YES;
// 形變
label.transform = CGAffineTransformMakeScale(radio, radio);
_selLabel = label;
}
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
// 計(jì)算滾動(dòng)到哪一頁(yè)
NSInteger index = scrollView.contentOffset.x / scrollView.bounds.size.width;
// 1.添加子控制器view
[self showVc:index];
// 2.把對(duì)應(yīng)的標(biāo)題選中
UILabel *selLabel = self.titleLabels[index];
[self selectLabel:selLabel];
// 3.讓選中的標(biāo)題居中
[self setUpTitleCenter:selLabel];
}
#pragma mark - UIScrollViewDelegate
// scrollView一滾動(dòng)就會(huì)調(diào)用
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
CGFloat curPage = scrollView.contentOffset.x / scrollView.bounds.size.width;
// 左邊label角標(biāo)
NSInteger leftIndex = curPage;
// 右邊的label角標(biāo)
NSInteger rightIndex = leftIndex + 1;
// 獲取左邊的label
UILabel *leftLabel = self.titleLabels[leftIndex];
// 獲取右邊的label
UILabel *rightLabel;
if (rightIndex < self.titleLabels.count - 1) {
rightLabel = self.titleLabels[rightIndex];
}
// 計(jì)算下右邊縮放比例
CGFloat rightScale = curPage - leftIndex;
// NSLog(@"rightScale--%f",rightScale);
// 計(jì)算下左邊縮放比例
CGFloat leftScale = 1 - rightScale;
// NSLog(@"leftScale--%f",leftScale);
// 0 ~ 1
// 1 ~ 2
// 左邊縮放
leftLabel.transform = CGAffineTransformMakeScale(leftScale * 0.3 + 1, leftScale * 0.3+ 1);
// 右邊縮放
rightLabel.transform = CGAffineTransformMakeScale(rightScale * 0.3 + 1, rightScale * 0.3+ 1);
// 設(shè)置文字顏色漸變
/*
R G B
黑色 0 0 0
紅色 1 0 0
*/
leftLabel.textColor = [UIColor colorWithRed:leftScale green:0 blue:0 alpha:1];
rightLabel.textColor = [UIColor colorWithRed:rightScale green:0 blue:0 alpha:1];
// NSLog(@"%f",curPage);
}
#warning 1.添加所有子控制器對(duì)應(yīng)標(biāo)題
-(void)setUpChildViewControllers
{
OneVC *hotVC = [[OneVC alloc] init];
hotVC.title = @"熱點(diǎn)";
[self addChildViewController:hotVC];
TwoVC *societyVC = [[TwoVC alloc] init];
societyVC.title = @"社會(huì)";
[self addChildViewController:societyVC];
ThreeVC *entertainmentVC = [[ThreeVC alloc] init];
entertainmentVC.title = @"娛樂";
[self addChildViewController:entertainmentVC];
FourVC *sportsVC = [[FourVC alloc] init];
sportsVC.title = @"體育";
[self addChildViewController:sportsVC];
FourVC *sportsVC1 = [[FourVC alloc] init];
sportsVC1.title = @"體育";
[self addChildViewController:sportsVC1];
FourVC *sportsVC2 = [[FourVC alloc] init];
sportsVC2.title = @"體育";
[self addChildViewController:sportsVC2];
}
類百思：
效果圖：
百思.gif
代碼：
#import "mainVC.h"
#import "OneVC.h"
#import "TwoVC.h"
#import "ThreeVC.h"
#import "FourVC.h"
@interface mainVC ()<UIScrollViewDelegate>
/** 頂部的所有標(biāo)簽 */
@property (nonatomic , weak) UIView *titlesView;
/** 標(biāo)簽欄底部的紅色指示器 */
@property (nonatomic, weak) UIView *indicatorView;
/** 當(dāng)前選中的按鈕 */
@property (nonatomic, weak) UIButton *selectedButton;
/*底部的所有View*/
@property (nonatomic , strong) UIScrollView *contentView;
@end
@implementation mainVC
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
self.title = @"百思";
//1.初始化子控制器
[self setUpChildViewControllers];
//2. 設(shè)置頂部的標(biāo)簽欄
[self setupTitlesView];
//3. 底部的scrollView
[self setupContentView];
}
-(void)setupTitlesView{
UIView *titlesView = [[UIView alloc] init];
titlesView.backgroundColor = [[UIColor whiteColor] colorWithAlphaComponent:0.7];
titlesView.width = self.view.width;
titlesView.height = 35;
titlesView.y = 64;
[self.view addSubview:titlesView];
self.titlesView = titlesView;
// 底部指示器
UIView *indicatorView = [[UIView alloc] init];
indicatorView.backgroundColor = [UIColor redColor];
indicatorView.height = 2;
indicatorView.y = titlesView.height - indicatorView.height;
self.indicatorView = indicatorView;
CGFloat width = titlesView.width /self.childViewControllers.count;
CGFloat height = titlesView.height;
for (NSInteger i = 0; i<self.childViewControllers.count; i++) {
UIButton *button = [[UIButton alloc] init];
button.height = height;
button.width = width;
button.x = i * width;
UIViewController *vc = self.childViewControllers[i];
[button setTitle:vc.title forState:UIControlStateNormal];
[button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor blueColor] forState:UIControlStateDisabled];
button.titleLabel.font = [UIFont systemFontOfSize:16];
[button addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside];
[titlesView addSubview:button];
button.tag = i;
// 默認(rèn)點(diǎn)擊了第一個(gè)按鈕
if (i == 0) {
button.enabled = NO;
self.selectedButton = button;
// 讓按鈕內(nèi)部的label根據(jù)文字內(nèi)容來計(jì)算尺寸
[button.titleLabel sizeToFit];
self.indicatorView.width = button.titleLabel.width;
self.indicatorView.centerX = button.centerX;
}
}
[titlesView addSubview:indicatorView];
}
- (void)titleClick:(UIButton *)button
{
// 修改按鈕狀態(tài)
self.selectedButton.enabled = YES;
button.enabled = NO;
self.selectedButton = button;
// 動(dòng)畫
[UIView animateWithDuration:0.25 animations:^{
self.indicatorView.width = button.titleLabel.width;
self.indicatorView.centerX = button.centerX;
}];
//
//滾動(dòng)
CGPoint offset = self.contentView.contentOffset;
offset.x = button.tag * self.contentView.width;
[self.contentView setContentOffset:offset animated:YES];
}
//初始化子控制器
-(void)setUpChildViewControllers
{
OneVC *hotVC = [[OneVC alloc] init];
hotVC.title = @"熱點(diǎn)";
[self addChildViewController:hotVC];
TwoVC *societyVC = [[TwoVC alloc] init];
societyVC.title = @"社會(huì)";
[self addChildViewController:societyVC];
ThreeVC *entertainmentVC = [[ThreeVC alloc] init];
entertainmentVC.title = @"娛樂";
[self addChildViewController:entertainmentVC];
FourVC *sportsVC = [[FourVC alloc] init];
sportsVC.title = @"體育";
[self addChildViewController:sportsVC];
}
-(void)setupContentView
{
// 不要自動(dòng)調(diào)整inset
self.automaticallyAdjustsScrollViewInsets = NO;
UIScrollView *contentView = [[UIScrollView alloc] init];
contentView.frame = self.view.bounds;
contentView.delegate = self;
contentView.pagingEnabled = YES;//設(shè)置分頁(yè)
[self.view insertSubview:contentView atIndex:0];
//設(shè)置scrollerView的大小
contentView.contentSize = CGSizeMake(contentView.size.width * self.childViewControllers.count, 0);
self.contentView = contentView;
//添加第一個(gè)子控制器
[self scrollViewDidEndScrollingAnimation:contentView];
}
- (void)tagClick
{
NSLog(@"點(diǎn)擊了");
}
#pragma mark - <UIScrollViewDelegate>
-(void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
//滾動(dòng)結(jié)束操作，添加自控制器的view
NSInteger index = scrollView.contentOffset.x /scrollView.width;
// UITableViewController *vc = self.childViewControllers[index];
UIViewController *vc = self.childViewControllers[index];
vc.view.x = scrollView.contentOffset.x;
vc.view.y = 0;//設(shè)置控制器view的y值為0(默認(rèn)是20)
vc.view.height = scrollView.height;// 設(shè)置控制器view的height值為整個(gè)屏幕的高度(默認(rèn)是比屏幕高度少個(gè)20)
[scrollView addSubview:vc.view];
}
//滑動(dòng)之后結(jié)束
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self scrollViewDidEndScrollingAnimation:scrollView];
//點(diǎn)擊按鈕
NSInteger index = scrollView.contentOffset.x /scrollView.width;
[self titleClick:self.titlesView.subviews[index]];
NSLog(@"titileView的個(gè)數(shù)------%lu",(unsigned long)self.titlesView.subviews.count);
}
@end
二、父子控制器：
利用父子控制器來進(jìn)行視圖的切換。
效果：
父子控制器.gif
代碼：
#import "ViewController.h"
#import <Foundation/Foundation.h>
#import "SocietyViewController.h"
#import "TopLineViewController.h"
#import "HotViewController.h"
/*
多控制器:當(dāng)有很多控制器,交給一個(gè)大控制器管理
父子控制器:導(dǎo)航控制器,UITabBarControler
父子控制器本質(zhì):搞一個(gè)控制器容器,管理很多子控制器.
模仿UITabBarControler,寫一個(gè)自己的UITabBarControler,條在上面.
任何控制器都可以是一個(gè)容器控制器.因?yàn)槿魏慰刂破鞫伎梢哉{(diào)用addChildViewController
*/
@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIButton *societyBtn;
@property (weak, nonatomic) IBOutlet UIButton *topLineBtn;
@property (weak, nonatomic) IBOutlet UIButton *hotBtn;
@property (nonatomic, strong) SocietyViewController *societyVc;
@property (nonatomic, strong) TopLineViewController *topLineVc;
@property (nonatomic, strong) HotViewController *hotVc;
@end
@implementation ViewController
// 父子控制器:如果一個(gè)控制器的view顯示,那么這個(gè)控制器必須存在
// 顯示社會(huì)界面
- (IBAction)showSociety:(id)sender {
// 1.創(chuàng)建控制器
if (_societyVc == nil) {
SocietyViewController *society = [[SocietyViewController alloc] init];
_societyVc = society;
}
[self.view addSubview:_societyVc.view];
// 移除其他控制器的view
[_topLineVc.view removeFromSuperview];
[_hotVc.view removeFromSuperview];
// 控制器的view在,控制器被銷毀.
// 控制器不存在,控制器的view也是可以存在
// 當(dāng)控制器view存在,控制器不存在,會(huì)導(dǎo)致控制器view上面的所有事件都不能處理
// ARC管理原則:只要一個(gè)對(duì)象沒有被強(qiáng)引用,就會(huì)被銷毀
}
// 顯示頭條
- (IBAction)showTopLine:(id)sender {
if (_topLineVc == nil) {
TopLineViewController *topLine = [[TopLineViewController alloc] init];
_topLineVc = topLine;
}
[self.view addSubview:_topLineVc.view];
// 移除其他控制器的view
[_societyVc.view removeFromSuperview];
[_hotVc.view removeFromSuperview];
}
// 顯示熱點(diǎn)
- (IBAction)showHot:(id)sender {
if (_hotVc == nil) {
HotViewController *hot = [[HotViewController alloc] init];
_hotVc = hot;
}
[self.view addSubview:_hotVc.view];
// 移除其他控制器的view
[_societyVc.view removeFromSuperview];
[_topLineVc.view removeFromSuperview];
}
/*
存放問題:
1.每次都需要?jiǎng)?chuàng)建控制器
2.每次都會(huì)添加界面,只是想顯示當(dāng)前顯示view,其他view移除
3.每次控制器都會(huì)銷毀,就不能處理控制器view上面的事件
*/
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
// 設(shè)置按鈕標(biāo)題
[_societyBtn setTitle:@"社會(huì)" forState:UIControlStateNormal];
[_topLineBtn setTitle:@"頭條" forState:UIControlStateNormal];
[_hotBtn setTitle:@"熱點(diǎn)" forState:UIControlStateNormal];
}
利用autoLayout來進(jìn)行三平分視圖：
三等分view.gif
思路：
1、底部設(shè)置一個(gè)view，設(shè)置限制
2、拖3個(gè)button放在view上
3、設(shè)置第一個(gè)button的contains為：左：0 上：0 右：0 下：0
4、設(shè)置第二個(gè)button的contains為：上：0 右：0 與第一個(gè)button等寬等高
5、設(shè)置第三個(gè)button的contains為：上：0 右：0 與第二個(gè)button等寬等高
