实时显示iOS编写UI代码效果
2015-05-10 09:26
309 查看
实时显示iOS编写UI代码效果
2015-05-08 15:38编辑:suiling分类:iOS开发来源:Sam_Lau的简书35477
iOS实时UI代码
招聘信息:
提供Mac笔记本,iPhone,开发者帐号现金1000,招兼职开发者
招募Cocos-2d课程讲师
编写iOS应用UI的方式大概有两种,一种是Storyboard/Xib,另一种是手写代码。采用Storyboard/Xib方式组织UI,由于提供可视化的特性,只要从UI库中拖动UI控件,便可以显示结果,极大地提高开发速度。但面临一个问题就是多人协作开发,由于所有的UI都放在同一个Storyboard文件中,使用Git/SVN合并代码就会出现冲突。多人协作开发还不是主要问题,有人提出可以创建多个Storyboard来分开UI编写,而Storyboard/Xib最主要问题是代码复用性比较差。所以有些人就选择手写UI代码,这样不仅可以解决多人协作开发问题,而且通过自定义控件在多个View使用。但每次手写UI代码后都要编译、构建和运行,最后在模拟器显示,这样会拖慢开发速度。如果每次修改UI控件后,保存修改便实时在模拟器显示修改后结果,就可以极大的提高编写UI的速度。
Auto Layout
Auto Layout是什么
Auto Layout是一个基于constraint(约束)的布局系统,它根据UI元素之间约束关系来调整UI元素的位置和大小。
Auto Layout解决什么问题
更容易适配不同分辨率设备的屏幕(iPhone 6 Plus, iPhone 6, iPhone 5s/5, iPhone 4s/4)
当设备旋转时不需要做额外处理
使用constraint来描述布局逻辑,更利于理解和清晰
如何使用Auto Layout
Auto Layout中约束的类对应是NSLayoutConstraint, 而创建NSLayoutConstraint对象主要有两种方式,第一种是
Auto Layout存在问题
虽然Auto Layout在布局view方面是非常强大和灵活,但是创建constraint的语法过于繁杂,引用Masonry一个例子:
Masonry
为什么使用Masonry
Masonry是采用链式DSL(Domain-specific language)来封装NSLayoutConstraint,通过这种方式编写Auto
Layout布局代码更加易读和简洁。
使用Masonry的MASConstraintMaker来表达相同constraint
使用Masonry创建constraint来定义布局的方式有三种:mas_makeConstraints,mas_updateConstraints,mas_remakeConstraints。
1. mas_makeConstraints
使用mas_makeConstraints创建constraint后,你可以使用局部变量或属性来保存以便下次引用它;如果创建多个constraints,你可以采用数组来保存它们。
有时你需要更新constraint(例如,动画和调试)而不是创建固定constraint,可以使用mas_updateConstraints方法
mas_remakeConstraints与mas_updateConstraints比较相似,都是更新constraint。不过,mas_remakeConstraints是删除之前constraint,然后再添加新的constraint(适用于移动动画);而mas_updateConstraints只是更新constraint的值。
Classy
Classy简介和特性
Classy是一个能与UIKit无缝结合stylesheet(样式)系统。它借鉴CSS的思想,但引入新的语法和命名规则。
灵活内嵌的语法
{ } : ; 这些语法符号是可选的,你可以选择适合自己的风格来表达stylesheet。
你可以使用{ } : ; 来限定stylesheet
Classy在应用程序Bundle默认查找文件名为stylesheet.cas的样式文件。如果你采用这个文件名,你可以不用做任何东西就能加载样式文件。
但如果你想指定其他file path(样式文件名),你可以创建[CASStyler defaultStyler]
Live Reload
Live Reload是实时显示编写UI代码效果的关键特性,它能够实时检查stylesheet文件变化,无需重新编译、构建和运行模拟器,从而极大提高开发速度。
为了启用Live Reload,你需要指定stylesheet路径,并且只运行在模拟器上。
Style Selectors是指定哪个view使用哪种样式的方式。主要有三种方法来指定目标view:
Object Class
View Hierarchy
Style Class
你可以混合使用三种方法,例子如下:
为了避免与Objective-C的message selectors混淆,术语style selectors表示Classy stylesheets的selectors
Properties
Classy支持所有UIAppearance的属性和方法,也支持与UIAppearance无关的很多属性。Classy使用与UIKit相同属性命名,所以你不必考虑如何将style property映射到Objective-C的property。
UIPageControl类的属性如下:
UIPageControl {
page-indicator-tint-color black
current-page-indicator-tint-color purple
}
想了解具体如何使用,请查阅官网Properties章节
Keep it DRY(Don't Repeat Yourself)
在编程中一个很重要的原则就是避免重复,这不仅可以大量减少重复代码,并且使得代码更加容易复用和维护。Classy提供三种方式避免代码重复:grouping, nesting,variables
Grouping
如果有两个以上的style selectors共用相同的属性时
如果两个以上style selectors共用相同的view hierarchy时
Classy让你通过定义variables来将多个相同的style property值存储以便共享。Variable命名规则如下:
必须以大小写字母或$符号开头
可以包含_,-或任何字母数字
ClassyLiveLayout
ClassyLiveLayout通过结合Classy stylesheets与Masonry一起使用,能够在运行的模拟器中微调Auto Layout约束实时显示效果的工具。
ClassyLiveLayout一个核心category:UIView+ClassyLayoutProperties,在UIView定义以下属性:
示例工程
配置工程
由于需要引用Masonry,Classy和ClassyLiveLayout,Podfile配置如下:
1. 添加stylesheet.cas文件到工程
当安装好Masonry,Classy和ClassyLiveLayout后,第一次运行项目会出现没有stylesheet.cas文件错误:
只要向工程添加空的stylesheet.cas文件即可。
2. 创建LiveView类,该类继承SHPAbstractView。
在ViewController创建LiveView对象,然后被self.view引用。
当编译运行时,在SHPAbstractView.h由于找不到UIView出现编译错误。
只需引入UIKit便可以解决,但运行一下应用程序,出现一下错误:
主要原因是任何自定义UIView继承SHPAbstractView都需要override两个方法:- (void)addSubviews和- (void)defineLayout,我们可以查看SHPAbstractView的源码可知:
所以只要在LiveView.m文件覆盖两个方法即可
LiveView主要由包含redBoxView和blueBoxView两个属性,redBoxView表示红色方块,blueBoxView表示蓝色方块。
由于SHPAbstractView类如何初始化View已经做了处理,暴露两个接口- (void)addSubviews和-(void)defineLayout分别处理构建view hierarchy和定义布局,子类只要覆盖SHPAbstractView这两个方法就可以创建LiveView了。
但是我们将Auto Layout的constraints都放在stylesheets中实时加载(Live reload),即放在本工程的stylesheet.cas文件,将布局数据和布局代码分离。
为了启用Live Reload,你需要指定stylesheet路径,并且只运行在模拟器上。
最后效果
示例代码存放地址:LiveAutoLayout
总结
之前手写UI代码每次更改一般都要重新编译、构建和运行模拟器才能看到效果,但结合使用Masonry,Classy和ClassLiveLayout之后,告别这个费时过程,极大地提高开发速度;不仅如此,我们将Auto Layout的constraints都放在stylesheets中实时加载(Live reload),将布局数据和布局代码分离,使得代码更加复用和维护。Classy还提供三种避免重复方法:Grouping, Nestting和Variable,尽可能复用样式数据。
这是本人第一次编写技术博客,可能有很多错误和漏洞,希望大家多多指点,也希望这篇文章能够帮助到大家。
相关文章推荐
- iOS 实时显示编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果:有效提高UI编写速度
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果:有效提高UI编写速度
- 实时显示iOS编写UI代码效果
- 实时显示iOS编写UI代码效果
- html编写代码时,显示效果中文内容出现乱码解决方法
- 如何在vs2005中用代码编写“使窗体显示全屏效果”啊?
- ios代码编写UIButton,设置图片,图片不显示
- html代码编写:自定义hr标签的显示效果
- [模仿] CSSDesk 实时代码效果显示