2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

? ? 最近一段時(shí)間都在準(zhǔn)備IOS的開發(fā)，學(xué)習(xí)swift語言，之前做過很多類型的開發(fā)：前端、Java Web、.net、Android等，IOS是第一次接觸，很不適應(yīng)，學(xué)習(xí)的進(jìn)度也比較慢，不過在看過一些視頻、幾本pdf之后，總算有了一點(diǎn)心得。從今天起，開始做一些整理，一方面加深自己的認(rèn)知，另一方面也可以方便他人，共同討論和進(jìn)步，本文通過一個(gè)實(shí)例，整理一下UITableView表格視圖的靜態(tài)使用。

? ? 本文使用的環(huán)境是Xcode7，Swift2.2，將要?jiǎng)?chuàng)建的表格視圖是靜態(tài)的，不涉及動(dòng)態(tài)數(shù)據(jù)的處理，有這方面需求的朋友請(qǐng)繞道，以免耽誤您的寶貴時(shí)間。首先，看一下最終的效果圖。

? ? ios已經(jīng)入門的童鞋都知道，蘋果提供了UITableView類來創(chuàng)建表格視圖，表格視圖應(yīng)用于很多地方，app里列表的展示、設(shè)置等等，一個(gè)表格視圖可以包含一個(gè)或多個(gè)不同的部分，上面的效果圖中就是兩個(gè)部分Section（紅框），每一個(gè)部分里面可以包含一個(gè)或多個(gè)單元格，也就是行。

? ? 在蘋果提供的控件庫(kù)里，每一個(gè)行就是一個(gè)UITableViewCell，用于創(chuàng)建表格中的單元格，在單元格中我們可以展示需要的數(shù)據(jù)，每個(gè)單元格只能屬于一個(gè)部分。

? ? 接下來，我們通過一個(gè)例子，來深入的學(xué)習(xí)一下UITableView表格視圖的使用，首先我們需要?jiǎng)?chuàng)建一個(gè)Single View Application，命名為UITableViewDemo，關(guān)于項(xiàng)目如何創(chuàng)建不屬于本文的學(xué)習(xí)內(nèi)容，這里不再贅述，有需求的朋友請(qǐng)自行g(shù)oogle。

? ? 我們將通過故事板的方式進(jìn)行頁面的設(shè)計(jì)，第一步，我們打開Main.storyboard文件，先在File inspector里面（右側(cè)欄第一個(gè)）禁用掉SizeClasses特性。SizeClasses是蘋果從Xcode6之后引入的新特性，用來解決多設(shè)備的適配問題，本文只是簡(jiǎn)單的一個(gè)學(xué)習(xí)Demo，重心不再多設(shè)備適配，所以不需要這個(gè)特性。

? ? 然后刪除默認(rèn)的viewController，從控件庫(kù)里面拖動(dòng)一個(gè)TableViewController，選中并在Attribute inspector（右側(cè)欄第四個(gè)）里面設(shè)置為初始的view controller。

? ? 然后，我們選中TableView，選中Attributes inspector（右側(cè)欄第四個(gè)），將content修改為靜態(tài)單元格StaticCells，并設(shè)置為兩部分，如圖所示：

? ? 我們的例子中，每個(gè)section里面的單元格數(shù)量也不一致，每一部分也不需要顯示頭部和尾部，我們依次選中section，進(jìn)行統(tǒng)一的修改，將header和footer都設(shè)置為空，第一部分設(shè)置rows為2，第二部分設(shè)置為3，通過下圖所示修改：

? ? 修改之后，運(yùn)行一下你會(huì)發(fā)現(xiàn)，我們的TableView看著像是一個(gè)5行的單元格，其實(shí)它是由兩個(gè)部分構(gòu)成，下面，我們需要對(duì)此TableView指定相應(yīng)的class，我們新建一個(gè)Cocoa Touch Class，命名為MoreTableViewController，并繼承UITableViewController，我們選中storyboard里面的TableViewController，選中右側(cè)第三欄，Identity inspector，設(shè)置class為新建的MoreTableViewController。

