iOS商品上拉查看图文详情效果

近段时间项目终于告一段落，本小猿也算是得以喘口气，轻松一下乐呵乐呵啦，所以写个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

如果有更好的实现方式或者设计逻辑，欢迎相互交流学习