#define topHeight 100 //红色部分的高度
#define topSpace 47 //会员卡片露出来部分的高度
@property (nonatomic, strong) UIView *topView;
@property (nonatomic, strong) UIImageView *cardImageView;
@property (nonatomic) CGFloat distance;//可以向下滑动的距离
@property (nonatomic) CGFloat normalY;//正常状态下的纵坐标
UI部分
UIScrollView *scrollView=[[UIScrollView alloc] init];
scrollView.frame=CGRectMake(0,64,WinSize.width,WinSize.height-64);
scrollView.contentInset=UIEdgeInsetsZero;
scrollView.delegate=self;
scrollView.showsVerticalScrollIndicator=NO;
scrollView.showsHorizontalScrollIndicator=NO;
scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
[self.view addSubview:scrollView];
UIView *contentView=[[UIView alloc] initWithFrame:CGRectMake(0,0,WinSize.width,WinSize.height+200)];
[scrollView addSubview:contentView];
contentView.backgroundColor=[UIColor blueColor];
scrollView.contentSize=contentView.frame.size;
UIView *topView=[[UIView alloc] init];
[contentView addSubview:topView];
[topView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.top.equalTo(contentView);
make.height.mas_equalTo(topHeight);
}];
topView.backgroundColor=[UIColor redColor];
UIImageView *headImageView=[[UIImageView alloc] init];
[topView addSubview:headImageView];
[headImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.size.mas_equalTo(CGSizeMake(60*kScreenWidthRatio,60*kScreenWidthRatio));
make.left.top.mas_equalTo(20*kScreenWidthRatio);
}];
headImageView.layer.masksToBounds=YES;
headImageView.layer.cornerRadius=30*kScreenWidthRatio;
headImageView.backgroundColor=[UIColor blackColor];
self.topView=topView;
UIImageView *cardImageView=[[UIImageView alloc] initWithImage:[UIImage imageNamed:@"mine_buy_vip"]];//这里是会员卡图片
[contentView addSubview:cardImageView];
[cardImageView mas_makeConstraints:^(MASConstraintMaker *make) {
make.centerX.equalTo(cardImageView.superview);
make.size.mas_equalTo(CGSizeMake(cardImageView.image.size.width*kScreenWidthRatio, cardImageView.image.size.height*kScreenWidthRatio));
make.top.equalTo(topView.mas_bottom);
}];
self.cardImageView=cardImageView;
UIView *bottomView=[[UIView alloc] init];
bottomView.backgroundColor=[UIColor yellowColor];
[contentView addSubview:bottomView];
[bottomView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.equalTo(contentView);
make.top.equalTo(cardImageView).offset(topSpace);
}];
[scrollView layoutIfNeeded];
self.normalY=topView.bottom;
self.distance=(cardImageView.height-topSpace)*2;
//开始的小动画
[scrollView setContentOffset:CGPointMake(0,-self.distance)];
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0f * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
[scrollView setContentOffset:CGPointZero animated:YES];
});
滑动代理部分关键代码
#pragma mark - scrollViewDelegate
-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog(@"%f",scrollView.contentOffset.y);
CGFloat contentOffY=scrollView.contentOffset.y;
if(contentOffY<0&&fabs(contentOffY)>self.distance)
{
[scrollView setContentOffset:CGPointMake(0,-self.distance)];
}
if(contentOffY<=0&&fabs(contentOffY)<=self.distance)
{
//这里仿网易云,滑动过程会有稍微的间距变化,所以设置成0.55
self.topView.y=contentOffY*0.55f;
self.cardImageView.y=self.normalY+contentOffY*0.5f;
}
}
最后效果图