由“虎撲體育app”的這個效果,來談?wù)刄ITableView編輯模式

作為一名jr,虎撲體育幾乎是我每天都得打開的app,賽季期間自不必說,長草期也喜歡看看八卦和交易動態(tài)。

那么,我們來看看這款app里的這個效果圖:

這是一個非常標(biāo)準(zhǔn)的ios UITableView的編輯模式,有添加、刪除、移動三種編輯效果。

當(dāng)你新建UITableView時,是不會有編輯模式的,要實(shí)現(xiàn)它的編輯模式,需要按下面的步驟:

1、開啟tableView的編輯效果

設(shè)置UITableView的editing屬性為YES,或調(diào)用setEditing: animated方法,后者有動畫

2、實(shí)現(xiàn) - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath 方法

這個方法是確定是否哪些行是有編輯效果。如果在1的步驟里設(shè)置了editing屬性為YES,那么即使2這個方法不實(shí)現(xiàn),默認(rèn)是全部都有編輯效果的

3、實(shí)現(xiàn) - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath 方法

這個方法是決定每一行的編輯類型是什么,即:UITableViewCellEditingStyle,是一個枚舉

分別是代表沒有編輯類型、刪除類型(cell左邊是綠色圓,中間紅色線)、添加類型(cell左邊是藍(lán)色圓,中間是加號)。值得注意的是移動的編輯類型是不在這個方法里表現(xiàn)的,要想有移動效果,得看下面的方法

4、實(shí)現(xiàn) ?- (BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath 方法

這個方法是確定哪些行是有移動模式的。如果不實(shí)現(xiàn)這個方法,如果你代碼里有moveRowAtIndexPath這個方法,那么每一行也是有移動模式的(這個方法里面可以不寫任何代碼,僅僅只要有這個方法在,就會讓每一行都有移動模式)

- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath

5、實(shí)現(xiàn) - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath 方法

前面4個步驟已經(jīng)讓我們每一行按照自己的約定有了編輯模式,那么要實(shí)現(xiàn)編輯效果:刪除數(shù)據(jù),增加數(shù)據(jù)就得看5這個方法了,這里我貼一下我的代碼,實(shí)現(xiàn)虎撲體育的刪除和插入效果:

#pragma mark - tableView編輯模式:刪除和插入

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath

{

NSLog(@"commitEditingStyle");

if (editingStyle == UITableViewCellEditingStyleDelete) {

//容易忽視的問題:刪除和插入 分別操作完,textArr和allTextArr數(shù)據(jù)操作別合在一起

//否則程序會崩潰

//刪除操作

NSUInteger index = indexPath.row;

NSString *text = [textArr objectAtIndex:index];

[textArr removeObjectAtIndex:index];

[tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];

//插入操作

[allTextArr addObject:text];

NSIndexPath *insertToIndexPath = [NSIndexPath indexPathForRow:allTextArr.count-1 inSection:1];

[tableView insertRowsAtIndexPaths:@[insertToIndexPath] withRowAnimation:UITableViewRowAnimationBottom];

} else if (editingStyle == UITableViewCellEditingStyleInsert) {

//插入操作

NSUInteger index = indexPath.row;

NSString *text = [allTextArr objectAtIndex:index];

[textArr addObject:text];

NSIndexPath *insertToIndexPath = [NSIndexPath indexPathForRow:textArr.count-1 inSection:0];

[tableView insertRowsAtIndexPaths:@[insertToIndexPath] withRowAnimation:UITableViewRowAnimationFade];

//刪除操作

[allTextArr removeObjectAtIndex:index];

[tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationFade];

}

}

到這里,其實(shí)整個編輯模式基本講完了,但是!大家會發(fā)現(xiàn)你自己實(shí)現(xiàn)的代碼,上面section0的那些行不僅僅能在section0里移動,還能夠移動到下面section1里,這不符合我們想要的效果!這種時候該怎么辦呢?!

- (NSIndexPath *)tableView:(UITableView *)tableView targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath *)sourceIndexPath toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath

秘密就在上面這個方法,大家可以看看最終效果

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容