這個(gè)教程會(huì)涉及如下內(nèi)容
- 通過storyboard添加UILabel
- 添加導(dǎo)航欄
- 設(shè)置導(dǎo)航欄title及title的文字顏色
- 通過storyboard實(shí)現(xiàn)最基礎(chǔ)的手勢(shì)識(shí)別
- 最基礎(chǔ)的動(dòng)畫效果（淡入淡出）
PS：因?yàn)槭堑谝粋€(gè)教程会喝，我會(huì)盡可能細(xì)致的把App的搭建過程以圖文并茂的形式展現(xiàn)出來(lái)肢执。
首先我們來(lái)新建一個(gè)工程
打開Xcode
新建工程.png
選擇Single View Application（單視圖程序），今后大部分程序都會(huì)給予Single View App的模板實(shí)現(xiàn)预茄，單擊next。
SingleViewApp.png
接下來(lái)設(shè)置工程名稱拙徽，這里我們用HelloWorld做為名稱诗宣，語(yǔ)言及的選擇Swift。
工程名.png
新建完成后你就會(huì)看到主界面岛心，在主界面右側(cè)可以看到整個(gè)項(xiàng)目的文件目錄結(jié)構(gòu)如下圖：
工程文件結(jié)構(gòu).png
我們來(lái)依次簡(jiǎn)單介紹一下這幾個(gè)文件
- AppDelegate.swift：App運(yùn)行的入口
- ViewController.swift：App的控制器篮灼，在之后的很長(zhǎng)一段學(xué)習(xí)過程中你的編碼工作主要是針對(duì)這個(gè)文件完成的，在這個(gè)文件中你將會(huì)告訴你的App應(yīng)該如何工作诅诱。
- Main.storyboard：App的設(shè)計(jì)界面存皂，絕大多數(shù)可視化的組件（像你熟悉的按鈕、文本框逢艘、圖片、滾動(dòng)列表）都在這個(gè)文件中進(jìn)行設(shè)置它改，有了這個(gè)東西你就可以幾乎不需要寫一行代碼就能定義好App的外觀。怎么樣祭阀，很酷吧～
- Asset.xcassets：App的原生圖片存儲(chǔ)在這里鲜戒。
- LanuchScreen.storyboard：App登陸界面外觀，在你打開一個(gè)App的時(shí)候經(jīng)常會(huì)看到一些輪播圖片或是介紹遏餐，那些東西就是在這里進(jìn)行設(shè)置的。
- info.plist：這里存放了App相關(guān)的一些重要配置信息柏蘑，很多無(wú)法通過代碼設(shè)置的信息都是在這里進(jìn)行設(shè)置的。
有關(guān)主界面的更佳詳細(xì)的介紹可以參見下面鏈接中的介紹：
正式進(jìn)入開發(fā)階段
使用storyboard進(jìn)行UI搭建
首先點(diǎn)開Main.storyboard文件洽损，將右下角控件選擇器中的Label直接拖到ViewController面板中革半。
現(xiàn)在頁(yè)面中只有一個(gè)元素，那就是你拖進(jìn)去的這個(gè)Label延刘，這時(shí)讓它居中是最好的選擇赏胚，選中Label，然后單擊右下角的布局按鈕設(shè)置居中觉阅。
接下來(lái)我們調(diào)整一下Label的屬性典勇，讓它看起來(lái)更加美觀～～
- color 選擇 DarkGray
- Font 選擇 Thin 大小調(diào)整為50
- Alignment設(shè)置為劇種
給ViewController添加一個(gè)NavigationController：選中Controller，單擊菜單欄中的Editor -> Embed in -> Navigation Controller
同樣的過程权烧，在右邊欄中將導(dǎo)航設(shè)置為深灰色伤溉，并且雙擊導(dǎo)航欄為導(dǎo)航欄添加title：Hello World，將根部View的背景設(shè)置為淺灰板祝。怎么樣走净，整個(gè)界面是不是看起來(lái)就美觀多了。
到這里界面的基本外觀我們就設(shè)置完成了伏伯，可以看到，所有過程都是通過storyboard完成的炸枣，我們甚至沒有敲任何一行代碼。
代碼實(shí)現(xiàn)動(dòng)態(tài)交互效果
打開ViewController.swift文件 我們會(huì)看到如下代碼
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
viewDidLoad()方法中的代碼用來(lái)初始化程序的開始的第一個(gè)界面博其，didReceiveMemoryWarning()方法呢是在內(nèi)存異常的時(shí)候才會(huì)被調(diào)用
首先添加Label的引用命名為helloWorldLabel迂猴，即使用拖拽將stroyboard中的label 與代碼鏈接
@IBOutlet weak var helloWordLabel: UILabel!
打開軟件時(shí)Hello World會(huì)有一個(gè)淡入的動(dòng)畫效果 我們使用animate()方法類實(shí)現(xiàn)
UIView.animate(withDuration: TimeInterval, animations: () -> Void)
- withDuration傳入一個(gè)TimeInterval類型參數(shù)來(lái)代表時(shí)間長(zhǎng)度背伴，以秒為單位，實(shí)際上TimeInterval是一個(gè)被重命名的Double類型息尺，增加代碼可讀性疾掰。
- 后面的參數(shù)傳入一個(gè)返回類型為空的函數(shù)（或閉包）整個(gè)函數(shù)會(huì)使得有關(guān)外觀的參數(shù)在設(shè)置的時(shí)間長(zhǎng)度內(nèi)勻速按一定增量刷新，最終變成設(shè)定的值從而達(dá)到動(dòng)態(tài)效果静檬，如果設(shè)置的值與外觀無(wú)關(guān)，或者無(wú)法進(jìn)行均勻插值（如設(shè)定顏色）侮腹，語(yǔ)句會(huì)被瞬間執(zhí)行
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
helloWordLabel.alpha = 0
UIView.animate(withDuration: 1, animations: {
self.helloWorldLabel.alpha = 1
})
}
接下來(lái)給View添加一個(gè)點(diǎn)擊響應(yīng)功能稻励，在每次點(diǎn)擊屏幕后HelloWorldLabel
這次依然用storyboard來(lái)添加直接從右下角面板找到tapRecognizer拖入storyboard主面板，
然后把tapRecognizer拖入ViewController建立一個(gè)action命名為singleTap()
這時(shí)右邊欄的鏈接面板是這個(gè)樣子的：
在singleTap方法下添加如下代碼：
@IBAction func singleTap(_ sender: UITapGestureRecognizer) {
if helloWorldLabel.alpha == 0{
UIView.animate(withDuration: 1, animations: {
//alpha用于控制控件透明度加矛，最小值0為完全透明煤篙，最大值1為完全不透明
self.helloWorldLabel.alpha = 1
})
} else{
UIView.animate(withDuration: 1, animations: {
self.helloWordLabel.alpha = 0
})
}
}
到此我們已經(jīng)做好了第一個(gè)可以和用戶進(jìn)行交互的App了舰蟆，點(diǎn)擊運(yùn)行按鈕，選擇一個(gè)模擬器設(shè)備（我選的是iPhone7）你就可以看到開頭的運(yùn)行效果了身害，Cool！
