發文作者:skyx | 2012/01/09

[iOS] UITableView 應用及其總結


說好的,這次寫iOS的技術文章,雖然我也沒有用iOS的cocoa touch framework多久。哈哈!

注:本文假定各位有一些objective-c語法基礎。
注2:本文部份圖片來源自Apple Developer文檔,最傳神的說XD。

言歸正傳,這次的主題是 UITableView ─ 很常用的present資料的component。

UITableView 的 Style 預設有兩種:Plain 及 Grouped。

Plain:
點擊看全圖

Grouped:
點擊看全圖

裝在 UITableView 裡面的元素是 UITableViewCell。

Cell的結構圖:
點擊看全圖

而 UITableViewCell 預設有4種樣式 Style:

UITableViewCellStyleDefault:預設使用這種,若左側ImageView沒圖的話,只有一行字(textLable.text)。
點擊看全圖

UITableViewCellStyleValue1:左側為textLable.text並且左對齊,右側為detailTextLable.text並且右對齊。
點擊看全圖

UITableViewCellStyleValue2:左側為detailTextLable.text,右側為textLable.text並且左對齊。
點擊看全圖

UITableViewCellStyleSubtitle:跟UITableViewCellStyleDefault大致相同,detailTextLable.text出現在textLable.text下方。
點擊看全圖

textLable和detailTextLable都包含在contentView裡面。

那麼先上點code snippet代碼來說明要如何使用:


- (void)dealloc
{
     [itemsArray release];
     [super dealloc];
}

- (void)viewDidLoad
{
   [super viewDidLoad];

   //初始化資料陣列,待會使用
   NSMutableArray *itemsArray = [[NSArray alloc] initWithObjects:@"row 1",@"row 2",@"row 3",nil];

}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{

    // Return the number of sections.
    // 告訴tableView總共有多少個section需要顯示
    return 1;
}

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

    // Return the number of rows in the section.
    // 告訴tableView一個section裡要顯示多少行
    return [itemsArray count];
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //cell的標飾符
    static NSString *CellIdentifier = @"cellIdentifier";

    //指定tableView可以重用cell,增加性能,不用每次都alloc新的cell object
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];

    //如果cell不存在,從預設的UITableViewCell Class裡alloc一個Cell object,應用Default樣式,你可以修改為其他樣式
    if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
    }

    // Configure the cell...

    //每一行row進來都判定一下,分別依次選用不同的圖片
    switch (indexPath.row) {
        case 0:
        {
            cell.imageView.image = [UIImage imageNamed:@"image0.png"];
        }
            break;
        case 1:
        {
            cell.imageView.image = [UIImage imageNamed:@"image1.png"];
        }
            break;
        case 2:
        {
            cell.imageView.image = [UIImage imageNamed:@"image2.png"];
        }
            break;
        default:
        {
            cell.imageView.image = [UIImage imageNamed:@"default.png"];
        }
            break;
    }

    //其他相同的屬性一併設定
    cell.textLabel.text = [itemsArray objectAtIndex:indexPath.row];
    [cell setAccessoryType:UITableViewCellAccessoryDisclosureIndicator];

    //設字體、顏色、背景色什麼的
    cell.textLabel.backgroundColor = [UIColor clearColor];
    cell.detailTextLabel.backgroundColor = [UIColor clearColor];
    cell.textLabel.textColor = [UIColor colorWithRed:54.0/255.0 green:161.0/255.0 blue:219.0/255.0 alpha:1];
    cell.detailTextLabel.textColor = [UIColor colorWithRed:135.0/255.0 green:135.0/255.0 blue:135.0/255.0 alpha:1];

    //設定textLabel的最大允許行數,超過的話會在尾未以...表示
    cell.textLabel.numberOfLines = 2;

    return cell;
}

//這個是非必要的,如果你想修改每一行Cell的高度,特別是有多行時會超出原有Cell的高度!
-(CGFloat) tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    return 85.0;
}

Cell 在alloc後便不能再更改某些component的frame了,例如是ImageView,textLable及detailTextLable等。

如果比較進階一點的,想修改或者增加更多的component進去Cell裡面,有兩種方法(大同小異):
第一種是在cellForRowAtIndexPath delegate method裡alloc cell時在contentView裡面addSubView。

第二種是需要繼承Cell作一個Custom Cell 的Class,並可以使用layoutSubview等方法來修改component的frame呢。

References:
A Closer Look at Table-View Cells
Standard Styles for Table-View Cells
About Table Views in iOS-Based Applications


Responses

  1. 嘿嘿
    好久沒來了,我也開始工作了,其實有點想玩玩這方面的東西。

    一起加油吧!!

    我的網站掛點好久了,終於有個新域名了>.<

    • 恭喜恭喜! 你在公司裡也是要寫iphone apps?
      我待會更新你的domain 到推薦列表XD
      Cheers~

      • 我是偏開發類似WP這種系統的@@
        大部分是用PHP,ASP,Java,etc…

        不過感覺上比開發Win32應用程式快很多說…

        有機會來學學android了

        呵呵

  2. WP = Windows Phone Mango 嗎? @@ 我也想把自己的HD2刷成WP7.5,不過失敗了XDDDD

    Java 我也 ok. 而 Android 我也玩過喔~因為免錢,所以最初繼Windows Mobile後,要寫apps的平台,嘿嘿嘿…

    如果你想學Android的話,建議你可以看一下BMI 那個教程,我個人覺得粉不錯呢 ^^

    Link:
    http://code.google.com/p/androidbmi/wiki/DiveIntoAndroid

  3. 阿,其實是wordpress拉>_<
    想學是覺得它很夯,當初是因為沒有智慧型手機,所以沒有接觸到這塊,現在有點想玩,呵呵。

    感謝,好東西,下次來研究研究。^^

  4. WORDPRESS 阿,我沒有時間去研究PHP,都被一堆新技術給用掉時間了XD
    你現在已經有Android實機了嗎?不然在Emulator裡玩不爽XD

    大家一起加油吧!! ^^

  5. 濕蓋愛客濕桑原來轉戰iOS已久XD

    • 好久沒留言阿, FreeXD
      公司需要寫就要寫了阿XD 但是我最愛的還是C# 哈哈…

  6. […] 来源:https://skyx.wordpress.com/2012/01/09/ios-uitableview-use-and-summary/ […]

  7. […] 来源:https://skyx.wordpress.com/2012/01/09/ios-uitableview-use-and-summary/ […]


發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

分類

%d 位部落客按了讚: