從零開始學ios開發（十二）：Table Views（上）

時間  2019-11-19
標籤 開始 ios 開發 十二 table views 欄目 iOS 简体版
原文   原文鏈接

 

此次學習的控件很是重要且很是強大，是ios應用中使用率很是高的一個控件，能夠說幾乎每一個app都會使用到它，它就是功能異常強大的Table Views。能夠打開你的iphone中的phone、Messages、Contacts、Mail、Settings等等等等，這些都用到了Table Views。ios

在Table Views中，Table是用來顯示一系列數據的，每條數據佔用且只佔用一行（一個table cell），在ios中沒有規定table到底能夠容納多少行數據，也就是說，只要內存足夠多，table能夠容納任意多行的數據。app

上面的2段文字，一共提到了三個概念：Table，Table View Cell，Table View，它們之間的關係以下，Table用來保存數據，Table View用來顯示當前可見的Table中的數據（也就是iphone屏幕中顯示的那些數據），Table View Cell就是當前可見的Table View中的那一行，這樣說可能還不是最清楚，那麼看下面的圖，你就能夠有一個比較直觀的認識了。 iphone

ios的設計是很注重資源的節省的，這樣作的好處就是可以是程序運行的儘量的快，給用戶更好的體驗，所以一些不須要的東西，ios是堅定不會顯示或者生成的，在Table Views中，只有當前瀏覽到的數據，會生成table view cell，而後顯示，沒有瀏覽到的數據，不會生成多餘的cell，並且當一個cell移除屏幕後，這個cell會給進入屏幕的數據繼續使用，所以，生成的cell的數量會是固定的，不會多不會少，正好夠在table view中顯示。post

和前一篇Pickers同樣，Table Views也使用delegate：UITableViewDelegate，UITableViewDataSource。學習

另外，Table Views只有一列，每行只有一個cell，每一個cell能夠包含一張圖片，一些文字，一個icon，任意多個subview（以後都會有例子，看了就明白了）。字體

好了，說了一些概念性的東西，仍是有點小小的枯燥，下面開始coding。this

1）建立一個新的項目，此次選擇Single View Application模板，命名爲Simple Table atom

2）添加Table View控件 在Project navigator中選中BIDViewController.xib，在Object Library中找到上面的Table View控件，拖到view上面，Table View將佔滿整個view（通常來所，Table View會佔滿整個view，固然必要時會空出navigator bar，tool bar，tab bar） spa

選中view中的table view，打開Connections Inspector，會看到很熟悉的dataSource和delegate，這個在學習Picker View的時候已經見到過，這裏的做用和在Picker View中是同樣的。將它們關聯到File's Owner 設計

3）寫code 打開BIDViewController.h，添加以下代碼

複製代碼 
#import <UIKit/UIKit.h>

@interface BIDViewController : UIViewController <UITableViewDelegate,UITableViewDataSource> @property (strong, nonatomic) NSArray *listData; @end
複製代碼

有沒有很熟悉的感受，Table View的協議（protocols）和Picker View的是同樣的，而後聲明一個NSArray來存放數據。

打開BIDViewController.m，添加以下代碼

複製代碼 
#import "BIDViewController.h"

@implementation BIDViewController
@synthesize listData; - (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Release any cached data, images, etc that aren't in use.
}

#pragma mark - View lifecycle

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    NSArray *array = [[NSArray alloc] initWithObjects:@"Sleepy", @"Sneezy", @"Bashful", @"Happy", @"Doc", @"Grumpy", @"Dopey", @"Thorin", @"Dorin", @"Nori", @"Ori", @"Balin", @"Dwalin", @"Fili", @"Kili", @"Oin", @"Gloin", @"Bifur", @"Bofur", @"Bombur", nil]; self.listData = array;
}

- (void)viewDidUnload
{
    [super viewDidUnload];
    // Release any retained subviews of the main view.
    // e.g. self.myOutlet = nil;
    self.listData = nil;
}

