Side Scrolling UIPIckerView

The scrolling temperature is a UIPickerView rotated on its side. Here is what is happening here:

• Rotate the UIPickerView 90°
• Rotate the view inside each row 90°
• Reverse the data populated into the picker
• Resize the rotated picker so it extends beyond the view. This makes the horizontal scroller fill the entire width

Here's the code:

 
class ViewController: UIViewController {

    @IBOutlet weak var picker: UIPickerView!
    
    var data: [String] = ["60°", "61°", "62°", "63°", "64°", "65°","66°", "67°", "65°", "63°", "59°", "57°"]
    var times: [String] = ["9:00", "10:00", "11:00", "12:00", "13:00", "14:00","15:00", "16:00", "17:00", "18:00", "19:00", "20:00"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        picker.transform = CGAffineTransform(rotationAngle: 90 * (.pi/180))
        picker.frame = CGRect(x: -100, y: view.frame.height - 120, width: view.frame.width + 200, height: 100)

        data.reverse()
        times.reverse()
        
        picker.dataSource = self
        picker.delegate = self
        
        picker.selectRow(data.count - 3, inComponent: 0, animated: false)
    }

    override func viewDidLayoutSubviews() {
        for subview in picker.subviews{
            if subview.frame.origin.y != 0{
                subview.isHidden = true
            }
        }
    }
}

extension ViewController: UIPickerViewDataSource {
    // Like number of columns
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return data.count
    }
}

extension ViewController: UIPickerViewDelegate {
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return data[row]
    }
    
    func pickerView(_ pickerView: UIPickerView, rowHeightForComponent component: Int) -> CGFloat {
        return 100
    }
    
    func pickerView(_ pickerView: UIPickerView, viewForRow row: Int, forComponent component: Int, reusing view: UIView?) -> UIView {
        let view = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
        
        let label = UILabel(frame: CGRect(x: 5, y: 0, width: view.frame.width, height: view.frame.height))
        label.text = data[row]
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 45, weight: UIFontWeightThin)
        view.addSubview(label)
        
        let time = UILabel(frame: CGRect(x: 0, y: 85, width: view.frame.width, height: 15))
        time.text = times[row]
        time.textAlignment = .center
        time.font = UIFont.systemFont(ofSize: 14, weight: UIFontWeightThin)
        view.addSubview(time)
        
        view.transform = CGAffineTransform(rotationAngle: -90 * (.pi/180))
        
        return view
    }
}
 

Storyboard Tips - Use Command Equals to Resize to Fit (iOS, Xcode 8)

One of my favorite storyboard tips - using Command + Equals (=) to resize a control to fit the text.

How to Make Animations Bounce (Spring Animations) (iOS, Xcode 8, Swift 3)

Learn some really simple and cool animations that you can do today to give your users a better experience in your app!

Storyboard Tips - Command Drag (iOS, Xcode 8, Swift 3)

Hold down COMMAND key while dragging an object on the Storyboard so it will not drop inside other UIViews.

Basic UIPickerView Template

I am using extensions here just so you can see which functions belong to which protocols.

 
class ViewController: UIViewController {

    @IBOutlet weak var picker: UIPickerView!
    
    var data: [String] = ["Row 1", "Row 2", "Row 3"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        picker.dataSource = self
        picker.delegate = self
    }
}

extension ViewController: UIPickerViewDataSource {
    // Like number of columns
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }

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

extension ViewController: UIPickerViewDelegate {
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return data[row]
    }
}
 

(Swift 3)

Fun Animations with CGAffineTransform (Scale, Rotate, Reposition) Tutori...

In this video I will take you through and teach you how easy it is to do multiple animations using CGAffineTransform. I will even explain what "Affine" means. :D

How to Create Animation Chains - UIView.animate (iOS, Xcode 8, Swift 3)

Need to do multiple animations, one after another? This video will show you a pretty good way on how to accomplish this using UIView.animate with the completion block.