iOS实现一个简单的页面切换控件

背景

项目需要开发一个游戏类型的壳版本,壳版本的UI已经出来了,剩下的事情就是复制粘贴了,重复的工作太没意思了,不如来点有挑战的,把项目重构一遍吧,顺便复制粘贴下,这样才不会那么枯燥无聊吧。好吧,说干就干,谁叫我姓张呢?项目重构的地方有很多,这次会讲到一个经常用到的页面切换控件的重构以及实现一个简单的Demo,后续会放出一些其他方面重构的实践经验。

结果

项目Demo:PTPageKit
老生常谈没图没真相,还是先上图:

Demo1

Demo2

图片很挫,大概做的就是这么一个东西,上面的切换按钮,下面的是按钮对应的页面。点击按钮,下面的页面会随之变化。

分析

把系统分为三部分,Page 头部Page 内容, Page 中间者,每一部分对应的对输入和输出进行抽象,对各个部分进行组件化。

Header分析

Header的输入(公有接口部分):

  • 选中Header Item
  • 刷新Header视图
  • 滚动到Header某个位置

Header的输出(Delegate和DataSource部分):

  • 已经选中Header Item
  • Header Item的数量
  • Header Item展示的View
  • Header Item的元数据

Body分析

Body的输入(公有接口部分):

  • 选中Body页面
  • 刷新Body视图

Body的输出(Delegate和DataSource部分):

  • 已经滚动到某个Body
  • Body移动到某个位置
  • 有多少个Body
  • Body对应的ViewController

中间者分析

中间者作为了Body和Header的Delegate和DataSource,为Body和Header提供数据并且连接了这两者。中间者隐藏了实现的细节,客户端(使用者)最终只要和中间者交互即可,传递需要的参数交给中间者去处理,中间者会做好子元素的UI渲染和UI交互。

组件图

下面是对这个系统的输入输出进行抽象的组件图。


组件图

Page 头部Page 内容, Page 中间者 这三者依赖于抽象基类,没有依赖具体的实现类,所以他们是相互独立并且可替换的。对于某个具体的实现,客户端(使用者)只要和 Page 中间者 这个对象打交道,传递需要的参数:页面的Header元数据和页面的ViewContoller数组即可,

实现

抽象的基类

抽象的基类是针对组件图的交互实现了一个基本的框架,并不包含任何的UI实现,定义了组件交互的规范。

Body

//
//  PTBasePageBodyView.h
//  PlushGame
//
//  Created by aron on 2017/11/23.
//  Copyright © 2017年 aron. All rights reserved.
//

#import <UIKit/UIKit.h>

@protocol PTPageBodyViewDelegate, PTPageBodyViewDataSource;

@interface PTBasePageBodyView : UIView

@property (nonatomic, weak) id<PTPageBodyViewDelegate> delegate;
@property (nonatomic, weak) id<PTPageBodyViewDataSource> dataSource;

- (void)moveToIndex:(NSInteger)index;

- (void)reloadData;

@end



//______________________________________________________________________________________________________________

@protocol PTPageBodyViewDelegate <NSObject>

- (void)bodyView:(PTBasePageBodyView *)bodyView didSelectItemAtIndex:(NSInteger)index;
- (void)bodyView:(PTBasePageBodyView *)bodyView didScrollWithOffset:(CGFloat)offset;

@end


//_______________________________________________________________________________________________________________

@protocol PTPageBodyViewDataSource <NSObject>

@required

- (NSInteger)numberOfItemsInBodyView:(PTBasePageBodyView *)bodyView;
- (UIViewController *)bodyView:(PTBasePageBodyView *)bodyView viewControllerAtIndex:(NSInteger)index;

@end

Header

//
//  PTBasePageHeaderView.h
//  PlushGame
//
//  Created by aron on 2017/11/23.
//  Copyright © 2017年 aron. All rights reserved.
//

#import <UIKit/UIKit.h>

typedef NS_ENUM(NSInteger, PTPageHeaderStyle) {
    PTPageHeaderStyleDefault = 0,
};

@protocol PTPageHeaderViewDelegate, PTPageHeaderViewDataSource;

@interface PTBasePageHeaderView : UIView

@property (assign, nonatomic) PTPageHeaderStyle headerStyle;
@property (nonatomic, weak) id<PTPageHeaderViewDelegate> delegate;
@property (nonatomic, weak) id<PTPageHeaderViewDataSource> dataSource;

- (void)moveToIndex:(NSInteger)index;
- (void)animateMoveToOffset:(CGFloat)offset;

- (void)reloadData;

- (NSInteger)currentIndex;

@end


//______________________________________________________________________________________________________________

@protocol PTPageHeaderViewDelegate <NSObject>

- (void)headerView:(PTBasePageHeaderView *)headerView didSelectItemAtIndex:(NSInteger)index;

@end


//_______________________________________________________________________________________________________________

@protocol PTPageHeaderViewDataSource <NSObject>

@required

- (NSInteger)numberOfItemsInHeaderView:(PTBasePageHeaderView *)headerView;

@optional
- (UIView *)pageView:(PTBasePageHeaderView *)headerView headerItemViewAtIndex:(NSInteger)index;
- (id)pageView:(PTBasePageHeaderView *)headerView headerItemAtIndex:(NSInteger)index;

@end

中间者
Body.h

