iOS开发造轮子 | 通用占位图

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

实际运用场景：

没网时的提示view，tableView或collectionView没内容时的展示view，以及其它特殊情况时展示的特定view。如：

 

常见的几种情况

我的目标：

对以上几种情况的展示view做统一封装，将来做新APP时，我只需在这个轮子上稍加修改就可实现相应需求。

对自己的要求：

代码简洁规范，逻辑清晰，保证写出的代码将来任何接手的人可以轻松读懂。

对轮子的要求：

• 使用方便
• 易于维护修改
• 高内聚，低耦合（不要因为这个轮子的加入而影响之前的代码）

思路：

• 这是一个view，可以添加到tableView或collectionView上的view，当然，也可以添加到其他类型的view上。
• 一般说来，在一个项目中，从UI的角度来看，这样的view有几种，但是，从结构的角度来看，它们又一样，比如说：正中间一个imageView、imageView下方一个label、label下方一个button。
• 点击这个view或者这个view上的button，会执行相应回调方法。

先贴出代码，稍后细讲

.h文件

#import <UIKit/UIKit.h>

/** 占位图的类型 */
typedef NS_ENUM(NSInteger, CQPlaceholderViewType) {
    /** 没网 */
    CQPlaceholderViewTypeNoNetwork = 1,
    /** 没订单 */
    CQPlaceholderViewTypeNoOrder,
    /** 没商品 */
    CQPlaceholderViewTypeNoGoods,
    /** 美丽的妹纸 */
    CQPlaceholderViewTypeBeautifulGirl
};

#pragma mark - @protocol

@class CQPlaceholderView;
@protocol CQPlaceholderViewDelegate <NSObject>

/** 占位图的重新加载按钮点击时回调 */
- (void)placeholderView:(CQPlaceholderView *)placeholderView
   reloadButtonDidClick:(UIButton *)sender;

@end

#pragma mark - @interface

@interface CQPlaceholderView : UIView

/** 占位图类型（只读） */
@property (nonatomic,assign,readonly) CQPlaceholderViewType type;
/** 占位图的代理方（只读） */
@property (nonatomic,weak,readonly) id <CQPlaceholderViewDelegate> delegate;

/**
 构造方法

 @param frame 占位图的frame
 @param type 占位图的类型
 @param delegate 占位图的代理方
 @return 指定frame、类型和代理方的占位图
 */
- (instancetype)initWithFrame:(CGRect)frame
                         type:(CQPlaceholderViewType)type
                     delegate:(id)delegate;

@end

.m文件

#import "CQPlaceholderView.h"

@implementation CQPlaceholderView

#pragma mark - 构造方法
/**
 构造方法

 @param frame 占位图的frame
 @param type 占位图的类型
 @param delegate 占位图的代理方
 @return 指定frame、类型和代理方的占位图
 */
- (instancetype)initWithFrame:(CGRect)frame type:(CQPlaceholderViewType)type delegate:(id)delegate{
    if (self = [super initWithFrame:frame]) {
        // 存值
        _type = type;
        _delegate = delegate;
        // UI搭建
        [self setUpUI];
    }
    return self;
}

#pragma mark - UI搭建
/** UI搭建 */
- (void)setUpUI{
    self.backgroundColor = [UIColor whiteColor];

    //------- 图片在正中间 -------//
    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(self.frame.size.width / 2 - 50, self.frame.size.height / 2 - 50, 100, 100)];
    [self addSubview:imageView];

    //------- 说明label在图片下方 -------//
    UILabel *descLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(imageView.frame) + 10, self.frame.size.width, 20)];
    [self addSubview:descLabel];
    descLabel.textAlignment = NSTextAlignmentCenter;

    //------- 按钮在说明label下方 -------//
    UIButton *reloadButton = [[UIButton alloc]initWithFrame:CGRectMake(self.frame.size.width / 2 - 60, CGRectGetMaxY(descLabel.frame) + 5, 120, 25)];
    [self addSubview:reloadButton];
    [reloadButton setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
    reloadButton.layer.borderColor = [UIColor blackColor].CGColor;
    reloadButton.layer.borderWidth = 1;
    [reloadButton addTarget:self action:@selector(reloadButtonClicked:) forControlEvents:UIControlEventTouchUpInside];

    //------- 根据type创建不同样式的UI -------//
    switch (_type) {
        case CQPlaceholderViewTypeNoNetwork: // 没网
        {
            imageView.image = [UIImage imageNamed:@"网络异常"];
            descLabel.text = @"没网，不约";
            [reloadButton setTitle:@"点击重试" forState:UIControlStateNormal];
        }
            break;

        case CQPlaceholderViewTypeNoOrder: // 没订单
        {
            imageView.image = [UIImage imageNamed:@"订单无数据"];
            descLabel.text = @"暂无订单";
            [reloadButton setTitle:@"没有拉到" forState:UIControlStateNormal];
        }
            break;

        case CQPlaceholderViewTypeNoGoods: // 没商品
        {
            imageView.image = [UIImage imageNamed:@"没商品"];
            descLabel.text = @"红旗连锁你的好邻居";
            [reloadButton setTitle:@"buybuybuy" forState:UIControlStateNormal];
        }
            break;

        case CQPlaceholderViewTypeBeautifulGirl: // 妹纸
        {
            imageView.image = [UIImage imageNamed:@"妹纸"];
            descLabel.text = @"你会至少在此停留3秒钟";
            [reloadButton setTitle:@"不爱妹纸" forState:UIControlStateNormal];
        }
            break;

        default:
            break;
    }
}

