接入Tangram代码
1. 增加Tangram依赖
Tangram要求iOS系统版本在 7.0及以上即可
使用Cocoapods
在Podfile里面增加Tangram依赖
pod 'Tangram'
直接使用代码依赖
直接把Tangram中Source和Resource文件夹加入到工程中即可。
Tangram本身也有依赖,需要把依赖加到Podfile中或者自行依赖下面的这些模块
pod 'LazyScroll', ~>'0.0.2'
pod 'SDWebImage', ~>'3.7'
2. 注册Tangram组件
类似UITableView注册cell一样,使用Tangram组件也是需要预先注册的。
下面是一个样例,注册了type = 1的组件 是 TangramSingleImageElement 这个类
type = 2的组件是 TangramSimpleTextElement 这个类
[TangramDefaultItemModelFactory registElementType:@"1" className:@"TangramSingleImageElement"];
[TangramDefaultItemModelFactory registElementType:@"2" className:@"TangramSimpleTextElement"];
3. 读取数据,使用Helper解析成layout实例
//获取数据
NSString *mockDataPath = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"TangramMock" ofType:@"json"] encoding:NSUTF8StringEncoding error:nil];
NSDictionary *dict = [mockDataPath objectFromJSONString];
self.layoutModelArray = [[dict objectForKey:@"data"] objectForKey:@"cards"];
//使用helper解析成layout实例
self.layoutArray = [TangramDefaultDataSourceHelper layoutsWithArray:self.layoutModelArray];
4. 实现TangramDataSource Delegate
//返回layout个数
- (NSUInteger)numberOfLayoutsInTangramView:(TangramView *)view
{
return self.layoutModelArray.count;
}
//返回layout的实例
- (UIView<TangramLayoutProtocol> *)layoutInTangramView:(TangramView *)view atIndex:(NSUInteger)index
{
return [self.layoutArray objectAtIndex:index];
}
//返回某一个layout中itemModel的个数
- (NSUInteger)numberOfItemsInTangramView:(TangramView *)view forLayout:(UIView<TangramLayoutProtocol> *)layout
{
return layout.itemModels.count;
}
//返回layout中指定index的itemModel实例
- (NSObject<TangramItemModelProtocol> *)itemModelInTangramView:(TangramView *)view forLayout:(UIView<TangramLayoutProtocol> *)layout atIndex:(NSUInteger)index
{
return [layout.itemModels objectAtIndex:index];;
}
//根据Model生成View
//以上的方法在调用Tangram的reload方法后就会执行,而这个方法是按需加载
- (UIView *)itemInTangramView:(TangramView *)view withModel:(NSObject<TangramItemModelProtocol> *)model forLayout:(UIView<TangramLayoutProtocol> *)layout atIndex:(NSUInteger)index
{
//先尝试找可以复用的View,有的话就赋值,没有的话就生成一个
UIView *reuseableView = [view dequeueReusableItemWithIdentifier:model.reuseIdentifier];
if (reuseableView) {
reuseableView = [TangramDefaultDataSourceHelper refreshElement:reuseableView byModel:model];
}
else
{
reuseableView = [TangramDefaultDataSourceHelper elementByModel:model];
}
return reuseableView;
}
5. 创建Tangram实例
-(TangramView *)tangramView
{
if (nil == _tangramView) {
_tangramView = [[TangramView alloc]init];
_tangramView.frame = self.view.bounds;
//要设置datasouce delegate
[_tangramView setDataSource:self];
_tangramView.backgroundColor = [UIColor whiteColor];
[self.view addSubview:_tangramView];
}
return _tangramView;
}
6. 刷新一下,视图即可展现
[self.tangramView reloadData];
完整代码可看TangramDemo中的MockViewController.m