你好，奇妙的社区ð。作为新的iOS开发人员，我开始学习如何以编程方式创建视图，学习如何从使用故事板ð。
来做到这一点很棘手。在本教程中，我将逐步指导您以编程方式创建iOS视图。这是我分享自己学到的知识的机会，希望能帮助其他正在探索这一领域的人。
让我们开始编码！ ð
启动一个新的Xcode项目
我正在使用Xcode版本14.3，并且针对iOS 16
- 打开Xcode并单击新项目，我们将获取此窗口：
在这里，我们将选择最简单的模板，ios> app
- 现在让我们提供一些基本信息：
- 产品名称：这是我们应用的名称。
- 团队：如果您有一个Apple开发人员帐户，则应在此处选择它，否则就没有好的（离开它，因为没有一个允许您仅在模拟器中测试您的应用程序）。
- 接口：由于我们正在使用
UIKit进行示例，因此我们需要选择故事板（别担心我们实际上不是在使用它们）。 - 语言：选择Swift。
其余选项可以不受限制，在这个简单的示例中不会使用它们。
- 单击下一步，然后在计算机上选择一个位置以保存项目，最后单击创建。
我们现在为我们准备了一个简单的应用程序。 ð
从我们的项目中删除故事板的参考
现在是时候删除与之关联的故事板文件和配置了。
在这个简单的项目中，我们有两个故事板文件，Main和LaunchScreen。
我们只需要删除Main一个，因为这是一旦我们的应用程序启动的加载的Main。我们想通过使用代码来提供自己的。
- 从项目中删除
Main，当及时单击移动垃圾时。
- 删除该故事板的引用，打开
Info.plist并通过单击减去图标来删除称为Storyboard Name的值。
- 删除目标应用程序中的故事板参考，这很重要，因为我们不再有故事板文件，因此，如果我们尝试编译，我们会因为缺少参考而遇到错误。
现在运行您的应用程序，您将获得一个不错的黑屏，这意味着您正确删除了故事板！
以编程方式配置根窗口
现在您有一个空屏幕，什么也没有加载，这是一个问题。故事板自动为您制作了所有这些配置。现在，您有责任配置您的应用程序启动时将显示的屏幕。
- 打开
SceneDelegate.swift并配置应用程序的根窗口。找到称为func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions)的方法。
找到它后，让我们以以下方式更改方法的身体：
guard let windowScene = (scene as? UIWindowScene) else { return }
let window = UIWindow(windowScene: windowScene)
let viewController = ViewController()
window.rootViewController = viewController
self.window = window
window.makeKeyAndVisible()
此代码做几件事：
- 它试图通过使用传递的
scene对象创建windoScene，此对象将包含我们应用的场景。 - 它创建了一个新的
window，这将告诉您的应用程序创建Windowscene，此对象将包含您的应用程序的用户界面。 - 它创建了一个
viewController，此对象负责控制您的视图对象。此类已经在您的模板上（`viewController.swift），因此它的名称没有任何特别之处。 - 将新的ViewController分配为root View Controller，即，我们将要创建的第一个视图控制器来启动我们的应用程序。
- 我们将新创建的窗口分配给我们的类窗口，
self.window = window。 - 使窗口在屏幕上可见，
window.makeKeyAndVisible()。
在该配置之后，您的应用接口恢复了生命。如果此时运行它，您仍然会得到一个后屏幕，没关系，因为我们在视图对象上没有配置任何内容。
编程创建我们的简单界面
现在是时候添加一些代码以使我们的界面在屏幕上显示一些内容！
ViewController生命周期
UIViewController具有特定的生命周期，即在对象生命的特定时刻调用某些预定义方法。由于我们正在以编程方式创建界面，因此我们需要了解这个生命周期的两种方法。
-
func loadView()：此方法用于加载我们的自定义视图并在出现在屏幕上之前对其进行一些配置。 -
func viewDidLoad()：一旦将ViewController加载到内存中，此方法就会称为，您可以在这里创建更多的自定义和配置。
您可以猜到，对象首先运行loadView，然后运行viewDidLoad。
创建一个空的UIView
每个ViewController都会创建一个默认的空视图，但是我们想拥有自己的自定义视图，所以让我们从此开始。
- 为我们的新自定义视图创建一个新文件，让我们称其为
CustomView.swift并在内部添加以下代码。
`swift
// customview.swift
导入Uikit
最终类CustomView：uiview {
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .yellow
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
`
我们的视图从UIView继承，因此我们需要至少定义这两个构造函数（init方法）。我们需要关注的是第一个。在这里，我们添加了背景颜色。
- 创建自定义视图对象并在屏幕上显示它，以实现此目的，可以打开
ViewController.swift，并且在类内部创建了我们视图的新对象，并将其分配为loadView中的新视图。您应该最终得到类似的代码：
`swift
// viewController.swift
导入Uikit
类ViewController：uiviewController {
lazy var customView = CustomView()
override func loadView() {
// we are creating a class property because we may have delegates
// assign your delegates here, before view
view = customView
}
override func viewDidLoad() {
super.viewDidLoad()
}
}
`
要提到的一个重要点，默认情况下，视图属性为使用所有手机屏幕。因此，因此我们不需要分配任何约束。 CustomView将带有所有屏幕。
现在运行您的应用程序，您将看到一个黄色屏幕。
此时，您应该在项目上有以下文件：
太好了，现在您将空的自定义视图加载到屏幕上！
在空视图上添加一个简单的标签
要完成本教程，让我们使用自动布局添加一个简单的标签。
- 在
CustomView类上创建UILabel属性，并给它一些默认值，例如标题和颜色。您无需提供任何维度，我们将使用自动布局来执行此操作。您的CustomView课应该看起来像这样：
`swift
// customview.swift
导入Uikit
最终类CustomView：uiview {
// 1. Creating the new element
lazy var label: UILabel = {
// internal label, not the same as the external label
let label = UILabel()
label.text = "Hello World"
label.textAlignment = .center
label.textColor = .white
label.backgroundColor = .black
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .yellow
// 2. Adding the new element into the view
addSubview(label)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
`
如果运行代码，新标签将不会出现在屏幕上，那是因为该标签的大小为0及其在屏幕位置中的位置（0,0）。发生这种情况是因为我们没有提供CGRect初始化器。没关系，我们将使用自动布局来解决此问题。
- 添加自动布局约束以允许对象出现在视图上（这将为它提供一个区域），还要记住将设置为false false属性
translatesAutoresizingMaskIntoConstraints，如果我们不这样做。
请记住，每个UI元素都表示为一个框，因此每个边缘都有一个可以在代码中引用的名称以分配约束。
CustomView.swift中的代码应该看起来像这样的东西：
`swift
// customview.swift
导入Uikit
最终类CustomView：uiview {
// 1. Creating the new element
lazy var label: UILabel = {
// internal label, not the same as the external label
let label = UILabel()
label.text = "Hello World"
label.textAlignment = .center
label.textColor = .white
label.backgroundColor = .black
return label
}()
override init(frame: CGRect) {
super.init(frame: frame)
backgroundColor = .yellow
// 2. Adding the new element into the view
addSubview(label)
// 3. Add the auto layout constrains
setUpLabelConstrains()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
private func setUpLabelConstrains() {
// Needed to avoid auto layout conflicts
label.translatesAutoresizingMaskIntoConstraints = false
// Set the top part of the label to the safe area of the custom view and add a vertical separation of 64 points
label.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 64).isActive = true
// Set the left part of the label to the safe area of the custom view and add a horizontal separation of 18 points
label.leftAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leftAnchor, constant: 18).isActive = true
// Set the right part of the label to the safe area of the custom view and add a horizontal separation of -18 points
// note: if this value it's positive the element will be separate from outside the screen 18 points.
label.rightAnchor.constraint(equalTo: self.safeAreaLayoutGuide.rightAnchor, constant: -18).isActive = true
// Set the height of the label to be equal to 48 points
label.heightAnchor.constraint(equalToConstant: 48).isActive = true
}
}
`
现在让我们运行该应用程序，现在应该在屏幕上出现自定义标签。此自定义标签是自定义视图的孩子，它是由ViewController创建的，并将其设置为我们的ViewController的默认视图。
结论
恭喜，您仅使用代码创建了一个应用程序！。我希望这个简单的教程可以帮助您理解此主题。还有更多的涵盖，但这是一个很好的第一步，谢谢您的阅读！
直到下一次。