同一個介面多個子控制器切換檢視
阿新 • • 發佈:2019-02-13
先看示例:
EssenceViewController為父控制器。
AllViewController =》全部
VideoViewController =》視訊
VoiceViewController =》聲音
PictureViewController =》圖片
WordViewController =》段子
一、分析
1.頂部選單欄
大的UIView裡包含 一個子UIView(選單選中的底部指示器)和5個選單UIButton。
2.中間內容區域是UIScrollView。點選不同選單切換子控制器,滾動scrollView也要切換,並且選單欄也跟著切換。
二、詳細看程式碼
//
// EssenceViewController.m
#import "EssenceViewController.h"
#import "RecommendTagsViewController.h"
#import "AllViewController.h"
#import "VideoViewController.h"
#import "VoiceViewController.h"
#import "PictureViewController.h"
#import "WordViewController.h"
@interface EssenceViewController ()<UIScrollViewDelegate>
/**
* 標籤底部紅色指示器
*/
@property(nonatomic,weak)UIView *indicatorView;
/**
* 當前選中的頂部標籤內部的按鈕
*/
@property(nonatomic,weak)UIButton *selectedButton;
/**
* 頂部所有標籤的view
*/
@property(nonatomic,weak)UIView *titlesView;
/**
* 內容檢視
*/
@property(nonatomic,weak)UIScrollView *contentView;
@end
@implementation EssenceViewController
- (void )viewDidLoad {
[super viewDidLoad];
// 設定導航欄
[self setupNav];
// 初始化所有子控制器
[self setupChildVces];
// 設定頂部的標籤欄
[self setupTitlesView];
// 底部cententView
[self setupContentView];
}
/**
* 初始化所有子控制器
*/
- (void)setupChildVces
{
AllViewController *all = [[AllViewController alloc] init];
[self addChildViewController:all];
VideoViewController *video = [[VideoViewController alloc]init];
[self addChildViewController:video];
VoiceViewController *voice = [[VoiceViewController alloc] init];
[self addChildViewController:voice];
PictureViewController *picture = [[PictureViewController alloc] init];
[self addChildViewController:picture];
WordViewController *word = [[WordViewController alloc] init];
[self addChildViewController:word];
}
/**
* 底部cententView
*/
- (void)setupContentView
{
// 不要自動調整inset
self.automaticallyAdjustsScrollViewInsets = NO;
UIScrollView *contentView = [[UIScrollView alloc] init];
contentView.frame = self.view.bounds;
contentView.delegate = self;
contentView.pagingEnabled = YES;
[self.view insertSubview:contentView atIndex:0];
contentView.contentSize = CGSizeMake(contentView.width * self.childViewControllers.count, 0);
self.contentView = contentView;
// 新增第一個控制器的view
[self scrollViewDidEndScrollingAnimation:contentView];
}
/**
* 設定頂部的標籤欄
*/
- (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.tag = -1;
indicatorView.y = titlesView.height - indicatorView.height;
self.indicatorView = indicatorView;
// 內部子標籤
NSArray *titles = @[@"全部 ",@"視訊",@"聲音",@"圖片",@"段子"];
CGFloat height = titlesView.height;
CGFloat width = titlesView.width / titles.count;
for (NSInteger i=0; i<titles.count; i++) {
UIButton *button = [[UIButton alloc] init];
button.tag = i;
button.height = height;
button.width = width;
button.x = i * button.width;
[button setTitle:titles[i] forState:UIControlStateNormal];
[button layoutIfNeeded]; // 強制佈局(強制更新子控制元件的frame)
[button setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor redColor] forState:UIControlStateDisabled];
button.titleLabel.font = [UIFont systemFontOfSize:14];
[button addTarget:self action:@selector(titleClick:) forControlEvents:UIControlEventTouchUpInside];
[titlesView addSubview:button];
// 預設點選了第一個按鈕
if (i == 0) {
button.enabled = NO;
self.selectedButton = button;
// 讓按鈕內部的label根據文字內容計算尺寸
[button.titleLabel sizeToFit];
self.indicatorView.width = button.titleLabel.width;
self.indicatorView.centerX = button.centerX;
}
}
// indicatorView最後才新增到titlesView裡
// 為了後面從titlesView取button方便
[titlesView addSubview:indicatorView];
}
/**
* 點選了標籤欄裡的按鈕
*/
- (void)titleClick:(UIButton *)button
{
// 修改按鈕的狀態
self.selectedButton.enabled = YES;
button.enabled = NO;
self.selectedButton = button;
// 讓標籤執行動畫
[UIView animateWithDuration:.025 animations:^{
self.indicatorView.width = self.selectedButton.titleLabel.width;
self.indicatorView.centerX = self.selectedButton.centerX;
}];
// 滾動contentView
CGPoint offset = self.contentView.contentOffset;
offset.x = button.tag * self.contentView.width;
[self.contentView setContentOffset:offset animated:YES];
}
/**
* 設定導航欄
*/
- (void)setupNav
{
// 設定導航欄標題
self.navigationItem.titleView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"MainTitle"]];
// 設定導航欄左邊的按鈕
self.navigationItem.leftBarButtonItem = [UIBarButtonItem itemWithImage:@"MainTagSubIcon" highImage:@"MainTagSubIconClick" target:self action:@selector(tagButtonClick)];
// 設定背景色
self.view.backgroundColor = GlobalBgColor;
}
/**
* 點選了導航欄左邊的按鈕
*/
- (void)tagButtonClick
{
RecommendTagsViewController *vc = [[RecommendTagsViewController alloc] init];
[self.navigationController pushViewController:vc animated:YES];
}
#pragma mark - <UIScrollViewDelegate>
/**
* 滾動完畢就會呼叫(如果不是人為拖拽scrollView導致滾動完畢,才會呼叫這個方法
*/
- (void)scrollViewDidEndScrollingAnimation:(UIScrollView *)scrollView
{
// 當前的索引
NSInteger index = scrollView.contentOffset.x / scrollView.width;
// 取出子控制器
UITableViewController *vc = self.childViewControllers[index];
vc.view.x = scrollView.contentOffset.x;
vc.view.y = 0; //設定控制器view的y值為0(預設是20)
vc.view.height = scrollView.height; //設定控制器view的height值為整個螢幕的高度(預設是比螢幕高度少20)
// 設定內邊距
CGFloat top = CGRectGetMaxY(self.titlesView.frame);
CGFloat bottom = self.tabBarController.tabBar.height;
vc.tableView.contentInset = UIEdgeInsetsMake(top, 0, bottom, 0);
// 設定滾動條的內邊距
vc.tableView.scrollIndicatorInsets = vc.tableView.contentInset;
[scrollView addSubview:vc.view];
}
/**
* 在scrollview停止滑動的時候執行
*/
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
[self scrollViewDidEndScrollingAnimation:scrollView];
// 點選選單按鈕
NSInteger index = scrollView.contentOffset.x / scrollView.width;
[self titleClick:self.titlesView.subviews[index]];
}
@end
三、其他
上面程式碼還用到一個UIView分類:
//
// UIView+Extension.h
// 封裝frame的修改
#import <UIKit/UIKit.h>
@interface UIView (Extension)
@property(nonatomic,assign)CGSize size;
@property(nonatomic,assign)CGFloat width;
@property(nonatomic,assign)CGFloat height;
@property(nonatomic,assign)CGFloat x;
@property(nonatomic,assign)CGFloat y;
@property(nonatomic,assign)CGFloat centerX;
@property(nonatomic,assign)CGFloat centerY;
/*
在分類中宣告@property,只會生成方法的宣告,不會生成方法的實現和帶有_下劃線的成員變數
*/
@end
//
// UIView+Extension.m
#import "UIView+Extension.h"
@implementation UIView (Extension)
- (void)setSize:(CGSize)size {
CGRect frame = self.frame;
frame.size = size;
self.frame = frame;
}
- (CGSize)size {
return self.frame.size;
}
- (void)setWidth:(CGFloat)width {
CGRect frame = self.frame;
frame.size.width = width;
self.frame = frame;
}
- (CGFloat)width {
return self.frame.size.width;
}
- (void)setHeight:(CGFloat)height {
CGRect frame = self.frame;
frame.size.height = height;
self.frame = frame;
}
- (CGFloat)height {
return self.frame.size.height;
}
- (void)setX:(CGFloat)x {
CGRect frame = self.frame;
frame.origin.x = x;
self.frame = frame;
}
- (CGFloat)x {
return self.frame.origin.x;
}
- (void)setY:(CGFloat)y {
CGRect frame = self.frame;
frame.origin.y = y;
self.frame = frame;
}
- (CGFloat)y {
return self.frame.origin.y;
}
- (void)setCenterX:(CGFloat)centerX
{
CGPoint center = self.center;
center.x = centerX;
self.center = center;
}
- (CGFloat)centerX
{
return self.center.x;
}
- (void)setCenterY:(CGFloat)centerY
{
CGPoint center = self.center;
center.y = centerY;
self.center = center;
}
- (CGFloat)centerY
{
return self.center.y;
}
@end