alibaba / tangram-ios

Tangram is a modular UI solution for building native page dynamically, including Tangram for Android, Tangram for iOS and even backend CMS. This project provides the sdk on iOS platform.

Tangram - iOS

Tangram is a UI Framework for building a fast and dynamic ScrollView.

The system requirement for Tangram is iOS 7.0+

中文站点

Tips: If you get [!] Unable to find a specification for `LazyScroll` when executed pod install, you can try to update ruby to 2.3.0 or higher and update CocoaPods to 1.0.0 or higher . If it doesn't work , you can try to reset or update CocoaPods master repo again .

Feature

• Two platform support (iOS & Android, See Tangram-Android in Github for Android Version)
• Fast Generate View by JSON Data , provide default parser.
• Easily control the reuseability of views
• Provide multiple built-in layouts
• Custom layout style (by JSON Data or code)
• High scroll performance (Base on LazyScrollView)
• Extendable API

Advantage

Compare to system standard controls(like UICollectionView, GridView), the advantages of Tangram are :

Easily control 'layout' selected for elements(cells).

In the picture above, it shows several kinds of layout, Tangram can easily control
which kind of layout these elements use. You can find its usage in TangramDemo.

Provide default parser , quick parse JSON to View

JSON to View can be very easy by use our default parser.

You can open TangramDemo to see how to tranfer JSON to view.

The default parsers are same in two platform (Android and iOS).

Provide several kinds of layout

We provide internal layouts, including:

• FlowLayout (like grid)
• One drag N Layout (N=2/3/4)
• Fix Layout
• Sticky Layout
• Dragable Layout
• PageScroll Layout
• WaterFlow Layout

To See detailed performance of interal layouts , Click me

Install

Use Cocoapods to Get latest version of Tangram

pod 'Tangram'

Getting Started

• See Getting Started Guide
• Or Open project in TangramDemo and execute pod install to see detail usage.

tangram-ios's Issues

关于设置item的宽度

如图：在不同的屏幕尺寸上，item距离屏幕的间距都是24，item之间的间距都是12，超过四个item还能够左右滑动。请问我应该如何设置item的宽度？

最后希望能够建个群，方便大家交流。

关于最后一行最后一列单元格右边距失效

问题描述： 如果最后一行的单元无法填满整个一行的话，最后一个单元的右边距设置会失效，导致该单元格比正常单元显得大一下，详情请见附件截图。

拉取不到最新的版本的代码

1、在 TangramFlowLayout.m 中第 128 行中，已经进行如下修改，为什么我更新 pod，或者删除重新添加，都无法更新到最新的代码？

