en

hi, it seems you are using microsoft internet explorer. it doesn't match web standard and causes problems browsing this site. please please please use mozilla firefox or google chrome instead. thank you!

zh

哦哦!您正在使用Internet Explorer 瀏覽器,它與我們的網頁標準並不相容,可能會導致畫面顯示不正常。
請改用 Mozilla Firefox 或者 Google Chrome 才能正常瀏覽本網站,謝謝!

2.06.2012

UITableView 刪除項目的方法

 

延續之前與 UITableView 相關的文章,你可以在「索引式搜索」中的「元件設定」分類裡找到所有有關 UITableView 的文章,UITableView 支援項目新增、移動、與刪除等操作,下面先重對 UITableView 刪除項目的方法開始說起。


注意事項
雖然說刪除表格內的項目對於使用者來說是相當直覺,但是在程式碼的對應上卻些許複雜,在畫面上進行作之後,對應到的程式碼部份只能後取得索引值,你必須利用此索引值將陣列裡的物件一並刪除,之後程式在自動整理表格時才不會出錯。

在開始撰寫刪除程式碼之前,請務必確認以下項目:

  • 對應的操作陣列形態必須是 NSMutableArray
UITableView 在做刪除項目的動作時,我們同樣也需要對陣列裡的元素作刪除的動作,由於傳統的 NSArray 並不支援 removeObjectAtIndex: 方法函式,應此在陣列的形態上請務必都宣告成 NSMutableArray,如果你的陣列也同時包含巢狀結構,也請務必確認所有子結構下的陣列形態都是 NSMutableArray。
  • 陣列結構的正確性
 由於每次在對 UITableView 做刪除項目的動作時,表格的內容都會隨即更新,也就是會重新執行那些表格基本設定的方法函式,像是設定表格的欄位數目、分類數目等等,如果你陣列的結構有錯誤,無法與 UITableView 相互對應,例如 index 錯誤無法在陣列中找到資料等問題,程式會出現 crash 的可能。
  • 任何時候都應先對陣列操作,之後才是 UITableView
原因同上,如果先對 UITableView 進行操作,在更新表格內容時極有可能出現無法與陣列內元素對應的情形。
掌握以上技巧之後,下面就可以開始撰寫刪除表格項目的程式碼了。


開啟編輯表格的功能
在未啓用此功能之前,使用者只能點選表格項目來顯示詳細資料,有關其他新增、刪除、移動等功能都無法使用,若要開啓表格的互動功能,可以使用以下內建的方法函式,並回傳一個 YES 的布林值即可(預設值為 NO)。
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    return YES;
}


刪除項目
在啟用表格編輯的功能之後,我們還無法對「編輯表格」做任何的事情,因為我還未改寫它的實作方法,透過下列另一個內建的 UITableView 方法函式,撰寫在項目選擇刪除之後所要處理動作的程式碼。
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {

    //判斷編輯表格的類型為「刪除」
    if (editingStyle == UITableViewCellEditingStyleDelete) {

        //刪除對應的陣列元素
        [[heroicaArray objectAtIndex:indexPath.section]removeObjectAtIndex:indexPath.row];

        //刪除對應的表格項目
        [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationRight];

        //如果該分類已沒有任何項目則刪除整個分類
        if ([[heroicaArray objectAtIndex:indexPath.section] count] == 0) {
            [heroicaArray removeObjectAtIndex:indexPath.section];
            [tableView deleteSections:[NSIndexSet indexSetWithIndex:indexPath.section] withRowAnimation:UITableViewRowAnimationFade];
        }
    }
}

如果你所製作的表格並沒有任何分類,你可以直接忽略上述刪除分類的程式碼區塊,另外再刪除表格時的動畫部分,你也可以直接設定成 YES 或是其它的表格動畫。

設定 UINavigationItem
在完成刪除項目的程式碼設定之後,使用者可以在表格項目上透過滑動的互動方式來刪除該項目,如果你覺得這還不夠直覺,那麼可以在 Navigation Bar 上使用 UIBarButtonItem 來進行編輯表格的互動,並將下列這段程式碼加在 viewDidLoad 方法函式中。
self.navigationItem.rightBarButtonItem = self.editButtonItem;





3 則留言:

  1. 你好
    請問想要做到類似
    http://ppt.cc/y8MQ
    這張圖片的效果請問有什麼直接的方法嗎?

    類似dropbox app裡面unlink button

    回覆刪除
    回覆
    1. henry 您好:

      提供你一個名詞,這一類的按鈕名稱通稱叫做 DestructiveButton,它最早是出現在 UIActionSheet 中,相信您已經知道了。
      http://furnacedigital.blogspot.tw/2011/06/uiactionsheet.html

      不過很可惜,目前並沒有提供相關的 API 讓我們製作出類似 DestructiveButton(至少我目前還未看到),您僅能使用自訂的方式來製作此按鈕,
      你可以透過設定 Appearance 的方法來制定你想要的背景圖案,但是按鈕在設定 TintColor 實是無法反應在一般狀態,只有按下時的狀態才會有反應。
      比較好的作法是設定按鈕在不同的狀態下有不同的圖案,你可以透過 UIControlStateNormal 與 UIControlStateHighlighted 來幫助你判斷狀態,例如:

      [myButton setImage:[UIImage imageNamed:@"Normal.png"] forState:UIControlStateNormal];
      [myButton setImage:[UIImage imageNamed:@"Highlighted.png"] forState:UIControlStateHighlighted];

      http://furnacedigital.blogspot.tw/2011/11/appearance.html


      另一種方法,您可以參考「重複影像遮罩的設定方法」一文來製作背景影像,並且應用在您的UIButton上
      http://furnacedigital.blogspot.tw/2011/11/blog-post.html

      關於以上方法您可子參考stackoverflow中,網友們所提供的程式碼片段來達成
      http://stackoverflow.com/questions/1427818/how-can-i-create-a-big-red-uibutton-with-the-iphone-sdk

      刪除
    2. 我忘了說,如果您不排斥使用 Open Source 的話,你可以參考 UIGlossyButton 自定的光澤 UIButton,它已經製作出您所想要的效果,而且使用起來也很方便。
      http://furnacedigital.blogspot.tw/2012/05/uiglossybutton-uibutton.html

      刪除