美文网首页iOS知识点
UIScrollView上的UIButton点击高亮

UIScrollView上的UIButton点击高亮

作者: 程序媛的程 | 来源:发表于2018-11-02 19:19 被阅读0次

    我是一个非常懒的程序猿,最近读了几本闲书,发现自己长时间以来对自己疏于管理,放逐的厉害,所以从简书开始,从工作中得到的经验开始,做一些小小的笔记。有些东西已经满大街都是,那我就当是对这几年的工作做个迟到的归纳了~文笔有限,但是希望能帮助解决搜到这篇文章的同学现有的问题。


    iOS原生开发应该对UIScrollView熟悉的不能再熟悉了,而它的子类UITableView更是几大常用控件之一。最近业务线做迭代,其中一个小组件为一个可滑动的菜单,样式如下:

    菜单组件

    这个组件只是tableview的一部分,一个自定义tableviewcell,功能简单,实现起来也不麻烦。然鹅,你就是过不了设计狮的关。

    好吧,过不了过不了,你说来我听听,你想要啥样~

    然后对方甩给我一张照骗。

    左Android右iOS

    内心OS:作为一个设计狮,照骗糊成酱紫好意思发我哈?

    意思就是说点击区域放大,有浅灰色点击效果,不仅长按高亮,快速点击也要有,并且高亮的时候区域内的小图标颜色状态不要变。

    好吧,人家这要求不过分,接了。下面只分享黑色加粗部分的实现方法哦~

    在UIScrollView及其子类上面添加UIControl类的子视图,需要注意的是,当我们的手指触摸到ScrollView的Content区域内,scrollView便开启一个timer进行计时。在一定时间内,如果手指没有做例如滑动操作,之后responder才变成该scrollView的subview。 这就是之所以加到scrollView上面的button快速点击的时候没了高亮效果,而长按的时候才有。好了,原因了解了,怎么解决呢?

    UIScrollView的delaysContentTouches属性了解一下?

    该属性的说明是:

    default is YES. if NO, we immediately call -touchesShouldBegin:withEvent:inContentView:. this has no effect on presses

    于是,当我们把该属性设为NO以后,跳过了timer环节,而会立即调用ContentView上的点击事件。所以button的高亮设置生效。

    值得强调一下的是,像我这个项目一样结构的同学要注意,tableview的cell为自定义,cell上有一个scrollview且可横向滑动。所以,我们要把tableview的delaysContentTouches属性设为NO,要把scrollview的delaysContentTouches设为NO,tableview在iOS7以后会有UITableViewWrapperView这个子视图,该视图也属于scrollview,所以要把这个对象的delaysContentTouches也要设为NO,总之不要遗漏button上的任何一个superview,还有superview的superview。。。(UITableViewWrapperView这个子视图很神秘,模拟器上没有,iOS7以上真机有,iOS12没有,适配范畴,有兴趣的同学可以了解一下~)

    tableView.delaysContentTouches = NO;

    for(idviewintableView.subviews) {

            if([viewrespondsToSelector:@selector(setDelaysContentTouches:)]){

                [viewsetDelaysContentTouches:NO];

            }

        }

    好了,大家以为这就完事了?NO,还差一点点,看下图:

    按钮区域不响应滑动事件

    按钮响应快速点击搞定了,但是,按钮触发区域内滑动失效。不卖关子直接上代码:

    - (BOOL)touchesShouldCancelInContentView:(UIView*)view{

         returnYES;

    }

    我们需要重写UIScrollview的这个方法来确保即使我们触到了UIControl类, 我们也希望拖动时能取消掉动作以便响应滚动动作。这样一来,我们的button既可快速点击有高亮效果,又不耽误scrollview的滑动。一举两得。

    效果如下:

    验收

    相关文章

      网友评论

        本文标题:UIScrollView上的UIButton点击高亮

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