使用UIScrollView实现头部图片下拉放大及仿美团抢购View停留顶部

第一次在简书上写东西,只是做一个简单的分享,大神勿喷 .今天写了一个小Demo,swift和OC版都写了,主要有两个功能:

1.头部图片下拉放大.


下拉图片放大

先讲一下我的思路,在控制器上监听scrollView的移动偏移量,也就是代理方法中scrollViewDidScroll方法中拿到scrollView.contentOffset.y,判断偏移量Y值<0改变图片imgView的frame.

具体代码:

swift:

extension ViewController:UIScrollViewDelegate{

func scrollViewDidScroll(scrollView:UIScrollView) {

let y = scrollView.contentOffset.y;

var imgViewF = self.imgView.frame;

//放大图片处理

//监听到scrollView向下滚动时,改变图片的Frame,达到放大图片的效果

if(y <0) {

imgViewF.origin.y =  y;

imgViewF.origin.x =  y;

imgViewF.size.height = imgH-y;

imgViewF.size.width = screenW- y;

self.imgView.frame = imgViewF;

}

}

}

OC:

-  (void)scrollViewDidScroll:(UIScrollView*)scrollView{

CGFloaty = scrollView.contentOffset.y;

CGRectimgViewF =self.imgView.frame;

//放大图片处理

//监听到scrollView向下滚动时,改变图片的Frame,达到放大图片的效果

if(y <0) {

imgViewF.origin.y= y;

imgViewF.origin.x= y;

imgViewF.size.height=imgH-y;

imgViewF.size.width= [UIScreenmainScreen].bounds.size.width- y;

self.imgView.frame= imgViewF;

}

}

2.仿美团附近详情,向上滑动使抢购View停留在顶部.

抢购View停留顶部

这个GIF图没做好,效果不是很明显,实现的效果是白色View会停留在顶部,下面的内容View可以继续滑动.

我的思路是,监听scrollView滚动偏移量,当偏移量Y大于某个值时,改变抢购View的frame然后添加到self.View上,偏移量小于某个值时改变抢购View的frame添加回scrollView.随scrollView一起滚动.

具体代码:

swift:

/*

当scrollView向上滚动超过了图片的高度时,改变抢购View的Frame并添加到控制器的View上;

滚动Y值小余图片高度时,改变View的Frame重新添加回ScrollView上.

*/

if(y >=imgH) {

PanicView.frame=CGRectMake(0,0,screenW,60);

self.view.addSubview(PanicView)

}else{

PanicView.frame=CGRectMake(0,imgH,screenW,60);

scrollView.addSubview(PanicView)

}

OC:

if(y >=imgH-64) {

self.navigationController.navigationBar.hidden=NO;

self.navigationItem.title=@"仿美团附近详情";

self.moveView.frame=CGRectMake(0,64,screeW,60);

[self.viewaddSubview:self.moveView];

}else{

self.navigationController.navigationBar.hidden=YES;

self.moveView.frame=CGRectMake(0,imgH,screeW,60);

[scrollViewaddSubview:self.moveView];

}


本来想把源码附件上传的,可是不支持上传,如果有什么疑问欢迎给我留言!整体实现其实是比较简单,主要是思路.

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容