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

https://www.jianshu.com/p/d537393fe247

https://github.com/wyzxc/CQPlaceholderView
https://github.com/wyzxc/TableViewNoContentView

先来看一下实际效果：

 

效果.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(不要告诉我，你的项目里没有基类