
做个简单备忘。以后还得继续练习补充。
下载Xcode,建立默认的 project,就可以直接运行了:

一、Project

Project interface分为 Storyboard 和 SwiftUI。这两者的区别为:
storyboards
和 XIB
(Xml Interface Builder) 包含相当多的 XML
语句,不容易阅读,也不容易编辑。
storyboards
随着时间的推移越来越大。
XIB
和 Swift
是非常独立的东西,XIB
对 Swift
代码不了解,而 Swift
代码对 XIB
也不了解。
- SwiftUI 是一个只适用于
Swift
的框架。
- SwiftUI 代码比
storyboards
的 XML
更容易阅读和管理。
二、真机运行
如果是在真机上运行:
- 需要在xcode上配置证书
- 需要在手机上开启开发者模式:设置->隐私与安全性->开发者模式
- 需要在手机上信任开发者证书
以上都是免费的,不需要注册开发者账号。如果使用模拟器,则不用这么麻烦。
另外如果是从互联网上下载的代码,建议不要随意在真机上运行,有安全风险。




三、xcode 简单功能
右上角的+用得最多了,添加各种组件。

asset目录里有很多不同尺寸的图:

素材
可以方便导出各种格式尺寸的图。
编辑页面

选择 Assistant 可以将代码和界面放一起:

关联图标和代码:IBOutlet
声明组件和Action可以用拖拽的方式,ctrl+拖动



关联关系可以在图形上右键查看:


四、自适应布局
constraints,指定item和边缘的距离。

alignment/pinning

iOS里的stack view组件可以类比为html中的div组件。
view controller里的文件视图类似于photoshop里的图层反过来。
stack view
上图右下角的最右边那个收纳的图标。
五、纯代码生成view和controller
这样在图形化界面里我们就根本看不见这个view了,没办法用拖拽的方式给它添加东西。

-
命名为ViewController secondVC,改一下 import 为
UIKit`
-
定义一些基本的变量保存数据
-
override func viewDidLoad
-
定义一个组件,例如 UILabel
-
在上一个页面的ViewController
里给 secondVC 的变量赋值
-
在上一个页面的ViewController
里 self.present(secondVC, animated:true, completion: nil)
六、拖拽式生成view并绑定controller
在图形界面新建一个viewController


新建一个cocoa touch class
:


然后在 storyboard 里点一下还没有绑定 vc 的图形:


选择之后就可以看到它绑定好了。

七、生成view间关联:segues

设定segues的identifier名字:

然后在代码中触发这个切换:
self.performSegue(withIdentifier: "testSeg", sender: self)
同时,在前一个 controller 里我们可以做这个view 在切换前的准备工作:
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
if segue.identifier == "testSeg" {
let destinationVC = segue.destination as! ResultViewController
destinationVC.bmiValue = calculatorBrain.getBMIValue()
destinationVC.advice = calculatorBrain.getAdvice()
destinationVC.color = calculatorBrain.getColor()
}
}
在新的view里返回上一个view: dismiss
@IBAction func recalculatePressed(_ sender: UIButton) {
dismiss(animated: true, completion: nil)
}
在运行时可以用3D的方式查看图层,点击中间那个图层图标:


navigation controller
先点击黄色图标,再点击再菜单栏上选择 Editor->Embed In->Navigation Controller
,


navitationItem.hidesBackButton = true