制作一个类似苹果VFL的格式化语言来描述UIStackView

在项目中总是希望页面上各处的文字，颜色，字体大小甚至各个视图控件布局都能够在发版之后能够修改以弥补一些前期考虑不周，或者根据统计数据能够随时进行调整，当然是各个版本都能够统一变化。看到这样的要求后，第一反应是这样的页面只能改成H5，或者尝试使用React Native来应对这种要求。

 

既然UIStackView已经提供了一种既先进又简洁的布局思路，为何不通过制作一个类似VFL这样的DSL语言来处理布局。这样不就能够通过下发一串DSL字符串的方式来进行内容样式甚至布局的更换，不用跟版，还能使多版本统一。同时在端内直接用这样的DSL语言来写界面不光能够减少代码量易于维护，还能够很直观方便的看出整个界面布局结构。

 

AssembleView（组装视图）和PartView（零件视图）

 

在设计格式化语言之前需要对布局做个统一思想进行管理，在看了WWDC里关于UIStackView的介绍后感觉任何复杂的布局都能够通过这样一种组合排布再组合排布的思路特别适合用格式化语言来描述。于是我想出两个视图概念。

 

一个是AssembleView组合视图，专门用于对其PartView子视图进行排列，比如说是水平排列还是垂直排列，PartView是按照居中对齐还是居左等对齐方式，各个PartView之间间隔是多少。

 

PartView决定自己视图类型，内容，无固定大小的可以设置大小，同时AssembleView可以作为PartView被加入另一个AssembleView里进行排列，这样各种设计图都可以在初期通过拆解分成不同的AssembleView和PartView进行组合套组合布局出来。

 

格式化语言

 

接下来是如何通过格式化语言来描述AssembleView和PartView。“{}”符号里包含的是AssembleView的设置，“[]”符号里是PartView的设置，“()”里是他们的属性设置，“”可以将对象带入到设置里。下面举几个例子说明下。完整Demo放到了Github上：https://github.com/ming1016/STMAssembleView

 

三个星星水平对齐居中排列

 

h表示水平排列horizontal，c表示居中center，“[]”PartView会根据顺序依次添加排列，imageName属性能够指定本地图片

 

 

三个星星水平对齐居中排列

 

{

    hc(padding:30)

    [(imageName:starmingicon)]

    [(imageName:starmingicon)]

    [(imageName:starmingicon)]

}

 

AssembleView里套作为PartView的AssembleView的复杂情况

 

color可以指定文字颜色，font指定文字大小

 

 

AssembleView里套作为PartView的AssembleView的复杂情况

 

{

    ht(padding:10)

    [avatarImageView(imageName:avatar)]

    [

        {

            vl(padding:10)

            [(text:戴铭,color:AAA0A3)]

            [(text:Starming站长,color:E3DEE0,font:13)]

            [(text:喜欢画画编程和写小说,color:E3DEE0,font:13)]

        }

        (width:210,backColor:FAF8F9,backPaddingHorizontal:10,backPaddingVertical:10,radius:8)

    ]

}

 

给PartView设置背景色和按钮

 

设置背景色使用backColor，背景距离设置的PartView的内容间距通过backPaddingHorizontal属性设置水平间距，backPaddingVertical设置垂直间距，“”符号带入的button通过button属性设置。

 

 

[

    {

        hc(padding:4)

        [(imageName:starmingicon,width:14,height:10)]

        [(text:关注,font:16,color:FFFFFF)]

    }

    (height:36,backColor:AAA0A3,radius:8,backBorderWidth:1,backBorderColor:E3DEE0,backPaddingHorizontal:80,backPaddingVertical:10,button:)

]

 

AssembleView设置忽略约束的方法

 

水平排列时，通过ignoreAlignment属性设置忽略left约束，如果是垂直排列设置top忽略。

 

 

{

    hc(padding:5)

    [(text:STMAssembleView演示,color:E3DEE0,font:13)]

    [(imageName:starmingicon,width:14,height:10,ignoreAlignment:left)]

    [(text:Starming星光社,color:E3DEE0,font:13)]

}

 

将前面的视图组合成一个AssembleView

 

 

将前面的视图组合成一个AssembleView

 

ASS(@"{

    vc(padding:20)

    [%@(height:90)]

    [%@(height:36,backColor:AAA0A3,radius:8,backBorderWidth:1,backBorderColor:E3DEE0,backPaddingHorizontal:80,backPaddingVertical:10,button:)]

    [%@(height:25)]

    [%@(ignoreAlignment:top,isFill:1,height:16)]

}",midStr,followBtStr,centerStr,desStr)

 

