LYEmptyView
I started to write this framework 5 or 6 months ago when the company started a new project. After the verification and test of this project, we have been constantly improving it. I hereby share this framework for your reference and learning. Making the address
Do not need to follow the agreement, do not need to set up agent, do not need to implement proxy approach, only the code, can be a blank page for the integration of a UITableViwe/UICollectionView placeholder figure. self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
directory
- 1 effect Display
- Reference Examples
- One line of code integrates the empty content view
- 2. Freely select empty content elements
- Customize empty content elements
- 4. Customize the UI styles of elements
- 5 Secondary Encapsulation
- 6 Delay displaying emptyView
- 7 Special requirements, manual control of emptyView display hide
1 effect Display
Reference Examples
One line of code integrates the empty content view
// Frame methods
self.tableView.ly_emptyView = [LYEmptyView emptyViewWithImageStr:@"noData"
TitleStr :@" No data yet, click reload"
detailStr:@""];
Copy the codePS: You can double wrap the framework for simpler calls (the double wrap method is covered in Example 5 below)
// Double encapsulate method, call succinct
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
Copy the codeCompletely low coupling, adding this line of code to your project can be integrated. Whether the project is reloadData, INSERT, DELETE, etc., it doesn’t need to do anything else. This line of code can achieve the following effect
2. Freely select empty content elements
The interaction event can be SEL or block
SEL interaction events:
self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
TitleStr :@" No data"
DetailStr :@" Please try again later!"
BtnTitleStr :@" reload"
target:target
action:action];
Block interaction events:
self.tableView.ly_emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
titleStr:@""
detailStr:@""
btnTitleStr:@""
btnClickBlock:^{}];
// imageStr: placeholder image
// titleStr: title
// detailStr: Detailed description
// btnTitleStr: button title
Copy the codeThe framework provides four elements, and the corresponding elements can be displayed by passing in the string of the corresponding elements (the button display is provided by passing in the target, Action or btnClickBlock). You can combine them according to the requirements of the project
Customize empty content elements
In special cases, if the empty content state layout does not meet the requirements, you can customize it by using the method + (instancetype)emptyViewWithCustomView:(UIView *)customView; Passing in a View creates a custom emptyView
self.tableView.ly_emptyView = [LYEmptyView emptyViewWithCustomView:customView];
Copy the code
4. Customize the UI styles of elements
It takes a lot of code to customize the UI style here, but don’t worry, in Example 5 we’ll show you how to wrap it twice, and then call it with only one line of code
// Initialize an emptyView
LYEmptyView *emptyView = [LYEmptyView emptyActionViewWithImageStr:@"noData"
TitleStr :@" No data"
DetailStr :@" Please try again later!"
BtnTitleStr :@" reload"
btnClickBlock:^{}];
// Vertical spacing of elements
emptyView.subViewMargin = 20.f;
// Title color
emptyView.titleLabTextColor = MainColor(90, 180, 160);
// Describe the color
emptyView.detailLabTextColor = MainColor(180, 120, 90);
// Button background color
emptyView.actionBtnBackGroundColor = MainColor(90, 180, 160);
// Set the empty content placeholder map
self.tableView.ly_emptyView = emptyView;
Copy the codeThere are only a few common attributes listed here. For more information, go to LyemptyView.h
5 Secondary Encapsulation
In the example code in section 4, changing the style of emptyView requires individual property changes, which would be cumbersome and difficult to maintain if every interface in the project was written this way. The solution is to double wrap the library, and after the double wrap, manage the UI style separately for easy maintenance
1) Create a new class that inherits from LYEmptyView, such as MyDIYEmpty in demo
2) rewrite- (void)prepareMethod and modify the UI style of the element you want to change
- (void)prepare{
[super prepare];
self.titleLabFont = [UIFont systemFontOfSize:25];
self.titleLabTextColor = MainColor(90, 180, 160);
self.detailLabFont = [UIFont systemFontOfSize:17];
self.detailLabTextColor = MainColor(180, 120, 90);
self.detailLabMaxLines = 5;
self.actionBtnBackGroundColor = MainColor(90, 180, 160);
self.actionBtnTitleColor = [UIColor whiteColor];
}
Copy the codeThe two steps above achieve a separate management of the style calling method unchanged, except that the calling class becomes MYDiyEmpty
self.tableView.ly_emptyView = [MYDiyEmpty emptyActionViewWithImageStr:@"noData"
TitleStr :@" No data yet"
DetailStr :@" Please try again later!"
BtnTitleStr :@" reload"
btnClickBlock:^{}];
Copy the code3) Further encapsulate the displayed element content, such as no data state graph and no network state graph
Define method + (InstanceType)diyNoDataEmpty in myDiyEmp.h; Implement the method in mydiyEmpty.m
+ (instancetype)diyNoDataEmpty{
return [MyDIYEmpty emptyViewWithImageStr:@"noData"
TitleStr :@" No data yet"
DetailStr :@" Please try again later!" ] ;
}
Copy the codeSelf.tableview. ly_emptyView = [MyDIYEmpty diyNoDataEmpty]; self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
The following two examples, which are special requirements and require four lines of code, are similar to MJRefrsh calls that require styling, then show and hide
6 Delay displaying emptyView
As shown in Figure 1, the framework automatically calculates whether to display the emptyView based on the DataSource. When a network request is made from the empty DataSource, the emptyView is automatically displayed. This framework provides two methods to achieve this requirement, both methods are scrollView classification, very convenient call
/ * *
Called when you start a network request. The ly_startLoading call temporarily hides emptyView
When the ly_endLoading method is called, the internal ly_endLoading method is based on the current tableView/collectionView
DataSource to automatically determine whether to display emptyView
* /
- (void)ly_startLoading;
/ * *
Called when you want to refresh emptyView state
Note: when ly_endLoading is called, any UI refresh must be called after the UI refresh method.
Because the view's DataSource is not updated until the UI is refreshed, calling this method correctly determines whether there is content.
* /
- (void)ly_endLoading;
Copy the code* Note: To use these methods, set emptyView’s autoShowEmptyView property to NO and turn off auto implicit
Here is an example call (see Demo2 in Demo for details)
//1. Set the style first
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
//2. Turn off auto implicit (this step can be encapsulated in a custom class, related calls can be omitted this step)
self.tableView.ly_emptyView.autoShowEmptyView = NO;
//3. Called when the network requests
[self.tableView ly_startLoading];
//4. Call when the UI is refreshed (make sure to call after the UI is refreshed)
[self.tableView ly_endLoading];
Copy the code
7 Special requirements, manual control of emptyView display hide
In some special interfaces, some tableView/collectionView has some fixed dead data, and other data is loaded according to the network. In this case, the above sample method may not meet the requirement. This framework provides two additional approaches to this problem.
/ * *
A manual call shows the emptyView
* /
- (void)ly_showEmptyView;
/ * *
Manual calls to hide emptyView
* /
- (void)ly_hideEmptyView;
Copy the code* Note: To use these methods, set emptyView’s autoShowEmptyView property to NO and turn off auto implicit
Here is an example call (see Demo4 in Demo for details)
//1. Set the style first
self.tableView.ly_emptyView = [MyDIYEmpty diyNoDataEmpty];
//2. Turn off auto implicit (this step can be encapsulated in a custom class, related calls can be omitted this step)
self.tableView.ly_emptyView.autoShowEmptyView = NO;
/ / 3. Display emptyView
[self.tableView ly_showEmptyView];
4 / / hide emptyView
[self.tableView ly_hideEmptyView];
Copy the code
Github welcomes star addresses