iOS中一款高度可定製性商品計數按鈕(京東/淘寶/餓了麼/美團外賣/百度外賣樣式)

jkpang發表於2019-03-04
iOS

iOS中一款高度可定製性商品計數按鈕(京東/淘寶/餓了麼/美團外賣/百度外賣樣式),使用簡單!

PPNumberButton (Objective-C版本)

PPNumberButtonSwift (swift版本)

因為之前的專案中需要,在網上找了好多都不符合要求,最後乾脆自己擼了一個,現在分享出來,希望能幫到有需要的人。

  • 支援自定義加/減按鈕的標題內容、背景圖片;
  • 支援設定邊框顏色;
  • 支援使用鍵盤輸入;
  • 支援長按加/減按鈕快速加減;
  • 支援block回撥與delegate(代理)回撥;
  • 支援使用xib建立、直接在IB皮膚設定相關屬性;
  • 支援設定maxValue(最大值)與minValue(最小值).

  • 支援按鈕自定義為京東/淘寶樣式,餓了麼/美團外賣/百度外賣樣式;

    iOS中一款高度可定製性商品計數按鈕(京東/淘寶/餓了麼/美團外賣/百度外賣樣式)
    PPNumberButton.gif

Usage 使用方法

一、使用程式碼建立

[[PPNumberButton alloc] init];:預設的frame為CGRectMake(0, 0, 110, 30)
或
[[PPNumberButton alloc] initWithFrame:frame];
或
[PPNumberButton numberButtonWithFrame:frame];: 類方法建立

1.自定義加減按鈕文字標題

    PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 100, 110, 30)];
    // 開啟抖動動畫
    numberButton.shakeAnimation = YES;
    // 設定最小值
    numberButton.minValue = 2;
    // 設定最大值
    numberButton.maxValue = 10;
    // 設定輸入框中的字型大小
    numberButton.inputFieldFont = 23;
    numberButton.increaseTitle = @"＋";
    numberButton.decreaseTitle = @"－";

    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };
    [self.view addSubview:numberButton];複製程式碼

2.邊框狀態

    PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 160, 150, 30)];
    //設定邊框顏色
    numberButton.borderColor = [UIColor grayColor];
    numberButton.increaseTitle = @"＋";
    numberButton.decreaseTitle = @"－";

    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };

    [self.view addSubview:numberButton];複製程式碼

3.自定義加減按鈕背景圖片

    PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 220, 100, 30)];
    numberButton.shakeAnimation = YES;
    numberButton.increaseImage = [UIImage imageNamed:@"increase_taobao"];
    numberButton.decreaseImage = [UIImage imageNamed:@"decrease_taobao"];

    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };

    [self.view addSubview:numberButton];複製程式碼

4.餓了麼,美團外賣,百度外賣樣式

    PPNumberButton *numberButton = [PPNumberButton numberButtonWithFrame:CGRectMake(100, 280, 100, 30)];
    // 初始化時隱藏減按鈕
    numberButton.decreaseHide = YES;
    numberButton.increaseImage = [UIImage imageNamed:@"increase_meituan"];
    numberButton.decreaseImage = [UIImage imageNamed:@"decrease_meituan"];

    numberButton.numberBlock = ^(NSString *num){
        NSLog(@"%@",num);
    };

    [self.view addSubview:numberButton];複製程式碼

二、使用xib建立

在控制器介面拖入UIView控制元件,在右側的設定欄中將class名修改為PPNumberButton,按回車就OK了.

iOS中一款高度可定製性商品計數按鈕(京東/淘寶/餓了麼/美團外賣/百度外賣樣式)
示例圖1

注意!如果有的同學將控制元件拖線到程式碼中,千萬不要忘記在拖線的程式碼檔案中匯入”PPNumberButton.h”標頭檔案,否則會報錯

可以在IB介面設定相關屬性

iOS中一款高度可定製性商品計數按鈕(京東/淘寶/餓了麼/美團外賣/百度外賣樣式)
示例圖2

因為之前的專案中需要,在網上找了好多都不符合要求,乾脆自己花了點時間擼了一個,現在分享出來,希望能幫到有需要的人。如果你覺得不錯,希望點個Star鼓勵一下

你的Star是我持續更新的動力!

相關文章