iOS类似京东/淘宝下拉查看详情
2017-06-23 本文已影响0人
Samson_Xu
第一次修改：2017-09-29：对iOS 11进行兼容
前言：最近一直在看Effective Objective-C这本书，也有在做笔记，打算看完之后写一篇Effective Objective-C的总结，说一下自己的看法和收获。
言归正传，最近项目要实现一个类似于京东/淘宝下拉查看商品详情的功能，自己就先写了一个小的demo，实现方式很简单，在这里做下记录与分享，如有需要改进的地方，欢迎留言探讨☺。
Github:看这里
testGif.gif
思路整理：
首先分析界面布局，我先是尝试使用一个scrollView包含两个contentView的方式进行实现，发现实现起来比较繁琐，因为这样一来当前界面就会产生两到三个scrollView，对偏移值的观察处理会比较麻烦。尝试失败后我就使用了另一种方式进行实现。发现类似的界面一般分为三部分：
- 展示部分视图，包含scrollView
- 详情部分视图，包含scrollView
- 上下拉时提示视图
/**
首页视图
*/
@property (nonatomic, strong) UIScrollView *firstScrollView;
/**
上拉视图
*/
@property (nonatomic, strong) UIView *footView;
/**
上拉箭头
*/
@property (nonatomic, strong) UIImageView *footArrowView;
/**
上拉文字
*/
@property (nonatomic, strong) UILabel *footLabel;
/**
下拉视图
*/
@property (nonatomic, strong) UIView *headView;
/**
下拉箭头
*/
@property (nonatomic, strong) UIImageView *headArrowView;
/**
下拉文字
*/
@property (nonatomic, strong) UILabel *headLabel;
/**
详情页
*/
@property (nonatomic, strong) UIView *secondView;
/**
详情页scrollView
*/
@property (nonatomic, strong) UIWebView *secondScrollView;
构建UI：实例化三部分视图，并为scrollView设置代理，通过代理方法监听偏移值
- (void)createUI{
self.title = @"testProduct";
self.view.backgroundColor = [UIColor whiteColor];
self.automaticallyAdjustsScrollViewInsets = NO;
[self.view addSubview:self.firstScrollView];
[self.view addSubview:self.secondView];
}
- (UIScrollView *)firstScrollView{
if (!_firstScrollView) {
_firstScrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0, 64, KScreenWidth, KScreenHeight-64)];
_firstScrollView.backgroundColor = KColorRGB(200, 160, 110);
_firstScrollView.contentSize = CGSizeMake(0, KScreenHeight);
_firstScrollView.pagingEnabled = YES;
_firstScrollView.showsVerticalScrollIndicator = NO;
_firstScrollView.showsHorizontalScrollIndicator = NO;
_firstScrollView.delegate = self;
UILabel *label = [MyControl labelWithTitle:@"firstView" fram:CGRectMake(0, 200, KScreenWidth, 40) fontOfSize:20];
label.textAlignment = NSTextAlignmentCenter;
[_firstScrollView addSubview:label];
[_firstScrollView addSubview:self.footView];
}
return _firstScrollView;
}
- (UIView *)footView{
if (!_footView) {
_footView = [[UIView alloc]initWithFrame:CGRectMake(0, KScreenHeight-60-64, KScreenWidth, 40)];
_footArrowView = [[UIImageView alloc]initWithFrame:CGRectMake((KScreenWidth-200)/2, 10, 15, 20)];
_footArrowView.image = [UIImage imageNamed:@"pullArrow"];
[_footView addSubview:_footArrowView];
_footLabel = [MyControl labelWithTitle:@"上拉查看详情" fram:CGRectMake((KScreenWidth-200)/2+50, 0, 150, 40) fontOfSize:14];
[_footView addSubview:_footLabel];
}
return _footView;
}
- (UIView *)secondView{
if (!_secondView) {
_secondView = [[UIView alloc]initWithFrame:CGRectMake(0, KScreenHeight+20, KScreenWidth, KScreenHeight)];
_secondView.backgroundColor = KColorRGB(241, 241, 241);
UILabel *label = [MyControl labelWithTitle:@"项目详细" fram:CGRectMake(0, 0, KScreenWidth, 50) fontOfSize:17];
label.textAlignment = NSTextAlignmentCenter;
label.backgroundColor = [UIColor whiteColor];
[_secondView addSubview:self.secondScrollView];
[_secondView addSubview:label];
}
return _secondView;
}
- (UIWebView *)secondScrollView{
if (!_secondScrollView) {
_secondScrollView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 51, KScreenWidth, KScreenHeight-51-64)];
_secondScrollView.backgroundColor = KColorRGB(192, 192, 192);
[_secondScrollView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:URL]]];
_secondScrollView.scrollView.delegate = self;
[_secondScrollView.scrollView addSubview:self.headView];
}
return _secondScrollView;
}
交互处理：
- 用户拖拽时根据偏移值动态改变上/下拉提醒视图的展示效果。
（1）改变箭头指向
（2）改变提示文字 - 拖拽结束时根据当前偏移值对界面进行处理：
（1）上拉达到临界点，改变首页和详情页的fram；
（2）下拉达到临界点，改变首页和详情页的fram；
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
NSLog(@"didscroll");
CGFloat y = scrollView.contentOffset.y;
if (scrollView == _firstScrollView) {
self.secondView.transform = CGAffineTransformMakeTranslation(0, -y);
if (y < 60) {
self.footLabel.text = @"上拉查看详情";
self.footArrowView.transform = CGAffineTransformIdentity;
}else{
self.footLabel.text = @"松开查看详情";
self.footArrowView.transform = CGAffineTransformMakeRotation(M_PI);
}
}
if ([scrollView isEqual:_secondScrollView.scrollView]) {
CGAffineTransform transform = CGAffineTransformIdentity;
if (y < -60) {
self.headLabel.text = @"松开回到首页";
}else {
transform = CGAffineTransformMakeRotation(M_PI);
self.headLabel.text = @"下拉回到首页";
}
self.headArrowView.transform = transform;
}
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
CGFloat y = scrollView.contentOffset.y;
if ([scrollView isEqual:_firstScrollView]) {
if (y > 60){
[self transformToSecondView];
}
}
if ([scrollView isEqual:_secondScrollView.scrollView]) {
if (y < -60) {
[self transformToFirstView];
}
}
}
动态改变首页和详情页的fram：
- (void)transformToSecondView{
[UIView animateWithDuration:0.5 animations:^{
CGRect rect1 = _firstScrollView.frame;
CGRect rect2 = _secondView.frame;
rect1.origin.y = -KScreenHeight;
rect2.origin.y = 0;
self.firstScrollView.frame = rect1;
self.secondView.frame = rect2;
} completion:^(BOOL finished) {
self.footArrowView.transform = CGAffineTransformIdentity;
self.footLabel.text = @"上拉查看详情";
}];
}
- (void)transformToFirstView{
[UIView animateWithDuration:0.5 animations:^{
CGRect rect1 = _firstScrollView.frame;
CGRect rect2 = _secondView.frame;
rect1.origin.y = 64;
rect2.origin.y = KScreenHeight+20;
self.firstScrollView.frame = rect1;
self.secondView.frame = rect2;
} completion:^(BOOL finished) {
self.headArrowView.transform = CGAffineTransformIdentity;
self.headLabel.text = @"下拉回到首页";
}];
}
