iOS 开发之利用 SDWebImage 带你制作精美的相册

2023-11-30 16:58
文章标签 开发 制作 ios 相册 精美 sdwebimage

本文主要是介绍iOS 开发之利用 SDWebImage 带你制作精美的相册，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

这里写图片描述

说起 SDWebImage 大家肯定都不陌生，它在GitHub上的星星有16300多个，可见其火爆程度；作为目前最受欢迎的第三方图片下载框架,在app开发中使用率很高，尤其是需要处理大量图片的项目。

这里写图片描述

这个类库提供一个UIImageView类别，支持加载来自网络的远程图片。具有缓存管理、异步下载、同一个URL下载次数控制和优化等特征，跳转SDWebImage下载地址。

在本篇文章中，我将以示例的方式来给大家演示如何使用SDWebImage这个框架，制作一个漂亮的相册，效果图如下：

效果图 1 效果图 2

首先，将下载好的SDWebImage.framework添加到我们的Xcode工程中，在类头文件（.h）中导入头文件：

#import <SDWebImage/UIImageView+WebCache.h>
#import <SDWebImage/FLAnimatedImageView+WebCache.h>

在上面的效果图中，大家肯定一眼就看出来这是一个UITableView；没错，对于展示类的页面来讲，UITableView就是最佳的选择，如果你接触iOS开发到一定的阶段，你就会发现UITableView这个控件实在是太强大了。

现在的社会是一个看颜值的社会，好看的界面当然离不开我们去自定义控件；在这个tableView中，我们自定义了UITableViewCell，代码如下：

@implementation YYWebImageExampleCell- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier{self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];self.backgroundColor = [UIColor clearColor];self.contentView.backgroundColor = [UIColor clearColor];self.size = CGSizeMake(kScreenWidth, kCellHeight);self.contentView.size = self.size;_webImageView = [FLAnimatedImageView new];_webImageView.size = self.size;_webImageView.clipsToBounds = YES;_webImageView.contentMode = UIViewContentModeScaleAspectFill;_webImageView.backgroundColor = [UIColor whiteColor];[self.contentView addSubview:_webImageView];_label = [UILabel new];_label.size = self.size;_label.textAlignment= NSTextAlignmentCenter;_label.text = @"Load fail, tap to reload.";_label.textColor = [UIColor colorWithWhite:0.7 alpha:1.0];_label.hidden = YES;_label.userInteractionEnabled = YES;[self.contentView addSubview:_label];CGFloat lineHeight = 4;_progressLayer = [CAShapeLayer new];_progressLayer.size = CGSizeMake(_webImageView.width, lineHeight);UIBezierPath *path = [UIBezierPath bezierPath];[path moveToPoint:CGPointMake(0, _progressLayer.height / 2)];[path addLineToPoint:CGPointMake(_webImageView.width, _progressLayer.height / 2)];_progressLayer.lineWidth = lineHeight;_progressLayer.path = path.CGPath;_progressLayer.strokeColor = [UIColor colorWithRed:0 green:0.6 blue:1.0 alpha:0.72].CGColor;_progressLayer.lineCap = kCALineCapButt;_progressLayer.strokeStart = 0;_progressLayer.strokeEnd = 0;[_webImageView.layer addSublayer:_progressLayer];return self;
}- (void)setImageURL:(NSURL *)url{_label.hidden = YES;[CATransaction begin];[CATransaction setDisableActions:YES];self.progressLayer.hidden = YES;self.progressLayer.strokeEnd = 0;[CATransaction commit];[_webImageView sd_setImageWithURL:url placeholderImage:nil options:SDWebImageProgressiveDownload progress:^(NSInteger receivedSize, NSInteger expectedSize, NSURL * _Nullable targetURL) {dispatch_async(dispatch_get_main_queue(), ^{if(receivedSize > 0 && receivedSize > 0){CGFloat progress = (CGFloat)receivedSize / expectedSize;progress = progress < 0 ? 0 : progress > 1 ? 1 : progress;if(_progressLayer.hidden) _progressLayer.hidden = NO;_progressLayer.strokeEnd = progress;}});} completed:^(UIImage * _Nullable image, NSError * _Nullable error, SDImageCacheType cacheType, NSURL * _Nullable imageURL) {dispatch_async(dispatch_get_main_queue(), ^{if(image){_progressLayer.hidden = YES;CATransition *transition = [CATransition animation];transition.duration = 0.2;transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];transition.type = kCATransitionFade;[self.layer addAnimation:transition forKey:@"YYWebImageFade"];}});}];
}@end