AssembleView的属性

 

  • 当在“{}”里面第一个字母是v表示垂直排列vertical，是h表示水平排列horizontal

  • 第二个字母是c表示所有PartView居中对齐center，l表示居左对齐left，r表示居右对齐right，t表示居上对齐top，b表示居下对齐bottom。

  • padding：默认各个PartView的间距。

 

PartView的属性

 

  • 如果不希望通过属性生成视图，可以通过在[后直接填入带入对象对应的key，然后再在()里设置属性。

 

PartView布局相关属性

 

  • width：UILabel和UIImage这样有固定大小的可以不用设置，会按照固定大小的来。

  • height：有固定大小的可以不用设置。

  • isFill：垂直排列时会将宽设置为父AssembleView的宽，水平排列时会将高设置为父AssembleView的高。

  • padding：设置后会忽略父AssembleView里设置的padding，达到自定义间距的效果。

  • partAlignment：可以自定义对齐方向，设置后会忽略父AssembleView里设置的对齐。值可填center，left，right，top，bottom。

  • ignoreAlignment：设置忽略的约束方向，在父AssembleView不需要由子PartView决定大小的情况下，可以通过打断某个方向约束来实现拆开排列的效果。值可填center，left，right，top，bottom。

 

PartView权重相关属性

 

  • crp：Compression Resistance Priority的设置，根据权重由低到高值可以设置为fit，low，high，required。对应的UILayoutPriority的分别是UILayoutPriorityFittingSizeLevel，UILayoutPriorityDefaultLow，UILayoutPriorityDefaultHigh，UILayoutPriorityRequired。

  • minWidth：对应NSLayoutRelationGreaterThanOrEqual，设置一个最小的宽

  • maxWidth：对应NSLayoutRelationLessThanOrEqual，设置一个最大的宽

 

PartView视图控件相关设置

 

通过以下属性即可生成对应的UILabel，UIImageView或者UIButton等控件视图，而不用特别指出需要生成哪种控件视图

 

  • text：设置文字内容

  • font：设置字体，可以带入一个UIFont，也可以直接设置一个字体大小，解析时会判断类型。

  • color：设置颜色，可以带入一个UIColor，也可以直接设置一个十六进制颜色，解析时会判断类型。

  • imageName：设置本地图片，值是本地图片名称。

  • image：带入一个UIImage。

  • imageUrl：设置一个网络图片的url地址，ps:目前需要通过来带入一个字符串。

 

PartView的通用设置

 

可以为PartView创建一个底部视图，并设置其样式。也可以添加一个UIButton设置UIControlStateHighlighted时的样式。

 

  • backColor：设置底部视图的颜色，可以带入一个UIColor，也可以直接设置一个十六进制颜色，解析时会判断类型。

  • backPaddingHorizontal：设置当前PartView视图距离底部视图top和bottom的间距。

  • backPaddingVertical：设置当前PartView视图距离底部视图left和right的间距。

  • backBorderColor：设置底部视图边框的颜色，可以带入一个UIColor，也可以直接设置一个十六进制颜色，解析时会判断类型。

  • backBorderWidth：设置底部视图边框宽。

  • radius：设置底部视图的圆角半径。

  • button：带入一个button。

  • buttonHighlightColor：设置button在UIControlStateHighlighted时的颜色，默认是透明度0.05的黑色。

 

解析格式化语言

 

解析过程的第一步采用扫描scanner程序将字符串按照分析符号表将字符流序列收集到有意义的单元中。

 

第二步将这些单元逐个归类到对应的类别中。比如解析到“()”里内容时就将其归类到对应的AssembleView的属性或者PartView的属性类别中。在归类过程中会出现PartView是AssembleView，这个Assemble里面又有这样作为PartView的AssembleView这样层层套的情况，所以需要采用类似引用计数方式保证在最后一个“}”符号结束时能将整个Assemble递归进行解析。

 

第三步将各个类别集合转换成对应原生代码从而生成对应的视图布局。

 

具体实现可以查看STMAssembleView.m文件。Github地址：https://github.com/ming1016/STMAssembleView

 

如何生成页面

 

生成页面需要实现格式化语言对应的原生代码，所有PartView的属性都会存放在STMPartMaker里，包括带入的自定义视图还有用于生成视图控件的属性等。PartView属性设置完成后会在STMPartView这个类中先决定对应的视图控件，并将STMPartMaker里的属性都设置上。实现代码可以查看STMPartView.m里的- (STMPartView *)buildPartView方法。

 