-    if (self.headerItemModel && ![self.itemModels containsObject:self.headerItemModel]) {
+    if (self.footerItemModel && ![self.itemModels containsObject:self.footerItemModel]) {

2、在type为10的时候，为什么我设置 "hasIndicator":"false"后依然有小白点存在？也是因为我没拉取到最新的代码吗？

"type": "10",
"style": {
    "hasIndicator":"false",
    "bgColor": "#FFFFFF",
    "scrollMarginLeft": "24",
    "scrollMarginRight": "24",
    "pageRatio": "0.42",
    "hGap": "12.5"
}

请问配置后台开源了吗？在哪里能体验下后台？

如题，想通过后台配置感受下这个框架的整体易用性。

TangramPageScrollLayout 设置scrollMarginLeft后的错误

self.scrollView.contentSize = CGSizeMake(CGRectGetMaxX(lastElementModel.itemFrame) + lastElementModel.marginRight + self.scrollMarginLeft + self.scrollMarginRight, elementHeight) ;
多算了一次scrollMarginLeft导致实际MarginRight = self.scrollMarginLeft + self.scrollMarginRight

container-banner 没有内置到TangramLayoutTypeMap.plist文件中导致崩溃，indicatorImg1设置问题，aspectRatio设置问题

最近公司想使用tangram框架，但是苦于没有太多的资料，只好闷头看源码，但是看得懵懵懂懂的，在使用过程中我有几个问题：

container-banner 没有内置到TangramLayoutTypeMap.plist文件中导致崩溃？（在android下有这个但是没有container-scroll）

根据 VirtualView 组件内部定义的宽高比或者固定宽度，确定父容器高度

如题，排期实现

如何添加点击事件和获取状态

iOS11.0.3的手机，自定义布局的那个页面进不了，cpu占用率99%

关于局部刷新问题

你好，在Tangram中，请问类似天猫中分类导航，选择不同分类，需要请求该分类下的商品数据，刷新商品列表，这个是怎么实现的呢？之前问过说你们数据都是后端组装好的，那么类似这种是在前端页面触发点击再更新数据，是怎么做的呢？

关于点击和曝光的统一处理

对于Native组件和虚拟组件可以在统一的地方处理点击和曝光吗？

轮播图效果滚动到最后一页不是直接滚动到第一页,而是跳到第一页在继续滚动

轮播图效果滚动到最后一页不是继续滚动到第一页,而是跳到第一页在继续滚动，效果很不自然

Element 可以根据内部数据布局动态修改Element的高度吗？

• (CGFloat)heightByModel:(TangramDefaultItemModel *)itemModel 现在只有这个方法返回高度,我想根据数据动态布局后,修改Element的高度如何实现？

请问怎么给卡片添加header呢？

应该怎么在卡片中添加header和footer呢?

请问现在高度能自适应吗？

现在好像都在

• (CGFloat)heightByModel:(TangramDefaultItemModel *)itemModel;
  {
  return 100.f;
  }
  这里面写死高度？

您好，轮播/横向滚动布局有几个问题请教

您好，现在遇到一些问题，向您请教：
1、首次来到这个横向滚动布局页面，最左边的一个图片为什么不能从图片最左边显示呢？
如下图，最左边的一张图片仅仅从中间部位开始显示。

2、如果我开启了自动滚动的话，为什么最后会出现空白页面？并且还会继续滚动

3、如果我不开启自动滚动，就像第一张图一样，整个屏幕显示2张半图，能否做到手动循环滚动？

谢谢。

底层提供通用 VC 传入 dict 即可解析数据

暂时优先级低

这个东西本质上就是一个有限模板集？

研究了一下，说一下我对这个的理解：客户端预先实现几种ui样式，后台在下发数据的时候指定每条数据的ui样式。如果是这个逻辑的话，那么这个动态性是不是就体现在后台可以“切换”ui样式，而不是创造新的ui样式？

[!] Unable to find a specification for `LazyScroll (~> 0.0.2)`

just run with start

自定义的Element，如何适配不同尺寸的设配

在自定义的Element中，一定要返回一个高度，那么对于不同的屏幕尺寸，我应该怎样进行适配？

+ (CGFloat)heightByModel:(TangramDefaultItemModel *)itemModel
{
    return 60.f;
}

您好，Tangram-iOS V2.0 推出有计划吗？

您好，Tangram-iOS V2.0 推出有计划吗？

关于Element复用问题

已经在- (void)mui_afterGetView;中重新进行赋值，仍然出现复用问题，我暂时停止了复用，请问有更好的办法或建议吗？

FlowLayout的load、loadParams、loadType属性

请问在TangramFlowLayout布局中的calculateLayout方法中有以下一段代码，是否是可以使用的呢？

    if ((self.loadType == TangramLayoutLoadTypeLoadOnce || self.loadType == TangramLayoutLoadTypeByPage) && self.loadAPI.length > 0) {
        TangramEvent *loadEvent = [[TangramEvent alloc]initWithTopic:@"requestItems" withTangramView:self.tangramView posterIdentifier:@"requestItems" andPoster:self];
        [loadEvent setParam:self.loadAPI forKey:@"loadAPI"];
        [loadEvent setParam:[NSNumber numberWithInteger:self.loadType] forKey:@"loadType"];
        if (self.loadParams.count > 0) {
            [loadEvent setParam:self.loadParams forKey:@"loadParams"];
        }
        [self.tangramBus postEvent:loadEvent];
    }

我在外部注册了该事件的监听，实现了网络请求、回调后刷新数据源，然后[tangramView reloadData]，但是在reloadData方法中又会去调用TangramFlowLayout的calculateLayout方法，然后就死循环了。请问怎样可以避免呢？

请问下在多列布局下，如果我的高度要根据宽度的比例来设置，要怎么在json文件里写？

如题，用aspectRatio好像没用

轮播/横向滚动布局有问题！

1、关于无限滚动，写的是infinite属性，但是代码实际解析的是infiniteMinCount；
2、TangramDefaultItemModel没有实现归档相应的方法，导致在下面代码(TangramPageScrollLayout.m 541)crash：
self.firstItemModel = (NSObject<TangramItemModelProtocol> *)[self duplicateObject:[self.itemModels firstObject]];
3、文档不够全面，有些属性没有更新，比如indicatorImg1属性在代码上好像没有对应的实现

遇到2个问题，能否帮忙看下呢

1.用cocopods集成以后，少一些自带的layout布局，然后文件夹的结构也没有了
2.对 type = 10的 banner 设置 "hasIndicator": "NO",或者false、-1什么的，不管用，还是显示pagecontrol，设置indicator在外部的属性也不管用，还是在里面

关于数据下发问题

有几个问题想请教下：
1.下发给客户端的的JSON数据是是后端容器全部组装好的吗？客户端只要拿到JSON数据直接渲染就可以了？还是说，只是通过Tangram OP控制台配置的只是个壳，具体卡片内的数据还是抛出事件给客户端自己去异步加载再更新数据源的？
2.上拉加载更多数据是怎么做的？ 是客户端这边自己加上拉加载的功能，去服务端获取分页数据后更新数据源再reload tangramview吗？
3.我们目前想把app首页替换为TangramView，但是首页拆分出来的几个card，依赖不同的业务接口，我们的后端接口目前只做json数据的存取，不做卡片内容数据的获取和组装。所以我们目前形式是，客户端获取到下发的json数据后，遍历卡片业务类型，异步加载卡片需要的数据，再更新数据源，刷新界面，过程比较反锁，有什么其他好的方式吗？

谢谢回答。

布局重叠问题

Ios端吸顶布局会覆盖浮动布局 Android没问题望尽快解决

可以考虑支持下 Carthage 吗？

cocoapods 太重了，建议考虑支持下carthage。

关于异步加载数据

请问一下，看了安卓有提供区块布局内的数据异步加载、分页加载的功能，iOS什么时候能提供？或者有这方面的计划吗？谢谢

TangramDefaultLayoutFactory 初始化失败！

不好意思又来叨扰了
我使用cocoaPod 引入Tangram后，发现 TangramDefaultLayoutFactory单例中的 layoutTypeMap 属性为空，然后跟踪了一下，详情见图。应该是路径写的不对，导致读取plist文件失败。我看你的demo初始化是正常的。

问下目前是否支持按压态

问下目前是否支持按压态

pod install 不成功,搜索显示只有0.0.1版本,把Podfile 和Tangram.podspec 都改成了0.0.1也不行

'-[NSTaggedPointerString tgrm_objectForKeyCheck:class:]: unrecognized selector sent to instance 0xa000000005f32303'

使用你们的demo代码，放到我自己的工程里，用的mock的json文件，直接崩在了TangramDefaultLayoutFactory里面的
NSString *layoutClassName = [[TangramDefaultLayoutFactory sharedInstance].layoutTypeMap tgrm_objectForKeyCheck:type class:[NSString class]];
这句话这里，错误原因是'-[NSTaggedPointerString tgrm_objectForKeyCheck:class:]: unrecognized selector sent to instance 0xa000000005f32303'
json文件已经加载进来了，请问这个怎么解决啊？

SDWebImage版本

Tangram.podspec中，指定了SDWebImage的版本（3.7)，我这边使用的SDWebImage版本是 4.1.0，跟Tangram冲突，Tangram使用的SDWebImage可否使用最新版本的？

pod install提示错误

xxx :TangramDemo chokwah$ pod install
Analyzing dependencies
Fetching podspec for Tangram from ../
[!] Unable to find a specification for LazyScroll (~> 0.0.2) depended upon by Tangram

ruby 2.4
cocoapods 1.2

TangramDemo中，在TangramMock.json中添加了一个type等于10的card，设置infinite为true后无效

style": {
"bgColor": "#ff9900",
"pageHeight" : 200,
"padding" : [5,5,5,5],
"autoScroll" : 3000,
"infinite" : "true"
}

