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