iOS开发——无网占位图的实现

2017-01-14 10:06:14来源:http://www.jianshu.com/p/d537393fe247作者:无夜之星辰人点击



T-ara—孝敏
先来看一下实际效果:

效果.gif
为什么要使用无网占位图?

为了更好地用户体验。难道没网的时候展示一个空白模板?当然,无网占位图也是一个APP最基本的功能只一。


原理简介:

viewWillAppear时判断是否有网,如果没网,展示无网占位图。点击无网占位图上的重新查看按钮,判断是否有网,如果没网,toast提示。如果有网,移除无网占位图,重新加载数据。


详细讲解:
首先按照设计师的UI图封装一个无网占位图view:CQNoNetworkView,在构造方法里完成
- (instancetype)initWithFrame:(CGRect)frame{
if (self = [super initWithFrame:frame]) {
// UI搭建
[self setUpUI];
}
return self;
}

   /** UI搭建 */
- (void)setUpUI{
self.backgroundColor = [UIColor whiteColor];
// 404图片放中间
UIImageView *noNetworkImageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 125, 125)];
noNetworkImageView.center = CGPointMake(self.width / 2, self.height / 2);
[self addSubview:noNetworkImageView];
noNetworkImageView.image = [UIImage imageNamed:@"404notfound"];
// 重新查看按钮
UIButton *checkButton = [[UIButton alloc]initWithFrame:CGRectMake(0, noNetworkImageView.maxY + 24, 115, 30)];
checkButton.centerX = self.width / 2;
[self addSubview:checkButton];
[checkButton.titleLabel setFont:[UIFont systemFontOfSize:15]];
checkButton.backgroundColor = [UIColor colorWithRed:0.00 green:0.76 blue:0.66 alpha:1.00];
[checkButton setTitle:@"重新查看" forState:UIControlStateNormal];
[checkButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[checkButton addTarget:self action:@selector(checkNetworkButtonClicked) forControlEvents:UIControlEventTouchUpInside];
// 图片上面的两个label
UILabel *label1 = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 20)];
label1.text = @"刷新一下返回店铺!";
label1.font = [UIFont systemFontOfSize:14];
label1.textColor = [UIColor colorWithRed:0.00 green:0.77 blue:0.68 alpha:1.00];
label1.backgroundColor = [UIColor clearColor];
label1.textAlignment = NSTextAlignmentCenter;
[label1 sizeToFit];
label1.centerX = self.width / 2;
label1.maxY = noNetworkImageView.y - 21;
[self addSubview:label1];
UILabel *label2 = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 15)];
label2.text = @"您似乎迷路了";
label2.font = [UIFont systemFontOfSize:19];
label2.textColor = [UIColor colorWithRed:0.00 green:0.77 blue:0.67 alpha:1.00];
label2.backgroundColor = [UIColor clearColor];
label2.textAlignment = NSTextAlignmentCenter;
[label2 sizeToFit];
label2.centerX = self.width / 2;
label2.maxY = label1.y - 12;
[self addSubview:label2];
}


处理“重新查看”按钮的逻辑,基本思路是:点击此按钮时,判断是否有网,如果仍旧没网,弹出toast提示用户;如果有网,移除此view,并且,让代理方执行相应代理方法,比如说,重新加载数据。
 /** 重新查看按钮点击 */
- (void)checkNetworkButtonClicked{
if ([DateUtil isNetWorkRunning]) {
// 如果有网,view消失,并且让代理方执行代理方法
for (CQNoNetworkView *view in [self getCurrentViewController].view.subviews) {
if ([view isMemberOfClass:[CQNoNetworkView class]]) {
[view removeFromSuperview];
}
}
// 重新加载数据
if ([self.delegate respondsToSelector:@selector(reloadData)]) {
[self.delegate reloadData];
}
}else{
// 如果没网,toast提示
[CQHud showToastWithMessage:@"请检查你的网络连接"];
}
}


确定代理方法(点击“重新加载”按钮时,代理方执行的方法),我的是重新加载数据。
@protocol CheckNetworkDelegate <NSObject>
@optional
/** 重新加载数据 */
- (void)reloadData;
@end
/** 无网络时展示的view */
@interface CQNoNetworkView : UIView
@property (nonatomic,weak) id<CheckNetworkDelegate> delegate;
@end


确定代理方。代理方就是执行“重新加载数据”的对象。由于每个viewController都需要在无网时展示无网占位图,所以代理方可以设置为项目的BaseViewController(不要告诉我,你的项目里没有基类

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台