Search code examples
iosswiftuitableviewuipickerview

customize uipickerview inside uitableviewcell


I have a fully functional UIPickerView inside a UITableViewCell and would like to accomplish two things.

The UIPickerView displays 4 components, but the first will be seldom referred to. As a result, I would like to either A (preferred) have it display a blank for 0 and scroll to 1, or B modify the color so the 0 is not so dominant.

Secondly, I would like to hide the UIPickerView until selected.

I found both options, but all reside in a UIViewController and do not work within a UITableViewCell.

import UIKit

class DiveDurationTableViewCell: UITableViewCell, UIPickerViewDelegate, UIPickerViewDataSource

{
    @IBOutlet var textfieldBizCat: UITextField!
    @IBOutlet var pickerBizCat: UIPickerView! = UIPickerView()


    // ---------------------------------------------------------------------------------------------
    // MARK: - Internal Constant

    let numberOfComponents: Int             = 4
    let FirstDigitComponentRows: Int        = 2
    let SecondDigitComponentRows: Int       = 10
    let ThirdDigitComponentRows: Int        = 10
    let DisplayMinuteComponentRows: Int     = 1

    let Minutes: String                     = "Min"
    let MinNumber                           = 0
    let MaxNumber                           = 9


    private var diveTime: Array<Int>        = [Int]()

    var FirstDigit: Int                     = 0
    var SecondDigit: Int                    = 0
    var ThirdDigit: Int                     = 0
    var DisplayMinutes: String              = "Min"


    // ---------------------------------------------------------------------------------------------
    // MARK: - IBOutlets

    @IBOutlet var diveTimePicker: UIPickerView!


    // ---------------------------------------------------------------------------------------------
    // MARK: - UITableVieCell Methods


    //
    //  Called when we are initialized from a storyboard or nib file.
    //
    override func awakeFromNib()
    {
        super.awakeFromNib()


        //
        //  We create an array of integers from 0 to 9.
        //

        for i in self.MinNumber ..< self.MaxNumber+1
        {
            self.diveTime.append(i)
        }

        self.diveTimePicker.selectRow(0, inComponent: 0, animated: true)
        self.diveTimePicker.selectRow(0, inComponent: 1, animated: true)
        self.diveTimePicker.selectRow(0, inComponent: 2, animated: true)

    }

    //
    //  The item has been selected in the table.
    //

    override func setSelected(selected: Bool, animated: Bool)
    {
        super.setSelected(selected, animated: animated)
    }



    // ---------------------------------------------------------------------------------------------
    // MARK: - UIPickerViewDataSource Methods


    //
    //  Number of components in the picker.
    //

    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int
    {
        return self.numberOfComponents
    }

    //
    //  Number of rows in each component.
    //
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int
    {
        if component == 0
        {
            return self.FirstDigitComponentRows
        } else if component == 1   {
            return self.SecondDigitComponentRows
        } else if component == 2   {
            return self.ThirdDigitComponentRows
        } else  {
            return self.DisplayMinuteComponentRows
        }
    }

    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String?
    {

        if component == 0
        {
            return String(self.diveTime[row])
        }
        if component == 1
        {
            return String(self.diveTime[row])
        }
        if component == 2
        {
            return String(self.diveTime[row])
        }

        else
        {
         return self.DisplayMinutes
            }
        }


    //
    //  The user has selected in item in the picker view.
    //
    func pickerView(pickerView: UIPickerView, didSelectRow row: Int, inComponent component: Int)
    {
    }
}

UPDATE: I am not asking how to create a picker view, as the above code works great. I am only asking how to customize it to make it more attractive.


Solution

  • UITableView is subclass of UIScrollview and UIPicker is scrollview too, you need handle a lot of thing to make both of them work together. First thing is when you make scroll on UITableview cell with Picker, which one is first response? If Picker is first response and the size of picker is too big such as big as device screen, you will not able to scroll table view anymore. If tableview is first response, you can't scroll Picker because table view will scroll. I suggest you add Picker View as subview of tableview/controller.view at position/frame of cell that you want to add Picker before, try to fake like Picker inside tableview cell.