本篇思維導圖
「需求：」
1.顯示一個橘黃色矩形
2.矩形上面一個按鈕可以點擊，并有響應(yīng)事件
3.界面中心顯示一張圖片
「系統(tǒng)版本：」
MacOS 版本：10.15.5
Xcode版本：11.5
一、創(chuàng)建demo項目
1.1 選擇創(chuàng)建一個Xcode Project
image
<figcaption style="box-sizing: inherit; display: block; margin-top: 5px; text-align: center; font-size: 13px;">mark</figcaption>
1.2 選擇Single View App
mark
二跺嗽、代碼實現(xiàn)
2.1 程序入口說明
Application/AppDelegate.swift文件中的@UIApplication注解蚓炬，表示這個Class類是程序的入口
image
2.2 代碼結(jié)構(gòu)說明
所有方法放到一個{}中慕淡，并有縮進盾沫。
和Java編碼格式非常相似。
2.3 功能實現(xiàn)
2.3.1 創(chuàng)建一個視圖闯传，添加一個黃色矩形
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
// 1.創(chuàng)建一個視圖
let v = UIView(frame: CGRect(x:0, y:0, width: 100, height: 100))
// 2.設(shè)置背景顏色
v.backgroundColor = UIColor.yellow
// 3.添加到當前視圖
view.addSubview(v)
}
}
效果如下所示：一個黃色矩形在左上角
效果圖
2.3.2 添加一個按鈕谨朝，并添加按鈕點擊事件的監(jiān)聽方法
// 2.創(chuàng)建一個按鈕
let btn = UIButton(type: .contactAdd)
// 2.1 添加到當前視圖
v.addSubview(btn)
// 2.2 添加點擊事件
btn.addTarget(self, action: #selector(btnClick), for: .touchUpInside)
// 2.3 btnClick事件方法輸出日志
效果如下所示，一個按鈕在左上角甥绿，點擊按鈕將會輸出日志
效果圖
2.3.3 添加一個圖片
// 3.1 添加一個圖片
let iv = UIImageView(image: #imageLiteral(resourceName: "2.jpeg"))
// 3.2 添加到視圖
iv.center = view.center
image
image
三洗出、上述示例swift與object-c的語法對比
3.1 創(chuàng)建視圖類比
- Swift: UIView(XXX:)
- OC: [[UIView alloc] initWithXXX:]
類名() == alloc / init 等價
3.2 類方法類比
Swift: UIColor.yellow
OC: [UIColor yellow]
3.3 訪問當前對象的屬性類比
建議：都不使用
self.。當編譯器提示的時候图谷，再添加翩活，會對語境有更好的機會；原因：閉包(類似于 OC block)需要使用self便贵。
3.4 不需要;
除非多行代碼語句寫在同一行中菠镇。
3.5 枚舉類型 type對比
Swift：`type: .contactAdd`
OC: UIButtonType.ContactAdd
3.6 監(jiān)聽方法對比
Swift: #selector，如果帶參數(shù)承璃，不需要使用`:`
OC: @selector
3.7 調(diào)試對比
- Swift: print(xxx) 效率高利耍，log中不包含時間，用#function來打印當前執(zhí)行的方法
- OC: NSLog盔粹，用FUNCTION 來打印當前執(zhí)行的方法
四隘梨、注釋的妙用
當我們想標注某段代碼是需要refine的，我們可以添加注釋標簽：TODO舷嗡。
如下圖所示轴猎，我在注釋中添加了MARK、TODO进萄、FIXME標簽前綴税稼，這些特殊標記的錨點菜單將會顯示在導航欄上，點擊菜單即可跳轉(zhuǎn)到對應(yīng)注釋的地方垮斯，非常方便。
image
<figcaption style="box-sizing: inherit; display: block; margin-top: 5px; text-align: center; font-size: 13px;"></figcaption>
