您的位置:首页 > 产品设计 > UI/UE

IOS 表视图(UITableVIew)的使用方法(7)表视图的编辑功能(拖拉调整排序位置)

2014-04-17 15:01 686 查看
除了每个单元行左边的删除和新增图标,UITableView还支持在单元行的右侧显示一个供用户拖拉调整排序位置的控件。

不过如果要显示此控件,UITableView的数据源需要实现以下的方法。

-(void)tableView:(UITableView *)tableview moveRowAtIndexPath:(NSIndexPath *)fromIndexPath toIndexPath:(NSIndexPath *)toIndexPath


这样当UITableView进入编辑模式时,右侧的位置调整控件会依次询问每个单元行是否需要显示,可以实现数据源的以下方法来配置每一个单元右侧此控件的显示与否。

-(BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath


另外,如果开发者想支持排序功能,有必要在编辑模式时将诸如删除和新增的功能给屏蔽掉已达到更好的用户体验效果。

排序的新类中,对于非UITableView数据源和代理函数实现的地方,大致和HBDeleteViewController一样,只是需要改动导航栏的按钮外观而已,代码如下:

-(void)initUI
{
[super initUI];

//导航栏右侧的排序按钮
UIButton *aOrderButton = [[UIButton alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 23.0f, 15.0f)];

[aOrderButton addTarget:self action:@selector(actBeginOrder:) forControlEvents:UIControlEventTouchUpInside];
[aOrderButton setImage:[UIImage imageNamed:@"reorder"] forState:UIControlStateNormal];

_orderItem=[[UIBarButtonItem alloc]initWithCustomView:aOrderButton];
//关闭编辑模式按钮
_doneItem=[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(actEndOrder:)];

self.navigationItem.rightBarButtonItem=_orderItem;
}

#pragma marl-
#pragma mark Action
-(IBAction)actBeginOrder:(id)sender
{
//开启编辑模式
[self.tableView setEditing:YES animated:YES];
self.navigationItem.rightBarButtonItem=_doneItem;
}

-(IBAction)actEndOrder:(id)sender
{
//关闭编辑模式
[self.tableView setEditing:NO animated:YES];
self.navigationItem.rightBarButtonItem=_orderItem;
}


随后做更关键的事:数据源和代理方法的实现,代码如下:

#pragma mark
#pragma mark Table View data source
//setEditing:animated:后被调用
//询问具体Cell是不是支持编辑

-(BOOL)tableView:(UITableView *)tableView canMoveRowAtIndexPath:(NSIndexPath *)indexPath
{
//假设需求:教练不能移动
if(indexPath.row == 0)
{
return NO;
}
return YES;
}

-(BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
{
return YES;
}

-(void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath
{
NSMutableArray *arrNewDatasource = [NSMutableArray arrayWithArray:self.datasource];

HBPlayerInfo *aPlayer = [self.datasource objectAtIndex:sourceIndexPath.row];

//更新数据源
[arrNewDatasource removeObjectAtIndex:sourceIndexPath.row];
[arrNewDatasource insertObject:aPlayer atIndex:destinationIndexPath.row];

_datasource=[[NSArray alloc]initWithArray:arrNewDatasource];
}

-(NSIndexPath *)tableView:(UITableView *)tableView targetIndexPathForMoveFromRowAtIndexPath:(NSIndexPath *)sourceIndexPath toProposedIndexPath:(NSIndexPath *)proposedDestinationIndexPath
{
//更新UI
//拖动时,目的地位置的承认与否
//如果不承认,可以自己制作一个有效地目的地位置NSIndexPath,返回出去
if (proposedDestinationIndexPath.row==0) {
//要超过首行?不行!
return [NSIndexPath indexPathForRow:1 inSection:proposedDestinationIndexPath.section];
}
return proposedDestinationIndexPath;
}

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *CellIdentifier = @"InfoTableViewCellId";
HBCustomCell *cell =(HBCustomCell *)[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if(cell == nil)
{
NSArray *arrNib=[[NSBundle mainBundle]loadNibNamed:@"CustomView" owner:self options:nil];
if(arrNib)
{
//第一个元素就是需要的UITableViewCell
cell=(HBCustomCell *)[arrNib objectAtIndex:0];
}
}

UIImage *photo = nil;
HBPlayerInfo *onePlayer=[self.datasource objectAtIndex:indexPath.row];
if(onePlayer)
{
cell.playerName.text=onePlayer.name;
cell.playerName.font=[UIFont fontWithName:@"Helvetica" size:16.0f];
cell.playerRole.text=onePlayer.role;
cell.playerRole.font=[UIFont fontWithName:@"Helvetica" size:12.0f];
cell.playerNumber.text=[NSString stringWithFormat:@"No.%@",onePlayer.number];

//插入时,更新界面的方法insertRowsAtIndexPaths会调用cellForRowAtIndexPath询问具体的UITableViewCell
//所以这里考虑为插入的元素准备的空头像
photo=[UIImage imageNamed:@"gaolin.jpeg"];
if(!photo)
{
photo=[UIImage imageNamed:@"empty"];
}
cell.playerPhoto.image=photo;
cell.showsReorderControl=YES;
}
return cell;
}

#pragma mark
#pragma mark TableView Delegate
-(UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
{
return UITableViewCellEditingStyleNone;

/*
//只有编辑状态时,才有删除功能
//由于手指左划显示“Delete”按钮并不处于编辑状态,所以会被屏蔽掉
if(self.tableView.editing)
{
return UITableViewCellEditingStyleDelete;
}
return UITableViewCellEditingStyleNone;
*/
}

-(BOOL)tableView:(UITableView *)tableView shouldIndentWhileEditingRowAtIndexPath:(NSIndexPath *)indexPath
{
//进入编辑状态时单元行不向右缩进
return NO;
}


运行程序,效果如图:
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: