- iOS 7.0+
- 多样式
- 轻量级,核心实现仅仅是对 UIView 进行扩展
- 可以自定义
- 支持不同高度的 cell
实心 | 水平渐变 | 垂直渐变 | 斜向渐变 |
![]() |
![]() |
![]() |
![]() |
集成
pod 'Somo'
使用
#import "Somo.h"
- 当需要某个UIView拥有 Skeleton 效果时,只需实现协议的一个必要方法:
@required
/**
* Example:
SomoView * s0 = [[SomoView alloc] initWithFrame:CGRectMake(10, 20, 70, 70)];
SomoView * s1 = [[SomoView alloc] initWithFrame:CGRectMake(100, 30, 200, 15)];
SomoView * s2 = [[SomoView alloc] initWithFrame:CGRectMake(100, 70, 100, 15)];
return @[s0,s1,s2];
*
@return array of SomoViews
*/
- (NSArray<SomoView *> *)somoSkeletonLayout;
- Somo 对 UIView 进行了扩展,开发者调用即可获得 Skeleton 效果:
- (void)beginSomo;
- (void)endSomo;
UITableView-skeleton
在常见场景中,数据请求未到达前,UITableView 中所有 visibleCells 都应该呈现 Skeleton 效果。为了达到这种效果,
您不必再编写更多的代码。Somo 中有一个遵循 <UITableViewDataSource,UITableViewDelegate> 协议的 SomoDataSourceProvider 类,
您只需要按照该类指定的初始化方法构造一个实例,数据未到达前,将 tableview 实例的 datasource 和 delegate 指向构造出的
SomoDataSourceProvider 实例。当数据到达后,将 tableview 的 datasource 和 delegate 指向 controller 或其他。
- 数据到达前:
//将tableview的datasource指向SomoDataSourceProvider
//当数据加载完成后,将tableview的datasource指向self
//cell高度相同
self.provider = [SomoDataSourceProvider dataSourceProviderWithCellReuseIdentifier:@"id"];
self.tableView.dataSource = self.provider;
self.tableView.delegate = self.provider;
// cell 高度不同
self.provider = [[SomoDataSourceProvider alloc] initWithTableViewCellBlock:^UITableViewCell<SomoSkeletonLayoutProtocol> *(UITableView *tableView, NSIndexPath *indexPath) {
if(indexPath.row%2 == 0){
return [tableView dequeueReusableCellWithIdentifier:@"id" forIndexPath:indexPath];
}else{
return [tableView dequeueReusableCellWithIdentifier:@"oid" forIndexPath:indexPath];
}
} heightBlock:^CGFloat(UITableView *tableview, NSIndexPath *indexPath) {
if(indexPath.row%2 == 0){
return 120;
}else{
return 80;
}
}];
- 数据到达后:
#pragma mark -
self.tableView.dataSource = self;
self.tableView.delegate = self;
//============================
[self.tableView reloadData];
- 注意点: 不要对 SomoDataSourceProvider 进行定制。必须实现中的一个方法:
#pragma mark - 在这里必调用 endSomo
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
[cell endSomo];
}
- UICollectionView skeleton
- 数据到达前:
self.provider = [SomoDataSourceProvider dataSourceProviderWithCellReuseIdentifier:@"id"];
self.collectionView.dataSource = self.provider;
self.collectionView.delegate = self.provider;
- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{
[cell endSomo];
}