iOS Form 表单

363 阅读2分钟

这是一个类似个人信息维护页面的列表页面。列表项左边展示标题,右边展示用户输入或选择的内容。

解决思路:

  1. 列表的cell 通用化

  2. 在VC中放置一个activeTextField,每次当用户想输入信息时,把activeTextField 放置到用户点击的那个cell 中。

  3. 在用户输入完,或选择完信息后,用一个通用的赋值函数,把值保存到用户信息model 中

  4. 演示.gif

  5. 使用范例(可以让这个VC 更关注业务逻辑本身,只需花极少的经历到form样式和交互上):


	class PersonInfoVC: BaseFormVC {
    
    /// tableView 数据源
    var datasource = [LTitleRContentModel]()
    
    /// 个人信息,从网络获取后可以替换
    var emergecyModel = PersonInfoModel()
    
    /// 选择性别
    lazy var sexAlertC = { () -> UIAlertController in
        let alertC = UIAlertController(title: "selectGender", message: "", preferredStyle: .alert)
        guard activeIndexpath != nil else {return alertC}
        let alertAm = UIAlertAction(title: "man", style: .default) {[weak self] (action) in
            guard let strongSelf = self else {return}
            let cellGneder:FormTableCell = strongSelf.tableView.cellForRow(at: strongSelf.activeIndexpath!) as! FormTableCell
            cellGneder.setTextFieldText(newText: action.title!)
            strongSelf.configureModel(newValue: "1", forIndexpath: strongSelf.activeIndexpath!)
        }
        let alertAf = UIAlertAction(title: "woman", style: .default) {[weak self] (action) in
            guard let strongSelf = self else {return}
            let cellGneder:FormTableCell = strongSelf.tableView.cellForRow(at: strongSelf.activeIndexpath!) as! FormTableCell
            cellGneder.setTextFieldText(newText: action.title!)
            strongSelf.configureModel(newValue: "2", forIndexpath: strongSelf.activeIndexpath!)
        }
        alertC.addAction(alertAm)
        alertC.addAction(alertAf)
        return alertC
    }()
    override func viewDidLoad() {
        super.viewDidLoad()
        self.title = "个人信息"
    }
    
    override func confifgureSubviews() {
        super.confifgureSubviews()
    }
    
    override func registCellClass() {
        self.tableView.register(FormTableCell.classForCoder(), forCellReuseIdentifier: FormTableCell.cellReuseIdentifier())
    }
    
    /// table 数据配置
    override func configuredatasource() {
        datasource.removeAll()
        let model0 = LTitleRContentModel(leftTitle: "name", rightContent: emergecyModel.truename, isNessery: true, contentType: .normalCharInput, placeHold: "placehold_cardName")
        datasource.append(model0)
        let model1 = LTitleRContentModel(leftTitle:  "relationShip", rightContent: emergecyModel.relation_des, isNessery: true, contentType: .normalCharInput, placeHold: "PersonInfo_placehold_relation")
        datasource.append(model1)
        let model2 = LTitleRContentModel(leftTitle: "gender", rightContent: emergecyModel.zone_tel, isNessery: true, contentType: .selectItem, placeHold: "select gender")
        datasource.append(model2)
        let model3 = LTitleRContentModel(leftTitle: "phone", rightContent: emergecyModel.phone, isNessery: true, contentType: .mobileInput, placeHold: "placehold_phoneNumber")
        datasource.append(model3)
        let model4 = LTitleRContentModel(leftTitle: "address", rightContent: emergecyModel.proviceCityAreaString, isNessery: true, contentType: .normalCharInput, placeHold: "placehold_proviceCity")
        datasource.append(model4)
        let model5 = LTitleRContentModel(leftTitle: "name", rightContent: emergecyModel.truename, isNessery: true, contentType: .normalCharInput, placeHold: "placehold_cardName")
        datasource.append(model5)
        let model6 = LTitleRContentModel(leftTitle:  "relationShip", rightContent: emergecyModel.relation_des, isNessery: true, contentType: .normalCharInput, placeHold: "PersonInfo_placehold_relation")
        datasource.append(model6)
        let model7 = LTitleRContentModel(leftTitle: "gender", rightContent: emergecyModel.zone_tel, isNessery: true, contentType: .selectItem, placeHold: "select gender")
        datasource.append(model7)
        let model8 = LTitleRContentModel(leftTitle: "phone", rightContent: emergecyModel.phone, isNessery: true, contentType: .mobileInput, placeHold: "placehold_phoneNumber")
        datasource.append(model8)
        let model9 = LTitleRContentModel(leftTitle: "address", rightContent: emergecyModel.proviceCityAreaString, isNessery: true, contentType: .normalCharInput, placeHold: "placehold_proviceCity")
        datasource.append(model9)
        self.tableView.reloadData()
    }
    
    override func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }

    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return datasource.count
    }

    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let formTableCell: FormTableCell  = tableView.dequeueReusableCell(withIdentifier: FormTableCell.cellReuseIdentifier(), for: indexPath) as! FormTableCell
        let model: LTitleRContentModel = self.datasource[indexPath.row]
        formTableCell.updateView(withModel: model)
        return formTableCell
    }
    
    override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        activeTextField.resignFirstResponder()
        activeIndexpath = indexPath
        switch indexPath.row {
        case 0, 1, 3, 4, 5, 6, 8, 9:
            inputString()
        case 2, 7:
            selectItem()
        default:
            return
        }
    }
    
    /// 用户输入
    override func inputString() {
        tableView.scrollToRow(at: activeIndexpath!, at: .middle, animated: true)
        guard let cell: FormTableCell = tableView.cellForRow(at: activeIndexpath!) as? FormTableCell else {return}
        cell.addActiveTextF(newTextF: activeTextField)
    }
    
    /// 用户选择
    override func selectItem() {
        self.present(sexAlertC, animated: true, completion: nil)
    }
    
    /// 选中的数据赋值
    /// - Parameters:
    ///   - newValue: newValue description
    ///   - forIndexpath: forIndexpath description
    override func configureModel(newValue: String?, forIndexpath: IndexPath) {
        switch forIndexpath.row {
        case 0, 5:
            emergecyModel.truename = newValue ?? ""
        case 1, 6:
            emergecyModel.relation_des = newValue ?? ""
        case 2, 7:
            emergecyModel.gender = Int(newValue ?? "0") ?? 0
        case 3, 8:
            emergecyModel.phone = newValue ?? ""
        case 4, 9:
            emergecyModel.proviceCityAreaString = newValue ?? ""
        default:
           return
        }
    }
}

  1. demo url:github.com/gree180160/…