iOS選擇器元件

專注精彩發表於2018-05-14
iOS元件

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 install 或 pod 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 檔案。

相關文章