UIScrollView下拉模糊效果
发布日期:2022-03-18 08:27:44
浏览次数:36
分类:技术文章
本文共 4506 字,大约阅读时间需要 15 分钟。
源码来自:
效果如下:实现原理:
- 在scrollView上添加一个UIImageView。
- 生成一系列的不同模糊程度的UIImage
- kvo观察scrollView的contentOffset的变化,调整UIImageView的大小和位置,并给UIImageView设置不同的UIImage。
在TwitterCover中,CHTwitterCoverView继承自UIImageView。在设置其scrollView实例时,使用KVO观察scrollView的contentOffset
。
- (void)setScrollView:(UIScrollView *)scrollView{ [_scrollView removeObserver:self forKeyPath:@"contentOffset"]; _scrollView = scrollView; [_scrollView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];}
在观察到变化时,调用setNeedsLayout
来更新布局。
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{ [self setNeedsLayout];}
重写- (void)layoutSubviews
方法:
- (void)layoutSubviews{ [super layoutSubviews]; if (self.scrollView.contentOffset.y < 0) { CGFloat offset = -self.scrollView.contentOffset.y; topView.frame = CGRectMake(0, -offset, 320, topView.bounds.size.height); self.frame = CGRectMake(-offset,-offset + topView.bounds.size.height, 320+ offset * 2, CHTwitterCoverViewHeight + offset); NSInteger index = offset / 10; if (index < 0) { index = 0; } else if(index >= blurImages_.count) { index = blurImages_.count - 1; } UIImage *image = blurImages_[index]; if (self.image != image) { [super setImage:image]; } } else { topView.frame = CGRectMake(0, 0, 320, topView.bounds.size.height); self.frame = CGRectMake(0,topView.bounds.size.height, 320, CHTwitterCoverViewHeight); UIImage *image = blurImages_[0]; if (self.image != image) { [super setImage:image]; } }}
其他例子
关于如何使图片模糊,请参考:
下拉放大效果
在OSChina的开源iOS客户端效果如下:
使用了UIScrollView+ScalableCover
分类
#importstatic const CGFloat MaxHeight = 200;@interface ScalableCover : UIImageView@property (nonatomic, weak) UIScrollView *scrollView;@end@interface UIScrollView (ScalableCover)@property (nonatomic, weak) ScalableCover *scalableCover;- (void)addScalableCoverWithImage:(UIImage *)image;- (void)removeScalableCover;@end//// UIScrollView+ScalableCover.m// ScalableCover//// Created by AeternChan on 7/20/15.// Copyright (c) 2015 oschina. All rights reserved.//#import "UIScrollView+ScalableCover.h"#import static NSString * const kContentOffset = @"contentOffset";static NSString * const kScalableCover = @"scalableCover";@implementation UIScrollView (ScalableCover)- (void)setScalableCover:(ScalableCover *)scalableCover{ [self willChangeValueForKey:kScalableCover]; objc_setAssociatedObject(self, &kScalableCover, scalableCover, OBJC_ASSOCIATION_RETAIN_NONATOMIC); [self didChangeValueForKey:kScalableCover];}- (ScalableCover *)scalableCover{ return objc_getAssociatedObject(self, &kScalableCover);}- (void)addScalableCoverWithImage:(UIImage *)image{ ScalableCover *cover = [[ScalableCover alloc] initWithFrame:CGRectMake(0, 0, self.bounds.size.width, MaxHeight)]; cover.backgroundColor = [UIColor clearColor]; cover.image = image; cover.scrollView = self; [self addSubview:cover]; [self sendSubviewToBack:cover]; self.scalableCover = cover;}- (void)removeScalableCover{ [self.scalableCover removeFromSuperview]; self.scalableCover = nil;}@end@implementation ScalableCover- (instancetype)initWithFrame:(CGRect)frame{ self = [super initWithFrame:frame]; if (self) { self.contentMode = UIViewContentModeScaleAspectFill; self.clipsToBounds = YES; } return self;}- (void)setScrollView:(UIScrollView *)scrollView{ //观察contentOffset的变化 [_scrollView removeObserver:self forKeyPath:kContentOffset]; _scrollView = scrollView; [_scrollView addObserver:self forKeyPath:kContentOffset options:NSKeyValueObservingOptionNew context:nil];}- (void)removeFromSuperview{ [_scrollView removeObserver:self forKeyPath:kContentOffset]; [super removeFromSuperview];}- (void)layoutSubviews{ [super layoutSubviews]; if (self.scrollView.contentOffset.y < 0) { CGFloat offset = -self.scrollView.contentOffset.y; self.frame = CGRectMake(-offset, -offset, _scrollView.bounds.size.width + offset * 2, MaxHeight + offset); } else { self.frame = CGRectMake(0, 0, _scrollView.bounds.size.width, MaxHeight); }}- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context{ [self setNeedsLayout];}@end
转载地址:https://windzen.blog.csdn.net/article/details/53610364 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
哈哈,博客排版真的漂亮呢~
[***.90.31.176]2024年03月10日 13时08分19秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
php编码函数 base58,1. Base58可逆加密
2019-04-21
oracle10g dblink优化,Oracle10g通过dblink访问数据异常
2019-04-21
linux安装时的iso文件,直接用ISO文件在linux上安装新系统
2019-04-21
linux修改文件权限为所有人都可以访问,Linux 笔记分享八:文件权限的设定
2019-04-21
linux中卸载ambri-servle,Kerberos 命令使用
2019-04-21
linux两台主机添加信任,Linux两台机器间添加信任,实现不用密码问,互传文件...
2019-04-21
linux 自动获取ssl证书,linux生成自验证ssl证书的具体命令和步骤
2019-04-21
linux基础命令20个,20-linux中基础命令
2019-04-21
重置网络配置 android,重置Android移动网络信号?
2019-04-21
java约瑟夫环pta上_cdoj525-猴子选大王 (约瑟夫环)
2019-04-21
mysql居左查询abcd_MySql速查手册
2021-06-24
Java小魔女芭芭拉_沉迷蘑菇不可自拔,黏土人《小魔女学园》苏西·曼芭芭拉 图赏...
2021-06-24
php+mysql记事本_一个简单记事本php操作mysql辅助类创建
2021-06-24
中国网建java发送短信_短信验证登陆-中国网建提供的SMS短信平台
2021-06-24
隔行变色java代码_jquery入门—选择器实现隔行变色实例代码
2019-04-21