ToB企服应用市场:ToB评测及商务社交产业平台

标题: [Android开发学iOS系列] 快速上手UIKit [打印本页]

---

作者: 王海鱼    时间: 2022-10-13 03:59
标题: [Android开发学iOS系列] 快速上手UIKit
快速上手iOS UIKit

UIKit是苹果官方的framework, 其中包含了各种UI组件, window和view, 事件处理, 交互, 动画, 资源管理等基础设施支持.
按照前面的介绍, 用UIKit写UI可以用storyboard(Interface Builder)和代码两种方式.
大体的思路都是添加组件后, 设置属性, 设置尺寸位置约束, 处理响应事件.
这里主要介绍用代码写的情形.
希望这篇文章, 可以帮你快速上手UIKit, 熟悉常用的组件, 完成一些简单的UI界面相关任务.
在代码中写UI的基本步骤

在代码中写UI的步骤大致是:

• 初始化.
  
• addSubview添加到当前view, 或hierarchy中的其他可达view.
  
• 设置约束.
  

比如:

1. class ViewController: UIViewController {
2.     var myLabel: UILabel!
4.     override func loadView() {
5.         view = UIView()
6.         view.backgroundColor = .white
8.                 // 创建实例
9.         myLabel = UILabel()
10.         myLabel.translatesAutoresizingMaskIntoConstraints = false
11.         myLabel.text = "Hello"
12.         
13.         // 添加到view中
14.         view.addSubview(myLabel)
16.         // 设置约束
17.         NSLayoutConstraint.activate([
18.             myLabel.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor),
19.             myLabel.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
20.         ])
21.     }
22. }

复制代码

这里有几点说明:

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

常用组件

文字: UILabel

设置文字等属性:

1. myLabel = UILabel()
2. myLabel.translatesAutoresizingMaskIntoConstraints = false
3. myLabel.font = UIFont.systemFont(ofSize: 24)
4. myLabel.text = "Hello"
5. myLabel.numberOfLines = 0
6. myLabel.textAlignment = .right

复制代码

给UILabel设置点击事件:

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

复制代码

点击事件处理方法:

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

复制代码

这里有#selector, 对应的userDidTapLabel方法要加上@objc. 便于OC的代码调用能找到swift的方法.
给UILabel设置点击事件和UIButton不同, 这点我们后面说继承关系的时候解释一下.
按钮: UIButton

设置文字:

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

复制代码

设置点击事件:

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

复制代码

这里使用@objc的理由同上.
基本上我们在iOS代码中用到#的时候, 对应的方法都要加上@objc.
输入框: UITextField

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

复制代码

想要禁用输入框可以这样:

1. myTextField.isUserInteractionEnabled = false

复制代码

弹框

在app里简单的交互我们经常需要弹出一个对话框:

1. let alert = UIAlertController(title: "title", message: "message", preferredStyle: .alert)
2. alert.addAction(UIAlertAction(title: "Ok", style: .default))
3. alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
4. 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中的类都是它的子类.
这里有一个类关系的图:

我们这里不展开讲述所有了, 只解答一下前面提出的关于UILabel点击事件的问题.

这里可以看到UILabel和UIButton虽然都继承了UIView, 但是UIButton的继承层次更深一些, 它还继承了了UIControl.
可以看到和UIButton平级的还有好几个子类.
Controls使用的是target-action机制, 所有的action都通过方法: addTarget(_:action:for:) 添加.
约束Constraints

当在代码中设置约束时, 有三种选择:

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

上面我们提到过的就是其中Layout Anchors的写法:
初级单个写法:

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

复制代码

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

1. NSLayoutConstraint.activate([
2.             buttonsView.topAnchor.constraint(equalTo: view.centerYAnchor),
3.             buttonsView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
4.             buttonsView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
5.             buttonsView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
6.         ])

复制代码

感觉是对新手比较直观的一种写法.
其他写法文末有参考文档.
PS: 项目中更流行用 SnapKit.
区域限制

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

Bonus

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

References

• UIKit Documentation
  
• UIKit Catalog
  
• https://codewithchris.com/swift-tutorial-complete/#uikit
  
• Programmatically Creating Constraints
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4