IOS 8編程入門--使用swift語言 專題目錄：
第二章：使用Storyboard設(shè)計(jì)用戶界面（一）
第二章：使用Storyboard設(shè)計(jì)用戶界面（二）
第五章 寫代碼之前先進(jìn)行原型設(shè)計(jì)
第六章 創(chuàng)建一個(gè)基于Table的簡(jiǎn)單App（一）
第六章 創(chuàng)建一個(gè)基于Table的簡(jiǎn)單App（二）
...............
顯示不同的縮略圖
上一章的練習(xí)你完成了嗎？我希望你已經(jīng)完成了。為不同的餐館顯示不同的縮略圖有很多方法。我將會(huì)你演示最直接的方法。首先下載另一個(gè)圖片壓縮包http://pan.baidu.com/s/1b648Ya .然后將全部圖片拖到images.xcassets.壓縮包里有一些示例美食圖片和餐館圖片。當(dāng)然，如果你愿意，你可以自由使用你自己的圖片。?
再我們修改代碼之前，我們重新看一下用于在表格行里顯示縮略圖的那行代碼。
這行在tableView(_:cellForRowAtIndexPath:)中的代碼通知UITableView在每一行顯示restautant.jpg圖片。很明顯，要顯示不同的圖片，我們需要其他的代碼。正如前面解釋的，每次表格行顯示時(shí)iOS都調(diào)用該方法。
如果你明白餐館名是如何顯示的，你肯定知道indexPath參數(shù)包含表格行數(shù)（還有節(jié)數(shù)）。你直接調(diào)用indexPath.row就能獲得當(dāng)前的行號(hào)。
因此，為了顯示不同的縮略圖，我們需要添加一個(gè)新的數(shù)組（我們可以將這個(gè)數(shù)組命名為restaurantImages）來存儲(chǔ)縮略圖文件名。
你可以從上面的代碼中看出，我們用一系列圖片文件名來初始化restaurantImages數(shù)組。圖片文件名和restaurantNames順序匹配。
最后，修改tableView(_:cellForRowAtIndexPath:)方法中的代碼：
cell.imageView.image=UIImage(named:restaurantImages[indexPath.row]
保存所有的修改，再次嘗試運(yùn)行你的App。現(xiàn)在每個(gè)餐館將會(huì)顯示不同的圖片。
定制表格單元格
現(xiàn)在App是不是看起來更好了？我們接下來通過定制表格單元格讓App變的更好。到現(xiàn)在為止我們使用的都是表格單元格默認(rèn)的樣式。縮略圖的位置和大小都是固定的。但是如果你想：
修改單元格的高度
讓縮略圖變得更大一些
顯示餐館更多的信息例如位置和類型
修改字體類型和大小
使用圓形圖片替代方形圖片
為了讓你更好的理解如何定制單元格，參考下圖.這個(gè)單元格是不是看起來很漂亮？
在Storyborad中設(shè)計(jì)Prototype Cells
Prototype cells的優(yōu)點(diǎn)是允許開發(fā)者直接在table view controller中定制。為了創(chuàng)建一個(gè)可定制的單元格，你只要在Prototype cell上直接添加其他的UI控件（例如：UILabel，UIImage View）。
首先我們修改單元格的風(fēng)格。當(dāng)單元格風(fēng)格設(shè)置為Basic時(shí)你是午飯定制單元格的。選中單元格然后在屬性檢查器中將單元格風(fēng)格從Basic修改為Custom。
為了容納更大的縮略圖，我們修改單元格的高度。你需要同時(shí)修改表格和prototype cell的高度。選中表格然后將高度修改為80。
然后選中prototype單元格然后點(diǎn)擊“Size”查看器。選中定制復(fù)選框然后修改行高為80。
調(diào)整完行高之后，從對(duì)象庫(kù)中拖拽一個(gè)Image View到prototype cell。你可以自由定制圖片適應(yīng)你的需求。圖6-12展示了我的推薦尺寸。你可以選中Image View，點(diǎn)擊“Size”檢查器然后修改“X”，“Y”，“Width”和“Height”屬性。
接下來我們添加三個(gè)標(biāo)簽：
Name－餐館名
Location－餐館地址（如New York）
Type－餐館類型（如茶館）
為了添加標(biāo)簽，從對(duì)象庫(kù)中拖拽Label對(duì)象到單元格中。將第一個(gè)標(biāo)簽命名為“Name”。在尺寸查看器中，設(shè)置“X”為86，“Y”設(shè)置為9，“With”設(shè)置為205，“Height”設(shè)置為21。
我們不使用系統(tǒng)為標(biāo)簽設(shè)置的默認(rèn)字體，我們使用新的字體。在屬性查看器中，在字體欄選擇“Custom”，設(shè)置字體“Avenir Next”（或者任何你喜歡的字體）并且設(shè)置字號(hào)為16。
把另一個(gè)標(biāo)簽拖到單元格上并且命名為“Location”。在尺寸查看器中，設(shè)置“X”為86，“Y”為35，“Width”為205，“Height”為18。修改字體為“Avenir Next”并且設(shè)置字體大小為13。
最后，創(chuàng)建另一個(gè)標(biāo)簽并且命名為“Type”。在尺寸查看器中，設(shè)置“X”為86，“Y”為54，“Width”為205，“Height”為21。修改字體為“Avenir Next”并且設(shè)置字體大小為11。
為定制的單元格創(chuàng)建一個(gè)類
到現(xiàn)在為止，我們已經(jīng)設(shè)計(jì)好了單元格。但是我們?nèi)绾涡薷膒rototype cell中的標(biāo)簽值呢？這些值是動(dòng)態(tài)的。我們接下來創(chuàng)建一個(gè)新類與單元格關(guān)聯(lián)。這個(gè)類代表定制的單元格的數(shù)據(jù)模型。和前面一樣，在工程導(dǎo)航窗口右擊“FoodPin”文件夾，選擇“New File”。之后Xcode提示你選擇一個(gè)模板。由于我們想要?jiǎng)?chuàng)建一個(gè)用于定制表格單元格的類，所以我們選擇“Cocoa Touch Cals說”并且點(diǎn)擊“Next”。填“CustomTableViewCell”作為類名并且在“Subclass of”選項(xiàng)中填寫“UITableView Cell”。
點(diǎn)擊“Next”文件在FoodPin工程文件夾中存儲(chǔ)。在工程導(dǎo)航窗口中可以看到Xcode創(chuàng)建的名為CustomTableViewCell.swift的文件。
接下來，在CustomTableViewCell中聲明下面的變量：
CustomTableViewCell類作為定制單元格的數(shù)據(jù)模型。在單元格里，我們有4個(gè)可以修改的屬性：縮略圖image view， 名字標(biāo)簽，位置標(biāo)簽和類型標(biāo)簽。數(shù)據(jù)標(biāo)簽存儲(chǔ)和提供用于顯示的值。
這所有的變量都會(huì)和Interface Builder中的對(duì)應(yīng)的用戶界面對(duì)象關(guān)聯(lián)。通過將這些代碼和UI對(duì)象相互關(guān)聯(lián)起來，我們能夠動(dòng)態(tài)的修改UI對(duì)象的值。回想一下我們使用@IBAction說明動(dòng)作方法，使用@IBOutlet關(guān)鍵字說明是一個(gè)輸出屬性。
在我們?yōu)镮nterface Builder中的prototype cell和customTableViewCell類之間建立聯(lián)系之前。我們首先要設(shè)置custom class。
默認(rèn)情況下，prototype cell和UITableView Cell類關(guān)聯(lián)。為了為prototype cell設(shè)置custom類，在storyboard中選擇cell，在標(biāo)識(shí)查看器中設(shè)置custom類為CustomTableViewCell。
建立關(guān)聯(lián)
接下來我們建立prototype cell中的UI objects與源代碼之間的聯(lián)系。首先轉(zhuǎn)到storyboard。
右擊Interface Builder里DocumentOutline中的cell，調(diào)出Outlets查看器。點(diǎn)擊thumbnaillmageView右側(cè)的圓圈并且按住左鍵拖拽到prototype cell中的UIImage View對(duì)象中。當(dāng)你釋放按鈕后，Xcode自動(dòng)建立關(guān)聯(lián)。
為下面的輸出屬性（outlets）重復(fù)上面的過程：
locationLabel-和單元格中的Location label關(guān)聯(lián)
nameLabel-和單元格中的Name label關(guān)聯(lián)
typeLabel-和單元格中的Type label關(guān)聯(lián)
在你建立完所有的關(guān)聯(lián)之后，UI界面 如圖所示
在Table View Controller中編碼
我們已經(jīng)完成了為定制單元格設(shè)計(jì)和編碼的工作。最后我們到最后一個(gè)修改的地方。在RestaurantTableViewController中，我們?nèi)匀皇褂肬ITableViewCell(例如stock cell）來顯示內(nèi)容。我們需要修改一行代碼以便使用定制單元格。如果查看tableView(_:cellForRowAtIndexPath:)方法你可以看到已經(jīng)存在的實(shí)現(xiàn)代碼。代碼的第二行是：:
我們已經(jīng)解釋過了dequeueReusableCellWithIdentifier方法的含義。但是”as UITableViewCell”是什么意思呢？dequeueReusableCellWithIdentifier方法非常靈活，它可以從隊(duì)列中返回各種類型的單元格。實(shí)際上它返回的是一種通用單元格。將通用單元格轉(zhuǎn)換為實(shí)際類型的單元格是我們的責(zé)任。Swift使用“as”關(guān)鍵字完成類型轉(zhuǎn)換。在前面我們處理的是默認(rèn)的表格單元格（table view cell），所以我們需要轉(zhuǎn)換單元格為CustomTableViewcell。所以將上面的代碼改為
好的，我知道你已經(jīng)迫不及待想測(cè)試App了（你可以試一試，呵呵）但是我們還需要修改一些代碼。下面這些代碼設(shè)置餐館名和圖片的值:
textLabel和image View是UITableView Cell默認(rèn)的屬性。因?yàn)槲覀儸F(xiàn)在使用CustomTableViewCell所以我們需要使用custom class（定制類）。將上面的代碼修改為：
現(xiàn)在準(zhǔn)備工作已經(jīng)做完了。點(diǎn)擊Run按鈕然后測(cè)試App。你的App應(yīng)該如圖所示。旋轉(zhuǎn)仿真器。App將會(huì)以橫屏顯示。
相對(duì)默認(rèn)的表格，現(xiàn)在有了巨大的提升。我們?cè)俑倪M(jìn)一些，我們接下來把縮略圖修改為圓形。
圓角圖片
從iOS 7發(fā)布開始，iOS采用圓角圖片替代方型圖片。你可以在系統(tǒng)自帶的App例如聯(lián)系人和電話中找到圓角圖片。如果所有的餐館圖片都是圓角的是不是很不錯(cuò)？你不需要用Photoshop來修改圖片。你只需要兩行代碼。
你可能從來沒有聽過CALayer類，也可能你已經(jīng)在某些時(shí)候使用過它。在CALayer類的實(shí)例支持UIKit中的每一個(gè)View類（如UI View，UIImage View）。Layer對(duì)象設(shè)計(jì)用來管理view背后的存儲(chǔ)并且處理view相關(guān)的彈出動(dòng)畫。
layer對(duì)象提供各種各樣的屬性，這些屬性用于設(shè)置view內(nèi)容的可見性，例如：
背景顏色
外邊框以及外邊框?qū)挾?/p>
陰影顏色，寬度等等
不透明度
圓角半徑
圓角半徑就是我們將要用來繪制圓邊和圓角圖片的屬性。理解一個(gè)東西工作原理最好的方法就是直接使用它。在tableView(_:cellForRowAtIndexPath:)方法的“return cell”之前插入下面的代碼：
向我在前面說的，每一個(gè)view對(duì)象都有一個(gè)layer屬性，UIImage view也不例外。代碼的第一行設(shè)置layer對(duì)象的cornerRadius屬性。為了將方型圖片設(shè)置為圓形圖片，UIImage View的半徑需要設(shè)置為寬度的一半。例如，如果方型圖片寬度是100像素。那么半徑需要設(shè)置為50像素。你可以通過UIIamgeView的frame屬性設(shè)置它的大小。最后我們將clipsToBounds屬性設(shè)置為YES，將layer設(shè)置為啟用。
現(xiàn)在編譯并且運(yùn)行App。所有的縮略圖都變成了圓形。很簡(jiǎn)單，不是嗎？只用了兩行代碼，圖片就從方型圖片變成了圓形圖片。完全不需要Photoshop。
你可以自由更改圓角半徑的值。按下面的代碼修改它的值看看有什么變化。
你的練習(xí)
你可能奇怪為什么APP中所有的行都只簡(jiǎn)單顯示“Location”和“Type”。因?yàn)槲蚁Ｍ@作為一個(gè)練習(xí)，把這個(gè)問題留給你解決。試著修改你的代碼并且更新兩個(gè)標(biāo)簽。這里提示一下，你需要兩個(gè)數(shù)組
你也可以試著從新設(shè)計(jì)單元格并且看看能不能創(chuàng)建一個(gè)像下圖一樣的App
小結(jié)
恭喜！你已經(jīng)有了巨大的進(jìn)步。如果你懂得定制單元格的輸入輸出，你已經(jīng)能夠做一些令人驚訝的UI。Table view是很多優(yōu)秀的App的核心。除了游戲開發(fā)，你做App很可能會(huì)采用一種或其他的方法實(shí)現(xiàn)Table view。希望你花一些時(shí)間完成練習(xí)并且稍微修改一下代碼。“把手弄臟”是學(xué)習(xí)編碼最好的方法。
你可以下載Xcode項(xiàng)目http://pan.baidu.com/s/1nu95UXj，用于參考。
在下一章，我們將會(huì)學(xué)習(xí)如何處理單元格選取動(dòng)作。那會(huì)很有趣。-
