iOS 关于Interface Building 的一些小技巧

从纯代码UI -> 最初的Xib -> StoryBoard ，感受到UI的搭建也是逐渐可视化，简单化。我是一个可视乎开发的支持者，有一些朋友不喜欢，这个纯属个人爱好，风格不同。

备注：本文代码Demo使用Swift

# Xib基础

## 1. UIStackView StackView 是iOS9以后才有的，主要解决了组件排列布局复杂的问题，高效快速。

AutoLayout布局是不是遇到过一个均分排列的布局，还要隐藏显示其中一个。这样布局就很麻烦了，每次都要更改约束。

UIStackView主要有四个属性：

Axis（主轴是水平和垂直）
Alignment
Distribution
Spacing

Alignment属性

Fill：完全充满
Top：顶部对齐
Center：居中对齐
Bottom：底部对齐

Distribution属性

Fill：完全充满
Fill Equally：均分填充，可是设置间隙，减去间隙均分填充满。
Fill Proportionally:按照之前比例填充，可以设置间隙，减去间隙按比例充满。
Fill Spacing:该属性会保持子视图的宽高，所有子视图中间的间隔保持一致。
Fill Center: 该属性是控制所有子视图的中心之间的距离保持一致。 StackViewDemo

场景：动态Tab，可以展示2个也可以三个。

全部代码和布局如下图：

2. AutoLayout 优先级和动画

在没有UISatckView之前，我们可以利用优先级完成三个Tab删除一个的场景，但是再重新显示是比较困难的。

约束优先级

先看下演示效果：

约束：三个Button等宽等高，均匀分布到屏幕，关键点是Tab3的约束

优先级的作用简单总结一下：一个元素可以同时存在两个相同作用的约束，优先级必须有先后，当其中一个失效，另一个就会使用，这样当我们删除相关元素，可以导致优先级改变。

Tab3的优先级如下：

代码：

代码语言：javascript复制

@IBAction func deleteTab2BtnClick(_ sender: Any) {
       priorityTab2.removeFromSuperview()
        UIView.animate(withDuration: 3, delay: 0, usingSpringWithDamping: 0.5, initialSpringVelocity: 15, options: .curveEaseInOut, animations: {
            self.view.layoutIfNeeded()
        }, completion: nil)
 }

伸缩优先级

点击控件我们在size inspector 一栏，最下部可以看到下面优先级。

Content Hugging Priority：表示一个控件“抗拉伸”的优先级。优先级越高，越不容易被拉伸，默认是：251。

Content Compression Resistance Priority：表示一个控件“抗压缩”的优先级。优先级越高，越不容易被压缩，默认是：750。

应用场景

最常见的简单问题，如果我们需要在一行放两个Label，Label宽度自适应。这样就会报错，因为无法确定哪一个Label的宽度撑开的优先级高。

演示Demo:

两个Label约束如下:

这时候就会报，上文所说的错误，修改一个优先级即可,我们想让Label1拉伸，所有将Label2的抗拉伸优先级调高成252，同理你可以将Label1调成249。

还没有结束，上述过程是空间充足的情况如果空间不足的话，还会出现报错。

现在我们不希望Label2被压缩，所以同理调高优先级即可。

3. @IBDesignable 和 @IBInspectable 的使用

应用场景：我们使用Xib绑定Custom Class想看一下样子，所见即所得，IBDesignable这个属性即可满足这个需求。

有时候我们想在XIb里直观修改Xib属性，但是Xcode并不全部提供属性修改，可以通过Keypath修改，但是键入太麻烦容易出错，所以可以通过IBInspectable添加自定义属性。

应用Demo：

制作一个可以动态修改Raduis属性，即可显示的Demo。

代码语言：javascript复制

import UIKit
@IBDesignable
class LayerView: UIView {
    @IBInspectable var myRaduis:CGFloat = 0.0{
        didSet{
            self.layer.cornerRadius = myRaduis
        }
    }
}

# 视图复用

1.自定义Xib View复用

Xcode 创建CocoaTouch Class View的时候，不可以自动生成绑定的Xib View。所以需要创建Xib View，然后绑定Custom Class。

step 1：

step 2：新建View Class，并在XIb绑定Custom Class为该类。

step 3：使用该View

2，3步截图使用代码如下：

代码语言：javascript复制

if let customView = Bundle.main.loadNibNamed("CustomView", owner: self, options: nil)?.first as? CustomView{
            customView.frame = CGRect(x: 200, y: 500, width: 200, height: 100)
            self.view.addSubview(customView)
}

2.在StoryBoard和Xib中怎么复用Xib文件

上个例子中制作了一个Xib view，但是在项目中往往想更直接在StoryBoard中复用Xib view。直接关联肯定是不行的。

下面介绍下如何在Sb中复用XIb 文件：

接上文例子，我们想在Sb中加上Xib view需要如下步骤，

step 1：绑定Xib 文件的 File's owner 的Class

step 2：在 init?(coder: NSCoder)初始化方法中，添加xib视图。

代码语言：javascript复制

import UIKit
class SbView: UIView {
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        if let sbView = Bundle.main.loadNibNamed("SbView", owner: self, options: nil)?.first as? UIView{
            sbView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
            self.addSubview(sbView)
        }
    }
}

step3: 在StoryBoard中,将该视图绑定Class即可。

# StoryBoard

1.Segue

Segue是一个很简单对象类，继承于NSObject。目的也很简单，主要是Sb VC之间跳转关系的纽带。

基本属性：

属性	作用
identifier	字符串标识，区分页面不同Segue
source	跳转之前的控制器
destination	需要跳转到的控制器

传值：

有时候我们需要判断是否满足跳转的条件，可以重写UIViewController shouldPerformSegue代理：

代码语言：javascript复制

 override func shouldPerformSegue(withIdentifier identifier: String, sender: Any?) -> Bool {
        if identifier ==  "jumpSecond"{
            return true
        }
        return false
  }

传值的时候，可以重写prepare方法。

代码语言：javascript复制

override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier ==  "jumpSecond"{
            let vc = segue.destination as? SecondViewController
            vc?.title = "第二控制器"
        }
}

下面一个图可以清楚说明：

2.快捷TableViewController

一些简单的表格页面，比如设置页面，可以使用静态TableViewController，简单高效。

应用Demo，设置页面：

step1: 拖一个TableViewController，改成静态的Cells,Style改成分组

step2: 修改Cell 为想要的类型，然后复制Section Cell，修改数据，组合即可。

# Cocoapods 制作第三方库，上传Xib文件

Cocoapods库制作的时候，Xib文件需要写到资源里，需要注意一下。

代码语言：javascript复制

# ――― Resources ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――― #
  #
  #  A list of resources included with the Pod. These are copied into the
  #  target bundle with a build phase script. Anything else will be cleaned.
  #  You can preserve files from being cleaned, please don't preserve
  #  non-essential files like tests, examples and documentation.
  #

  # spec.resource  = "icon.png"
  spec.resources = "Classes/Cell/*.xib","Classes/Image/*.png"

# 展望

希望写一个第三方库，可以更方便的使用Interface Building去写app，扩展更多更有用的可视化属性和控件。让开发iOS 更简单，高效。

抛砖引玉，希望有相同志向的人，能一起扩展完善。

第三方地址：XibKits

ios 编程算法 cocoa android

0 人点赞