#pragma mark -
#pragma mark Table View Data Source Methods
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{ return [self.listData count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier"; UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier]; if(cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:SimpleTableIdentifier]; } NSUInteger row = [indexPath row]; cell.textLabel.text = [listData objectAtIndex:row]; return cell; }
......
複製代碼

這裏面須要解釋的就是2個dataSource方法，其餘的方法都簡單，在這裏就不過多解釋了： tableView:numberOfRowsInSection：用來告訴table view在Section中有多少個數據（listData中的數據個數），這裏有一個Section的概念，暫且先不用理會，咱們這個例子中只有1個Section，所以直接返回listData中的數據個數便可（Section的概念下一篇會介紹） tableView:cellForRowAtIndexPath：當table view須要建立一個cell時，會調用該方法。這個方法稍微有點複雜，但也不是很難理解，首先聲明瞭一個靜態的字符串SimpleTableIdentifier，這個字符串做爲一個key用來標識UITableViewCell的類型，凡是cell擁有這個key，就能夠認爲他們是同一種類型的cell，相互之間能夠任意使用。前面已經說過，一個Table View在同一時間只會建立必定數量的Table View Cell（夠用就好），所以當一個cell移出屏幕後，這個cell會被放入一個隊列，等待其餘即將顯示的數據使用。接下來的一句語句 UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier]; 就是經過剛纔的key來尋找可重複使用的Table View Cell。 若是沒有可重複使用的cell（cell == nil），那麼就須要建立一個新的cell cell = [[UITableViewCell alloc] 　　initWithStyle:UITableViewCellStyleDefault //設定cell顯示的樣式 　　reuseIdentifier:SimpleTableIdentifier]; //設置標示符SimpleTableIdentifier（設置key），這樣之後這個cell才能夠被制定的key找到並重復使用。 cell建立完成後，須要設置顯示的文字 NSUInteger row = [indexPath row]; //經過indexPath找到如今顯示第幾行的數據 cell.textLabel.text = [listData objectAtIndex:row]; //獲得行號後再去listData中找到相應的數據，並複製給cell的屬性textLabel。 這些都設置好後，返回cell便可

4）編譯運行 但願上面的解釋你們都可以看懂，而後command+B，command+R編譯運行程序，效果以下

5）添加圖片 能夠爲每一個cell添加一張圖片，並顯示在cell的左邊，首先下載下面的圖片：Star.png 而後將圖片拖到Project navigator中，放在Simple Table文件夾下 打開BIDViewController.m，在剛纔添加的tableView:cellForRowAtIndexPath方法中添加以下代碼

複製代碼 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"]; cell.imageView.image = image;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    
    return cell;
}
複製代碼

好了，在此編譯code並運行，效果以下 很簡單吧，若是當咱們選中table view中的一行，想換一張圖片，表示選中的狀態，進行以下操做 添加一張選中狀態的圖片到Simple Table文件夾下：Star2.png 打開BIDViewController.m，在tableView:cellForRowAtIndexPath方法中添加以下代碼

複製代碼 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"];
    cell.imageView.image = image;
    
    UIImage *image2 = [UIImage imageNamed:@"star2.png"]; cell.imageView.highlightedImage = image2;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    
    return cell;
}
複製代碼

編譯運行，效果以下 當咱們選中一行row的時候，圖片發生了變化，UITableViewCell的屬性imageView.image用來設置通常狀態下的圖片，imageView.highlightedImage用來設置選中狀態下的圖片，若是不設置，將繼續使用通常狀態下的圖片。

6）UITableViewCell的Style 在介紹style以前，先看看UITableViewCell自帶的3個屬性，其中2個咱們在以前的例子中已經使用到，分別是TextLabel和imageView，第三個屬性是detailTextLabel，看下面的例子，就知道這個detailTextLabel是什麼東東了，仍是打開BIDViewController.m，在tableView:cellForRowAtIndexPath方法中添加以下代碼

複製代碼 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"];
    cell.imageView.image = image;
    
    UIImage *image2 = [UIImage imageNamed:@"star2.png"];
    cell.imageView.highlightedImage = image2;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    
    if (row < 7) cell.detailTextLabel.text = @"Mr. Disney"; else cell.detailTextLabel.text = @"Mr. Tolkien"; return cell;
}
複製代碼

編譯運行 有沒有發現什麼變化也沒有？這是由於是用來UITableViewCellStyleDefault樣式形成的，UITableViewCell一共有4種樣式，在tableView:cellForRowAtIndexPath方法中，建立cell的時候設置initWithStyle，就是cell的樣式。

cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];

如今換一種樣式看看，將上面代碼中的UITableViewCellStyleDefault改爲UITableViewCellStyleSubtitle，在編譯運行看一下效果 此次效果對了，全部的3個屬性都顯示出來了。

總結一下全部4個UITableViewCell的樣式 UITableViewCellStyleDefault

UITableViewCellStyleSubtitle

