xml地图|网站地图|网站标签 [设为首页] [加入收藏]

通用占位图,代码块语法糖

来源:http://www.ccidsi.com 作者:集成介绍 人气:149 发布时间:2020-04-05
摘要:灵魂歌星-泰妍 Xcode中的代码片段私下认可放在上面包车型地铁目录中: 青娥时期-林允儿(임윤아卡塔尔 骨子里利用情形: 没网时的唤醒view,tableView或collectionView没内容时的来得view,以

图片 1灵魂歌星-泰妍

Xcode中的代码片段私下认可放在上面包车型地铁目录中:

图片 2青娥时期-林允儿(임윤아卡塔尔

骨子里利用情形:

没网时的唤醒view,tableView或collectionView没内容时的来得view,以致任何特殊景况时显得的一定view。如:

图片 3广阔的三种情状

~/Library/Developer/Xcode/UserData/CodeSnippets

如何是大多据占位图?

重重据占位图,正是当后台再次来到的数据源为空时须要出示的页面,比如下边那三张:

图片 4过多据占位图

自己的指标:

对上述几种景况的显得view做联合封装,以后做新APP时,笔者只需在这里个轮子上稍加纠正就可完毕相应要求。

咱俩得以将引得中的代码片段备份,也足以将其直接拷出来放在分化的微Computer上利用

为何大家要求广大据占位图?

雷同的话,tableView获取到的数据源为空时,直接显示叁个空的tableView显得比较突兀,所以设计员往往会针对这种气象提交相应的UI,用来顶替空tableView的呈现。

对团结的供给:

代码简洁标准,逻辑清晰,保险写出的代码现在其他接手的人方可轻巧读懂。

前提:导入Masonry和UI Addation类库

思路:

广大据占位图是一个view,三个覆盖在tableView上的自定义view,这么些view可以响应单击手势。

对轮子的渴求:

  • 使用方便
  • 轻巧维护士学改过
  • 高内聚,低耦合(不要因为那几个轮子的到场而影响此前的代码)

格式:编号-解释(快捷键)

落到实处际情况势

要达成那几个效果,比较简单,可是,我们的对象是:未有蛀牙(未有蛀牙的意味便是不单周详兑现效果与利益,何况接纳十一分低价,何况便于匡正和维护)。

图片 5

  • ##### 第一步:封装无数据占位图

那是一个自定义view,根据设计图搭建UI就能够,必要注意的是:在二个门类中,无多少占位图往往不独有一种(无订单、无收藏的商品、无收获地址。。。),不过它们的布局往往很形似,所以能够透过传播不一致的值创制差别的UI。

思路:

  • 那是二个view,能够加多到tableView或collectionView上的view,当然,也能够拉长到任何品种的view上。
  • 万般,在二个门类中,从UI的角度来看,那样的view有三种,可是,从组织的角度来看,它们又同样,比如说:正中间多少个imageView、imageView下方三个label、label下方二个button。
  • 点击那些view或然这么些view上的button,会实行相应回调方法。

类库下载地址:

自定义无多少占位图NoContentView

.h文件:

#import <UIKit/UIKit.h>// 无数据占位图的类型typedef NS_ENUM(NSInteger, NoContentType) { /** 无网络 */ NoContentTypeNetwork = 0, /** 无订单 */ NoContentTypeOrder = 1};@interface NoContentView : UIView/** 无数据占位图的类型 */@property (nonatomic,assign) NSInteger type;@end

.m文件

#import "NoContentView.h"#import "UIColor Util.h"#import "Masonry.h"@interface NoContentView ()<UIScrollViewDelegate>@property (nonatomic,strong) UIImageView *imageView;@property (nonatomic,strong) UILabel *topLabel;@property (nonatomic,strong) UILabel *bottomLabel;@end@implementation NoContentView#pragma mark - 构造方法- (instancetype)initWithFrame:frame{ if (self = [super initWithFrame:frame]) { // UI搭建 [self setUpUI]; } return self;}#pragma mark - UI搭建/** UI搭建 */- setUpUI{ self.backgroundColor = [UIColor whiteColor]; //------- 图片 -------// self.imageView = [[UIImageView alloc]init]; [self addSubview:self.imageView]; //------- 内容描述 -------// self.topLabel = [[UILabel alloc]init]; [self addSubview:self.topLabel]; self.topLabel.textAlignment = NSTextAlignmentCenter; self.topLabel.font = [UIFont systemFontOfSize:15]; self.topLabel.textColor = [UIColor colorWithHexString:@"484848"]; //------- 提示点击重新加载 -------// self.bottomLabel = [[UILabel alloc]init]; [self addSubview:self.bottomLabel]; self.bottomLabel.textAlignment = NSTextAlignmentCenter; self.bottomLabel.font = [UIFont systemFontOfSize:15]; self.bottomLabel.textColor = [UIColor colorWithHexString:@"484848"]; //------- 建立约束 -------// [self.imageView mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.mas_equalTo; make.centerY.mas_offset; make.size.mas_equalTo(CGSizeMake); }]; [self.topLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(self.imageView.mas_bottom).mas_offset; make.left.right.mas_offset; make.height.mas_equalTo; }]; [self.bottomLabel mas_makeConstraints:^(MASConstraintMaker *make) { make.top.mas_equalTo(self.topLabel.mas_bottom).mas_offset; make.left.right.mas_offset; make.height.mas_equalTo; }]; }#pragma mark - 根据传入的值创建相应的UI/** 根据传入的值创建相应的UI */- setType:(NSInteger)type{ switch  { case NoContentTypeNetwork: // 没网 { [self setImage:@"网络异常" topLabelText:@"貌似没有网络" bottomLabelText:@"点击重试"]; } break; case NoContentTypeOrder: { [self setImage:@"订单无数据" topLabelText:@"暂时没有订单" bottomLabelText:@"重新�加载"]; } break; default: break; }}#pragma mark - 设置图片和文字/** 设置图片和文字 */- setImage:(NSString *)imageName topLabelText:(NSString *)topLabelText bottomLabelText:(NSString *)bottomLabelText{ self.imageView.image = [UIImage imageNamed:imageName]; self.topLabel.text = topLabelText; self.bottomLabel.text = bottomLabelText;}

BaseTableView作为基类,要求时能够依据真实景况展现不相近式的洋洋据占位图,也足以随将在无多少占位图移除。当然,点击这几个占位图也会回调相应措施。

.h文件

#import <UIKit/UIKit.h>@interface BaseTableView : UITableView// 无数据占位图点击的回调函数@property (copy,nonatomic) void(^noContentViewTapedBlock)();/** 展示无数据占位图 @param emptyViewType 无数据占位图的类型 */- showEmptyViewWithType:(NSInteger)emptyViewType;/* 移除无数据占位图 */- removeEmptyView;@end

.m文件

#import "BaseTableView.h"#import "NoContentView.h"@interface BaseTableView (){ NoContentView *_noContentView;}@end@implementation BaseTableView/** 展示无数据占位图 @param emptyViewType 无数据占位图的类型 */- showEmptyViewWithType:(NSInteger)emptyViewType{ // 如果已经展示无数据占位图,先移除 if (_noContentView) { [_noContentView removeFromSuperview]; _noContentView = nil; } //------- 再创建 -------// _noContentView = [[NoContentView alloc]initWithFrame:self.bounds]; [self addSubview:_noContentView]; _noContentView.type = emptyViewType; //------- 添加单击手势 -------// [_noContentView addGestureRecognizer:[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(noContentViewDidTaped:)]];}/* 移除无数据占位图 */- removeEmptyView{ [_noContentView removeFromSuperview]; _noContentView = nil;}// 无数据占位图点击- noContentViewDidTaped:(NoContentView *)noContentView{ if (self.noContentViewTapedBlock) { self.noContentViewTapedBlock(); // 调用回调函数 }}@end
  • ### 使用:

tableView的多少源数组为空时展现,不为空时移除。

 // 展示无数据占位图 [self.tableView showEmptyViewWithType:NoContentTypeNetwork]; // 无数据占位图点击的回调 self.tableView.noContentViewTapedBlock = ^{ [SVProgressHUD showSuccessWithStatus:@"没网"]; }; // 移除无数据占位图 [self.tableView removeEmptyView];

先贴出代码,稍后细讲

#import <UIKit/UIKit.h>/** 占位图的类型 */typedef NS_ENUM(NSInteger, CQPlaceholderViewType) { /** 没网 */ CQPlaceholderViewTypeNoNetwork = 1, /** 没订单 */ CQPlaceholderViewTypeNoOrder, /** 没商品 */ CQPlaceholderViewTypeNoGoods, /** 美丽的妹纸 */ CQPlaceholderViewTypeBeautifulGirl};#pragma mark - @protocol@class CQPlaceholderView;@protocol CQPlaceholderViewDelegate <NSObject>/** 占位图的重新加载按钮点击时回调 */- 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:frame type:(CQPlaceholderViewType)type delegate:delegate;@end

#import "CQPlaceholderView.h"@implementation CQPlaceholderView#pragma mark - 构造方法/** 构造方法 @param frame 占位图的frame @param type 占位图的类型 @param delegate 占位图的代理方 @return 指定frame、类型和代理方的占位图 */- (instancetype)initWithFrame:frame type:(CQPlaceholderViewType)type delegate:delegate{ if (self = [super initWithFrame:frame]) { // 存值 _type = type; _delegate = delegate; // UI搭建 [self setUpUI]; } return self;}#pragma mark - UI搭建/** UI搭建 */- 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  { 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 - 重新加载按钮点击/** 重新加载按钮点击 */- reloadButtonClicked:(UIButton *)sender{ // 代理方执行方法 if ([_delegate respondsToSelector:@selector(placeholderView:reloadButtonDidClick:)]) { [_delegate placeholderView:self reloadButtonDidClick:sender]; } // 从父视图上移除 [self removeFromSuperview];}@end

细节:

  • 听说苹果官方文书档案的推荐,你的主意名必须直观。
  • 创建使用枚举,看起舒适、写起放心。
  • 为啥是移除无数据占位图并不是暗藏?因为您曾经无需它了,所以也没有须求它遮掩。不需求时移除,须要时再建,别讲什么样再建消耗内部存款和储蓄器,你间接规避在此不占内部存储器?这种场馆下,随时移除释放财富才是最棒的做法。
  • delegate和block的拈轻怕重:当三种艺术都得以兑现均等效果,並且代码可读性并辔齐驱时,选拔终极利用时能让使用者敲越来越少代码的这种情势(笔者那边用block,使用时就只敲一句代码,如若用delegate,可读性不见得更加高,还要多敲两行代码,所以用block)。

详尽表明

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

八个参数表明:

  • frame:决定占位图的大小和地点。之所以要求以此参数是因为:这些占位图恐怕和你的tableView相符大,也大概是全屏的。
  • type:占位图的门类。那几个参数决定占位图的显示样式。
  • delegate:代理方。处监护人件。
/** 占位图类型 */@property (nonatomic,assign,readonly) CQPlaceholderViewType type;/** 占位图的代理方 */@property (nonatomic,weak,readonly) id <CQPlaceholderViewDelegate> delegate;

因为那多个天性须要暴拆穿来,可是自身又不期待它们在外表被涂改,小编期待构造方法是决定以此占位图属性的当世无双模式。还会有正是:让在外界能直接改换的越少,意外也就越少。

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

大概有人会说,你这几个代理方法不正是想要施行重新加载数据方式嘛,直接命名称为reloadData不是多好的?反正曾经懵懂的自家看人家的代码时是这么想当然的以为的,直到有一天本身看了法定文档以致回看了一下连串给代理方法的命名。其实代理方法的命名是三个丰裕珍视的东西,我所以这么命名是全然参照官方文档的命名标准的,提出极度的瞅双目delegate 命名。你也能够这么通晓:代办方法,它陈说的是某二个事变,并不是事件要试行的有些方法

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

自己事情发生前的做法是写贰个移除占位图的办法,然后将以此形式暴暴露来,必要移除的时候就调用那几个方法。后面想了想,那样做完全都以自取灭亡麻烦:大家点击UIAlertView的按键的时候,那一个alertView不就活动移除了啊?而以此占位图,不也足以当作是三个弹窗吗?

图片 6为什么这么6

目录:

demo

图片 7你跑不掉的.gif此文章对应的demo本条demo尤其通用和强盛注:看demo直接从ViewController.m看起

应用方法

用作职业delegate传值的view,使用方法肖似于系统的UIAlertView1. 引入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性决定了那个通用占位图的莫斯科大学灵活性。

图片 8推了一下自个儿的300多度干眼镜

3. 甩卖回调

#pragma mark - Delegate - 占位图/** 占位图的重新加载按钮点击时回调 */- 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; }}

01-普通View (xView)

2017年9月26日更新

末尾作者发觉这么些轮子不是相当的高贵,然后再次设计了三个:iOS开荒造轮子 | UIView及其子类的占位图

对比DZNEmptyDataSet

DZNEmptyDataSet这是近些日子非常受接待的二个库:

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

它通过一系列代理方法来调节占位图的来得样式及事件回调。公私明显,很精美,可是本身也许决定用本人要好的。自家的见识是(Im my opinionState of Qatar:DZNEmptyDataSet很强盛,它因而那样强硬是为了让大部分人得以一向拿来就能够用,它的靶子是满足大多数开垦者的平常符合规律供给,所以,它或者相符你,但必然不是最相符您,最符合您的,一定是和煦亲手制作的。还应该有,它很强盛,以致于有个别效果与利益你都不需求。窃认为:领会其达成原理,然后自身包装真正切合自个儿眼下项目标框架才是王道

图片 9多了些细节

01.1 - 带点击事件的View(xViewActionState of Qatar

demo

享受的人不菲,认真总括分享的人没有多少,请不要珍惜你的star。github demo

图片 10只有107个了

02-普通label(xLabel)

02.2-带事件label(xLabelAction)

03-普通textField(xTextField)

04-带blockBtn(xBtn)

05-上海教室下文字Btn(xBtnFuwenbenState of Qatar

06-初始化tableview(xTableView)

06.1-设置tableView数据源代理(xTableViewData卡塔尔(قطر‎

07-普通ImageView(xImageView)

07.2-带事件的imageView(xImageViewAction)

07.3-将Image保存到地头相册

08-collectionViewFlowLayout(xFlowLayout)

08.1- collectionView初始化(xCollectionView)

08.2-collectionView的数据源代理方法(xCollectionViewData卡塔尔国

09.2-导航栏全屏pop手势再次来到(xAllScreenPop卡塔尔(قطر‎


01-普通View (xView)

({

UIView*view = [[UIViewalloc]init];

[<#code#> addSubview:view];

view.backgroundColor = [UIColor <#code#>];

[view mas_makeConstraints:^(MASConstraintMaker *make) {

<#code#>

}];

view;

});

01.1 - 带点击事件的View(xViewActionState of Qatar

({

UIView*view = [[UIViewalloc]init];

[<#code#> addSubview:view];

view.backgroundColor = [UIColor <#code#>];

[view mas_makeConstraints:^(MASConstraintMaker *make) {

<#code#>

}];

[view whenTapped:<#^(void)block#>];

view;

});

02-普通label(xLabel)

({

UILabel*label = [[UILabelalloc]init];

label.text = <#code#>;

label.textColor = [UIColor <#code#>];

label.font = [UIFont systemFontOfSize:<#code#>];

[<#code#> addSubview:label];

[label mas_makeConstraints:^(MASConstraintMaker *make) {

<#code#>

}];

label;

});

02.2-带事件label(xLabelAction)

({

UILabel*label = [[UILabelalloc]init];

label.text = <#code#>;

label.textColor = [UIColor <#code#>];

label.font = [UIFont systemFontOfSize:<#code#>];

[<#code#> addSubview:label];

[label mas_makeConstraints:^(MASConstraintMaker *make) {

<#code#>

}];

[label whenTapped:<#^(void)block#>];

label;

});

03-普通textField(xTextField)

({

UITextField*textField = [[UITextFieldalloc]init];

textField.placeholder=@"<#code#>";

textField.borderStyle=UITextBorderStyleRoundedRect;

textField.font = [UIFont fontWithName:@"Arial"size:<#code#>];//设置属性

//textField.clearButtonMode = UITextFieldViewModeAlways; //带X模式

//textField.keyboardType = UIKeyboardTypeNumberPad; //键盘格局

//textField.secureTextEntry = YES; //密码格局

[<#code#> addSubview:textField];

[textField mas_makeConstraints:^(MASConstraintMaker *make) {

<#code#>

}];

textField;

});

04-带blockBtn(xBtn)

本文由68399皇家赌场发布于集成介绍,转载请注明出处:通用占位图,代码块语法糖

关键词: 68399皇家赌场 iOS 轮子 位图 ios 应用

上一篇:常见问题的整理

下一篇:没有了

最火资讯