1. 程式人生 > >同一個介面多個子控制器切換檢視

同一個介面多個子控制器切換檢視

先看示例:
這裡寫圖片描述
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