参考文档“轮播/横向滚动布局”，设置infinite为true，无限滚动没有效果。
我加了三个轮播图进行的测试。

再给你报个bug，你的aspectRatio属性在json文件里应该用string，要加双引号

你的aspectRatio属性是用stirng去取的，但你的demo的json文件里的aspectRatio属性是float的，导致这个属性没有生效，加上双引号就行了

设置hasIndicator为false后，仍显示白色小圆点

更新Tangram 到 1.0.3，在 type = 10 时候，设置style如下：

"style": {
                  "bgColor": "#FFFFFF",
                  "pageWidth": "176",
                  "hasIndicator":"false",
                  "pageMargin": [
                                 "3",
                                 "0",
                                 "2",
                                 "4"
                                 ],
                  "pageHeight": "109",
                  "margin": [
                             "0",
                             "0",
                             "0",
                             "0"
                             ]
                  }

运行之后，仍然存在白色圆点，而且在图片的最顶部

断点显示，在 TangramLayoutParseHelper 里面执行了 layout.hasIndicator = NO;

请问是什么会对此产生影响？

Unable to run

git clone project，then pod install. project Compile successfully，but Can not run

下载的Demo点击`自定义布局-色块Demo`这个会卡住

点击第一个选项的话会卡住, 原因是ViewController里面的viewDidLoad中的[tangramView reloadData];这句代码, 因为注释这句代码后不会卡住了, 但是push页面后一片灰色.

