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 *)placeholderViewreloadButtonDidClick:(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
不就自动移除了吗?而这个占位图,不也可以看做是一个弹窗吗?
使用方法
作为标准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性决定了这个通用占位图的高度灵活性。
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
來源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。