iOS 控件定制iOSiOS控件使用大全

UIPickerView封装,具有多种类型"单列数据,

2017-03-21  本文已影响215人  蚂蚁安然

ConvenientPickerView

一款方便的PickerView,通过简单的代码设置可以实现UIPickerView,无需代理设置,回收之后还会移除,可以设置有两种弹出,一种是UITextField弹出的,另一种是直接弹出.

anran.gif

如何使用ConvenientPickerView

  1. 这里使用这个PickerView最重要的是数据源,一定要是这种数据源
  let singleData = ["swift", "ObjecTive-C", "C", "C++", "java", "php", "python", "ruby", "js"]
  // 每一列为数组
  let multipleData = [["1天", "2天", "3天", "4天", "5天", "6天", "7天"],["1小时", "2小时", "3小时", "4小时", "5小时"],  ["1分钟","2分钟","3分钟","4分钟","5分钟","6分钟","7分钟","8分钟","9分钟","10分钟"]]

  // 注意这个数据的格式!
  let multipleAssociatedData: [[[String: [String]?]]] = [// 数组

  [   ["交通工具": ["陆地", "空中", "水上"]],//字典
      ["食品": ["健康食品", "垃圾食品"]],
      ["游戏": ["益智游戏", "角色游戏"]]
      
  ],// 数组
  
  [   ["陆地": ["公交车", "小轿车", "自行车"]],
      ["空中": ["飞机"]],
      ["水上": ["轮船"]],
      ["健康食品": ["蔬菜", "水果"]],
      ["垃圾食品": ["辣条", "不健康小吃"]],
      ["益智游戏": ["消消乐", "消灭星星"]],
      ["角色游戏": ["lol", "cf"]]
      
  ]
]

2.. ConvenientPickerView提供了多种类方法,我们可以通过类方法直接调用

        ConvenientPickerView.showSingleColPicker("单列数据",
                                                 data: singleData,
                                                 defaultSelectedIndex: 2) { [unowned self]
                                                    (selectIndex, selectValue) in
                                                    self.selectedLabel.text = "选中了第\(selectIndex)行----选中的数据为\(selectValue)"
        }
        ConvenientPickerView.showMultipleColsPicker("多列不关联数据",
                                                    data: multipleData,
                                                    defaultSelectedIndexs: [0,1,2]) {[unowned self] (selectedIndexs, selectedValues) in
                                                        self.selectedLabel.text = "选中了第\(selectedIndexs)行----选中的数据为\(selectedValues)"
        }
        // 注意这里设置的是默认的选中值, 而不是选中的下标,省得去数关联数组里的下标
        ConvenientPickerView.showMultipleAssociatedColsPicker("多列关联数据", data: multipleAssociatedData, defaultSelectedValues: ["交通工具","陆地","自行车"]) {[unowned self] (selectedIndexs, selectedValues) in
            self.selectedLabel.text = "选中了第\(selectedIndexs)行----选中的数据为\(selectedValues)"
        }
        // 注意设置默认值得时候, 必须设置完整, 不能进行省略 ["四川", "成都", "成华区"] 比如不能设置为["四川", "成都"]
        // ["北京", "通州"] 不能设置为["北京"]
         ConvenientPickerView.showCitiesPicker("省市区选择",
                                              defaultSelectedValues:  ["北京", "/", "/"],
                                              selectTopLevel: true) { [unowned self] (selectedIndexs, selectedValues) in
                                                // 处理数据
                                                let combinedString = selectedValues.reduce("", { (result, value) -> String in
                                                    result + " " + value
                                                })
                                                
                                                self.selectedLabel.text = "选中了第\(selectedIndexs)行----选中的数据为\(combinedString)"
        }
       ConvenientPickerView.showDatePicker("日期选择") {[unowned self] ( selectedDate) in
           let formatter = DateFormatter()
           formatter.dateFormat = "yyyy-MM-dd"
           let string = formatter.string(from: selectedDate)
           self.selectedLabel.text = "选中了的日期是\(string)"
       }

3.. ConvenientPickerView关于UITextField的弹出

        // 代码生成
        let test = PickerTextField(frame: CGRect(x: 20, y: timeTextField.frame.maxY, width: 340, height: 28))
        test.borderStyle = .roundedRect
        test.placeholder = "代码初始化"
        test.showSingleColPicker("测试代码", data: singleData, defaultSelectedIndex: 0, autoSetSelectedText: true) { [unowned self] (textField, selectedIndex, selectedValue) in
            print(selectedValue)
            self.selectedDataLabel.text = selectedValue
        }
        view.addSubview(test)
       // 使用Xib的情况:    
       @IBOutlet weak var singleTextField: PickerTextField!
       // 如果设置了autoSetSelectedText为true 将自动设置text的值, 默认以空格分开多列选择, 但你仍然可以在响应完成的closure中修改text的值
       singleTextField.showSingleColPicker("编程语言选择", data: singleData, defaultSelectedIndex: 2, autoSetSelectedText: true) {[unowned self] (textField, selectedIndex, selectedValue) in
            //  可以使用textField 也可以使用 self.singleTextField
            textField.text = "选中了第\(selectedIndex)行----选中的数据为\(selectedValue)"
            self.selectedDataLabel.text = "选中了第\(selectedIndex)行----选中的数据为\(selectedValue)"
            
        }

书写思路

  1. 我将工具栏单独封装为ToolBarView

  2. PickeView为单独的View

  3. 最后在ConvenientPickerView, PickerTextField中调用快速构建代码

总结

本文是在仿写大神的Demo,通过练习封装来提高自己的技术,这里有完成的代码,如果你觉得不错的话,给一个星星源码

上一篇下一篇

猜你喜欢

热点阅读