UITableViewCellStyleValue1

UITableViewCellStyleValue2

最後別忘了仍是將樣式設置回UITableViewCellStyleDefault，以後的例子仍是以這個樣式爲例子的

7）UITableViewCell的縮進 打開BIDViewController.m，添加以下代碼

#pragma mark -
#pragma mark Table Delegate Methods
- (NSInteger)tableView:(UITableView *)tableView indentationLevelForRowAtIndexPath:(NSIndexPath *)indexPath { NSUInteger row = [indexPath row]; return row; }

tableview:indentationLevelForRowAtIndexPath這個方法用於設置縮進的級別，使用indexPath取得當前row是在第幾行，而後根據第幾行來設置縮進的大小。注意，這個方法是table view的delegate方法，以前用到的方法都是dataSource方法。

編譯運行

8）UITableViewCell的選擇事件 UITableViewCell的選擇事件有2種，一種在選中一行以前發生的事件，叫作tableView:willSelectRowAtIndexPath，另外一個方法就是選中一行後發生的事件，叫作tableView:didSelectRowAtIndexPath，他們都是table view的delegate方法，在BIDViewController.m中添加以下code

複製代碼 
- (NSIndexPath *)tableView:(UITableView *)tableView willSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSUInteger row = [indexPath row];
    
    if (row == 0) {
        return nil;
    }
    
    return indexPath;
}

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {
    NSUInteger row = [indexPath row];
    NSString *rowValue = [listData objectAtIndex:row];
    
    NSString *message = [[NSString alloc] initWithFormat:@"You selected %@", rowValue];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Row Selected!"
                                                    message:message
                                                   delegate:nil
                                          cancelButtonTitle:@"Yes I Did"
                                          otherButtonTitles:nil];
    [alert show];
}
複製代碼

在tableView:willSelectRowAtIndexPath中，根據indexPath來得到即將選中的是哪一行，而後判斷若是即將選中的row是第一行，則返回nil，使其沒法選中，若是不是，則返回indexPath。

在tableView:didSelectRowAtIndexPath中，根據indexPath來得到選中的是哪一行，而後讀取這一行的數據（實際上是根據行號到NSArray中找到相應的數據），而後顯示出來。

編譯運行，試着選擇第一行，是不會有反應的，而後選擇其餘行，一個警告框會彈出

9）更改UITableViewCell的字體大小和行的高度 仍是在tableView:cellForRowAtIndexPath中，添加以下代碼

複製代碼 
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *SimpleTableIdentifier = @"SimlpeTableIdentifier";
    
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:SimpleTableIdentifier];
    if(cell == nil) {
        cell = [[UITableViewCell alloc]
                initWithStyle:UITableViewCellStyleDefault
                reuseIdentifier:SimpleTableIdentifier];
    }
    
    UIImage *image = [UIImage imageNamed:@"star.png"];
    cell.imageView.image = image;
    
    UIImage *image2 = [UIImage imageNamed:@"star2.png"];
    cell.imageView.highlightedImage = image2;
    
    NSUInteger row = [indexPath row];
    cell.textLabel.text = [listData objectAtIndex:row];
    cell.textLabel.font = [UIFont boldSystemFontOfSize:50]; if (row < 7) 
        cell.detailTextLabel.text = @"Mr. Disney";
    else 
        cell.detailTextLabel.text = @"Mr. Tolkien";
    
    return cell;
}
複製代碼

將字體的大小設置成50，編譯運行 字體是變大了，可是行高過小，以致於字符沒法顯示完整，咱們須要調整行高，添加一個新的table view的delegate，以下

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 70;
}

tableView:heightForRowAtIndexPath用來設置行高，由於是將這個table view的行高進行統一設置，因此直接返回高度便可，若是須要針對某些行進行調整，那麼就須要經過indexPath來得到第幾行，而後在進行行高的設置

編譯運行

ok，如今和諧了。

10）總結 這篇是Table View的入門學習，學習了Table View中最最基礎的一些東西，讀取顯示數據，添加圖片，cell的樣式，縮進，字體大小，行高等等的一些基礎內容，後一篇的內容會講到自定義Table View Cell的內容，難度有所加深，但總得來講仍是很簡單的。反正IOS學習到如今，給個人感受彷佛是愈來愈容易，不少東西開始變得容易上手了，不少概念都是融會貫通的，你們繼續努力加油啊，謝謝你們的一直關注，我也會繼續努力的，謝謝！

 

Simple Table

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程