美文网首页上海快风信息科技有限公司
UITableView左滑几种效果的实现 (一)

UITableView左滑几种效果的实现 (一)

作者: 刀客传奇 | 来源:发表于2018-01-21 16:35 被阅读36次

    版本记录

    版本号 时间
    V1.0 2018.01.21

    前言

    UITableView左滑可以实现很多效果和交互,下面我们就讲述一下几种左滑效果的实现,具体就是从简单到困难的顺序进行讲解。

    单个删除按钮的实现

    通过代理方法,会实现左滑删除的实现。

    看一下代码

    #import "ViewController.h"
    #import "JJCustomView.h"
    
    @interface ViewController () <UITableViewDelegate, UITableViewDataSource>
    
    @property (nonatomic, strong) UITableView *tableView;
    
    @end
    
    @implementation ViewController
    
    #pragma mark -  Override Base Function
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        self.tableView = [[UITableView alloc] initWithFrame:self.view.frame];
        self.tableView.delegate = self;
        self.tableView.dataSource = self;
        [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
        [self.view addSubview:self.tableView];
    }
    
    #pragma mark - UITableViewDelegate, UITableViewDataSource
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return 10;
    }
    
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return 100.0;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
        return cell;
    }
    
    - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return  YES;
    }
    
    - (UITableViewCellEditingStyle)tableView:(UITableView *)tableView editingStyleForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return UITableViewCellEditingStyleDelete;
    }
    
    - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath
    {
        NSLog(@"点击删除");
    }
    
    - (NSString *)tableView:(UITableView *)tableView titleForDeleteConfirmationButtonForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return @"删除";
    }
    
    @end
    

    下面看一下效果图

    这种就是删除效果的实现。

    这里有一个枚举

    typedef NS_ENUM(NSInteger, UITableViewCellEditingStyle) {
        UITableViewCellEditingStyleNone,
        UITableViewCellEditingStyleDelete,
        UITableViewCellEditingStyleInsert
    };
    

    这里选择的就是UITableViewCellEditingStyleDelete这个值。向左边互动一定的距离就会触发- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath方法。


    多个按钮的实现

    下面我们首先看一下QQ消息中的左滑。QQ消息的左滑会出现多个按钮选项,如下图所示。

    下面我们就模拟下,实现这个多个按钮的功能。

    还是直接看代码

    #import "ViewController.h"
    
    @interface ViewController () <UITableViewDelegate, UITableViewDataSource>
    
    @property (nonatomic, strong) UITableView *tableView;
    
    @end
    
    @implementation ViewController
    
    #pragma mark -  Override Base Function
    
    - (void)viewDidLoad
    {
        [super viewDidLoad];
        
        self.tableView = [[UITableView alloc] initWithFrame:self.view.frame];
        self.tableView.delegate = self;
        self.tableView.dataSource = self;
        [self.tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cell"];
        [self.view addSubview:self.tableView];
    }
    
    #pragma mark - UITableViewDelegate, UITableViewDataSource
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return 10;
    }
    
    - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return 100.0;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
        return cell;
    }
    
    - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath
    {
        return  YES;
    }
    
    - (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        // 添加一个删除按钮
        UITableViewRowAction *deleteRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleDestructive title:@"删除"handler:^(UITableViewRowAction *action,NSIndexPath *indexPath) {
            
            NSLog(@"点击了删除");
        }];
        
        // 添加一个标为已读按钮
        UITableViewRowAction *hasReadAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"标为已读"handler:^(UITableViewRowAction *action,NSIndexPath *indexPath) {
            
            NSLog(@"点击了标为已读");
        }];
        hasReadAction.backgroundColor = [UIColor orangeColor];
        
        // 添加一个更多按钮
        UITableViewRowAction *moreRowAction = [UITableViewRowAction rowActionWithStyle:UITableViewRowActionStyleNormal title:@"更多"handler:^(UITableViewRowAction *action,NSIndexPath *indexPath) {
            
            NSLog(@"点击了更多");
        }];
        moreRowAction.backgroundEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
        
        // 将设置好的按钮放到数组中返回
        return @[deleteRowAction, hasReadAction, moreRowAction];
    }
    
    @end
    

    下面看一下实现效果

    点击不同的按钮,就可以实现相应的输出。

    后记

    本篇已结束,后面更精彩~~~

    相关文章

      网友评论

        本文标题:UITableView左滑几种效果的实现 (一)

        本文链接:https://www.haomeiwen.com/subject/ujnfaxtx.html