接下来STMAssembleView会在buildAssembleView时进行布局，具体实现代码可以查看STMAssembleView.m里的- (STMAssembleView *)buildAssembleView方法。

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/293501.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

[Android] TextView 分页功能的实现

[Android] TextView 分页功能的实现

为什么80%的码农都做不了架构师？>>> 分页功能是阅读器类软件的基本功能之一, 也是自己之前写阅读器时遇到的第一个问题. 尝试了不少办法才解决, 现在把其中最容易实现的一个方法记录下来, 也方便大家参考. 基本思路如下: 从文件中读取 8000 个字符至缓冲…
阅读更多...
把男朋友变成儿子你只需要一秒

把男朋友变成儿子你只需要一秒

1 别人以为的我▼2 幸好有监控，差点就没法和老婆解释了！▼3 为了卖化妆品我已经不止一次假装我有一群舔狗了▼4 这么多年下来班主任的这些套路谁还不清楚呢？▼5 司机同志们注意啦要主动停车接受检查▼6 让男友变儿子你只需要一秒钟▼7 …
阅读更多...
thinkphp与php共享session

thinkphp与php共享session

在其他php页面添加如下代码即可 if (!session_id()) session_start(); 使用时 thinphp 使用 session(test,123); $user_info $_SESSION[test]; var_dump($test); //123 转载于:https://www.cnblogs.com/yun007/p/3806385.html
阅读更多...
Android之使用HandlerThread 以及如何退出总结

Android之使用HandlerThread 以及如何退出总结

1 、使用 HandlerThread handlerThread = new HandlerThread("handlerThread"); handlerThread.start(); //这里获取到HandlerThread的runloop MyHandler myHandler = new MyHandler(handlerThread.getLooper()); 2、介绍 和主线程已经没有关系了，所以不能跟新…
阅读更多...
容器界的新“朋友”

容器界的新“朋友”

微软中国MSDN 点击上方蓝字关注我们Ignite 2021 上，微软发布了Azure Container Apps，这是一种以无服务器应用程序为中心的托管服务，用户看不到或无需管理任何底层 VM、协调器或其他云基础架构。Azure Container Apps支持打包在容器中的任何应…
阅读更多...
分析函数在数据分析中的应用

分析函数在数据分析中的应用

我们来看看下面的几个典型例子： ①查找上一年度各个销售区域排名前10的员工 ②按区域查找上一年度订单总额占区域订单总额20%以上的客户 ③查找上一年度销售最差的部门所在的区域 ④查找上一年度销售最好和最差的产品 我们看看上面的几个例子就可以感觉到这几个查询…
阅读更多...
LateUpdate、Late、FixedUpdate的意义

LateUpdate、Late、FixedUpdate的意义

1、MonoBehaviour.Update 更新 当MonoBehaviour启用时，其Update在每一帧被调用。 2、MonoBehaviour.FixedUpdate 固定更新 当MonoBehaviour启用时，其 FixedUpdate在每一帧被调用。 处理Rigidbody时，需要用FixedUpdate代替Update。例如:给刚体…
阅读更多...
JSP中一个页面怎么分清是链接过来还是提交过来的？

JSP中一个页面怎么分清是链接过来还是提交过来的？

处理代码&#xff1a;String action request.getParameter("action");if (action ! null && action.trim().equals("post")) {}form里面的代码&#xff1a;<form action"post.jsp" method"post"> …
阅读更多...
史上最“可怕”的数学科普，能全都看懂的只有天才！

史上最“可怕”的数学科普，能全都看懂的只有天才！

▲ 点击查看我们在生活中&#xff0c;或许最常听到的一句话就是&#xff1a;“数学是工具”。在《数学家的眼光》一书的开篇中&#xff0c;张景中院士却举了一个颠覆我们平常认知的例子&#xff1a;大数学家陈省身有一次在北京大学的讲座中语惊四座&#xff1a;“人们常说三角形…
阅读更多...
ubuntu环境下如何解决svn提交出现can‘t check path ‘/home/...‘

ubuntu环境下如何解决svn提交出现can‘t check path ‘/home/...‘

在ubuntu环境下用svn提交代码出现这个错误 cant check path /home/... 因为我们提交有限制 我一开始是这样写的 svn commit -m $ noreview [问题单号]:1234 然后报错出现了这个bug 解决办法&#xff1a; svn commit -m $ noreview [问题单号]:1234 记住了 $ 中间不能…
阅读更多...
received packet with own address as source address

