iOS中 UITableViewRowAction tableViewcell编辑状态下的功能 UI技术分享

简介:  * tableView:editActionsForRowAtIndexPath: // 设置滑动删除时显示多个按钮  * UITableViewRowAction // 通过此类创建按钮  * 1. 我们在使用一些应用的时候,在滑动一些联系人的某一行的时候,会出现删除、置顶、更多等等的按钮,在iOS8之前,我们都需要自己去实现。

 * tableView:editActionsForRowAtIndexPath: // 设置滑动删除时显示多个按钮

 * UITableViewRowAction // 通过此类创建按钮

 * 1. 我们在使用一些应用的时候,在滑动一些联系人的某一行的时候,会出现删除、置顶、更多等等的按钮,在iOS8之前,我们都需要自己去实现。But,到了iOS8,系统已经写好了,只需要一个代理方法和一个类就搞定了

 * 2. iOS8的<UITableViewDelegate>协议多了一个方法,返回值是数组的tableView:editActionsForRowAtIndexPath:方法,我们可以在方法内部写好几个按钮,然后放到数组中返回,那些按钮的类就是UITableViewRowAction

 * 3. 在UITableViewRowAction类,我们可以设置按钮的样式、显示的文字、背景色、和按钮的事件(事件在Block中实现)

 * 4. 在代理方法中,我们可以创建多个按钮放到数组中返回,最先放入数组的按钮显示在最右侧,最后放入的显示在最左侧

 * 5. 注意:如果我们自己设定了一个或多个按钮,系统自带的删除按钮就消失了...

布局:

SDViewController.m

#import "DetailViewController.h"
#define kCell @"cell"
@interface SDViewController ()
@property (nonatomic, retain) NSMutableArray *dataArray;
@end

@implementation SDViewController
- (void)dealloc
{
    self.dataArray = nil;
    [super dealloc];
}


  //配置右侧按钮
      self.navigationItem.rightBarButtonItem =self.editButtonItem;
    self.dataArray = [[NSMutableArray alloc]initWithObjects:@"1",@"2",@"3",@"4",@"5", nil];
    //注册
    [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:kCell];

配置分区和行数:
//分区个数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

    return 1;
}
//行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return [self.dataArray count];
}

设置cell的样式:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:kCell forIndexPath:indexPath];
    if (cell == nil) {
        cell = [[UITableViewCell alloc]initWithStyle:(UITableViewCellStyleValue1) reuseIdentifier:kCell];
    }
  //cell上显示的内容
    cell.textLabel.text = [self.dataArray objectAtIndex:indexPath.row];
    return cell;
}
设置是否可编辑:
- (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath {
    // Return NO if you do not want the specified item to be editable.
    return YES;
}

设置处理编辑情况

- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath {
    if (editingStyle == UITableViewCellEditingStyleDelete) {
        // Delete the row from the data source
        //更新数据
        [self.dataArray removeObjectAtIndex:indexPath.row];
        //更新UI
        [tableView deleteRowsAtIndexPaths:[NSArray arrayWithObject:indexPath] withRowAnimation:UITableViewRowAnimationFade];
    }else if (editingStyle == UITableViewCellEditingStyleInsert) {
 
    }
 }
重点:

//设置滑动时显示多个按钮
- (NSArray *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath{
//添加一个删除按钮
UITableViewRowAction *deleteAction = [UITableViewRowAction rowActionWithStyle:(UITableViewRowActionStyleDestructive) title:@"删除" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
    NSLog(@"点击了删除");
    
    //1.更新数据
    [self.dataArray removeObjectAtIndex:indexPath.row];
    //2.更新UI
    [tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:(UITableViewRowAnimationAutomatic)];
    
}];
    //删除按钮颜色
    deleteAction.backgroundColor = [UIColor cyanColor];
    //添加一个置顶按钮
    UITableViewRowAction *topRowAction =[UITableViewRowAction rowActionWithStyle:(UITableViewRowActionStyleDestructive) title:@"置顶" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        NSLog(@"点击了置顶");
        //1.更新数据
        [self.dataArray exchangeObjectAtIndex:indexPath.row withObjectAtIndex:0];
        //2.更新UI
        NSIndexPath *firstIndexPath =[NSIndexPath indexPathForRow:0 inSection:indexPath.section];
        [tableView moveRowAtIndexPath:indexPath toIndexPath:firstIndexPath];
            }];
    
   //置顶按钮颜色
    topRowAction.backgroundColor = [UIColor magentaColor];
   
    
    //--------更多

    UITableViewRowAction *moreRowAction = [UITableViewRowAction rowActionWithStyle:(UITableViewRowActionStyleNormal) title:@"更多" handler:^(UITableViewRowAction *action, NSIndexPath *indexPath) {
        DetailViewController *detailVC = [[DetailViewController alloc]init];
        [self.navigationController pushViewController:detailVC animated:YES];
       
    }];
    //背景特效
    //moreRowAction.backgroundEffect = [UIBlurEffect effectWithStyle:(UIBlurEffectStyleDark)];

    //----------收藏
    UITableViewRowAction *collectRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDefault title:@"收藏"handler:^(UITableViewRowAction *action,NSIndexPath *indexPath) {
        
       
        
        UIAlertView *alertView = [[UIAlertView alloc]initWithTitle:@"收藏" message:@"收藏成功" delegate:self cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
        
        [alertView show];
        [alertView release];
    }];
    //收藏按钮颜色
     collectRowAction.backgroundColor = [UIColor greenColor];
    
    //将设置好的按钮方到数组中返回
    return @[deleteAction,topRowAction,moreRowAction,collectRowAction];
   // return @[deleteAction,topRowAction,collectRowAction];
}
效果:



目录
相关文章
|
20天前
|
存储 数据管理 数据安全/隐私保护
如何动态控制 CRM attachment UI 的可编辑性(editability)
如何动态控制 CRM attachment UI 的可编辑性(editability)
16 0
|
3月前
element-ui可编辑行增加行或删除行
element-ui可编辑行增加行或删除行
|
5月前
|
Web App开发 前端开发 JavaScript
SAP UI5 应用开发教程之六十五 - 基于 OData V4 的 SAP UI5 表格控件如何实现创建,编辑和保存功能试读版
SAP UI5 应用开发教程之六十五 - 基于 OData V4 的 SAP UI5 表格控件如何实现创建,编辑和保存功能试读版
39 0
|
6月前
|
前端开发
前端项目实战叁拾伍-​react-admin+material ui-单表订单列表编辑
前端项目实战叁拾伍-​react-admin+material ui-单表订单列表编辑
36 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件10
28 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件9
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件9
30 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件8
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件8
30 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件6
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件6
24 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件5
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件5
29 0
|
6月前
|
JavaScript 前端开发
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件4
前端学习笔记202306学习笔记第五十四天-react.js & material-ui之编辑表单 封装form组件4
27 0

相关产品

  • 云迁移中心