近段时间项目终于告一段落，本小猿也算是得以喘口气，轻松一下乐呵乐呵啦，所以写个Demo聊表心意。哈哈，不说废话了，进入正题：
Demo传输门：FrankDragChangeDemo
此次的Demo介绍的主要功能是仿 京东商品详情页中，上拉查看图文详情的切换功能，通过自己的理解对这个功能进行了一个简单的封装：
好处：
1：使用简单，只需要调用代理方法即可配置使用；
2：可定制型强，因为封装时将模块进行拆分，使用时可完全根据自己的业务需求进行设置每个模块
接下来就简单看一下代码逻辑啦：
架构文件.png
其实该Demo实现的拖动切换效果并不复杂，实现方式也是非常常见，核心代码是通过修改 UIScrollView 的
contentOffset属性完成的，核心代码为：
/**
显示顶部视图
*/
- (void)showTopPageViewWithCompleteBlock:(void (^)())completeBlock{
[self setContentOffset:(CGPoint){0,0} animated:YES];
if (self.needShowAlertView) {
self.middleLabel.hidden = NO;
}
if (completeBlock) {
completeBlock();
}
}
/**
显示底部视图
*/
- (void)showBottomPageViewWithCompleteBlock:(void (^)())completeBlock{
[self setContentOffset:(CGPoint){0,CGRectGetHeight(self.bounds)/2 - self.topHeight} animated:YES];
if (self.needShowAlertView) {
self.middleLabel.hidden = YES;
}
if (completeBlock) {
completeBlock();
}
}
下面看一下每个文件的大体结构：
1、FrankDropBounsView.h文件主要提供了两个属性和三个方法
FrankDropBounsView.png
2、FrankDetailDropDelegate.h文件主要提供的是自定义配置的三个代理方法
FrankDetailDropDelegate.png
3、
FrankPagesView.h文件主要提供了一个创建方法
FrankPagesView.png
内部的具体定制是通过
FrankDetailDropDelegate中下列两个代理方法完成配置的
/**
配置toolbar的名字
@return 返回名字数组
*/
- (NSArray *)resetToolbarTitles;
/**
配置底部视图
@param index 对应的索引
*/
- (UIView *)resetBottomViewsWithIndex:(NSInteger)index;
4、FrankMiddleToolbar.h文件主要是对标题条目功能进行了一个简单的封装实现，效果如下：
FrankToolbar.png
FrankMiddleToolbar代码.png
以上是对本Demo功能封装架构的一个简单介绍，下面是定制使用的一个简单实例，
ViewController.h中代码如下：
#import "ViewController.h"
#import "FrankDefineHeader.h"
#import "MJRefresh.h"
@interface ViewController ()<FrankDetailDropDelegate>
@property (nonatomic, strong) FrankDropBounsView * dropView;
@property (nonatomic, strong) UILabel * tabbarView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.dropView];
[self.view addSubview:self.tabbarView];
}
- (UILabel *)tabbarView{
if (!_tabbarView) {
_tabbarView = [[UILabel alloc] initWithFrame:CGRectMake(0, CGRectGetHeight(self.view.frame) - 50, CGRectGetWidth(self.view.frame), 50)];
_tabbarView.backgroundColor = [UIColor whiteColor];
_tabbarView.text = @"这里定义操作界面";
_tabbarView.textAlignment = NSTextAlignmentCenter;
}
return _tabbarView;
}
- (FrankDropBounsView *)dropView{
if (!_dropView) {
CGFloat height = CGRectGetHeight(self.view.frame) - CGRectGetHeight(self.tabbarView.frame) - 64;
_dropView = [FrankDropBounsView createFrankDropBounsViewWithFrame:CGRectMake(0, 64, CGRectGetWidth(self.view.frame), height) withDelegate:self];
_dropView.needShowAlertView = NO;// 设置是否显示提示文字
_dropView.alertTitle = @"这是一个自定义的文字提示";
}
return _dropView;
}
- (void)pullDownToReloadData:(MJRefreshNormalHeader *)table{
NSLog(@"--- 下拉");
[self.dropView showTopPageViewWithCompleteBlock:^{
[table endRefreshing];
}];
}
- (void)pullUpToReloadMoreData:(MJRefreshBackNormalFooter *)table{
NSLog(@"--- 上拉");
[self.dropView showBottomPageViewWithCompleteBlock:^{
[table endRefreshing];
}];
}
#pragma mark --------- TripDetailDropDelegate -------------
/**
自定义上部展示视图模块 代理方法
*/
- (UIView *)frankDropBounsViewResetTopView{
UITableView * view = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
view.backgroundColor = [UIColor redColor];
view.mj_footer = [MJRefreshBackNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(pullUpToReloadMoreData:)];
return view;
}
#pragma mark --------- TripDetailDropDelegate -------------
/**
自定义切换标题模块 代理方法
*/
- (NSArray *) resetToolbarTitles{
return @[@"产品详情",@"用户评价(0)",@"费用及须知"];
}
/**
自定义底部展示视图模块 代理方法
*/
- (UIView *)resetBottomViewsWithIndex:(NSInteger)index{
UITableView * view = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
view.backgroundColor = index == 1?[UIColor redColor]:index == 2?[UIColor greenColor]:[UIColor yellowColor];
view.mj_header = [view headerWithAnimationType:MJRefreshAnimationType_Normal refreshingTarget:self refreshingAction:@selector(pullDownToReloadData:)];
return view;
}
@end
在使用时，对于每一个模块都可以实现定制效果，也可以单独出来进行处理，相对比较自由，不会显得模块之间太过拥挤，当然具体实现逻辑请见Demo：FrankDragChangeDemo
效果：
效果1.png
效果2.png
如果有更好的实现方式或者设计逻辑，欢迎相互交流学习
---------------------------
2018-7-15 文章修改说明
---------------------------
由于之前给出使用Demo并没有针对 iPhone X进行说明，有猿友提出来相应的疑问，所以更新一下Demo以及文章说明：
工程目录.jpeg
iPhoneX配置.jpeg
使用说明.jpeg
注：
（1）工程目录图（图一）中为本次修改的主要文件
（2）iPhoneX配置图（图二）中为适配 iPhone X 进行的一些宏定义文件，
使用之前需要先导入头文件，如果在你的工程中有自己的一套适配逻辑，可以忽略此文件
（3）使用说明图（图三）中为Demo中使用时的修改部分