received packet with own address as source address

故障现象&#xff1a;网卡做bond后&#xff0c;在messages中频繁出现received packet with own address as source address。问题分析&#xff1a;该问题由于网卡做bond后上层链路交换机没有做port channel而产生错误。比如网卡做bond mode 0&#xff0c;上层交换无任何配置&am…
阅读更多...
.NET6之MiniAPI(五)：选项

.NET6之MiniAPI(五)：选项

选项是配置一个升级版&#xff0c;一般情况下是把一个范围内的配置包装成类型&#xff0c;以供使用&#xff0c;比如下面的RedisSetting&#xff0c;是Redis的配置参数&#xff1a;{"Logging": {"LogLevel": {"Default": "Information"…
阅读更多...
解决nginx不支持pathinfo Thinkphp命名空间问题

解决nginx不支持pathinfo Thinkphp命名空间问题

1.这是我Ubuntu14.4配置文件server { listen 9989 default_server; # SSL configuration # # listen 443 ssl default_server; # listen [::]:443 ssl default_server; # # Note: You should disable gzip for SSL traffic. # See: https://bugs.debia…
阅读更多...
Oracle常用知识总结

Oracle常用知识总结

1.曾经不小心把开发库的数据库表全部删除&#xff0c;当时吓的要死。结果找到下面的语句恢复到了1个小时之前的数据&#xff01;很简单。 注意使用管理员登录系统&#xff1a; select * from 表名 as of timestamp sysdate-1/12 //查询两个小时前的某表数据&#xff01;既然两…
阅读更多...
Android之项目中调用已有.so库

Android之项目中调用已有.so库

注意该.so库指的是android平台的&#xff0c;非一般linux、unix平台&#xff1b; 1、现有库libcom_ycan_testLib.so 2、新建android项目TestLib2 3、添加新类&#xff1a; 类名&#xff1a;testLib 包路径&#xff1a;参考现有库名&#xff0c;应为com.ycan 4、在新类中声明库的…
阅读更多...
数组面试题--数组求和

数组面试题--数组求和

题目描述&#xff1a;给定一个数组&#xff0c;实现函数用一行代码返回这个数组的和 思路&#xff1a;递归即可 1 #include <iostream>2 #include <queue>3 #include <climits>4 #include <algorithm>5 #include <memory.h>6 #include <stdio…
阅读更多...
iNeuOS工业互联网操作系统，矿山动态产量计量系统和铁路车辆识别系统应用场景案例...

iNeuOS工业互联网操作系统，矿山动态产量计量系统和铁路车辆识别系统应用场景案例...

目 录1. 概述... 22. 平台演示... 23. 矿山动态产量计量系统... 24. 铁路车辆识别系统... 41. 概述iNeuOS工业互联网操作系统增加矿山动态产量计量和铁路车辆识别系统&#xff0c;提高矿山动态产量计量精度和完全避免产量核实误差的情况&#xff1…
阅读更多...
85元一个万能工具箱，配齐24种螺丝刀+扳手，媲美德国工艺，家庭必备

85元一个万能工具箱，配齐24种螺丝刀+扳手，媲美德国工艺，家庭必备

▲ 点击查看对当代的男生来说&#xff0c;有什么技能是必须掌握的&#xff1f;自然是修理各种各样的东西啦~除了修电脑&#xff0c;还要修各种电器啊、家具啊之类的&#xff0c;讲真&#xff0c;会修理的男人都很帅&#xff01;实用性能也满分&#xff0c;相当于女孩子会做饭一…
阅读更多...
poj1505

poj1505

题意&#xff1a;给出一个数列有n个数&#xff0c;要求用分割分把这个数列分成m段&#xff0c;不能改变原数列的顺序。每段至少一个数。求使得加和最大的那段的加和最小的划分方案。如果有多组解的话先要保证第一段和尽量小&#xff0c;若仍有多组解&#xff0c;要先保证第二段…
阅读更多...
mysql出现连接错误不识别 utf8mb4

mysql出现连接错误不识别 utf8mb4

2019独角兽企业重金招聘Python工程师标准>>> 出现这样的错误&#xff0c;指的是不识别该字符集。 可能是 数据库 里面配置 或者是 连接属性 配置了该字符集那么修改回来即可。 还有一种情况就是 &#xff0c;java-connert-sql连接包&#xff0c;版本太低了。比如 低…
阅读更多...
最新文章

Copyright @ 2022~2023