神刀安全网

iOS黑科技【动画特效篇-4】 浮动按钮–MovableButton

iOS黑科技【动画特效篇】第四期

本期带来一款实用性强同时又具备高B格的控件–浮动按钮,实现原理也不复杂,短短几行代码就能带来非常出色的用户体验!

iOS黑科技【动画特效篇-4】 浮动按钮--MovableButton
movableButton.gif

git来一波,和系统button创建方法一模一样,简单实用:
https://github.com/XMDashen/XMMovableButtonDemo.git

原理解析:

浮动按钮和系统按钮的最大区别就是一个可以移动,而另一个不可以…囧

所以要实现按钮的移动,直接继承UIButton,在button监听触摸移动事件里实现就可以啦

基本思路是将前后两次触摸移动的偏移量设置到button上,如果没有移动偏移量则判断为点击,调用点击事件

//移动时 - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {      [super touchesMoved:touches withEvent:event];      UITouch * touch = [touches anyObject];      //本次触摸点     CGPoint current = [touch locationInView:self];      //上次触摸点     CGPoint previous = [touch previousLocationInView:self];      CGPoint center = self.center;      //中心点移动触摸移动的距离     center.x += current.x - previous.x;     center.y += current.y - previous.y;      //限制移动范围     CGFloat screenWidth  = [UIScreen mainScreen].bounds.size.width;     CGFloat screenHeight = [UIScreen mainScreen].bounds.size.height;      CGFloat xMin = self.frame.size.width  * 0.5f;     CGFloat xMax = screenWidth  - xMin;      CGFloat yMin = self.frame.size.height * 0.5f+64;     CGFloat yMax = screenHeight - self.frame.size.height * 0.5f - 49;      if (center.x > xMax) center.x = xMax;     if (center.x < xMin) center.x = xMin;      if (center.y > yMax) center.y = yMax;     if (center.y < yMin) center.y = yMin;      self.center = center;      //移动距离大于0.5才判断为移动了(提高容错性)     if (current.x-previous.x>=0.5 || current.y - previous.y>=0.5) {          self.isMoved = YES;     } }

注意要限制button的移动范围不要超出屏幕拉不回来了。

用isMoved来记录button的移动状态,判断是否移动,为了提高容错性将移动距离判定为0.5用户体验较好(否则有时点击会产生微小的移动,判断为移动导致点击失效,用户会不高兴的(。•ˇ‸ˇ•。))。

//是否移动 @property (nonatomic,assign) BOOL isMoved;
//移动结束时 - (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {      if (!self.isMoved) {         //如果没有移动,则调用父类方法,触发button的点击事件         [super touchesEnded:touches withEvent:event];     }     self.isMoved = NO;      //回到一定范围 //    CGFloat screenWidth = [UIScreen mainScreen].bounds.size.width; //    CGFloat           x = self.frame.size.width * 0.5f; //     //    [UIView animateWithDuration:0.25f animations:^{ //        CGPoint center = self.center; //        center.x = self.center.x > screenWidth * 0.5f ? screenWidth - x : x; //        self.center = center; //    }];      //关闭高亮状态     [self setHighlighted:NO]; }

中间注释掉的实现的是button自动滚到屏幕边沿的功能(如阿里旺旺的悬浮球),靠近屏幕哪边就会自动滚到屏幕那边,不会影响用户屏幕中央的操作。

注意关闭按钮高亮,否则点击后会很难看,影响用户体验。

这一期就到这里了,亲们有什么意见和问题记得及时反馈哦,喜欢的话点个关注给个赞(づ ̄3 ̄)づ╭❤~
我们下期再会

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » iOS黑科技【动画特效篇-4】 浮动按钮–MovableButton

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址