ios UITableView 自定义右滑删除的实现代码

公司有个奇葩需求。删除按钮带点圆角 不止如此,还有cell之间有间隔,cell圆角,cell左右有间隔。如下图!!!!!

内心奔溃的我想了想了很多方法。(获取系统自带按钮改圆角也试过,自定义手势也试过)最后决定全部自定义。个人感觉这样最合适。下面是效果图

今天有时间,稍微说下实现方式:

这个项目工程只是提供一种思路,应对场景是 需要自定义左滑删除按钮的样式。

因为项目本身并不是修改系统的左滑删除,而是自定义实现,所以任何样式都算使用。

下面先说下项目的结构类型

最底下自然是uitableviewCell 然后放入一个scrollview 填满整个cell (若想有左右间隔,也可以不填满)

scrollview 中放入一个uiview 和scrollview宽高相等 作为内容视图 。界面的所有控件视图都添加到这个uiview中!!! 右边就是自定义的删除按钮 也添加到scrollview中。这样就能实现滑动效果了。(你也可以加2个按钮,3个按钮,随你开心)

下面讲下代码

//设置代理
- (void)awakeFromNib {
  [super awakeFromNib];
  self.myScrollView.delegate = self;
}
-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
  [self didBeginMove];
}

-(void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
  [scrollView setContentOffset:scrollView.contentOffset animated:YES];
  [self scrollViewDidEnd:scrollView];
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView{
  CGPoint offset = scrollView.contentOffset;
  //左边不弹性
  if (offset.x < 0 ) {
    offset.x = 0;
    [scrollView setContentOffset:offset animated:NO];
  }
}

-(void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView{
  NSLog(@"beginbegin");
  [scrollView setContentOffset:scrollView.contentOffset animated:NO];
  [self scrollViewDidEnd:scrollView];
}

-(void)scrollViewDidEnd:(UIScrollView *)scrollView{
  [scrollView setContentOffset:scrollView.contentOffset animated:YES];
  CGPoint point = scrollView.contentOffset;
  if (point.x > DELETEWIDTH / 2) {
    self.deleteLeftLayout.constant = -3;
    [UIView animateWithDuration:0.3 animations:^{
      [self layoutIfNeeded];
    }];

    [scrollView setContentOffset:CGPointMake(DELETEWIDTH -3 , 0) animated:YES];
    self.detailView.layer.cornerRadius = 0;
  }else{
    self.deleteLeftLayout.constant = 0;
    [self layoutIfNeeded];
    [scrollView setContentOffset:CGPointMake(0, 0) animated:YES];
    self.detailView.layer.cornerRadius = 5;
  }
}

-(void)didBeginMove{
  if (self.tableview) {
    MyTableViewCell *currentCell = objc_getAssociatedObject(self.tableview, @"currentCell");

    if (currentCell != self && currentCell != nil) {
      [currentCell hideButtonsWithAnimation];
    }
    objc_setAssociatedObject(self.tableview, @"currentCell", self, OBJC_ASSOCIATION_ASSIGN);
  }
}

-(void)hideButtonsWithAnimation{
  [self.myScrollView setContentOffset:CGPointMake(0, 0) animated:YES];
  self.detailView.layer.cornerRadius = 5;
  self.deleteLeftLayout.constant = 0;
  [self layoutIfNeeded];
}

代码意思大致是,scrollview停止滚动时,根据最后的位置判断是否显示删除按钮。

这样已经实现了左右拖拽,弹出关系效果了。接下来就有一些细节部分需要注意。

1.我们观察到,uitableviewcell只会出现一个删除,当tableView滚动,或另一个cell左滑删除时,前一个cell需要关闭。下面是我的解决方案

首先,当tableviewcell里的scrollview开始拖拽时,将当前的cell和tableview关联起来。并关闭之前关联的cell

-(void)didBeginMove{
  if (self.tableview) {
    MyTableViewCell *currentCell = objc_getAssociatedObject(self.tableview, @"currentCell");

    if (currentCell != self && currentCell != nil) {
      [currentCell hideButtonsWithAnimation];
    }
    objc_setAssociatedObject(self.tableview, @"currentCell", self, OBJC_ASSOCIATION_ASSIGN);
  }
}

然后到tableview的代理中(注意是tableview,不是cell中的scrollview)当tableview准备滚动,就直接关闭掉他关联的cell。

-(void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
  MyTableViewCell *currentCell = objc_getAssociatedObject(self.tableView, @"currentCell");
  if (currentCell != nil) {
    [currentCell hideButtonsWithAnimation];
  }
}

代码修正过一版,之前那版有点小bug。

2.当cell点击时,如果处于编辑状态,就先关闭编辑状态。 我的做法是直接在内容view中添加点击手势(同时完成点击事件的代理),然后内部属性判断是否处于编辑状态。具体代码时间问题没有整理到demo中。各位见谅。

先写这么多了。感觉你们也碰不到这么奇葩的产品和美工。

下载地址:nextTableDelete_jb51.rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 全面解析iOS应用中自定义UITableViewCell的方法

    有时候我们需要自己定义UITableViewCell的风格,其实就是向行中添加子视图.添加子视图的方法主要有两种:使用代码以及从.xib文件加载.当然后一种方法比较直观. 一.基本用法 我们这次要自定义一个Cell,使得它像QQ好友列表的一行一样:左边是一张图片,图片的右边是三行标签: 当然,我们不会搞得这么复杂,只是有点意思就行. 1.运行Xcode 4.2,新建一个Single View Application,名称为Custom Cell: 2.将图片资源导入到工程.为此,我找了14张50

  • 详解ios中自定义cell,自定义UITableViewCell

    通过继承UITableViewCell来自定义cell 1.创建一个空的项目.命名: 2.创建一个UITableViewController 并且同时创建xib: 3.设置AppDelegate.m中window的根控制器为刚刚创建的TableViewController: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { s

  • iOS开发之UITableView左滑删除等自定义功能

    前言 相信每位iOS开发者都知道UITableView的左滑删除功能非常的炫酷,有时候左滑需要的功能不止只有删除一个,有时候会有顶置之类的别的功能,这时候就需要我们自己定制左滑 示例代码 -(NSArray<UITableViewRowAction*>*)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewRowAction *rowActio

  • 实例讲解iOS应用开发中使用UITableView创建自定义表格

    一.带索引目录的表视图 1.效果图 2.数据源 本想获取通讯录中得名字,但为了用模拟器调试方便,就写死了数据,所以也只写了部分字母,总之有那么点意思就成 复制代码 代码如下: @interface ViewController ()<UITableViewDataSource,UITableViewDelegate> {     NSArray *sectionTitles; // 每个分区的标题     NSArray *contentsArray; // 每行的内容 } /** @brie

  • iOS中UITableView Cell实现自定义单选功能

    今天分享下cell的单选,自定义的,不是下图这种网上找到的打对勾的,我搜了好久,基本上都是打对勾的文章,就决定自己写一篇.基本上自己的app都会有一个风格吧,咱也不能一直用打对勾的方式去做(看起来是不是很low). 我们要实现的是下面的这种形式.瞬间好看了很多,高大上了很多是吧. 具体我来给大家介绍一下.我这种方法有可能不是很好,有大神来,欢迎多多交流. 首先在你自定义的cell里面加入一个UIImageView,因为你肯定要有选择和未选择两张图片的吧,所以这个UIImageView来切换图片.

  • iOS应用中UITableView左滑自定义选项及批量删除的实现

    实现UITableView左滑自定义选项 当UITableView进入编辑模式,在进行左滑操作的cell的右边,默认会出现Delete按钮,如何自定义左滑出现的按钮呢? 只需要实现UITableView下面的这个代理方法. 复制代码 代码如下: - (NSArray<UITableViewRowAction *> *)tableView:(UITableView *)tableView editActionsForRowAtIndexPath:(NSIndexPath *)indexPath

  • iOS App开发中使用及自定义UITableViewCell的教程

    UITableView用来以表格的形式显示数据.关于UITableView,我们应该注意: (1)UITableView用来显示表格的可见部分,UITableViewCell用来显示表格的一行. (2)UITableView并不负责存储表格中的数据,而是仅仅存储足够的数据使得可以画出当前可见部分. (3)UITableView从UITableViewDelegate协议获取配置信息,从UITableViewDataSource协议获得数据信息. (4)所有的UITableView实现时实际上只有

  • iOS自定义UITableView实现不同系统下的左滑删除功能详解

    前言 在我们的app开发当中,经常会用到UITableView 的左滑删除的功能,通常的话效果如下 但有时候系统现有的功能并不能完全满足我们的开发需求,这样就需要我们在其现有的功能基础上自定义我们所需要的功能了.下图是在项目中自定义的按钮(只是修改了按钮的frame而已). 然后我就总结了一下根据不同的需求自定义不同的按钮. 一.系统默认左滑删除按钮 如果你对左滑删除按钮的要求不高,仅仅只是实现UITableView上cell的左滑删除功能,那在UITableView的代理方法中添加以下两种方法

  • ios UITableView 自定义右滑删除的实现代码

    公司有个奇葩需求.删除按钮带点圆角 不止如此,还有cell之间有间隔,cell圆角,cell左右有间隔.如下图!!!!! 内心奔溃的我想了想了很多方法.(获取系统自带按钮改圆角也试过,自定义手势也试过)最后决定全部自定义.个人感觉这样最合适.下面是效果图 今天有时间,稍微说下实现方式: 这个项目工程只是提供一种思路,应对场景是 需要自定义左滑删除按钮的样式. 因为项目本身并不是修改系统的左滑删除,而是自定义实现,所以任何样式都算使用. 下面先说下项目的结构类型 最底下自然是uitableview

  • 类似于QQ的右滑删除效果的实现方法

    原理:删除的div在窗口的外面,用户看不到,用户右滑,显示次div <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@

  • 记录一个Vue3简易微信右滑删除逻辑的思路实现

    目录 一.搭建简易的页面 二.前置条件 三.设计touchstart函数 四.设计touchend函数 五.加上过度动画 今天项目需求需要实现一个类似于微信右滑显示额外选项的功能,记录一下实现思路. 一.搭建简易的页面 对应的代码,界面使用了tailwindCSS,代码非常简单,就是普通的定位,关键的定位已经用黄色框框圈出.right的值为div删除的宽度,其它的样式这里不再过多赘述. 二.前置条件 这里先来梳理一下思路. 首先,我们需要给这删除按钮组件打上ref,因为之后我们需要用到这个div

  • android 右滑返回的示例代码

    类似于微信的右滑返回,在BaseActivity里利用dispatchTouchEvent()拦截右滑动作,利用setTranslationX()实现动画,在DecorView里添加View作为滑动时的左侧阴影. 渐进步骤: 设置activity背景透明 重写finish()等方法设置activity的跳转动画 重写dispatchTouchEvent()拦截 所需要 右滑动作 重写onTouchEvent()给根布局设置偏移量 添加滑动时上层activity的左侧阴影 滑动时关联下层activ

  • react 移动端实现列表左滑删除的示例代码

    最近做了一个类似系统操作的左滑删除的demo,用的taro框架,和大家分享一下~ 首先需要考虑的有以下几点: 1)布局: 2)判断是左滑还是右滑,左滑时出现删除,右滑时回归原位: 3)排他性,意思是某一个时间只能有一个项出现删除,当有另一个出现删除时,上一个自动回归原位. 我将列表项封装成一个组件,而整个列表是另一个组件. 接下来先说列表项这个组件,逐一解决以上这些问题: 1)布局 我采用的是列表项最外层套一个盒子,这个盒子宽度设置为100vw,并且overflow:hidden.而列表项要包括

  • vue项目实现左滑删除功能(完整代码)

    实现效果 代码如下 html <template> <div> <div class="biggestBox"> <ul> <!-- data-type=0 隐藏删除按钮 data-type=1 显示删除按钮 --> <li class="li_vessel" v-for="(item,index) in lists " data-type="0" :key=&

  • 微信小程序uniapp实现左滑删除效果(完整代码)

    微信小程序uniapp实现左滑删除效果 实现效果 1,列表中侧滑删除 2,删除不同时存在 3,上下滑动与侧滑删除不影响 在本页面引入组件并使用 (文件在文章的最下方附上) 在需要左滑删除的地方使用 <view v-for="(item, index) in csListArrl" :key="index" :data-index="index"> <delSlideLeft :item="item" :dat

  • iOS禁用右滑返回的两种方法

    本文实例为大家分享了iOS禁用右滑返回的具体代码,供大家参考,具体内容如下 方式一: 前提:如果使用的自定义UINavigationController基类,请不要在此基类里写相关的手势操作方法. 代码如下: -(void)viewDidAppear:(BOOL)animated{ if ([self.navigationController respondsToSelector:@selector(interactivePopGestureRecognizer)]) { self.naviga

随机推荐