Layout 布局提供设置项回避浮点数宽高

部分组件在宽高为浮点数时边缘绘制可能存在问题，需要在 Layout 层布局时处理掉此问题。

目前考虑采用各区域右侧补 & 左侧裁的四舍五入方法，即 375 宽度双列布局结果：

375 = 188 + 187

第一个元素 left = 0, right = 187.5，右侧补到 188

第二个元素 left = 187.5, right = 375，左侧裁剪到从 188 开始

Demo报错,无法运行.帮忙查查.谢谢

TangramSingleImageElement.h

#import <UIkit/UIkit.h>

[!] Unable to find a specification for `LazyScroll`

When I use Cocoapods inpot third-party frameworks,occure this problem as blow:
[!] Unable to find a specification for LazyScroll

No type of protocal named 'TangramLayoutProtocaol'

文档组件开发这一节中，有说明element需要实现TangramEasyElementProtocol，我在TangramDemo的TangramSingleImageElement引入头文件#import "TangramEasyElementProtocol.h"，编译报错，错误提示如标题所示，感觉好像是引用TangramEasyElementProtocol.h的地方不对，没看出来啥原因。

SDWebImage 版本问题 什么会更新出来

SDWebImage 版本问题 什么会更新出来

margin 在 protocol 标记为可选但是实际上没有做 response 判断

如题

SDWebImage 4.0.0的问题

[!] Unable to satisfy the following requirements:

• SDWebImage (~> 4.0.0) required by Podfile
• SDWebImage (= 4.0.0) required by Podfile.lock
• SDWebImage (~> 3.7) required by Tangram (1.0.6)

Specs satisfying the SDWebImage (~> 4.0.0), SDWebImage (= 4.0.0), SDWebImage (~> 3.7) dependency were found, but they required a higher minimum deployment target.

Tangram改成依赖SDWebImage4.0.0后又出现

• Tangram/Tangram/Source/Layouts/TangramFlowLayout.m:639:56: error: no visible @interface for 'SDWebImageManager' declares the selector 'downloadImageWithURL:options:progress:completed:'

TangramPageScrollLayout中的element重复添加问题

卡片内的组件数据源如果有变化，我通过 [TangramDefaultDataSourceHelper modelsWithLayoutDictionary:newLayoutDict] 生成了新的itemsModel，然后 [pageScrollLayoutView setItemModels:itemsModel] 后，执行 [TangramView reloadlayout:pageScrollLayoutView]，pageScrollLayoutView 中原来的element不会被删除，也就是说会一直添加新的element，而且如果新的itemsModel.count = 0 的话，在 TangramPageScrollLayout 的方法 calculateLayout 中直接执行了

 if (nil == self.itemModels || 0 >= modelCount) {
        self.height = 0.f;
        return;
    }

把这个layoutView的高度赋成了0，但是以前的子试图还是存在的，导致以前的子试图还是会显示的。
所以这里两个现象：
1.在没有重新生成layoutView的情况下，局部更新该layoutView的组件数据源，刷新后，老得组件没有被删除，导致重复添加组件。
2.在没有重新生成layoutView的情况下，局部更新该layoutView的组件数据源且新的组件个数为0，这个layoutView高度为0，但是老得组件还是会显示出来。
这两个现象都是同一个问题造成的，就是更新itemsModel后，应该删除老的组件视图。

麻烦你这边验证一下。

scroll element 可以加阴影吗

尝试设置卡片的阴影没有效果