swift uipickerview height change not working

Question

I know this questions has been asked multiple times, but I have followed most of the links in stack overflow but no answer seems to work. Also I saw somewhere that only 3 heights are allowed that too are above 160 which I don't want in my case. So please suggest a workaround

This are the codes I have tried

//this label doesn't matter
let classLabel: UILabel = {
    let label = UILabel()
    label.text = "Select Class"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

//first try
var classPicker = UIPickerView(frame: CGRect(x: 0.0, y: 0.0, width:
30.0, height: 30.0))

//second try
var classPicker: UIPickerView = {
    let picker = UIPickerView(frame: CGRect(x: 0.0, y: 0.0, width: 10.0, height: 10.0))
    picker.translatesAutoresizingMaskIntoConstraints = false
    return picker
}()

//third 
lazy var chooseClass: UIStackView = {
    classPicker.clipsToBounds = true
    classPicker.heightAnchor.constraint(equalToConstant: 30.0)
    let stackView: UIStackView = UIStackView(arrangedSubviews: [self.classLabel, self.classPicker])
    stackView.axis = .horizontal
    stackView.distribution = .fillEqually
    stackView.alignment = .fill
    stackView.spacing = 10.0
    stackView.translatesAutoresizingMaskIntoConstraints = false
    return stackView
}()

 //and then

 chooseClass.heightAnchor.constraint(equalToConstant: 30.0)

Also I have tried answers from this link but it didn't work How to change UIPickerView height

@RakeshaShastri no other anchors although 2 constraints when i add it in the view like this self.view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-16-[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": chooseClass])) — Shivam Pokhriyal, Aug 17 '18 at 18:48
@RakeshaShastri it is just a label, you can have guessed from the screenshot attached. BTW added the code in the question itself. — Shivam Pokhriyal, Aug 17 '18 at 19:04
So you want the stackview to have a height of 30? Is that it? — Rakesha Shastri, Aug 17 '18 at 19:07
@RakeshaShastri Please see the screenshot and read the question, i want the height of UIPickerView to be small like 30, and i did changes for that but it is not working right now as you can see in the screenshot, the picker is appearing large, i want to decrease this height. No matter how i achieve this be it changing height of stackview or any other possible workaround, all i want is to decrease the height of UIPickerView. Also i have clearly stated in the question itself that i have tried these codes to achieve what i want but didn't got expected result which is *small height of UIPicker* — Shivam Pokhriyal, Aug 17 '18 at 19:26
Do you mean the row height? The height of each cell in the picker? — Rakesha Shastri, Aug 17 '18 at 19:30
@RakeshaShastri I mean the height of Entire UIPickerView. not row i haven't used the word row anywhere. Please suggest a way to decrese the *height of whole UIPickerView* — Shivam Pokhriyal, Aug 17 '18 at 19:32
you can check the answer posted. I have tested the code. It works fine. — Rakesha Shastri, Aug 17 '18 at 19:42

Rakesha Shastri · Accepted Answer · 2018-08-17T19:58:58.223

3

You need to change the stackView alignment to .center. Then you can add witdth and height anchors as needed as long as it satisfies the stackView conditions.

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    lazy var classLabel: UILabel = {
        let label = UILabel(frame: .zero)
        label.text = "Select Class"
        return label
    }()

    lazy var classPicker: UIPickerView = {
        let pickerView = UIPickerView(frame: .zero)
        pickerView.delegate = self
        pickerView.dataSource = self
        return pickerView
    }()

    lazy var chooseClass: UIStackView = {
        let stackView: UIStackView = UIStackView(frame: .zero)
        stackView.axis = .horizontal
        stackView.distribution = .fillEqually
        stackView.alignment = .center
        stackView.spacing = 10.0
        return stackView
    }()

    var dataSource = [1,2,3,4]

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .white

        view.addSubview(chooseClass)
        chooseClass.translatesAutoresizingMaskIntoConstraints = false
        chooseClass.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        chooseClass.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        chooseClass.heightAnchor.constraint(equalToConstant: 50).isActive = true
        chooseClass.widthAnchor.constraint(equalToConstant: UIScreen.main.bounds.width).isActive = true

        classPicker.heightAnchor.constraint(equalToConstant: 30).isActive = true
        chooseClass.addArrangedSubview(classLabel)
        chooseClass.addArrangedSubview(classPicker)
    }

    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return dataSource.count
    }

    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let label = UILabel()
        label.text = String(dataSource[row])
        label.font = UIFont.systemFont(ofSize: 12, weight: .medium)
        return label
    }

}