//
//  PTBasePageViewController.h
//  PlushGame
//
//  Created by aron on 2017/11/23.
//  Copyright © 2017年 aron. All rights reserved.
//

#import <UIKit/UIKit.h>
#import "PTBasePageHeaderView.h"
#import "PTBasePageBodyView.h"


@protocol PTBasePageViewDataSource <NSObject>

// 需要添加到ViewController的View上,默认的是self.view
- (UIView*)pt_container;

@end

@interface PTBasePageViewController : UIViewController
<PTPageHeaderViewDelegate, PTPageHeaderViewDataSource,
PTPageBodyViewDelegate, PTPageBodyViewDataSource>


@property (nonatomic, weak) id<PTBasePageViewDataSource> dataSource;

@property (nonatomic, strong) PTBasePageHeaderView *headerView;
@property (strong, nonatomic) PTBasePageBodyView *bodyView;

@property (nonatomic, strong) NSArray<id>* pageHeaderTitles;
@property (nonatomic, strong) NSArray<UIViewController*>* pageBodyViewControllers;
@property (nonatomic, assign) NSInteger defaultIndex;

- (void)reloadData;

- (void)preViewDidLoadContainer;
- (UIView*)container;

@end

Body.m

//
//  PTBasePageViewController.m
//  PlushGame
//
//  Created by aron on 2017/11/23.
//  Copyright © 2017年 aron. All rights reserved.
//

#import "PTBasePageViewController.h"

@interface PTBasePageViewController ()

@end

@implementation PTBasePageViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    [self preViewDidLoadContainer];
    [self.container addSubview:self.bodyView];
    [self.container addSubview:self.headerView];
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (void)reloadData {
    [self.headerView reloadData];
    [self.bodyView reloadData];
}

- (void)preViewDidLoadContainer {
    
}

- (UIView*)container {
    UIView* container = nil;
    if ([self.dataSource respondsToSelector:@selector(pt_container)]) {
        container = [self.dataSource pt_container];
    } else {
        container = self.view;
    }
    return container;
}

#pragma mark - ......::::::: Lazy load :::::::......

- (PTBasePageHeaderView *)headerView {
    if (nil == _headerView) {
        _headerView = [[PTBasePageHeaderView alloc] init];
        _headerView.dataSource = self;
        _headerView.delegate = self;
    }
    return _headerView;
}

- (PTBasePageBodyView *)bodyView {
    if (nil == _bodyView) {
        _bodyView = [[PTBasePageBodyView alloc] init];
        _bodyView.dataSource = self;
        _bodyView.delegate = self;
    }
    return _bodyView;
}


#pragma mark - ......::::::: PTPageHeaderViewDelegate, PTPageHeaderViewDataSource :::::::......

- (void)headerView:(PTBasePageHeaderView *)headerView didSelectItemAtIndex:(NSInteger)index {
    [self.bodyView moveToIndex:index];
}

- (NSInteger)numberOfItemsInHeaderView:(PTBasePageHeaderView *)headerView {
    return self.pageHeaderTitles.count;
}

- (UIView *)pageView:(PTBasePageHeaderView *)headerView headerItemViewAtIndex:(NSInteger)index {
    return nil;
}

- (id)pageView:(PTBasePageHeaderView *)headerView headerItemAtIndex:(NSInteger)index {
    return self.pageHeaderTitles[index];
}

#pragma mark - ......::::::: PTPageBodyViewDelegate, PTPageBodyViewDataSource :::::::......

- (void)bodyView:(PTBasePageBodyView *)bodyView didSelectItemAtIndex:(NSInteger)index {
    [self.headerView moveToIndex:index];
}

- (void)bodyView:(PTBasePageBodyView *)bodyView didScrollWithOffset:(CGFloat)offset {
    [self.headerView animateMoveToOffset:offset];
}

- (NSInteger)numberOfItemsInBodyView:(PTBasePageBodyView *)bodyView {
    return self.pageBodyViewControllers.count;
}

- (UIViewController *)bodyView:(PTBasePageBodyView *)bodyView viewControllerAtIndex:(NSInteger)index {
    if (index >= 0 && index < self.pageBodyViewControllers.count) {
        return self.pageBodyViewControllers[index];
    }
    return nil;
}
@end

具体的实现

具体的实现需要继承 PTBasePageBodyView PTBasePageHeaderView PTBasePageViewController 实现一些UI和交互的细节,比如Header中按钮的布局和样式等。可以参考项目中的一个子模块 PTSimplePageKitImpl,打开 Example Demo项目既可以看到效果,具体的实现不在赘述。

后记

项目Demo:PTPageKit

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,600评论 18 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,515评论 25 707
  • 古铜色的陈钟呆呆的在天台伫立 沉默的敲钟人 带着卡西莫多般的面庞 遥望着远方墓地里的野花 钟锤激起的灰尘在疯狂的舞...
    林荔阅读 152评论 0 2
  • 被问了一个很敏感的问题,合情合理地为自己辩解,滔滔不绝又逻辑清晰。 可,哪个才是真的我。 每天的勤恳、上进,占据着...
    记录一些情绪阅读 152评论 0 0
  • 最近在整理课题组编写的书稿,每个人负责一个章节,而我和Z同学负责统稿。下午将老板对G修改的第十章意见反馈给他,...
    凤洹学写作阅读 737评论 2 0