/*最近做了一个项目,项目中的详情页的效果比较单一,所以想实现类似淘宝,HIGO那样的效果.滑动详情和顶部图片栏的时候给人感觉两层重叠的效果.
*所以自己做了一个demo
*实现的基本想法:
* 底层肯定是一个ScrollView 可以保证可以滚动
* 滚动的过程中重新计算顶部图片的高度
* - (void)scrollViewDidScroll:(UIScrollView *)scrollView 在此方法中可以得到滚动的偏移量 用(图片的高度-偏移量)可以得到最新的图片高度
* 给图片的contentMode设置为UIViewContentModeScaleAspectFill可以保证图片高度减少过程中不会变形
* 基本就能实现功能了
* ->还可以扩展比如底部使用tableView,collectionView.
*/
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic,strong) UIScrollView *bottomView;//底部滚动View
@property (nonatomic,strong) UIImageView *bannerImg;//顶部图片
@property (nonatomic,assign) CGFloat subviews_h;
@property (nonatomic,assign) CGRect headerv_firstrect;
@end
#define SCREEN_WIDTH ([[UIScreen mainScreen]bounds].size.width)
#define SCREEN_HEIGHT ([[UIScreen mainScreen]bounds].size.height)
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
[self initView];
}
- (void)initView {
__weak typeof(self.view) _weakself = self.view;
_bottomView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
_bottomView.delegate = self;
_bottomView.contentSize = CGSizeMake(SCREEN_WIDTH, SCREEN_HEIGHT+SCREEN_WIDTH*0.5);
[_weakself addSubview:_bottomView];
[self headerView];
}
#pragma mark - 记录相对位置
- (void)addSubview:(UIView*)view {
[_bottomView addSubview:view];
_subviews_h += view.bounds.size.height;
_bottomView.contentSize = CGSizeMake(SCREEN_WIDTH, _subviews_h);
}
- (void)headerView {
_headerv_firstrect = CGRectMake(0, _subviews_h, SCREEN_WIDTH, SCREEN_WIDTH*0.5);
_bannerImg = [[UIImageView alloc] initWithFrame:_headerv_firstrect];
_bannerImg.image = [UIImage imageNamed:@"a"];
_bannerImg.contentMode = UIViewContentModeScaleAspectFill;
_bannerImg.clipsToBounds = YES;
[_bottomView addSubview:_bannerImg];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
//scrollView偏移量
CGFloat offset = scrollView.contentOffset.y;
//重新计算图片的高度
CGRect rect = _bannerImg.frame;
rect.origin.y = offset;
rect.size.height = _headerv_firstrect.size.height - offset;
_bannerImg.frame = rect;
}
网友评论