Tangram源码阅读

Tangram源码阅读

1.官方介绍非常好，看完基本概念就理清了。在这个基础上，尝试去探索源码的实现，理解会更深入。顺便放一张官方提供的原理图：

Tangram原理.jpg

2.阅读源码

使用的Demo为官方提供，我们直接开始。

MockViewController的viewDidLoad实现如下：

- (void)viewDidLoad {
    [super viewDidLoad];
    
    [self loadMockContent];
    [self registEvent];
    [self.tangramView reloadData];
    // Do any additional setup after loading the view.
}

第一步loadMockContent主要是把配置（即json数据）转换为TangramView可用的数据格式。它的最终目的也是把各式各样的业务数据转化为框架能使用的统一格式数据。
在这之前，先简单提一下它所提供的数据解析器包含的类。主要由Helper类+Factory类组成。这些类提供了如下转换：

• dictionary -> layout实例
• dictionary -> model实例
• model实例 -> element实例
• ……

最终，我们将得到页面展示的所有的layout（即每一个独立区块）。layout，官方称其为卡片，是页面内可按行划分的一个一个独立区块。我认为也可以理解成UITableView中的一个section。
回到代码：

-(void)loadMockContent
{
    NSString *mockDataString = [NSString stringWithContentsOfFile:[[NSBundle mainBundle] pathForResource:@"TangramMock" ofType:@"json"] encoding:NSUTF8StringEncoding error:nil];
    NSData *data = [mockDataString dataUsingEncoding:NSUTF8StringEncoding];
    NSDictionary *dict = [NSJSONSerialization JSONObjectWithData: data options:NSJSONReadingAllowFragments error:nil];
    self.layoutModelArray = [[dict objectForKey:@"data"] objectForKey:@"cards"];
    [TangramDefaultItemModelFactory registElementType:@"1" className:@"TangramSingleImageElement"];
    [TangramDefaultItemModelFactory registElementType:@"2" className:@"TangramSimpleTextElement"];
    self.layoutArray = [TangramDefaultDataSourceHelper layoutsWithArray:self.layoutModelArray tangramBus:self.tangramBus];
}

借助TangramDefaultDataSourceHelper类的方法，我们实现了数据->layout的转换。再看一下转换的具体实现：

+(NSArray *> *)layoutsWithArray: (NSArray *)dictArray
                                                   tangramBus: (TangramBus *)tangramBus
{
    NSMutableArray *layouts = [[NSMutableArray alloc]init];
    if ([(Class)([TangramDefaultDataSourceHelper sharedInstance].layoutFactoryClass) instanceMethodForSelector:@selector(preprocessedDataArrayFromOriginalArray:)]) {
        dictArray = [[TangramDefaultDataSourceHelper sharedInstance].layoutFactoryClass preprocessedDataArrayFromOriginalArray:dictArray];
    }
    for (NSDictionary *dict in dictArray) {
        UIView *layout = [[TangramDefaultDataSourceHelper sharedInstance].layoutFactoryClass layoutByDict:dict];
        [self fillLayoutProperty:layout withDict:dict tangramBus:tangramBus];
        [layouts tgrm_addObjectCheck:layout];
        for (int i = 0 ; i< layout.itemModels.count; i++) {
            TangramDefaultItemModel *itemModel = [layout.itemModels tgrm_objectAtIndexCheck:i];
            if ([itemModel isKindOfClass:[TangramDefaultItemModel class]]) {
                itemModel.index = i;
            }
        }
    }
    return [layouts copy];
}

①原生数据预处理
②根据type，选择不同的factory解析数据。并为itemModel标记index

Q：layout肯定存在多种样式，如何实现type到layout的映射解析？
A：看一下layoutByDict方法的实现

+ (UIView *)layoutByDict:(NSDictionary *)dict
{
    NSString *type = [dict tgrm_objectForKeyCheck:@"type" class:[NSString class]];
    if (type.length <= 0) {
        return nil;
    }
    NSString *layoutClassName = [[TangramDefaultLayoutFactory sharedInstance].layoutTypeMap tgrm_objectForKeyCheck:type class:[NSString class]];
    UIView *layout = nil;
    if ([dict tgrm_boolForKey:@"canHorizontalScroll"] && ([type integerValue] <= 4 || [type integerValue] == 9)) {
//        layout = [[TangramScrollFlowLayout alloc] init];
//        ((TangramScrollFlowLayout *)layout).numberOfColumns = (NSUInteger)[type integerValue];
    }
    else {
        layout = (UIView *)[[NSClassFromString(layoutClassName) alloc]init];
    }
    if (!layout) {
        NSLog(@"[TangramDefaultLayoutFactory] layoutByDict : cannot find layout by type , type :%@",type);
        return nil;
    }
    return [TangramDefaultLayoutFactory fillLayoutProperty:layout withDict:dict];
}

从中可以看到存在一个layoutTypeMap，这是一个type的映射表，它根据不同的type获取解析所需的layout类名，最后调用fillLayoutProperty:withDict:方法，为layout的属性赋值。我们看一下具体实现�：

+ (UIView *)fillLayoutProperty:(UIView *)layout withDict:(NSDictionary *)dict
{
    return [TangramLayoutParseHelper layoutConfigByOriginLayout:layout withDict:dict];
}

TangramLayoutParseHelper是真正解析数据并赋值的地方。
我们回顾一下函数调用顺序(非完整)：

• layoutsWithArray:tangramBus: --->
• layoutByDict: --->
• fillLayoutProperty:withDict:tangramBus:

看起来后2步做的事情是同样的。其实TangramDefaultDataSourceHelper像一个中间件，在原生数据和3大Factory中起一个过渡作用。3个Factory最终交付出去的数据类型是明确的（layout、model、element），是个性化的。而他们也有一些通用性的内容，如必然提供的属性数据、itemModel配置、header和footer配置等。正是在TangramDefaultDataSourceHelper的串联下，2个helper类+3个factory类一同完成了原生数据到统一数据模型的转换。
Tangram提供了足够多的layout样式，初次使用时一定会觉得难以上手。我觉得主要还是要了解它做了什么事，涉及到了哪些类，并且是如何分配它们的责任的。在具体的实践中再去学习配置的规则，更能掌握它的使用。