iOS 开发 UI 搭建心得(二)—— 善用 xib

2015-5-10   /   阅读数:34751   /   分类: iOS & Swift

代码示例:https://github.com/johnlui/Swift-On-iOS/blob/master/DifferentWaysToBuildTheUserInterface

本篇文章中,我们将一起尝试使用 xib 搭建 UI,感受它的优点和缺点,找到它最适合的使用场景,力争做到善用这个强大的工具。

xib 能做什么

xib 能做一切事。StoryBoard 流行起来之后,许多不需要复用的 UI 模块可以不用再使用 xib 构建了,不仅减少了代码量,最大的好处是大大减少了 xib 的数量,找文件的时候方便了许多呀。

既然 xib 能做一切事,那我们接下来就一起尝试让它“做一些事”。

自定义一个图片+文字的按钮

新建文件夹 xibs,新建一个 Empty 的 User Interface,取名为 Button.xib:

Image

拖放一个 Button 到这个 xib 中,设定尺寸:

Image

修改背景色为绿色,之后找一张合适的图片放入图片资源管理器,设定为该按钮的 Image(我找的是一张 112*112 的 2X png):

Image

直接使用右侧的属性编辑器修改 Image 及 Title 的 Edge(边缘)属性,如下图:

Image

Image

把按钮安放到首页的中心

双击 Main.storyboard 打开新的编辑窗口,把焦点切换回主窗口,点击 Button.xib,之后把焦点重新切回新编辑窗口,从背后的 Button 向前面的新编辑窗口中的首页拖动。

Image

搞定!

Image

之后使用 Auto Layout 设定该 Button 和主 View 水平、垂直全部居中对齐,并设定宽高。此步操作不再截图,对 Auto Layout 不熟悉的同学可以阅读《Auto Layout 使用心得》系列文章。

需要注意的是,刚才那一步拖动操作本质上是复制,并不是映射。前面的搭建过程我们也可以直接在 Main.storyboard 中进行操作,毕竟 StoryBoard 的本质就是 xib 集合。

给按钮设置圆角

这一步也能在界面上直接设置?当然,无需编写代码。方法很简单:

Image

这一步操作就是代替我们在代码里面写 self.layer.cornerRadius = 10。

查看效果

Image

搞定!

手动载入 xib

其实上面的复制 xib 到 StoryBoard 的操作是错误的,如果想复用,我们需要“一处修改,全部变化”,所以我们应该使用代码载入这个 Button。这一步操作也非常容易:

首先删除主页中间的 Button,然后在 ViewController 的 viewDidLoad 函数中加入以下代码:

let button = NSBundle.mainBundle().loadNibNamed("Button", owner: self, options: nil).first as! UIButton
button.center = self.view.center
self.view.addSubview(button)

搞定!查看效果:

Image

响应 Button 点击事件

UI 实现之后,就要开始着手实现功能了,接下来我们让此 Button 响应点击事件。在 ViewController 中增加下面这个函数:

@IBAction func centerButtonBeTapped(sender: AnyObject) {
    println("centerButtonBeTapped")
}

下面就是见证奇迹的时刻,切换到 Button.xib,右键点击 First Responder,左键拖动 centerButtonBeTapped 到右边的 Button 上,选择 Touch Up Inside:

Image

绑定完成!

运行,查看效果:

Image

别忘了给 Button.xib 里面的 Button 也设置圆角哦。

总结

xib 让许多属性直接可以在 Xcode 上通过鼠标的简单操作直接控制,减少了代码量,大大降低了维护成本。建议大家能用 xib(StoryBoard)搭建 UI 就不要选择使用代码。

详细的属性设置指南可以参见苹果官方文档:https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/index.html 此文档图文相间,非常不错!

下一步:iOS 开发 UI 搭建心得(三)—— 纯代码的用武之地【待更新】

WRITTEN BY

avatar

评论:


2016-04-19 11:53
用xib的话是否文字的宽必须固定啊?我想让图片固定在距离button 右边距,文字(宽不定)在图片左边,但是实现不了
Luyakus
2016-03-02 17:07
用代码载入button的话就没办法在storyboard里用自动布局了啊,有没有两全的方法呢?
m
2016-02-02 10:43
楼主,我现在在XIB上有个button,设置了default状态下的image,selected下的title,然后点击后,btn变selected,title正常显示了,可是为啥这时候image还显示?求解啊。
Ranhao
2015-12-11 16:17
我感觉用Xib 各种问题呀  特别是controller用Xib 写的  有时候在ViewDidLoad 里 subView.count 都是NULL 你这样能避免吗? 在线急等呀!
aleX
2015-10-26 16:25
感觉卤煮脸瘦点绝逼是个帅哥!哈哈哈哈哈
zyg
2015-08-01 20:58
期待 iOS 开发 UI 搭建心得(三)
qq121
2015-05-27 15:30
文章很不错,请教下:这种使用xib构造的button能设置button上image的高亮状态吗,还有文本的高亮状态呢?
JohnLui
2015-05-28 14:55
@qq121:默认文本的高亮状态没了,如果需要可以自己设置。
isan
2015-05-11 08:03
请教,用这种方法自定义一个UIview,宽度如何设置成屏幕的宽度啊?
JohnLui
2015-05-11 09:11
@isan:可以在 addsubview 之前设置 frame 属性~
jyb
2015-09-09 18:21
@JohnLui:我有一个自定义UIView,里面有一个UILabel,UILabel的内容是可变的,但是宽度固定,高度需要根据内容多少,自适应。现在遇到这个适配屏幕的问题,在 addsubview 之前设置 frame.width 属性这个解决了,但是自适应高度不能在viewDidLoad,viewWillAppear或者viewDidAppear中改,我现在只能等页面完全加载完后,点击页面中的按钮才能获取到xib的自适应后的高度。有时间跟我交流一下吗?
JohnLui
2015-09-09 18:31
@jyb:viewdidappear 应该是可以的。可以尝试在获取之前调用 layoutIfNeeded()。
jyb
2015-09-09 19:05
@JohnLui:好的,我试试~
jyb
2015-09-09 19:52
@JohnLui:确实非常有效,在viewDidAppear中加载自定义的xib文件,然后在自定义UIView修改完宽度和内容后,调用layoutIfNeeded()方法,立即刷新了frame,此时高度就自适应了。需要注意的是,layoutIfNeeded可以在addSubview之前和之后调用,但必须在设置UILabel的内容之后。有一点点问题是,因为动态加载必须写在viewDidAppear方法里,跳转过来的时候可以看到自适应的过程。。有机会我把这个经验做成demo,让更多的朋友能够学习。感谢JohnLui大神的指点!~
以前有用过setNeedsDisplay,这是第一次使用layoutIfNeeded,还特地查了资料http://www.th7.cn/Program/IOS/201406/213977.shtml,虽然还不是很懂~

发表评论:

© 2011-2019 岁寒  |  Powered by Emlog