实时显示iOS编写UI代码效果:有效提高UI编写速度
2015-06-16 15:48
671 查看
编写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对象主要有两种方式,第一种是
上面方法主要意思是,某个view1的attribute1等于(小于或等于/大于或等于)某个view2的attribute2的multiplier倍加上constant。而attribute主要由表示位置(上/下/左/右)和大小(宽/高)的以下几个值:
简化一下,使用公式可以表达为:
第二种方式是:
这种方式主要是采用Visual
Format Language(可视化格式语言)来描述约束布局,虽然语法比较简洁,但是可读性比较差和容易出错。
Auto Layout存在问题
虽然Auto Layout在布局view方面是非常强大和灵活,但是创建constraint的语法过于繁杂,引用Masonry一个例子:
如此简单的一个例子都要编写这么多行代码,想象一下如果创建多个view的constraint时会多么痛苦啊。另一个方式是采用Visual Format Language (VFL),虽然语法比较简洁,但是可读性比较差和容易出错。
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,你可以采用数组来保存它们。
2. mas_updateConstraints
有时你需要更新constraint(例如,动画和调试)而不是创建固定constraint,可以使用mas_updateConstraints方法
3. mas_remakeConstraints
mas_remakeConstraints与mas_updateConstraints比较相似,都是更新constraint。不过,mas_remakeConstraints是删除之前constraint,然后再添加新的constraint(适用于移动动画);而mas_updateConstraints只是更新constraint的值。
想了解以上三个代码片段的更多细节,可以下载Masonry iOS Examples工程查阅。
Classy
Classy简介和特性
Classy是一个能与UIKit无缝结合stylesheet(样式)系统。它借鉴CSS的思想,但引入新的语法和命名规则。
灵活内嵌的语法
{ } : ; 这些语法符号是可选的,你可以选择适合自己的风格来表达stylesheet。
你可以使用{ } : ; 来限定stylesheet
或者你使用空格来限定stylesheet
默认样式
Classy在应用程序Bundle默认查找文件名为stylesheet.cas的样式文件。如果你采用这个文件名,你可以不用做任何东西就能加载样式文件。
但如果你想指定其他file path(样式文件名),你可以创建[CASStyler defaultStyler]
如果你还想当发生错误时,获取错误信息以便于调试,可以使用-(void)setFilePath:error:
如果你是使用Storyboard/Xib组织UI界面,那就需要在main.m的int main(int argc, char * argv[])方法设置 filePath,这样可以确保在创建UIWindow之前加载stylesheet。否则(采用手写UI代码),你在 AppDelegate.m的- (BOOL)application:didFinishLaunchingWithOptions:方法设置filePath
Live Reload
Live Reload是实时显示编写UI代码效果的关键特性,它能够实时检查stylesheet文件变化,无需重新编译、构建和运行模拟器,从而极大提高开发速度。
为了启用Live Reload,你需要指定stylesheet路径,并且只运行在模拟器上。
Selectors
Style Selectors是指定哪个view使用哪种样式的方式。主要有三种方法来指定目标view:
Object Class
View Hierarchy
Style Class
你可以混合使用三种方法,例子如下:
想了解具体如何使用,请查阅官网Selectors章节
为了避免与Objective-C的message selectors混淆,术语style selectors表示Classy stylesheets的selectors
Properties
Classy支持所有UIAppearance的属性和方法,也支持与UIAppearance无关的很多属性。Classy使用与UIKit相同属性命名,所以你不必考虑如何将style
property映射到Objective-C的property。
UIPageControl类的属性如下:
style property的名字采用与objective-c一样的名字
style property的命名规则采用kebab case
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 selector中
Nesting
如果两个以上style selectors共用相同的view hierarchy时
我们通过nesting方式将view hierarchies表达成这样方式
Variables
Classy让你通过定义variables来将多个相同的style property值存储以便共享。Variable命名规则如下:
必须以大小写字母或$符号开头
可以包含_,-或任何字母数字
最后官方还提供一个实例来解释具体如何使用:Custom Views Example
ClassyLiveLayout
ClassyLiveLayout通过结合Classy stylesheets与Masonry一起使用,能够在运行的模拟器中微调Auto Layout约束实时显示效果的工具。
ClassyLiveLayout一个核心category:UIView+ClassyLayoutProperties,在UIView定义以下属性:
cas_margin和cas_size分别表示UI元素的位置和大小,而其余的属性都是对两个属性进一步细分。我们可以从stylesheets中访问style properties来定义constraints布局,做到将数据与代码分离,有利于修改和复用代码。
我们可以在updateConstraints或updateViewConstrains定义布局时引用style properties
当定义view layouts时,将Auto Layout的constraints都放在stylesheets中实时加载(Live reload)。如果你修改constraints,无需重新编译、构建和运行模拟器便能实时看到修改后的效果。
示例工程
配置工程
由于需要引用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文件覆盖两个方法即可
3. LiveView类设计
LiveView主要由包含redBoxView和blueBoxView两个属性,redBoxView表示红色方块,blueBoxView表示蓝色方块。
4. LiveView类实现
由于SHPAbstractView类如何初始化View已经做了处理,暴露两个接口- (void)addSubviews和-(void)defineLayout分别处理构建view hierarchy和定义布局,子类只要覆盖SHPAbstractView这两个方法就可以创建LiveView了。
但是我们将Auto Layout的constraints都放在stylesheets中实时加载(Live reload),即放在本工程的stylesheet.cas文件,将布局数据和布局代码分离。
有了constraints数据后,便可以在代码布局:
5. 模拟器支持Live Reload
为了启用Live Reload,你需要指定stylesheet路径,并且只运行在模拟器上。
最后效果
示例代码存放地址:LiveAutoLayout
总结
之前手写UI代码每次更改一般都要重新编译、构建和运行模拟器才能看到效果,但结合使用Masonry,Classy和ClassLiveLayout之后,告别这个费时过程,极大地提高开发速度;不仅如此,我们将Auto Layout的constraints都放在stylesheets中实时加载(Live reload),将布局数据和布局代码分离,使得代码更加复用和维护。Classy还提供三种避免重复方法:Grouping, Nestting和Variable,尽可能复用样式数据。
这是本人第一次编写技术博客,可能有很多错误和漏洞,希望大家多多指点,也希望这篇文章能够帮助到大家。
扩展阅读
Storyboard/XIB与手写代码的选择
代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧
iOS 开发中的争议(二)
Storyboard可视化开发
Adaptive Layout Tutorial: Getting Started
WWDC 2014 Session笔记 - 可视化开发,IB 的新时代
AutoLayout与Masonry
iOS 开发实践之 Auto Layout
Masonry介绍与使用实践
Auto Layout WWDC 视频集合
WWDC 2012: Introduction to Auto Layout for iOS and OS X
WWDC 2012: Best Practices for Mastering Auto Layout
WWDC 2012: Auto Layout by Example
WWDC 2013: Taking Control of Auto Layout in Xcode 5
转自:http://blog.csdn.net/lkeplei/article/details/45745599
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对象主要有两种方式,第一种是
Format Language(可视化格式语言)来描述约束布局,虽然语法比较简洁,但是可读性比较差和容易出错。
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,尽可能复用样式数据。
这是本人第一次编写技术博客,可能有很多错误和漏洞,希望大家多多指点,也希望这篇文章能够帮助到大家。
扩展阅读
Storyboard/XIB与手写代码的选择
代码手写UI,xib和StoryBoard间的博弈,以及Interface Builder的一些小技巧
iOS 开发中的争议(二)
Storyboard可视化开发
Adaptive Layout Tutorial: Getting Started
WWDC 2014 Session笔记 - 可视化开发,IB 的新时代
AutoLayout与Masonry
iOS 开发实践之 Auto Layout
Masonry介绍与使用实践
Auto Layout WWDC 视频集合
WWDC 2012: Introduction to Auto Layout for iOS and OS X
WWDC 2012: Best Practices for Mastering Auto Layout
WWDC 2012: Auto Layout by Example
WWDC 2013: Taking Control of Auto Layout in Xcode 5
转自:http://blog.csdn.net/lkeplei/article/details/45745599
相关文章推荐
- iOS:如何通过UIEdgeInsetsMake来制作可伸缩的Button
- UIViewController的基本概念与生命周期
- bluetooth 术语
- Implement Stack using Queues
- UVA 1152 4 Values whose Sum is 0 (hash)
- IBM Bluemix 问题-MySQL
- UILabel中插入图片
- Java GUI程序设计的初步上
- 关于SUID、SGID、Sticky。
- adams/car 怎么进入template builder模块
- 【系统性能优化】减少页面对公共资源Easyui的访问次数
- SDWebImage : NSURLErrorDomain - Code = 406 Overriding request headers in SDWebImage
- android ellipsize marquee 滚动文本正确配置
- Storyboard中的UIScrollView使用自动布局,使其能够滚动
- UIViewController的生命周期及iOS程序执行顺序
- UISwitch
- 【uiautomator】UiCollection
- PowerQuinsta
- [Training Video - 6] [File Reading] Making a Jar file with eclispe, Importing custom jars in SoapUI
- Request的getParameter和getAttribute方法的区别