? ? 接下來，我們修改單元格的樣式，首先我們需要在Assets里面，import幾張?zhí)崆皽?zhǔn)備好的圖片，這里就不再贅述了，接下來我們依次選中對(duì)應(yīng)的單元格，修改如圖所示的幾個(gè)地方，依次是Style，Image和Accessory（右側(cè)樣式），蘋果提供了默認(rèn)的集中樣式供開發(fā)者使用，讀者也可以自行切換看下效果，修改后的效果如下：

? ? 如果這時(shí)候，我們將代碼編譯，選擇iphone4s模擬器運(yùn)行的話，我們會(huì)發(fā)現(xiàn)都是空白，并沒有我們storyboard里面看到的效果，這是因?yàn)槲覀儧]有對(duì)UITableView里面的方法進(jìn)行實(shí)現(xiàn)，打開我們之前新建的MoreTableViewController.swift文件，我們發(fā)現(xiàn)里面包含有兩個(gè)tableView的方法，分別是：numberOfSectionsInTableView和numberOfRowsInSection，分別表示表格包含幾個(gè)部分，以及每個(gè)部分中單元格的個(gè)數(shù)，根據(jù)我們的需要，我們做如下的實(shí)現(xiàn)，代碼就不解釋了：

? ?這時(shí)候，我們?cè)龠\(yùn)行項(xiàng)目，會(huì)發(fā)現(xiàn)表格已經(jīng)展示出來了，不過跟我們的效果圖，還有一些差距，首先是沒有最上面的導(dǎo)航，以及背景顏色，單元格下劃線、兩個(gè)部分之間的高度等。

? ? 接下來，我們依次解決，首先我們添加一個(gè)上方的導(dǎo)航，打開storyboard，選中tableViewController，通過Xcode工具欄Editor-Enbed in-Navigation Controller加入導(dǎo)航，并簡(jiǎn)單修改導(dǎo)航的標(biāo)題為“更多”，如圖所示：

? ? 接下來，我們修改單元格的下劃線，并設(shè)置表格的背景顏色，以及調(diào)整每個(gè)section的高度，以達(dá)到效果圖的效果，我們選中TableView，以及右側(cè)第四欄Attributes inspector，設(shè)置其中的Separator為SingleLineEtched(帶浮雕效果的線條)，這里也可以修改為None（沒有分割線），看你自己的心情了，然后修改background的顏色為灰色，如圖所示：

? ? 最后，我們需要調(diào)整兩個(gè)section的高度，這就需要我們重寫tableView里面的兩個(gè)方法，打開MoreTableViewController.swift，重寫下面的兩個(gè)方法：heightForHeaderInSection和heightForFooterInSection，分別表示section的頭部和尾部高度，別問我怎么知道的，多看看Api試試就知道了，另外這里需要簡(jiǎn)單的計(jì)算一下，設(shè)置合適的高度，如下所示：

? ? 運(yùn)行一下，你會(huì)發(fā)現(xiàn)section已經(jīng)有了正確的高度，不過還有個(gè)小瑕疵，多余的單元格，仍然顯示在了頁面上，如下：

? ? 要解決這個(gè)問題很簡(jiǎn)單，我們只要在view加載的時(shí)候，對(duì)tableview做一點(diǎn)小小的設(shè)置就可以了，一句代碼搞定，如下所示：

? ? 至此，通過tableview創(chuàng)建靜態(tài)表格已經(jīng)整理完畢，希望大家批評(píng)指正，多多交流，互相進(jìn)步！

轉(zhuǎn)載于:https://my.oschina.net/realfighter/blog/700079

總結(jié)

以上是生活随笔為你收集整理的IOS开发笔记（Swift）：UITableView表格视图的静态使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。