iOS 用 JSON 写静态视图

2017-10-01  本文已影响0人  木子才

这是一个好玩的想法,现在就让我将这个好玩的设计实现出来吧。
我的设计模型是:

{}

上面的是我最简单、最基础的模型,他代表着一个视图。

{
  self = {};
  items = ();
}

这个模型目前定义了两个字段,一个是"self",一个是"items"。
很简单:
"self" 是负责自身的属性,任何有关于视图自身的内容,我都建议放在这里;
而 "items" 是代表子视图的意思,有多少个子视图,就视乎你放了多少个模型。

还有一点,那就是这个语法问题,不知道你发现没有,其实这个是OC的字典写法,和一般的JSON有不同的地方,不过其实也差不多,而且一来是可以直接被字典读取,二来是可以省去很多双引号的写法(特殊的还是要写上)。

例子:

{
    self = {
        color = FF00FF;
        layout = {
            T = 0;
            B = 0;
            L = 0;
            R = 0;
        };
        direction = vertical;
        style = menu;
    };
    items = (
    {
        self = {
            color = random;
        };
    },
    {
        self = {
            color = random;
        };
    },
    {
        self = {
            color = random;
            direction = V;
            style = list;
            listVariable = 100;
        };
        items = (
            {
                self = {
                    color = random;
                    variable = 50;
                };
            },
            {
                self = {
                    color = random;
                    variable = 150;
                };
            },
            {
                self = {
                    color = random;
                    variable = 100;
                };
            }
        );
    }
    );
}

实现:

2430BEF68F25B38B4CE80321637F6B6F.png

最新完整的语法:

{
    self = {
        class = 存在的视图类名;
        tag = 数字;
        identifier/ID = 任意字符;
        color/C = random/R/16进制;
        direction/D = horizontal/H/vertical/V;
        style/S = menu/list;
        listVariable/listVar = 浮点数;
        variable/var = 浮点数;
        layout = {
            top/T = 布局内容值;
            bottom/B = 布局内容值;
            left/L = 布局内容值;
            right/R = 布局内容值;
            width/W = 布局内容值;
            height/H = 布局内容值;
            leading = 布局内容值;�
            trailing = 布局内容值;
        };
        layer = {
            cornerRadius/CR = 浮点数;
            borderWidth/BW = 浮点数;
            borderColor/BC = 浮点数;
            masksToBounds/MTB = 布尔值;
        };
    }:
}
布局内容值:
./.top/.T/.bottom/.B/.left/.L/.right/.R/.leading/.trailing/.width/.W/.height/.H 后面均可以加上正负浮点数,前面可以加上存在的视图的标识identifier/ID的值。

内容更新信息:

MZCDicToView

字典转变成视图

by:木子才

v 0.2
2017.10.1
重新设计解析逻辑。
基础字段"self" 新增:"identifier"/"ID"(用了记录视图,方便后面引用该视图协助布局)、"tag"。
将布局字段纳入"self" 的新子字段 ”layout“中。布局字段的内容值方面,不推荐使用".="。由于新增了记录视图的功能,所以布局的内容值可以使用新方式布局,如:T=abc.B50;(abc为某个视图的标识。)
基础字段"self" 的颜色字段"color",增加"C" 别名,以及随机值的内容值"random"/"R"。
加入指定布局:基础字段"self",新增 "direction"/"D"(用来对指定布局方向的指定:"horizontal"/"H","vertical"/"V"),新增 "style"/"S"(用于指定布局)。
基础字段"self" 的 指定布局风格 子字段 "style",包括:"menu"(不可滑动,平均分配大小),"list"(可滑动,可指定"self"下的"listVariable"/"listVar",父视图指定子视图在没有指定的情况下用来指定大小的,"variable"/"var",视图指定自己在父视图下的大小)。


v 0.1
2017.9.30
基础字段有"self"、"items"。
"self" 包含了布局字段("top"/"T"、"bottom"/"B"、"left"/"L"/"leading"、"right"/"R"/"trailing"、"width"/"W"、"height"/"H",支持对前一个对象利用布局操作:"."/".="、".top"/".T"、".bottom"/".B"、".left"/".L"/".leading"、".right"/".R"/".trailing"、".width"/".W"、".height"/".H",后面可以加上数值偏移),类字段("class",用来创建视图,没有则默认为UIView类),颜色字段("color",目前只支持16进制的表示方式,如:FF00FF),层字段("layer",对视图层的操作,包含这些子字段:"cornerRadius"/"CR"、"borderWidth"/"BW"、"borderColor"/"BC"、"masksToBounds"/"MTB")。
"items" 包含了基础字段,这个是一个数组,记录的是当前视图的子视图内容。

上一篇下一篇

猜你喜欢

热点阅读