这个自定义的Cell, 主要是由 FLAnimatedImageView（由SDWebImage库所提供）, CAShapeLayer，以及UILable所构成，并抛出一个设置图片的接口，该接口会去调用SDWebImage库中的下载图片并缓存接口：

- (void)sd_setImageWithURL:(nullable NSURL *)urlplaceholderImage:(nullable UIImage *)placeholderoptions:(SDWebImageOptions)optionsprogress:(nullable SDWebImageDownloaderProgressBlock)progressBlockcompleted:(nullable SDExternalCompletionBlock)completedBlock;

自定义好了Cell，接下来就要去创建一个UITableView控件去加载它，代码如下：

#define kCellHeight ceil((kScreenWidth) * 3.0 / 4.0)#ifndef kSystemVersion
#define kSystemVersion [[UIDevice currentDevice].systemVersion floatValue]
#endif#ifndef kiOS6Later
#define kiOS6Later (kSystemVersion >= 6)
#endif#ifndef kiOS7Later
#define kiOS7Later (kSystemVersion >= 7)
#endif#ifndef kiOS8Later
#define kiOS8Later (kSystemVersion >= 8)
#endif#ifndef kiOS9Later
#define kiOS9Later (kSystemVersion >= 9)
#endif@implementation YYWebImageExample{NSArray *_imageLinks;
}- (void)viewDidLoad{[super viewDidLoad];self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;self.view.backgroundColor = [UIColor whiteColor];UIBarButtonItem *button = [[UIBarButtonItem alloc] initWithTitle:@"Reload" style:UIBarButtonItemStylePlain target:self action:@selector(reload)];self.navigationItem.rightBarButtonItem = button;self.view.backgroundColor = [UIColor colorWithWhite:0.217 alpha:1.000];NSArray *links = @[// progressive jpeg@"https://s-media-cache-ak0.pinimg.com/1200x/2e/0c/c5/2e0cc5d86e7b7cd42af225c29f21c37f.jpg",// animated gif: http://cinemagraphs.com/@"http://i.imgur.com/uoBwCLj.gif",@"http://i.imgur.com/8KHKhxI.gif",@"http://i.imgur.com/WXJaqof.gif",// animated gif: https://dribbble.com/markpear@"https://d13yacurqjgara.cloudfront.net/users/345826/screenshots/1780193/dots18.gif",@"https://d13yacurqjgara.cloudfront.net/users/345826/screenshots/1809343/dots17.1.gif",@"https://d13yacurqjgara.cloudfront.net/users/345826/screenshots/1845612/dots22.gif",@"https://d13yacurqjgara.cloudfront.net/users/345826/screenshots/1820014/big-hero-6.gif",@"https://d13yacurqjgara.cloudfront.net/users/345826/screenshots/1819006/dots11.0.gif",@"https://d13yacurqjgara.cloudfront.net/users/345826/screenshots/1799885/dots21.gif",// animaged gif: https://dribbble.com/jonadinges@"https://d13yacurqjgara.cloudfront.net/users/288987/screenshots/2025999/batman-beyond-the-rain.gif",@"https://d13yacurqjgara.cloudfront.net/users/288987/screenshots/1855350/r_nin.gif",@"https://d13yacurqjgara.cloudfront.net/users/288987/screenshots/1963497/way-back-home.gif",@"https://d13yacurqjgara.cloudfront.net/users/288987/screenshots/1913272/depressed-slurp-cycle.gif",// jpg: https://dribbble.com/snootyfox@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/2047158/beerhenge.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/2016158/avalanche.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1839353/pilsner.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1833469/porter.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1521183/farmers.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1391053/tents.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1399501/imperial_beer.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1488711/fishin.jpg",@"https://d13yacurqjgara.cloudfront.net/users/26059/screenshots/1466318/getaway.jpg",// animated webp and apng: http://littlesvr.ca/apng/gif_apng_webp.html@"http://littlesvr.ca/apng/images/BladeRunner.png",@"http://littlesvr.ca/apng/images/Contact.webp",];_imageLinks = links;[self.tableView reloadData];[self scrollViewDidScroll:self.tableView];
}- (void)viewDidAppear:(BOOL)animated{[super viewDidAppear:animated];if(kiOS7Later){self.navigationController.navigationBar.barStyle = UIBarStyleBlack;self.navigationController.navigationBar.tintColor = [UIColor whiteColor];}[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
}- (void)viewWillDisappear:(BOOL)animated{[super viewWillDisappear:animated];if(kiOS7Later){self.navigationController.navigationBar.barStyle = UIBarStyleDefault;self.navigationController.navigationBar.tintColor = nil;}[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault;
}- (void)reload{[self.tableView reloadData];
}- (BOOL)tableView:(UITableView *)tableView shouldHighlightRowAtIndexPath:(NSIndexPath *)indexPath{return NO;
}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{return _imageLinks.count * 4;
}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{return kCellHeight;
}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{YYWebImageExampleCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];if (!cell) cell = [[YYWebImageExampleCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];[cell setImageURL:[NSURL URLWithString:_imageLinks[indexPath.row % _imageLinks.count]]];return cell;
}- (void)scrollViewDidScroll:(UIScrollView *)scrollView{CGFloat viewHeight = scrollView.height + scrollView.contentInset.top;for(YYWebImageExampleCell *cell in [self.tableView visibleCells]){CGFloat y = cell.centerY - scrollView.contentOffset.y;CGFloat p = y - viewHeight / 2;CGFloat scale= cos(p / viewHeight * 0.8) * 0.95;if(kiOS8Later){[UIView animateWithDuration:0.15 delay:0 options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction | UIViewAnimationOptionBeginFromCurrentState animations:^{cell.webImageView.transform = CGAffineTransformMakeScale(scale, scale);} completion:^(BOOL finished) {}];}else{cell.webImageView.transform = CGAffineTransformMakeScale(scale, scale);}}
}@end

这里UITableView的功能比较简单，就不多做介绍了。

总结：

SDWebImage是一个功能很强大的图片加载库，我上面所演示的只是最基础的下载与缓存功能，适用于这种相册功能；如果你的App功能对性能优化或者内存管理的要求比较高，它还有独立的异步图像下载，异步图像缓存可供使用；总之，SDWebImage的出现对我们开发者来说，是一个不错的选择。

参考文章：
https://github.com/rs/SDWebImage
https://github.com/ibireme/YYKit

好了。祝大家生活愉快。多多收获友谊和爱情。如果想获取更多的讯息，请扫描下方二维码关注我的微信公众号：

这里写图片描述

这篇关于iOS 开发之利用 SDWebImage 带你制作精美的相册的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/437807。

相关文章

Go语言开发实现查询IP信息的MCP服务器

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
Spring Shell 命令行实现交互式Shell应用开发

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S
阅读更多...
Python通过模块化开发优化代码的技巧分享

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版：拆分成模块让模块更强大：使用 __init__.py你一定会遇到的问题模www.
阅读更多...
Spring Security基于数据库的ABAC属性权限模型实战开发教程

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》：本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA
阅读更多...
使用Python开发一个简单的本地图片服务器

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经
阅读更多...
Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战：从入门到进阶优化1. MyBatis
阅读更多...
Python基于wxPython和FFmpeg开发一个视频标签工具

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优
阅读更多...
利用Python开发Markdown表格结构转换为Excel工具

利用Python开发Markdown表格结构转换为Excel工具

《利用Python开发Markdown表格结构转换为Excel工具》在数据管理和文档编写过程中,我们经常使用Markdown来记录表格数据,但它没有Excel使用方便,所以本文将使用Python编写一... 目录1.完整代码2. 项目概述3. 代码解析3.1 依赖库3.2 GUI 设计3.3 解析 Mark
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2