#pragma mark - 重新加载按钮点击
/** 重新加载按钮点击 */
- (void)reloadButtonClicked:(UIButton *)sender{
    // 代理方执行方法
    if ([_delegate respondsToSelector:@selector(placeholderView:reloadButtonDidClick:)]) {
        [_delegate placeholderView:self reloadButtonDidClick:sender];
    }
    // 从父视图上移除
    [self removeFromSuperview];
}

@end

详细说明

1.关于构造方法的设计

/**
 构造方法

 @param frame 占位图的frame
 @param type 占位图的类型
 @param delegate 占位图的代理方
 @return 指定frame、类型和代理方的占位图
 */
- (instancetype)initWithFrame:(CGRect)frame
                         type:(CQPlaceholderViewType)type
                     delegate:(id)delegate;

三个参数说明：

• frame:决定占位图的大小和位置。之所以需要这个参数是因为：这个占位图可能和你的tableView一样大，也可能是全屏的。
• type:占位图的类型。这个参数决定占位图的展示样式。
• delegate:代理方。处理事件。

2.为什么type和delegate要设置为只读？

/** 占位图类型（只读） */
@property (nonatomic,assign,readonly) CQPlaceholderViewType type;
/** 占位图的代理方（只读） */
@property (nonatomic,weak,readonly) id <CQPlaceholderViewDelegate> delegate;

因为这两个属性需要暴露出去，但是我又不希望它们在外部被修改，我希望构造方法是决定这个占位图属性的唯一方法。还有就是：让在外部能直接修改的越少，意外也就越少。

3.为什么我的这代理方法命名如此冗长？

/** 占位图的重新加载按钮点击时回调 */
- (void)placeholderView:(CQPlaceholderView *)placeholderView
   reloadButtonDidClick:(UIButton *)sender;

可能有人会说，你这个代理方法不就是想要执行重新加载数据方法嘛，直接命名为reloadData不是多好的？反正曾经懵懂的我看别人的代码时是这样想当然的认为的，直到有一天我看了官方文档以及回想了一下系统给代理方法的命名。
其实代理方法的命名是一个非常讲究的东西，我之所以这样命名是完全参照官方文档的命名规范的，建议有疑问的瞅两眼delegate 命名。你也可以这样理解：代理方法，它描述的是某一个事件，而不是事件要执行的某个方法。

4.为什么点击按钮后就直接将占位图移除?

#pragma mark - 重新加载按钮点击
/** 重新加载按钮点击 */
- (void)reloadButtonClicked:(UIButton *)sender{
    // 代理方执行方法
    if ([_delegate respondsToSelector:@selector(placeholderView:reloadButtonDidClick:)]) {
        [_delegate placeholderView:self reloadButtonDidClick:sender];
    }
    // 从父视图上移除
    [self removeFromSuperview];
}

我之前的做法是写一个移除占位图的方法，然后将这个方法暴露出去，需要移除的时候就调用这个方法。后面想了想，这样做完全是自找麻烦：我们点击UIAlertView的按钮的时候，这个alertView不就自动移除了吗？而这个占位图，不也可以看做是一个弹窗吗？

 

为何这么6

使用方法

作为标准delegate传值的view，使用方法类似于系统的UIAlertView。
1. 引入delegate

@interface ViewController ()<CQPlaceholderViewDelegate>

2. 初始化

CQPlaceholderView *placeholderView = [[CQPlaceholderView alloc]initWithFrame:tableView.bounds type:CQPlaceholderViewTypeNoOrder delegate:self];
[tableView addSubview:placeholderView];

看到没有，我想在哪add就在哪add，比那什么只能在tableView或collectionView上展示的强大多了。正是这个frame和完全开放的被add性决定了这个通用占位图的高度灵活性。

 

推了一下我的300多度近视眼镜

3. 处理回调

#pragma mark - Delegate - 占位图
/** 占位图的重新加载按钮点击时回调 */
- (void)placeholderView:(CQPlaceholderView *)placeholderView reloadButtonDidClick:(UIButton *)sender{
    switch (placeholderView.type) {
        case CQPlaceholderViewTypeNoGoods:       // 没商品
        {
            [self.view makeToast:@"买个球啊"];
        }
            break;

        case CQPlaceholderViewTypeNoOrder:       // 没有订单
        {
            [self.view makeToast:@"拉到就拉到"];
        }
            break;

        case CQPlaceholderViewTypeNoNetwork:     // 没网
        {
            [self.view makeToast:@"没网适合打排位"];
        }
            break;

        case CQPlaceholderViewTypeBeautifulGirl: // 妹纸
        {
            [self.view makeToast:@"哦，那你很棒棒哦"];
        }
            break;

        default:
            break;
    }
}

对比DZNEmptyDataSet

DZNEmptyDataSet
这是当前很受欢迎的一个库:

A drop-in UITableView/UICollectionView superclass category for showing empty datasets whenever the view has no content to display

它通过一系列代理方法来决定占位图的显示样式及事件回调。平心而论，很优秀，但是我还是决定用我自己的。
我的看法是(Im my opinion)：
DZNEmptyDataSet很强大，它之所以如此强大是为了让大部分人可以直接拿来即可用，它的目标是满足大部分开发者的一般常规需求，所以，它或许适合你，但一定不是最适合你，最适合你的，一定是自己亲手打造的。还有，它很强大，以至于有些功能你都不需要。
窃以为：知道其实现原理，然后自己封装真正适合自己当前项目的框架才是王道。

 

多了些细节

demo

分享的人不少，认真总结分享的人不多，请不要吝惜你的star。
github demo

作者：无夜之星辰
链接：https://www.jianshu.com/p/beca3ac24031
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。