iOS - 新增一個全域性懸浮按鈕(整合pods版)

小蠢驢打程式碼發表於2019-01-31
iOS

背景介紹 ：在普通的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


整合方法

1.CocoaPods : pod 'MNFloatBtn'

2.手動匯入 : 拖入MNFloatBtn資料夾

使用方法

  1. 匯入標頭檔案,#import <MNFloatBtn/MNFloatBtn.h>
  2. 一行程式碼,顯示懸浮按鈕
  • 任何情況都顯示懸浮按鈕
[MNFloatBtn show];
複製程式碼

  • 僅在Debug模式下顯示懸浮按鈕(推薦使用)
[MNFloatBtn showDebugModeWithType:MNAssistiveTypeNone];
複製程式碼

  • 移除懸浮按鈕在介面上顯示
[MNFloatBtn hidden];
複製程式碼
  • 按鈕點選事件
[MNFloatBtn sharedBtn].btnClick = ^(UIButton *sender) {

	NSLog(@" btn.btnClick ~");
    
};
複製程式碼

進階用法:

  • 預設顯示當前日期
[[MNFloatBtn sharedBtn] setBuildShowDate:YES];
複製程式碼
  • 配置api環境顯示

#define kAddress            @"testapi.miniLV.com"
//#define kAddress            @"devapi.miniLV.com"
//#define kAddress            @"api.miniLV.com"
    
//自己配置 - 什麼api環境下，要顯示什麼標籤
NSDictionary *envMap = @{
                         @"測試":@"testapi.miniLV.com",
                         @"開發":@"devapi.miniLV.com",
                         @"生產":@"api.miniLV.com"
                         };
                             
//設定不同環境下，要展示的不同title，以及當前的Host
[[MNFloatBtn sharedBtn]setEnvironmentMap:envMap currentEnv:kAddress]; 
    
複製程式碼

demo地址

喜歡的可以給個star，不勝感激~

相關文章