使用 UITableView 創建表格應用演練(1)——一個簡單的表格應用


在很多iOS應用中都有UITableView控件的身影。讓我們的系列教程也從UITableView開始吧。

目標

任何一個偉大的iOS應用都源自一個偉大的構想。雖然我們只是再做演練,但演練也同樣需要一個偉大的構想!這樣我們會產生更加濃烈的興趣,目標更加明確,同時不會糾結於具體的細節之中。

提示:細節是在不斷重復中逐漸掌握的,過早的進入細節很容易讓人迷失方向。

現在用微博的人越來越多,假設我們需要一個管理“微博關注人”的列表這么一個應用,能夠幫助我維護微博關注人的信息。怎么樣?對於一個iOS初學者,這么一個假設應該已經足夠大了吧。:]

那么我們就開始動手吧。 

一. 創建應用

創建應用的方法,可以參見前兩天寫的:第一個iOS應用——Hello world!,在此不再累述,創建應用時用“My Focus”做為產品名稱。如下圖所示:

二. 增加表格控件

1. 打開“MainStoryboard.storyboard”文件;

2. 因為要做一個表格應用,而默認的Storyboard是一個視圖應用,先點擊“View Controller”,把它刪除,如下圖所示:

刪除之后,我們會發現一片空白,如下圖所示:

3. 添加表格視圖控件——從右側的“工具區域”找到Table View Controller控件,拖到StoryBoard的空白區域放手;

4. 點擊“Table View Controller”左側的折疊標記依次展開選中“Table View Cell”,然后在屬性區的“Identifier”輸入:“userInfoCell”,如下圖所示:

OK,我們運行一下,看看剛才比划了這幾下實現了哪些效果:

一個空的表格躍然屏幕之上,而且試着用手拽拽,表格都會隨着手勢上下滾動了。到目前為止,我們還沒有寫一句代碼,不錯吧。:]

三. 編碼前的准備

在寫程序之前,我們需要做一些簡單的准備工作。

要寫代碼,需要有寫的“位置”,在iOS開發中,大多情況能夠“寫”的位置有兩個。

1. “.h”文件——頭文件,用於聲明對象的屬性,方法等;

2. “.m”文件——對象實現文件,用於對象的具體實現。

好,我們先記住這兩個,其他用不到的,我們不妨先假設我們已經會了,這樣我們會有一個強大的內心,專注去做現在要做的事情。:]

讓我們簡單回想一下第二部分中,我們做的事情:打開“MainStoryboard”->刪除了默認的“View Controller”->增加一個“Table View Controller”,因為我們要做的是一個表格應用。

既然要做的是一個表格應用,那么我們需要一個表格的實現對象,先看下導航區域的內容,如下圖:

可以看到兩個文件,從名字上看,一個是View Controller的頭文件,一個是View Controller的實現文件,這兩個文件顯然也不是我們需要的,刪除掉!

接下來按照以下步驟操作:

1. 在GUI上點鼠標右鍵,在彈出菜單中選擇“New File...”,在彈出窗口中選擇“Cocoa Touch”“Objective-C class”,點擊“Next”按鈕,見下圖:

2. 在下一個的窗口中,在“Class”中輸入“JOYTableViewController”,“Subclass of”中通過下拉列表選擇或者輸入“UITableViewController”,同時不要選擇下面兩個復選框,然后點擊“Next”,見下圖:

3. 在下一個窗口,直接點擊“Create”按鈕創建對象。現在的導航區域應該如下圖顯示:

通過以上三步操作,Xcode幫助我們准備好了頭文件和實現文件。

在寫代碼之前,還需要做一件非常重要的事情——告訴Storyboard,它的要用按照新增加對象中的代碼執行動作。

1. 打開“MainStoryboard.storyboard”;

2. 點擊選中“Table View Controller”;

3. 點擊工具區域的“Show the Identity Inspector”按鈕,顯示“標示檢查器”;

4. 在“Class”中,點擊下拉按鈕,選擇我們剛剛創建的類“JOYTableViewController”。

見下圖:

好,通過簡單的幾步准備,接下來我們要進入具體的實做階段,激動嗎?:]

四. 通過代碼填充表格

點擊“導航區域”的“JOYTableViewController.m”打開它。

說明:本次演練中,所有的編碼都只在這一個文件中。

小技巧:此時你按一下option + command + 0這個組合鍵,可以關閉“工具區域”這樣可以使“編輯區域”看起來更大些。

代碼開始部分有一個 @interface JOYTableViewController,我們可以把對象的私有屬性和方法在此定義,而不必在 .h 文件中進行定義,這個特性可以保證你開放的接口更加的清晰簡潔。

1. 定義一個數組,用於存放顯示關注人信息,代碼如下:

1 @interface JOYTableViewController () {
2 @private
3     NSArray *_userList;
4 }
5 
6 @end

提示:不要忘記大括號啊。

2. 填充數組內容,找到viewDidLoad方法,在方法的末尾添加一句:

1 _userList = [[NSArray alloc]initWithObjects:@"愛Apps", @"蘋果匯", @"數碼iPhone大百科",
2                  @"新浪視野", @"李開復", nil];

假設我只關注了這五個人。

3. 修改表格區段數,找到numberOfSectionsInTableView方法,將其中的“return 0”,改為“return 1”,如下所示:

1 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
2 {
3     return 1;
4 }

有關區段的內容,會在下一篇文章中闡述,現在我們假設表格只有一個區段。

4. 修改表格行數,找到

1 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section

方法,將其中的return 0,改為:

1 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
2 {
3     return [_userList count];
4 }

說明:這句話的意思是“返回 [用戶列表 數量]”,Objective-C的語法有點像自然語言,大家先記住以往我們熟悉的“.”被現在的“空格”和“中括號”替代了。

預告:計划在TableView的演練專題結束后,寫一篇介紹Objective-C的基礎語法,盡請期待。:]

5. 在單元格中依次顯示數組內容,找到 

1 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

方法,在最后的“return cell”語句前添加如下代碼:

1     // 實例化單元格對象
2     if (cell == nil) {
3         cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
4     }
5     
6     // 設置單元格文本
7     [cell.textLabel setText:[_userList objectAtIndex:[indexPath row]]];

6. 運行看看效果,見下圖:]

五. 小結

本次演練我們先暫時告一段落,到目前為止,我們已經創建了一個最簡單的表格應用。雖然看起來還很粗糙,但是我們已經邁出了堅實的一步。:]

本演練源程序下載地址:JoyiOSMyFocus1.zip

下一篇文章我們會演練如何通過數據文件加載表格內容,同時在表格中顯示圖片等內容。敬請期待。:]


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM