快速上手iOS UIKit

UIKit是苹果官方的framework, 其间包含了各种UI组件, window和view, 事情处理, 交互, 动画, 资源管理等基础设施支持.

按照前面的介绍, 用UIKit写UI能够用storyboard(Interface Builder)和代码两种办法.

大体的思路都是增加组件后, 设置特点, 设置尺度位置束缚, 处理响应事情.

这儿主要介绍用代码写的景象. 期望这篇文章, 能够帮你快速上手UIKit, 了解常用的组件, 完结一些简略的UI界面相关任务.

在代码中写UI的基本过程

在代码中写UI的过程大致是:

  • 初始化.
  • addSubview增加到当时view, 或hierarchy中的其他可达view.
  • 设置束缚.

比如:

class ViewController: UIViewController {
    var myLabel: UILabel!
    override func loadView() {
        view = UIView()
        view.backgroundColor = .white
      // 创立实例
        myLabel = UILabel()
        myLabel.translatesAutoresizingMaskIntoConstraints = false
        myLabel.text = "Hello"
        // 增加到view中
        view.addSubview(myLabel)
        // 设置束缚
        NSLayoutConstraint.activate([
            myLabel.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
            myLabel.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
        ])
    }
}

这儿有几点阐明:

  • var** myLabel: UILabel! 组件字段这样声明有lateinit的作用, 假如不带!会报错, 说controller没有init办法.
  • 假如在代码中设置UI组件的constraints, 那么这个特点常常要设置为false: translatesAutoresizingMaskIntoConstraints = **false**. 假如组件的位置是经过frame来设置的, 则不必设置这个特点.
  • 束缚有多种写法, 这儿只是其间一种, 用anchor的办法.

常用组件

文字: UILabel

设置文字等特点:

myLabel = UILabel()
myLabel.translatesAutoresizingMaskIntoConstraints = false
myLabel.font = UIFont.systemFont(ofSize: 24)
myLabel.text = "Hello"
myLabel.numberOfLines = 0
myLabel.textAlignment = .right

给UILabel设置点击事情:

myLabel.isUserInteractionEnabled = true
let tapGesture = UITapGestureRecognizer(target: self, action: #selector(userDidTapLabel(tapGestureRecognizer:)))
myLabel.addGestureRecognizer(tapGesture)

点击事情处理办法:

@objc func userDidTapLabel(tapGestureRecognizer _: UITapGestureRecognizer) {
    print("label clicked!")
}

这儿有#selector, 对应的userDidTapLabel办法要加上@objc. 便于OC的代码调用能找到swift的办法.

给UILabel设置点击事情和UIButton不同, 这点咱们后边说承继联系的时分解释一下.

按钮: UIButton

设置文字:

submitButton = UIButton(type: .system)
submitButton.translatesAutoresizingMaskIntoConstraints = false
submitButton.titleLabel?.font = UIFont.systemFont(ofSize: 36)
submitButton.setTitle("SUBMIT", for: .normal)
submitButton.setTitleColor(.black, for: .normal)

设置点击事情:

submitButton.addTarget(self, action: #selector(submitTapped), for: .touchUpInside)
@objc func submitTapped(_ sender: UIButton) {
}

这儿运用@objc的理由同上.

基本上咱们在iOS代码中用到#的时分, 对应的办法都要加上@objc.

输入框: UITextField

myTextField = UITextField()
myTextField.translatesAutoresizingMaskIntoConstraints = false
myTextField.placeholder = "What's your name?"
myTextField.textAlignment = .center
myTextField.font = UIFont.systemFont(ofSize: 44)

想要禁用输入框能够这样:

myTextField.isUserInteractionEnabled = false

弹框

在app里简略的交互咱们常常需求弹出一个对话框:

let alert = UIAlertController(title: "title", message: "message", preferredStyle: .alert)
alert.addAction(UIAlertAction(title: "Ok", style: .default))
alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
present(alert, animated: true)

其间preferredStyle有.alert和.actionSheet两种.

.alert是中心的对话框, 一般用于信息提示或许确认操作; .actionSheet是底部的bottom sheet, 一般用来在几个选项中做挑选.

其他

  • view中比较常用的特点isHidden, 控制view是否需求躲藏.
  • 一切的UIView都有一个layer特点. 设置border的宽度和色彩就在layer上设置. CALayer在UIView之下. 所以不知道UIColor, 只知道CGColor.

本文仅列出几个常用组件, 更多的请看官方示例.

这儿能够下载

承继联系

NSObject是一切Cocoa Touch class的基类. 一切UIKit中的类都是它的子类.

这儿有一个类联系的图:

[Android开发学iOS系列] 快速上手UIKit

咱们这儿不打开讲述一切了, 只解答一下前面提出的关于UILabel点击事情的问题.

[Android开发学iOS系列] 快速上手UIKit

这儿能够看到UILabel和UIButton虽然都承继了UIView, 可是UIButton的承继层次更深一些, 它还承继了了UIControl.

能够看到和UIButton平级的还有好几个子类.

Controls运用的是target-action机制, 一切的action都经过办法: addTarget(_:action:for:) 增加.

束缚Constraints

当在代码中设置束缚时, 有三种挑选:

  • 运用layout anchors.
  • 运用NSLayoutConstraint类.
  • 运用Visual Format Language.

上面咱们提到过的便是其间Layout Anchors的写法:

初级单个写法:

buttonsView.topAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
buttonsView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
buttonsView.leadingAnchor.constraint(equalTo: view.leadingAnchor).isActive = true
buttonsView.trailingAnchor.constraint(equalTo: view.trailingAnchor).isActive = true

放进数组里批量激活写法:

NSLayoutConstraint.activate([
            buttonsView.topAnchor.constraint(equalTo: view.centerYAnchor),
            buttonsView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            buttonsView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            buttonsView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
        ])

感觉是对新手比较直观的一种写法.

其他写法文末有参考文档.

PS: 项目中更流行用 SnapKit.

区域限制

  • safeAreaLayoutGuide : 去掉圆角和刘海.
  • layoutMarginsGuide : safe area的内部再加上一些额外的margin.

Bonus

  • 友情提示: 在xcode里就能够看官方文档, 快捷键是Cmd + Shift + 0.

References

  • UIKit Documentation
  • UIKit Catalog
  • codewithchris.com/swift-tutor…
  • Programmatically Creating Constraints