iOS狂暴之路--两种布局方式操作详解(xib文件和代码编写)

一、前言

在Android中我们进行布局操作也是有两种方式，一种是直接手写xml布局，还有一种就是用代码编写，在iOS布局中其实也是类似，有两种方式一种是xib文件，一种代码编写。本文就来介绍iOS开发中最麻烦的最常用的知识布局内容。有了这些知识之后结合之前的讲解的网络和多线程知识就可以简单的开发一个应用了，后面会继续介绍iOS开发搜狐新闻。因为之前已经操作了多年的Android布局，所以就对比学习，这里就总结一下比较常用的selector，圆角，背景图，字体大小和颜色，相对布局等，但是iOS中其实没有那么强烈的布局概念，而且可能有的人觉得现在storyboard比较常用点，但是其实只要了解了xib之后这个也就很好理解了。

iOS中的xib你就可以理解是和Android中的xml很类似但是因为Android早期依赖于Eclipse开发工具，也就是我们不会很习惯用可视化操作布局而是全部手动编写xml文件，这个的确是Google失误虽然现在AS出现弥补了这一缺陷但是习惯养成了很难改变，导致我现在用AS依然使用手动编写xml来实现布局。而iOS不一样，整个生态工具独一无二的确有很大的优势，所以很多人在弄xib都是可视化操作当然xib不像xml一样看不见具体的布局代码的。所以只能可视化操作了，其实刚开始从AS中手动编写xml直接到Xcode中可视化操作xib很不习惯，不过经过一段时间就习惯了，而且会发现很多功能属性真的很好用比Android省事很多了。后面会一一介绍。那么接下来就来介绍iOS中的布局界面，就用这个页面作为案例吧：

这个界面主要分为三大部分，第一部分是输入文本框，中间是选择图片，底部是一个按钮，有点类似于微信发表状态界面，这个界面如果用Android中的xml实现很简单，最外面用相对布局因为底部的按钮为了适配最后是底部对齐然后设置margin值即可，然后就是简单的按照顺序放控件就好了。而中间的选择图片有删除按钮，这个其实也是用相对布局就可以了，直接右上对其在设置margin值即可。iOS中操作其实也是类似。接下来就来操作了。

 

二、xib文件布局

我们用Xcode新建一个工程，选择第一个Single View App即可：

点击继续：

这是项目信息之后继续，这里其实和Android新建工程很类似，主要是工程名和应用包名，然后就完成项目的创建了，接下来我们新建一个UIViewController，关于这个类之前已经说过了有点类似于Android中的Activity，不了解的同学可以看这里：iOS中的UIViewController用法介绍；Android中的Activity中一般都会对应一个layout文件，这里的ViewController也是如此，一般在创建这个类的时候都会勾选上：

勾选上之后点击完成即可：

这样我们就可以在xib文件中进行操作编辑页面了，这里和Android有个区别：Android中可以直接编辑手动编写xml来进行布局(这也许是iOS中提倡代码布局便于管理和维护，如果用这种xib布局方式维护成本非常大，但是Android中可以编写xml文件，所以用xml布局维护成本低，代码编写反而不好维护，这个倒是Android的一个优点)，但是这里是不可以的，而这里直接全部用拖拽的方式进行操作，看到右下角有一个选择控件的区域，直接搜索到指定控件然后拖拽到布局中即可：

然后就可以对这个控件进行设置约束了，其实约束理解非常简单，就把他想象成左边距，右边距等信息，这里看到这个界面的约束主要包括左右上下的边距也就是margin值，然后是长度和宽度，下面那两个值也很重要，但是一般是操作多个控件的，后面的案例会介绍这个用法，比如Android中的一行中有多个控件想要等分布局这个就用到了。这里我们先设置左右上下边距：