iOS - 添加一个全局悬浮按钮

作者: 小蠢驴打代码 | 来源:发表于2018-03-08 23:16 被阅读1188次

背景介绍 :在普通的iOS开发组中,一般测试机都不止一台,但是我们在开发的时候,不可能每台测试机时刻保持最新的代码,这就出现了一个问题,当测试测出问题的时候,(或者产品突然拿去点点看的时候出了问题)如果不知道当前的版本,可能不确定是什么时候出的问题。

made in 小蠢驴的配图

解决方案:如果当前环境是测试服的时候,展示一个全局浮动标签,这样不仅看到此标志就告诉测试(包括我们自己)当前的环境,当出现问题的时候,通过标签,可以快速定位当前问题发生的版本号等等



需求设计图.png

思路:

  • 由于要全局显示,所以必须加在最上层(window层)
  • 由于需求图中有文字和背景图片,优先考虑UIButton(当然,如果有勇士非要用UIView,里面放imageView 和 label也o98k)
  • 由于此图片不是半透明,会挡住后面的内容,所以这个标签必须可以拖动 - 考虑添加拖拽手势
  • 本质上可以理解为,创建一个UIButton,为其添加拖拽手势,然后将其添加到UIWindow显示

知识1:按钮显示2行文字

//UIbutton的换行显示
button.titleLabel.lineBreakMode = NSLineBreakByWordWrapping;

//然后如同title的内容用包含“\n”就会换行
title = @“123\n666”

知识2:Version 与 Build号的获取

NSString *versionStr = [[[NSBundle
       mainBundle]infoDictionary]valueForKey:@"CFBundleShortVersionString"];
NSString *buildStr = [[[NSBundle
       mainBundle]infoDictionary]valueForKey:@"CFBundleVersion"];
image.png

知识3:控件的移动 - 本质上:坐标 ++

//拖动改变控件的水平方向x值
- (CGRect)changeXWithFrame:(CGRect)originalFrame point:(CGPoint)point{
    BOOL q1 = originalFrame.origin.x >= 0;
    BOOL q2 = originalFrame.origin.x + originalFrame.size.width <= screenW;
    
    if (q1 && q2) {
        originalFrame.origin.x += point.x;
    }
    return originalFrame;
}

//拖动改变控件的竖直方向y值
- (CGRect)changeYWithFrame:(CGRect)originalFrame point:(CGPoint)point{
    
    BOOL q1 = originalFrame.origin.y >= 0;
    BOOL q2 = originalFrame.origin.y + originalFrame.size.height <= screenH;
    if (q1 && q2) {
        originalFrame.origin.y += point.y;
    }
    return originalFrame;
}

知识4:控件的移动 - 越界处理(跑到屏幕外了)

//记录该button是否屏幕越界
        BOOL isOver = NO;
        if (frame.origin.x < 0) {
            frame.origin.x = 0;
            isOver = YES;
            
        } else if (frame.origin.x + frame.size.width > screenW) {
            frame.origin.x = screenW - frame.size.width;
            isOver = YES;
        }

        if (frame.origin.y < 0) {
            frame.origin.y = 0;
            isOver = YES;
            
        } else if (frame.origin.y+frame.size.height > screenH) {
            frame.origin.y = screenH - frame.size.height;
            isOver = YES;
        }
        
        if (isOver) {
            //如果越界-跑回来
            [UIView animateWithDuration:0.3 animations:^{
                self.frame = frame;
            }];
        }

知识5:封装需求 - 如果限制只能水平 or 竖直滑动 or 全局滑动

MNAssistiveTouchTypeNone = 0,         //没限制随便移动
MNAssistiveTouchTypeVerticalScroll,   //只能垂直移动
MNAssistiveTouchTypeHorizontalScroll, //只能竖直移动
  switch (type) {
        case MNAssistiveTouchTypeNone:
        {
            水平方向坐标 ++;
            竖直方向坐标 ++;
            break;
        }case MNAssistiveTouchTypeHorizontalScroll:{
            竖直方向坐标 ++;
            break;
        }
        case MNAssistiveTouchTypeVerticalScroll:{
            水平方向坐标 ++;
            break;
        }
    }

使用方法

0.下载demo文件
1.引入“MNAssistiveBtn”文件
2.进入“AppDelegate.m”
3.在 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{...} 方法中,添加以下两句代码
    //示例demo样式
    MNAssistiveBtn *btn = [MNAssistiveBtn mn_touchWithType:MNAssistiveTouchTypeHorizontalScroll
                                                     Frame:frame
                                                     title:title
                                                titleColor:[UIColor whiteColor]
                                                 titleFont:[UIFont systemFontOfSize:11]
                                           backgroundColor:nil
                                           backgroundImage:[UIImage imageNamed:@"test"]];
    [self.window addSubview:btn];