I have used viewForRow delegate because at height 30 the titles using titleForRow are cropped at the top and bottom. You should take care of alignment issues, etc. This does what you ask - change the height of the pickerView to 30 while maintaining the stackView height.

edited Aug 17 '18 at 19:58

answered Aug 17 '18 at 19:39

Rakesha Shastri

11,053
3
37
50

@ShivamPokhriyal yes. What error are you getting. Do not change anything from my answer. Just create an instance of the class and use it to see that it is working. You have added constraints, frames,etc here and there in your question. Those are all not needed. – Rakesha Shastri Aug 17 '18 at 19:51
Also is it necessary to add subviews to Stackview 2 times first while creating it and second after adding constraint to it? Although it didn't solved the issue – Shivam Pokhriyal Aug 17 '18 at 19:52
I am not getting any error, just that the size hasn't changed a bit – Shivam Pokhriyal Aug 17 '18 at 19:53
@ShivamPokhriyal i have added label once and pickerview once to the stackview. I do not understand what you are saying. – Rakesha Shastri Aug 17 '18 at 19:53
@ShivamPokhriyal Can you run the code as it is first and check? – Rakesha Shastri Aug 17 '18 at 19:54
1

let stackView: UIStackView = UIStackView(arrangedSubviews: [self.classLabel, self.classPicker]) this line and chooseClass.addArrangedSubview(classLabel) chooseClass.addArrangedSubview(classPicker) these lines are these necessary.. Gimme some time to run your code – Shivam Pokhriyal Aug 17 '18 at 19:56
@ShivamPokhriyal ah i did not notice that. Adding it in the initialization is not required. Keep the one in the `viewDidLoad`. I have edited the answer. Good catch! – Rakesha Shastri Aug 17 '18 at 19:58
Hey thanks man, really awesome.. i had few other constraints that were causing problem i think and once i removed all of them then your solution is working. Thanks a lot, i was stuck in this since yesterday – Shivam Pokhriyal Aug 17 '18 at 20:02
@ShivamPokhriyal No worries. Happy to help :) – Rakesha Shastri Aug 17 '18 at 20:03
I did accepted and upvoted your solution though it might not reflect cuz of my low reps :-) Just one thing can you also explain how this works like what did i missed? – Shivam Pokhriyal Aug 17 '18 at 20:04
Haha no worries. I got the points for accepting. Stackviews basically handle all the layout by the properties you set in the stackview (the distribution, axis, etc) So i recommend you read the Apple guide on stackview. Even the mouse over tooltips are helpful. The 1 thing that you should be careful about is not to give constraints so that it conflicts with the stackview constraints. Also, you should activate your constraints which you don't seem to have done in your question. And you should not go around adding constraints everywhere. Mostly it is done in viewDidLoad after adding to the view. – Rakesha Shastri Aug 17 '18 at 20:07
Thanks, i think i have added lots of constraints here and there to make it work but it only made it worse and more messy. – Shivam Pokhriyal Aug 17 '18 at 20:10
@ShivamPokhriyal Just keep posting questions when you run into roadblocks. Also do not add image links to the question, add it as an image. – Rakesha Shastri Aug 17 '18 at 20:13

swift uipickerview height change not working

1 Answers1