iOS選擇器元件

專注精彩發表於2018-05-14

1. 框架介紹

BRPickerView 封裝的是iOS中常用的選擇器元件。高度封裝,只需一句程式碼即可完成呼叫,使用比較靈活支援自定義主題顏色。選擇器型別主要包括:日期選擇器、時間選擇器、地址選擇器、自定義字串選擇器。

框架地址:github.com/91renb/BRPi…

特別提示】:

  • 當前最新版本為: 2.2.1
  • 如果不能找到最新版本,請先執行一下 pod setup ,待更新完成後;再執行 pod search BRPickerView 進行搜尋,就會看到最新版本。

2. 效果演示

檢視並執行 BRPickerViewDemo.xcodeproj

效果圖1
效果圖2
框架Demo執行效果圖1 框架Demo執行效果圖2

3. 更新記錄

  • 2018-04-27(V2.2.1):

    • 修復bug,適配iPad和橫屏顯示。
    • 優化程式碼,提高框架適應性,降低記憶體消耗。
  • 2018-04-03(V2.2.0):

    • 時間選擇器新新增了7種顯示型別(BRDatePickerMode),可根據自己專案的需求選擇性使用。
    • 適配橫屏,及 iPhoneX 底部安全區域。
    • 修改了最小時間和最大時間的引數名稱(以前版本是傳 NSString 型別, 現在傳 NSDate 型別)
    • 修復比較時間大小時出現的bug。
  • 2018-03-19(V2.1.3):

    • 修改地址選擇器確認選擇後的回撥引數。
    • 現修改如下:可通過省市區的模型獲取省市區的 name(名稱)、code(id)、index(索引)resultBlock:^(BRProvinceModel *province, BRCityModel *city, BRAreaModel *area) {}
    • 去掉第三方依賴庫 MJExtension ,修改為手動解析地址資料來源。
  • 2018-03-11(V2.1.2):

    • 重新命名了Github使用者名稱,更新專案相關的路徑。(提示:pod之前的版本不受影響)
  • 2018-02-28(V2.1.1)

    • 修復某些情況下無法用bundle載入本地資料來源(BRCity.plist)bug。
  • 2018-01-26(V2.1.0):

    • 給地址選擇器新增了一個方法(見方法4),提供資料來源引數,支援外部傳入地區資料來源。
    • 提示:要注意資料來源格式,參考 BRCity.json。可以把 BRCity.json 檔案的內容放到後臺去維護,通過後臺介面獲取地區資料來源(即 BRCity.json 檔案的內容)。
  • 2018-01-25(V2.0.0)

    • 更新了地址資料來源(BRCity.plist),地區資訊是2018年最新最全的,與微信的地區資訊完全一致。
    • 支援自定義預設選擇地址(格式:@[@"浙江省", @"杭州市", @"西湖區"]),支援下次點選進入地址選擇器時,預設地址為上次選擇的結果。
    • 修改了日期選擇器、地址選擇器、字串選擇器的介面方法(刪除了之前的方法2)。
    • 新增了地址選擇器顯示型別,支援3種顯示:只顯示省份、顯示省份和城市、顯示省市區。
  • 2018-01-05(V1.3.0):

    • 新增取消選擇的回撥方法(點選背景或取消按鈕會執行 cancelBlock

    • 合併了字串選擇器 陣列資料來源和plist資料來源對應的方法,dataSource 引數支援兩種型別:

      1> 可以直接傳陣列:NSArray型別;

      2> 可以傳plist檔名:NSString型別,帶字尾名,plist檔案的內容必須是陣列格式。

  • 2018-01-02(V1.2.0)

    • 新增支援自定義主題顏色的方法。
  • 2017-11-26(V1.1.0)

    • 更換第三方依賴庫。

      用MJExtension 替換了 原來的YYModel,以前沒有注意匯入YYModel,同時又匯入YYKit會導致重複匯入而衝突(另外使用YYModel時,手動匯入和pod匯入 其中的標頭檔案和方法名也不一樣,所以很容易出錯)。

  • 2017-11-16(V1.0.0)

    • 初始版本!

4. 安裝

4.1. CocoaPods

  1. 在 Podfile 中新增 pod 'BRPickerView'

  2. 執行 pod installpod update

  3. 匯入標頭檔案 #import <BRPickerView.h>

4.2. 手動匯入

  1. 將與 README.md 同級目錄下的 BRPickerView 資料夾拽入專案中

  2. 匯入標頭檔案 #import "BRPickerView.h"

5. 系統要求

  • iOS 8.0+
  • ARC

6. 使用

6.1. 時間選擇器:BRDatePickerView

​ 檢視 BRDatePickerView.h 標頭檔案,裡面提供了3個方法,可根據自己的需求選擇其中的一個方法進行使用。

/**
 *  1.顯示時間選擇器
 *
 *  @param title            標題
 *  @param dateType         日期顯示型別
 *  @param defaultSelValue  預設選中的時間(值為空/值格式錯誤時,預設就選中現在的時間)
 *  @param resultBlock      選擇結果的回撥
 *
 */
+ (void)showDatePickerWithTitle:(NSString *)title
                       dateType:(BRDatePickerMode)dateType
                defaultSelValue:(NSString *)defaultSelValue
                    resultBlock:(BRDateResultBlock)resultBlock;

/**
 *  2.顯示時間選擇器(支援 設定自動選擇 和 自定義主題顏色)
 *
 *  @param title            標題
 *  @param dateType         日期顯示型別
 *  @param defaultSelValue  預設選中的時間(值為空/值格式錯誤時,預設就選中現在的時間)
 *  @param minDate          最小時間,可為空(請使用 NSDate+BRPickerView 分類中和顯示型別格式對應的方法建立 minDate)
 *  @param maxDate          最大時間,可為空(請使用 NSDate+BRPickerView 分類中和顯示型別格式對應的方法建立 maxDate)
 *  @param isAutoSelect     是否自動選擇,即選擇完(滾動完)執行結果回撥,傳選擇的結果值
 *  @param themeColor       自定義主題顏色
 *  @param resultBlock      選擇結果的回撥
 *
 */
+ (void)showDatePickerWithTitle:(NSString *)title
                       dateType:(BRDatePickerMode)dateType
                defaultSelValue:(NSString *)defaultSelValue
                        minDate:(NSDate *)minDate
                        maxDate:(NSDate *)maxDate
                   isAutoSelect:(BOOL)isAutoSelect
                     themeColor:(UIColor *)themeColor
                    resultBlock:(BRDateResultBlock)resultBlock;

/**
 *  3.顯示時間選擇器(支援 設定自動選擇、自定義主題顏色、取消選擇的回撥)
 *
 *  @param title            標題
 *  @param dateType         日期顯示型別
 *  @param defaultSelValue  預設選中的時間(值為空/值格式錯誤時,預設就選中現在的時間)
 *  @param minDate          最小時間,可為空(請使用 NSDate+BRPickerView 分類中和顯示型別格式對應的方法建立 minDate)
 *  @param maxDate          最大時間,可為空(請使用 NSDate+BRPickerView 分類中和顯示型別格式對應的方法建立 maxDate)
 *  @param isAutoSelect     是否自動選擇,即選擇完(滾動完)執行結果回撥,傳選擇的結果值
 *  @param themeColor       自定義主題顏色
 *  @param resultBlock      選擇結果的回撥
 *  @param cancelBlock      取消選擇的回撥
 *
 */
+ (void)showDatePickerWithTitle:(NSString *)title
                       dateType:(BRDatePickerMode)dateType
                defaultSelValue:(NSString *)defaultSelValue
                        minDate:(NSDate *)minDate
                        maxDate:(NSDate *)maxDate
                   isAutoSelect:(BOOL)isAutoSelect
                     themeColor:(UIColor *)themeColor
                    resultBlock:(BRDateResultBlock)resultBlock
                    cancelBlock:(BRDateCancelBlock)cancelBlock;
複製程式碼
  • 使用示例(參考Demo):
NSDate *minDate = [NSDate br_setYear:1990 month:3 day:12];
NSDate *maxDate = [NSDate date];
[BRDatePickerView showDatePickerWithTitle:@"出生日期" dateType:BRDatePickerModeYMD defaultSelValue:weakSelf.birthdayTF.text minDate:minDate maxDate:maxDate isAutoSelect:YES themeColor:nil resultBlock:^(NSString *selectValue) {
    weakSelf.birthdayTF.text = selectValue;
} cancelBlock:^{
    NSLog(@"點選了背景或取消按鈕");
}];
複製程式碼
  • 時間選擇器的顯示型別:
/// 彈出日期型別
typedef NS_ENUM(NSInteger, BRDatePickerMode) {
    // --- 以下4種是系統自帶的樣式 ---
    // UIDatePickerModeTime
    BRDatePickerModeTime,              // HH:mm
    // UIDatePickerModeDate
    BRDatePickerModeDate,              // yyyy-MM-dd
    // UIDatePickerModeDateAndTime
    BRDatePickerModeDateAndTime,       // yyyy-MM-dd HH:mm
    // UIDatePickerModeCountDownTimer
    BRDatePickerModeCountDownTimer,    // HH:mm
    // --- 以下7種是自定義樣式 ---
    // 年月日時分
    BRDatePickerModeYMDHM,      // yyyy-MM-dd HH:mm
    // 月日時分
    BRDatePickerModeMDHM,       // MM-dd HH:mm
    // 年月日
    BRDatePickerModeYMD,        // yyyy-MM-dd
    // 年月
    BRDatePickerModeYM,         // yyyy-MM
    // 年
    BRDatePickerModeY,          // yyyy
    // 月日
    BRDatePickerModeMD,         // MM-dd
    // 時分
    BRDatePickerModeHM          // HH:mm
};
複製程式碼
  • 時間選擇器顯示型別的效果圖:

以下4種樣式是使用 UIDatePicker 類 進行封裝的,支援迴圈滾動

樣式1:UIDatePickerModeTime
樣式2:UIDatePickerModeDate
樣式1:BRDatePickerModeTime 樣式2:BRDatePickerModeDate
樣式3:UIDatePickerModeDateAndTime
樣式4:UIDatePickerModeCountDownTimer
樣式3:BRDatePickerModeDateAndTime 樣式4:BRDatePickerModeCountDownTimer

以下7種樣式是使用 UIPickerView 類 進行封裝的。

樣式5: BRDatePickerModeYMDHM
樣式6: BRDatePickerModeMDHM
樣式5: BRDatePickerModeYMDHM 樣式6: BRDatePickerModeMDHM
樣式7: BRDatePickerModeYMD
樣式8: BRDatePickerModeYM
樣式7: BRDatePickerModeYMD 樣式8: BRDatePickerModeYM
樣式9: BRDatePickerModeY
樣式10: BRDatePickerModeMD
樣式9: BRDatePickerModeY 樣式10: BRDatePickerModeMD
樣式11:BRDatePickerModeHM
樣式11: BRDatePickerModeHM

6.2. 地址選擇器:BRAddressPickerView

​ 檢視 BRAddressPickerView.h 標頭檔案,裡面提供了4個方法,可根據自己的需求選擇其中的一個方法進行使用。

/**
 *  1.顯示地址選擇器
 *
 *  @param defaultSelectedArr       預設選中的值(傳陣列,如:@[@"浙江省", @"杭州市", @"西湖區"])
 *  @param resultBlock              選擇後的回撥
 *
 */
+ (void)showAddressPickerWithDefaultSelected:(NSArray *)defaultSelectedArr
                                 resultBlock:(BRAddressResultBlock)resultBlock;

/**
 *  2.顯示地址選擇器(支援 設定自動選擇 和 自定義主題顏色)
 *
 *  @param defaultSelectedArr       預設選中的值(傳陣列,如:@[@"浙江省", @"杭州市", @"西湖區"])
 *  @param isAutoSelect             是否自動選擇,即選擇完(滾動完)執行結果回撥,傳選擇的結果值
 *  @param themeColor               自定義主題顏色
 *  @param resultBlock              選擇後的回撥
 *
 */
+ (void)showAddressPickerWithDefaultSelected:(NSArray *)defaultSelectedArr
                                isAutoSelect:(BOOL)isAutoSelect
                                  themeColor:(UIColor *)themeColor
                                 resultBlock:(BRAddressResultBlock)resultBlock;

/**
 *  3.顯示地址選擇器(支援 設定選擇器型別、設定自動選擇、自定義主題顏色、取消選擇的回撥)
 *
 *  @param showType                 地址選擇器顯示型別
 *  @param defaultSelectedArr       預設選中的值(傳陣列,如:@[@"浙江省", @"杭州市", @"西湖區"])
 *  @param isAutoSelect             是否自動選擇,即選擇完(滾動完)執行結果回撥,傳選擇的結果值
 *  @param themeColor               自定義主題顏色
 *  @param resultBlock              選擇後的回撥
 *  @param cancelBlock              取消選擇的回撥
 *
 */
+ (void)showAddressPickerWithShowType:(BRAddressPickerMode)showType
                      defaultSelected:(NSArray *)defaultSelectedArr
                         isAutoSelect:(BOOL)isAutoSelect
                           themeColor:(UIColor *)themeColor
                          resultBlock:(BRAddressResultBlock)resultBlock
                          cancelBlock:(BRAddressCancelBlock)cancelBlock;

/**
 *  4.顯示地址選擇器(支援 設定選擇器型別、傳入地區資料來源、設定自動選擇、自定義主題顏色、取消選擇的回撥)
 *
 *  @param showType                 地址選擇器顯示型別
 *  @param dataSource               地區資料來源
 *  @param defaultSelectedArr       預設選中的值(傳陣列,如:@[@"浙江省", @"杭州市", @"西湖區"])
 *  @param isAutoSelect             是否自動選擇,即選擇完(滾動完)執行結果回撥,傳選擇的結果值
 *  @param themeColor               自定義主題顏色
 *  @param resultBlock              選擇後的回撥
 *  @param cancelBlock              取消選擇的回撥
 *
 */
+ (void)showAddressPickerWithShowType:(BRAddressPickerMode)showType
                           dataSource:(NSArray *)dataSource
                      defaultSelected:(NSArray *)defaultSelectedArr
                         isAutoSelect:(BOOL)isAutoSelect
                           themeColor:(UIColor *)themeColor
                          resultBlock:(BRAddressResultBlock)resultBlock
                          cancelBlock:(BRAddressCancelBlock)cancelBlock;
複製程式碼
  • 使用示例(參考Demo):
// 【轉換】:以@" "子字串為基準將字串分離成陣列,如:@"浙江省 杭州市 西湖區" ——》@[@"浙江省", @"杭州市", @"西湖區"]
NSArray *defaultSelArr = [weakSelf.addressTF.text componentsSeparatedByString:@" "];
[BRAddressPickerView showAddressPickerWithShowType:BRAddressPickerModeArea defaultSelected:defaultSelArr isAutoSelect:YES themeColor:nil resultBlock:^(BRProvinceModel *province, BRCityModel *city, BRAreaModel *area) {
    weakSelf.addressTF.text = [NSString stringWithFormat:@"%@ %@ %@", province.name, city.name, area.name];
} cancelBlock:^{
    NSLog(@"點選了背景檢視或取消按鈕");
}];
複製程式碼
  • 地址選擇器的3種顯示型別(showType 的3個列舉值):
省份
城市
樣式1:BRAddressPickerModeProvince 樣式2:BRAddressPickerModeCity
地區
樣式3:BRAddressPickerModeArea

6.3. 自定義字串選擇器:BRStringPickerView

​ 檢視 BRStringPickerView.h 標頭檔案,裡面提供了3個方法,可根據自己的需求選擇其中的一個方法進行使用。

/**
 *  1.顯示自定義字串選擇器
 *
 *  @param title            標題
 *  @param dataSource       資料來源(1.直接傳陣列:NSArray型別;2.可以傳plist檔名:NSString型別,帶字尾名,plist檔案內容要是陣列格式)
 *  @param defaultSelValue  預設選中的行(單列傳字串,多列傳一維陣列)
 *  @param resultBlock      選擇後的回撥
 *
 */
+ (void)showStringPickerWithTitle:(NSString *)title
                       dataSource:(id)dataSource
                  defaultSelValue:(id)defaultSelValue
                      resultBlock:(BRStringResultBlock)resultBlock;

/**
 *  2.顯示自定義字串選擇器(支援 設定自動選擇 和 自定義主題顏色)
 *
 *  @param title            標題
 *  @param dataSource       資料來源(1.直接傳陣列:NSArray型別;2.可以傳plist檔名:NSString型別,帶字尾名,plist檔案內容要是陣列格式)
 *  @param defaultSelValue  預設選中的行(單列傳字串,多列傳一維陣列)
 *  @param isAutoSelect     是否自動選擇,即選擇完(滾動完)執行結果回撥,傳選擇的結果值
 *  @param themeColor       自定義主題顏色
 *  @param resultBlock      選擇後的回撥
 *
 */
+ (void)showStringPickerWithTitle:(NSString *)title
                       dataSource:(id)dataSource
                  defaultSelValue:(id)defaultSelValue
                     isAutoSelect:(BOOL)isAutoSelect
                       themeColor:(UIColor *)themeColor
                      resultBlock:(BRStringResultBlock)resultBlock;

/**
 *  3.顯示自定義字串選擇器(支援 設定自動選擇、自定義主題顏色、取消選擇的回撥)
 *
 *  @param title            標題
 *  @param dataSource       資料來源(1.直接傳陣列:NSArray型別;2.可以傳plist檔名:NSString型別,帶字尾名,plist檔案內容要是陣列格式)
 *  @param defaultSelValue  預設選中的行(單列傳字串,多列傳一維陣列)
 *  @param isAutoSelect     是否自動選擇,即選擇完(滾動完)執行結果回撥,傳選擇的結果值
 *  @param themeColor       自定義主題顏色
 *  @param resultBlock      選擇後的回撥
 *  @param cancelBlock      取消選擇的回撥
 *
 */
+ (void)showStringPickerWithTitle:(NSString *)title
                       dataSource:(id)dataSource
                  defaultSelValue:(id)defaultSelValue
                     isAutoSelect:(BOOL)isAutoSelect
                       themeColor:(UIColor *)themeColor
                      resultBlock:(BRStringResultBlock)resultBlock
                      cancelBlock:(BRStringCancelBlock)cancelBlock;
複製程式碼
  • 使用示例(參考Demo):
// 自定義單列字串
//NSArray *dataSource = @[@"大專以下", @"大專", @"本科", @"碩士", @"博士", @"博士後"];
NSString *dataSource = @"testData1.plist"; // 可以將資料來源(上面的陣列)放到plist檔案中
[BRStringPickerView showStringPickerWithTitle:@"學歷" dataSource:dataSource defaultSelValue:weakSelf.educationTF.text isAutoSelect:YES themeColor:nil resultBlock:^(id selectValue) {
    weakSelf.educationTF.text = selectValue;
} cancelBlock:^{
    NSLog(@"點選了背景檢視或取消按鈕");
}];

// 自定義多列字串
NSArray *dataSource = @[@[@"第1周", @"第2周", @"第3周", @"第4周", @"第5周", @"第6周", @"第7周"], @[@"第1天", @"第2天", @"第3天", @"第4天", @"第5天", @"第6天", @"第7天"]];
//NSString *dataSource = @"testData3.plist"; // 可以將資料來源(上面的陣列)放到plist檔案中
NSArray *defaultSelArr = [weakSelf.otherTF.text componentsSeparatedByString:@","];
[BRStringPickerView showStringPickerWithTitle:@"自定義多列字串" dataSource:dataSource defaultSelValue:defaultSelArr isAutoSelect:YES themeColor:RGB_HEX(0xff7998, 1.0f) resultBlock:^(id selectValue) {
    weakSelf.otherTF.text = [NSString stringWithFormat:@"%@,%@", selectValue[0], selectValue[1]];
} cancelBlock:^{
    NSLog(@"點選了背景檢視或取消按鈕");
}];
複製程式碼
  • 字串選擇器效果圖:
自定義單列字串
自定義多列字串
單列字串選擇器(預設主題色樣式) 雙列字串選擇器(自定義主題色樣式)
3列效果圖
4列效果圖
3列字串選擇器(自定義主題色樣式) 4列字串選擇器(自定義主題色樣式)

7. 許可證

BRPickerView 使用 MIT 許可證,詳情見 LICENSE 檔案。

相關文章