最终样式展示~

demo.gif

demo地址

喜欢的可以给个star,不胜感激~

相关文章

网友评论

  • afa38ae8399f:您好,我想问一下哈,我只让一个页面添加这个button,其他页面都不显示,可以不?
    afa38ae8399f:@小蠢驴打代码 我刚试了,可以,也可以添加到window上,然后移除就可以了哈哈
    小蠢驴打代码:@旺仔QQ糖 可以的,你添加到self.view上就只在当前界面显示了
  • Ade勿忘初心:您好,如果每个页面的单击事件都不一样,该怎么做了?
    程序员不务正业:每个页面设置一个全局tag值不就可以了
    Ade勿忘初心:@小蠢驴打代码 是同一个,但是每个页面的单击事件不一样
    小蠢驴打代码:你的意思是说不想做成全局的按钮是吗
  • Dayu大鱼:楼主你好 , 无法监听点击事件是怎么回事 ?
    Dayu大鱼:@小蠢驴打代码 好的
    小蠢驴打代码:@yqMe 你好,这个问题已经解决,请更新最新的代码~
  • Brade_Tong:这个怎么实现可以左右任意放的呢?现在是单边的可以移动,要是想两边呢?
    小蠢驴打代码:@Brade_Tong 你好,这个问题解决了,贴边之后还可以移动了,你可以下载最新代码看下~
    Brade_Tong:@小蠢驴打代码 嗯嗯我明白这个枚举的,不过改成了MNAssistiveTouchTypeNone以后就是任意在屏幕上移动,我是想说那种效果,就是只能在两边,一直都是贴边的意思。手一放开会自动去最近的边上的。而不是停留在中间 这样的效果
    小蠢驴打代码://MNAssistiveTouchTypeNone 表示可以随便移动,是个枚举类型,知识点5有写~
    MNAssistiveBtn *btn = [MNAssistiveBtn mn_touchWithType: MNAssistiveTouchTypeNone
    Frame:frame
    title:title
    titleColor:[UIColor whiteColor]
    titleFont:[UIFont systemFontOfSize:11]
    backgroundColor:nil
    backgroundImage:[UIImage imageNamed:@"test"]];
    [self.window addSubview:btn];
  • 天蓬大元:楼主,你好。当button沿着屏幕上下滑动时,此时改成左右滑动,会失效。是否是楼主故意所为,还是。。。。
    天蓬大元:@小蠢驴打代码 我觉得没必要,一个方面是如果用户拖动按钮到屏幕外,当用户停止拖动后,按钮会自动回到屏幕内,而且采用了动画处理,用户体验不会差。二,如果用户使用时发现上下拖动然后左右移动失效,会造成不好的用户体验。毕竟目前没有业务需在要求我们这么做。
    小蠢驴打代码:@天蓬大元 是的,你找的没错,这里主要是限制按钮只能在界面内显示,不然移出了屏幕就看不到了:joy:
    天蓬大元:// BOOL q1 = originalFrame.origin.x >= 0;
    // BOOL q2 = originalFrame.origin.x + originalFrame.size.width <= screenW;
    // if (q1 && q2) {
    // originalFrame.origin.x += point.x;
    // }
    这个关于边界的限制会导致滑动时x<0的时候,左右的滑动失效
  • PGOne爱吃饺子:楼主,你好,如果在你这个demo的基础上,如果再弹出一个图层,也是添加到最外层的window上面,会不会出现问题啊,因为你之前的最外层的上面已经添加了视图了
    小蠢驴打代码:@PGOne爱吃饺子 理论上是不会,因为比如你弹出alertController,调用的方法是present VC,并不是将alertController添加到window上,图层不同,window还是最上层的
    PGOne爱吃饺子:楼主,估计你是误会我的意思了,我的意思是,如果此时在界面上在展示一个蒙版,就像弹出一个alert一样,那样的话,这个button也应该被盖住了吧
    小蠢驴打代码:你是说你是类似`[UIApplication sharedApplication].keyWindow.rootViewController = vc;`之后,这个新的vc覆盖在demo上导致demo的button不显示的情况吗?
    如果是这个原因,因为window也是一个图层,你加完button,图层上有button,但是之后又有一个新的view 添加上去的话,view又会盖在button上方,导致button不显示。
    所以解决办法有:
    1. appdelegate.m中,如果你设置了`[UIApplication sharedApplication].keyWindow.rootViewController = vc;`,就在这个之后设置demo浮动显示
    2.如果你能保证启动的控制器一定是比如demoVC这个控制器的话,你可以去demoVC中,设置demo中的样式,这样只要demoVC一加载,可以保证demoButton会添加在demoVC上层;

本文标题:iOS - 添加一个全局悬浮按钮

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