)
一直觉得自己写的不是技术而是情怀一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的希望我的这条路能让你们少走弯路希望我能帮你们抹去知识的蒙尘希望我能帮你们理清知识的脉络希望未来技术之巅上有你们也有我。空白页的所有素材.zip下载链接Swift Control EmptyPage(加载空白页)(源码)注意该封装它可以不同状态下显示不同的图片也就是加载过程中可以显示动画接口调用数据完成没有数据可以显示空白页图片不过需要一个属性的状态控制但是可以直接加载时只显示空白页图片更加方便也不用状态控制但是没有加载过程的动画文章目录说明1:如何调整所需要的素材Gif动画使用效果代码功能介绍1.返回图片2.标题3.副标题4.根据loading判断是否返回gif名称5.返回gif图片名称6.给图片着色7.加载时图片旋转8.是否启动图片旋转9.按键标题10.空白页背景颜色11. 空白图片Y轴方向偏移12.是否允许显示空白页13.是否允许显示空白页14.是否允许点击15.是否允许滚动16.点击方法配套写法直接空白页方案(最简单)菊花旋转空白页方案Gif动画空白页方案OC 项目底层框架(万能)OC Control Empty(加载动画-空白页)下载链接Swift 也可以调用OC封装的Empty(加载动画-空白页)下载链接说明1:如何调整所需要的素材该封比较好用但是需要拿到对应尺寸的素材才好用。1.封装原本的加载动画是一个400pt * 400pt 2x的图片数组但是400 * 400图片里面的图片大小是100pt * 100pt, 空白图片上是576pt * 576pt 2x那么这里如果是自己准备这些素材该如何做呢如果你手上只有一个gif图片例如160pt *160pt 里面图片是沾满的需要自己先处理好素材才能够使用。首先拿到图片之后去进行拆解腾讯GIF图片在线拆解工具把图片拆解好之后使用海报工具重新组装图片的大少海报工具搞好重新到处生成图片数组之后导入到项目里面运行如果你想重新做成gif图片需要gif在线生成工具不建议这样做因为需要改代码Gif动画使用效果代码//写到viewModelproperty(nonatomic,assign)BOOL loading;//写在网络数据成功self.loadingNO;//写在网络数失败的地方self.loadingNO;//写在buildsubview里面初始化self.viewModel.loadingYES;//下载成功和失败的获取数据代理在刷新tableview reload这句话下面[self.collectionView reloadEmptyDataSet];,DZNEmptyDataSetSource,DZNEmptyDataSetDelegate//写在初始化tableview哪里self.collectionView.emptyDataSetSourceself;self.collectionView.emptyDataSetDelegateself;#pragmamark 空白页代理方法-(UIImage*)imageForEmptyDataSet:(UIScrollView*)scrollView{returnself.viewModel.loading?[UIImage loadGifWithImageName:nahuoLoading]:[UIImage imageNamed:empty-out-of-service-area];}//设置友好图片提示偏移位置-(CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView*)scrollView{/* 该例子是nahuomall商品详情控制器 //控制详情图片轮播器是否显示 property (nonatomic,assign) BOOL sliderCellisShow; sliderCellisShow是控制器外面传递进来的一个值,因为商品详情控制器顶部是一样图片,然后下面才是tableview,所以空白页要往上偏移 */returnself.sliderCellisShow?0:-270;}#pragmamark-DZNEmptyDataSetDelegate// 点击中间的图片和文字时调用-(void)emptyDataSet:(UIScrollView*)scrollView didTapView:(UIView*)view{self.viewModel.loadingYES;[self.collectionView reloadEmptyDataSet];[self.viewModel#获取网络数据#];}功能介绍1.返回图片注意该封装它可以不同状态下显示不同的图片也就是加载过程中可以显示动画接口调用数据完成没有数据可以显示空白页图片不过需要一个属性的状态控制但是可以直接加载时只显示空白页图片更加方便也不用状态控制但是没有加载过程的动画-(UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView{returnself.viewModel.loading?[UIImage loadGifWithImageName:nahuoLoading]:[UIImage imageNamed:empty-out-of-service-area];}2.标题// 添加标题文本 - (NSAttributedString *)titleForEmptyDataSet:(UIScrollView *)scrollView { NSString *text self.loading ? 正在加载中... : 暂无对话消息; NSDictionary *attributes { NSFontAttributeName: [UIFont boldSystemFontOfSize:18.0f], NSForegroundColorAttributeName: [UIColor darkGrayColor] }; return [[NSAttributedString alloc] initWithString:text attributes:attributes]; }3.副标题// 添加详细描述文本 - (NSAttributedString *)descriptionForEmptyDataSet:(UIScrollView *)scrollView { if (!self.loading) { NSString *text 点击屏幕重新加载数据或点击按钮进行其他操作; NSMutableParagraphStyle *paragraph [NSMutableParagraphStyle new]; paragraph.lineBreakMode NSLineBreakByWordWrapping; paragraph.alignment NSTextAlignmentCenter; paragraph.lineSpacing 4.0; NSDictionary *attributes { NSFontAttributeName: [UIFont systemFontOfSize:14.0f], NSForegroundColorAttributeName: [UIColor lightGrayColor], NSParagraphStyleAttributeName: paragraph }; return [[NSAttributedString alloc] initWithString:text attributes:attributes]; } return nil; }4.根据loading判断是否返回gif名称说明如果需要gif动画加载传入的图片一定有gif图片就需要写gif图片的名称为什么呢因为需要用到这个名称去判断到该张图片是gif图片需要设置imageview的大小是60 * 60因为还在数据的时候需要显示gif图片如果不设置60 * 60的话用空白页的uiimageviewgif动画会显示很大如果为了能显示gif的大小60 * 60系统需要判断当前正在显示的图片是gif图片还是空白页的图片所以就写了下面这个方法它是根据loading当前的加载状态来传递对应的值的如果当前要显示gif那么loading肯定是true那么imageName(forEmptyDataSet scrollView: UIScrollView) 此时需要返回所用到的gif图片名称目前的这个方法跟下面的方法配套使用的-(NSString *)imageNameForEmptyDataSet:(UIScrollView *)scrollView{returnself.viewModel.loading ? nahuoLoading:;}5.返回gif图片名称如果加载过程需要用到gif图片再显示空白页就需要用到该方法把gif图片的名称填写进去用于比较判断是否是gif图片用上面已经说的很清楚了。目前的这个方法跟上面的方法配套使用的-(NSString *)imageGifNameForEmptyDataSet:(UIScrollView *)scrollView{returnnahuoLoading;}6.给图片着色-(UIColor *)imageTintColorForEmptyDataSet:(UIScrollView *)scrollView{returnUIColor.orangeColor;}7.加载时图片旋转用于菊花转动方案启动时旋转下面有固定配套方案-(CAAnimation*)imageAnimationForEmptyDataSet:(UIScrollView*)scrollView{CABasicAnimation*animation[CABasicAnimation animationWithKeyPath:transform];animation.fromValue[NSValue valueWithCATransform3D:CATransform3DIdentity];animation.toValue[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2,0.0,0.0,1.0)];animation.duration0.5;animation.cumulativeYES;animation.repeatCountHUGE_VALF;returnanimation;}8.是否启动图片旋转DZNEmptyDataSetDelegate的方法-(BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView{returnYES;}9.按键标题-(NSAttributedString *)buttonTitleForEmptyDataSet:(UIScrollView *)scrollView forState:(UIControlState)state{NSDictionary *attributes{NSForegroundColorAttributeName:UIColor.redColor, NSFontAttributeName:[UIFont systemFontOfSize:16]};NSAttributedString *attr[[NSAttributedString alloc]initWithString:重新加载attributes:attributes];returnattr;}10.空白页背景颜色-(UIColor *)backgroundColorForEmptyDataSet:(UIScrollView *)scrollView{returnUIColor.orangeColor}11. 空白图片Y轴方向偏移当时针对导航栏导致空白页乡下移所增加的方法-(CGFloat)verticalOffsetForEmptyDataSet:(UIScrollView *)scrollView{return-80;}DZNEmptyDataSetDelegate12.是否允许显示空白页如果设置false即使无数据也不会显示空白页默认true-(BOOL)emptyDataSetShouldDisplay:(UIScrollView *)scrollView{returnNO;}13.是否允许显示空白页即使显示了100条数据返回true100条数据后面就是空白页用于下来加载更多数据有问题-(BOOL)emptyDataSetShouldBeForcedToDisplay:(UIScrollView *)scrollView{true}14.是否允许点击-(BOOL)emptyDataSetShouldAllowTouch:(UIScrollView *)scrollView{returnYES;}15.是否允许滚动true允许false不允许-(BOOL)emptyDataSetShouldAllowScroll:(UIScrollView *)scrollView{returnYES;}16.点击方法-(void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view{self.viewModel.loadingYES;[self.tableview reloadEmptyDataSet];[self.viewModel getFastActivity];}配套写法直接空白页方案(最简单)效果下载链接(OC)直接空白页方案(最简单).zip下载链接代码self.tableview.emptyDataSetSourceself;#pragma mark 刷新tableveiw的代理-(void)fastActivityViewModel:(FastActivityViewModel *)view success:(NSString *)model{[self.tableview reloadData];[self.tableview reloadEmptyDataSet];}-(void)fastActivityViewModel:(FastActivityViewModel *)view fail:(NSString *)message{[self.tableview reloadData];[self.tableview reloadEmptyDataSet];}#pragma mark 空白页代理方法-(UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView{return[UIImage imageNamed:empty-out-of-service-area];}菊花旋转空白页方案效果下载链接(OC)菊花旋转空白页方案.zip下载链接关键代码图片去iconfont网站找很多图片大小设置60pt * 60pt#pragma mark 空白页代理方法-(UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView{returnself.viewModel.loading?[UIImage imageNamed:empty_rotate_normal]:[UIImage imageNamed:empty-out-of-service-area];}// 图片的动画效果(默认为关闭,需要调用代理方法emptyDataSetShouldAnimateImageView进行开启)-(CAAnimation *)imageAnimationForEmptyDataSet:(UIScrollView *)scrollView{//Y轴旋转 CABasicAnimation *animation[CABasicAnimation animationWithKeyPath: transform];animation.fromValue[NSValue valueWithCATransform3D:CATransform3DIdentity];animation.toValue[NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_2,0.0,0.0,1.0)];animation.duration0.25;animation.cumulativeYES;animation.repeatCountMAXFLOAT;returnanimation;}// 是否开启动画 -(BOOL)emptyDataSetShouldAnimateImageView:(UIScrollView *)scrollView{returnself.viewModel.loading ? YES:NO;}#pragma mark - DZNEmptyDataSetDelegate-(void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view{self.viewModel.loadingYES;[self.tableview reloadEmptyDataSet];[self.viewModel getFastActivity];}Gif动画空白页方案效果下载链接(OC)Gif动画加载空白页方案.zip下载链接代码self.tableview.emptyDataSetSourceself;self.tableview.emptyDataSetDelegateself;#pragma mark 刷新tableveiw的代理-(void)fastActivityViewModel:(FastActivityViewModel *)view success:(NSString *)model{[self.tableview reloadData];[self.tableview reloadEmptyDataSet];}-(void)fastActivityViewModel:(FastActivityViewModel *)view fail:(NSString *)message{[self.tableview reloadData];[self.tableview reloadEmptyDataSet];}#pragma mark 空白页代理方法-(UIImage *)imageForEmptyDataSet:(UIScrollView *)scrollView{returnself.viewModel.loading?[UIImage loadGifWithImageName:nahuoLoading]:[UIImage imageNamed:empty-out-of-service-area];}-(NSString *)imageNameForEmptyDataSet:(UIScrollView *)scrollView{returnself.viewModel.loading ? nahuoLoading:;}-(NSString *)imageGifNameForEmptyDataSet:(UIScrollView *)scrollView{returnnahuoLoading;}#pragma mark - DZNEmptyDataSetDelegate-(void)emptyDataSet:(UIScrollView *)scrollView didTapView:(UIView *)view{self.viewModel.loadingYES;[self.tableview reloadEmptyDataSet];[self.viewModel getFastActivity];}