alibaba / virtualview-ios

A solution to create & release UI component dynamically.

VirtualView

A solution to create & release UI component dynamically.

It a part of our Tangram solution. And it can be used as a standalone library.

这是一个动态化创建和发布 UI 组件的方案。

它是我们 Tangram 方案的一部分。当然它也可以独立使用。

中文介绍：VirtualView iOS

中文文档：VirtualView通用文档，VirtualView iOS文档

Features

1. Write component via XML.
2. Compile XML to a .out (binary) file.
3. Load .out file in iOS application.
4. Create component from loaded template and bind data to it.
5. Show the component.

简单总结起来就是用 XML 描述一个组件，用我们提供的工具编译成 .out 二进制文件，在集成了 VirtualView 的 App 里直接加载 .out 文件就可以得到一个组件，然后像使用普通 UIView 一样使用它就好了。

Install

CocoaPods

Use VirtualView alone:

pod 'VirtualView'

Use VirtualView with Tangram:

pod 'Tangram'

CocoaPods will install VirtualView as a part of Tangram 2.x.

Source codes

Or you can download source codes from releases page and put them into your project.

How to use

1. Load component template from .out file.

if (![[VVTemplateManager sharedManager].loadedTypes containsObject:@"icon_type"]) {
    NSString *path = [[NSBundle mainBundle] pathForResource:@"icon_file" ofType:@"out"];
    [[VVTemplateManager sharedManager] loadTemplateFile:path forType:@"type_alias"];
}

2. Create component.

self.viewContainer = [VVViewContainer viewContainerWithTemplateType:@"icon_type"];
[self.view addSubview:self.viewContainer];

3. Bind data and calc the layout (fixed size).

self.viewContainer.frame = CGRectMake(0, 0, SCREEN_WIDTH, 1000);
[self.viewContainer update:@{
    @"type" : @"icon-type",
    @"imgUrl" : @"https://test.com/test.png"
}];

4. If you want to clac size.

[self.viewContainer updateData:@{
    @"type" : @"icon-type",
    @"imgUrl" : @"https://test.com/test.png"
}];
CGSize size = CGSizeMake(MAX_WIDTH, MAX_HEIGHT);
size = [self.viewContainer estimatedSize:size];
self.viewContainer.frame = CGRectMake(0, 0, size.width, size.height);
[self.viewContainer updateLayout];

See more details in the demo project.

XML Compile Tools

An executable jar (need Java 1.8) is in the CompileTool path. In the demo project, we use bash script to sync XML template changes. You can find the script here:

See more details here.

virtualview-ios's Issues

BOOL值赋值错误: VVViewContainer->update:方法->case TYPE_BOOLEAN

VVViewContainer->update:方法->case TYPE_BOOLEAN的
value = [self valueForVariable:value fromJsonData:jsonData];
代码位置放错了

Load VV template async.

Will make a queue to manager load actions.

GridView创建子item时，填充数据大括号作用域错误

VVGridView的：
TYPE_COLOR的大括号作用域把下面的逻辑包含了：

layoutHeight、layoutWidth 设置表达式无效

话说该库还有在维护么？

本地运行 VirtualView-iOS 下的 RealtimePreview 工程，并启动了 virtualview_tools 下的服务，正常加载并运行 HelloWorld.xml 模板，但是调试发现 layoutWidth、layoutHeight 设置表达式是无效的：

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
    orientation="V"
    layoutWidth="match_parent"
    layoutHeight="${itemH}"
    background="${bgColor}"
/>

其中 HelloWorld.json：

{
    "item": "300",
    "bgColor": "#ff0000"
}

实际并没有正确显示该 view。如果在 xml 中用字面量写死 layoutHeight，就能正常显示：

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
    orientation="V"
    layoutWidth="match_parent"
    layoutHeight="300"
    background="${bgColor}"
/>

在使用navigationController popVC的时候之前的页面是空白的，怎么处理？

我使用demo，在page页里面，实现了代理方法：

• (void)virtualViewClickedWithAction:(NSString *)action andValue:(NSString *)value{
  if (action) {
  NSLog(@"action: %@, value: %@", action, value);
  [self.navigationController pushViewController:[[GridViewController alloc] initWithFilename:@"Grid"] animated:YES];
  }
  }
  我跳转到GridViewController，之后我popVC之后page页无法获取此页面的params参数，无法显示图片（无法加载URL），此时navigationController 中没有保存响应的VC，这里是怎么解决的？

感觉不应该出现类似于"self.marginXXX"这样的代码，margin应该由父级View使用

