制作一个类似苹果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方法。
制作一个类似苹果VFL的格式化语言来描述UIStackView相关推荐
- 如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2.1.4
在第一篇<如何使用CCRenderTexture创建动态纹理>基础上,增加创建动态山丘,原文<How To Create A Game Like Tiny Wings with Co ...
- 如何制作一个类似Tiny Wings的游戏 Cocos2d-x 2 1 4
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在第一篇 ...
- 如何制作一个类似Tiny Wings的游戏(2) Cocos2d-x 2.1.4内含iOS版源代码
在第二篇<如何制作一个类似Tiny Wings的游戏>基础上,增加添加主角,并且使用Box2D来模拟主角移动,原文<How To Create A Game Like Tiny Wi ...
- 如何制作一个类似Tiny Wings的游戏(2) Cocos2d-x 2.1.4
在第二篇<如何制作一个类似Tiny Wings的游戏>基础上,增加添加主角,并且使用Box2D来模拟主角移动,原文<How To Create A Game Like Tiny Wi ...
- c4d打开没反应_(图文+视频)C4D野教程:来制作一个类似蹦床的布料动画
好多天没更新了,到外地半事半游在洞里修仙了一周: 是时候回来写一篇了,分享一个最近刚学到的技法吧,这个是我在油管上看到的国外大神@Chris Schmidt在2019 NAB Show上分享的方法: ...
- (译)如何制作一个类似tiny wings的游戏:第一部分
免责申明(必读!):本博客提供的所有教程的翻译原稿均来自于互联网,仅供学习交流之用,切勿进行商业传播.同时,转载时不要移除本申明.如产生任何纠纷,均与本博客所有人.发表该翻译稿之人无任何关系.谢谢合作 ...
- 利用Python制作一个类似万能钥匙的小程序,轻松获取超高网速
平时回家看用手机看视频.打游戏的时候,如果没有wifi是不是特别心疼自己的流量?当然了如果你有无限流量那就当我没说了哈,没有wifi但是我可以用万能钥匙破解别人的wifi呀,万能钥匙是什么?如果你的手 ...
- 如何格式化电脑_Mac苹果电脑如何格式化?
一般而言,我们想要在Windows系统上实现格式化操作是非常容易的.然而在苹果电脑上,我们则需要通过launchpad下的磁盘工具来进行,相对而言比较麻烦.关于"苹果电脑怎么格式化" ...
- ios一个app调起另一个app_电商app开发价格:制作一个电商app需要多少钱?
智能手机的发展,带动了各式各样手机app的市场,现在大家网购大多数都是通过电商app实现,再加上分销.配送等模式发展,自建电商app成为很多企业的选择,电商app开发成本大概多少?制作一个电商app需 ...
最新文章
- 观点 | 别忽视深度学习的种种问题,Gary Marcus 泼冷水义不容辞
- java接口的映射文件,详解mybatis通过mapper接口加载映射文件
- C++STL(set……)
- cgcs2000大地坐标系地图_为什么要从北京54和西安80统一到CGCS2000?测绘人必知!...
- Github图片加速心得
- php极差平级,平行志愿有级差吗志愿极差是什么
- jpype,jpython调用jar包中jdk的问题.
- 文本主题发现(一)-- 数据预处理
- 浙大PAT甲级 1080
- DF-1015 DTU对接百度云天工物联网平台开发指南
- 密码编码学与网络安全(第五版)课后习题-CH03
- javaSE基础大全--知识点总结
- 世界三大顶级音响_世界十大名牌音响有那些
- blowfish算法c语言,blowfish-c源代码(简陋).doc
- python中if语句的实例_python的if语句里怎样写两个条件
- php怎么读取txt文件_PHP读取文件内容的五种方式
- 系列创业家陈丕宏:互联网创业的五大定律
- Task Office for Mac(GTD办公软件)
- Linux添加开机自启动应用
- Apple ProRes格式版本
热门文章
- ui设计 网络错误_UI设计人员常犯的10个错误
- 【转】CentOS 6.6 升级GCC G++ (当前最新版本为v6.1.0) (完整)
- 开始学习jQuery和准备工作
- Geary 0.13.0 发布,GNOME 3 Email 客户端应用
- Linux配置手册(二)配置DHCP服务器
- 推翻自己和过往,重学自定义View
- 第六章 三大消息摘要算法总结
- 玩转CSS选择器(一) 之 使用方法介绍
- [转]常用Delphi开发资料网址
- java标记错误_标记电子邮件Java时出错