VVRatioLayout、VVGridLayout的calculateLayoutSize:均出现了在内部使用self.marginXXX的计算代码，按照margin、padding的定义，一个View的margin应该只能让父级View使用

VVGridView的setUpdateDelegate:方法存在隐患

VirtualView-iOS/VirtualView/View/VVGridView.m

Line 440 in 290e444

if (self.gridContainer.superview==nil) {

- (void)setUpdateDelegate:(id<VVWidgetAction>)delegate{
    if (self.drawLayer==nil) {
        self.drawLayer = [VVLayer layer];
        self.drawLayer.drawsAsynchronously = YES;
        self.drawLayer.contentsScale = [[UIScreen mainScreen] scale];
        self.drawLayer.delegate =  (id<CALayerDelegate>)self;
        [self.gridContainer.layer addSublayer:self.drawLayer];
    }
    for (VVViewObject* subObj in self.subViews) {
        subObj.updateDelegate = (id<VVWidgetAction>)self.gridContainer;
    }
}

其中if (self.drawLayer==nil)永远为NO，因为继承的VVLayout会保证self.drawLayer有值

然后

subObj.updateDelegate = (id<VVWidgetAction>)self.gridContainer

非常危险，因为self.gridContainer 没有实现VVWidgetAction

这个可以和原生的控件混合使用吗,比如原生的CollectionView,读取模板的子控件

VVGridLayout的calculateLayoutSize:的maxWidth计算错误

VVGridLayout的calculateLayoutSize:的maxWidth计算错误

VVVHLayout的calculateLayoutSize:代码逻辑错误

VirtualView-iOS/VirtualView/LayoutView/VVVHLayout.m

Line 80 in 290e444

}else if(self.widthModle==WRAP_CONTENT && item.widthModle==MATCH_PARENT) {

这一行代码条件永远不成立=。=

同理，VVVH2Layout也有这个问题

http://tangram.pingguohe.net/docs/ios/access-tangram

现在不让访问了吗？没人维护了？

颜色不支持设置alpha

VirtualView-iOS/VirtualView/Tools/UIColor+VirtualView.m

Line 14 in 3989c54

return [self colorWithHexValue:hexValue alpha:255];

上面的这一行写死了alpha:255，导致所有的颜色设置alpha无效

为什么iOS不支持Scoller？计划将来会支持吗？

VVVHLayout内部用layoutGravity跟padding结合有问题

layoutGravity="right"的时候，忽略了paddingRight的值

<?xml version="1.0" encoding="utf-8"?>
<VHLayout
        flag="flag_exposure|flag_clickable"
        action="${action}"
        orientation="V"
        layoutWidth="wrap_content"
        layoutHeight="wrap_content"
        background="#999999"
        paddingLeft="4"
        paddingRight="8"
        paddingTop="12"
        paddingBottom="16">

    <NImage
            layoutGravity="right"
            src="${imgUrl}"
            scaleType="center_crop"
            layoutWidth="100"
            layoutHeight="100"/>

    <NImage
            src="${imgUrl}"
            scaleType="center_crop"
            layoutWidth="200"
            layoutHeight="200"/>
</VHLayout>

VVGridView的每个item不支持layoutGravity属性

按照Grid的定义，每个item的宽度为Grid.width / colCount，高度如果设置了itemHeight ，则最大就是itemHeight ，否则按照每个item的wrapContent计算高度，这样的话，就存在某些item的size不能撑满的情况，这个时候，每个item的layoutGravity属性就要发挥作用，但是现在是不可以的。

demo 工程在没有安装 Java 1.8 的环境下编译报错

XML中NText的text包含"<>"会导致渲染失败

如下代码，无法渲染：

	<NText
	    text="<>"
	    layoutWidth="wrap_content"
	    layoutHeight="wrap_content"
	    />

VVViewObject的dataUpdateFinished方法有实现，但是不会被调用

VirtualView-iOS/VirtualView/Core/VVViewObject.h

Line 253 in 4a96df7

- (void)dataUpdateFinished;

NVTextView在dataUpdateFinished里面调用了updateTextFrameSize方法，但是没有地方会调用dataUpdateFinished ，感觉这是个风险。。。

NVImageView不支持设置borderWidth、borderColor、圆角

NVImageView不支持设置borderWidth、borderColor、圆角

NVTextView某些情况下直接设置attributedText会导致样式丢失

VirtualView-iOS/VirtualView/View/NVTextView.m

Line 292 in 4a96df7

self.textView.attributedText = [[NSAttributedString alloc] initWithString:text

UILabel的attributedText设置的时候没有指定字体大小、颜色等等属性，UILabel的font、textColor不会“自己”应用到attributedText上的。

VVVHLayout在calculateLayoutSize的时候，toItemSize没有减去自己的padding，会导致大小计算错误

VirtualView-iOS/VirtualView/LayoutView/VVVHLayout.m

Line 109 in 4a96df7

CGSize size = [item calculateLayoutSize:toItemSize];

比如在VVVHLayout里面放RatioLayout，就会导致比例计算错误，超出范围

VVRatioLayout在calculateLayoutSize时，计算比例size没有减去margin，跟Android的逻辑不一致

VirtualView-iOS/VirtualView/LayoutView/VVRatioLayout.m

Line 170 in 4a96df7

for (VVViewObject* vvObj in ratioSubViews) {

如题，在计算有ratio的size时，Android是减去了margin才算的，iOS的没有，会导致两端不一致。

Android的源码：

// RatioLayout.java的249行
if (p.mLayoutRatio <= 0) {
    mFixDim += child.getComMeasuredHeightWithMargin();
} else {
    mFixDim += p.mLayoutMarginTop + p.mLayoutMarginBottom;
}

欢迎大家来登记使用情况

欢迎大家来登记使用情况：

pingguohe/tangram#1

可参与到官网主页的展示中。

NVTextView设置了lines行数以后，layoutHeight设置成wrap_content没有用，高度写死了lines倍数

// NVTextView.m的 - (CGSize)calculateLayoutSize:(CGSize)maxSize

NSString *fStr = [self.text substringToIndex:1];
fHeight = [fStr boundingRectWithSize:textMaxRT
                             options:NSStringDrawingTruncatesLastVisibleLine |
                                     NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
                          attributes:@{NSFontAttributeName:font}
                             context:nil].size.height;
fTextRealHeight = fHeight * lines;
if (textMaxRT.height < fTextRealHeight) {
    textMaxRT.height = fTextRealHeight;
}

虚拟容器的layer隐式动画效果是不是需要处理下

虚拟容器的layer隐式动画效果是不是需要处理下，还是使用姿势不对

VVGridLayout的calculateLayoutSize:的计算每个item的size时，缺少减去margin

VirtualView-iOS/VirtualView/LayoutView/VVGridLayout.m

Line 154 in 290e444

CGSize itemSize = [vvObj calculateLayoutSize:_itemMaxSize];

每个item的calculateLayoutSize:计算应该减去item的margin，比如：

CGSize itemSize = [vvObj calculateLayoutSize:CGSizeMake(itemMaxWidth - vvObj.paddingLeft - vvObj.paddingRight, itemMaxHeight - vvObj.paddingTop - vvObj.paddingBottom)];

refactor expression implementation

绘制多层级视图会有性能影响么

rt

backgroundImage公共属性没有实现

backgroundImage没有任何实现=。=，特别是在VVLayout上。

所有frame的计算为什么要取整数？这样会导致问题吧

比如均分的时候，375的屏幕均分成4份肯定不准的。

// VVViewObject
- (void)layoutSubviews{
    //
    CGFloat x = self.frame.origin.x;
    CGFloat y = self.frame.origin.y;
    _width = _width<0?self.superview.frame.size.width:_width;
    _height = _height<0?self.superview.frame.size.height:_height;
    CGFloat a1,a2,w,h;
    a1 = (int)x*1;
    a2 = (int)y*1;
    w = (int)_width*1;
    h = (int)_height*1;
    self.frame = CGRectMake(a1, a2, w, h);
}

点击处理用touchEnd拦截不妥当，以后一旦有用UIScrollView及其子类实现的View，点击无法获取

建议直接在VVViewContainer的initWithVirtualView改为UITapGestureRecognizer手势拦截，可以兼容UIScrollView 。

NVImageView不支持设置backgroundColor

NVImageView不支持设置backgroundColor。

NVImageView.m文件建议加上以下代码

- (void)setBackgroundColor:(UIColor *)backgroundColor {
    [super setBackgroundColor:backgroundColor];
    self.cocoaView.backgroundColor = backgroundColor;
}

NText设置ellipsize="none"，会导致整个view渲染失败

不知道是编译器的问题还是iOS端SDK的解析问题，如下的代码无法渲染：

<NText
	text="tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2 tutuge2"
	layoutWidth="wrap_content"
	layoutHeight="wrap_content"
	ellipsize="none"
	lines="1"
/>

refactor property implementation