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
    }
}
 

Part 15 - UIView's Installed Property

• If checked (true), the view will be installed on the user's device when downloaded from the App Store.
• An example of use is having two different images you want for different devices. One for iPhone, one for iPad. Instead of installing a small and large image on the person's device, you can just install one image per device.
  Example:
  Only install small image on iPhones.
  
  
  Only install large image on iPads.
  

(Xcode 8, Swift 3)

Part 13 - UIView's Autoresize Subviews Property

• Default is checked (true). Allows you to use the Autosizing for the UIView on the Size Inspector.
  Example:
  
• When unchecked (false), any Autoresizing settings on the Size Inspector has no effect.
  Example of this setting on and off:
  
• In code you use autoresizesSubviews property to set it to true or false.

(Xcode 8, Swift 3)

Part 12 - UIView's Clip To Bounds Property

• When unchecked (false), subviews in a UIView can extend outside the border of the parent UIView.
  Example:
  
• When checked (true), subviews will not be drawn beyond the border of the parent UIView. Subviews are clipped.
  Example:
  
• When checked (true), you cannot have a shadow on the UIView since the shadow is drawn outside the UIView's border.
• In code you refer to UIView.clipsToBounds.

Part 11 - UIView's Clear Graphics Context

• "Graphics Context" is defined by Apple as: "A graphics context represents a drawing destination."
• "Context" is like scope. In this case it is the bounds of the object.
• If true, clears what is drawn and redraws the view. Prevents visual artifacts from persisting after redrawing.
• Property is clearsContextBeforeDrawing in code.
• If unchecked you are responsible for redrawing.

Part 10 - UIView's Hidden Property

• Setting to true will hide the UIView and everything inside the UIView. (You can still see it on the storyboard though.)
• Set to true instead of changing Alpha to zero when you want to hide something.
• If you want to animate hiding/showing, use Alpha. Hidden is not animatable.
• All touch events are ignored when the UIView's hidden property is true.

Part 9 - UIView's Opaque Property

• Whether the Opaque property is true or false it will not hide/show the UIView.
• This property is simply a hint to the drawing system to improve performance when set to true. If it knows the UIView is opaque then it won't draw anything behind it.
• If Alpha is less than one, this property should be set to false.
• From Apple documentation: The opaque property has no effect in system-provided classes such as UIButton, UILabel, UITableViewCell, and so on.

Part 8 - UIView's Tint Property

• Visually indicates which controls are active or have actions associated with them.
• Use tintColor in code to set Tint.
  Example:

   
  view.tintColor = UIColor.red
   
  

• Setting Tint on a UIView changes the tint for all subviews.
  Example:
  
• You can override Tint set by the parent UIView by setting Tint on the control.
• Globally set Tint in the AppDelegate.
  Example:

   
  var window: UIWindow?
  
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
      
      window?.tintColor = UIColor.purple
      
      return true
  }
   
  

• Globally set Tint through Storyboard.
  Example:
  
• The non-transparent parts of a UIImage can use the Tint color.
  Change the "Render As" property to "Template Image". Done from the image in the Assets.xcassets:
  
  
• Note: As of Xcode 8, the tint will only show on the image during run-time, not design-time on the StoryBoard.

(Xcode 8)

Part 7 - UIView's Background Color Property

• Gives the UIView a color
• You can animate the color change
• Property in code is called backgroundColor
• You can set the Background color to an image:
  

   
  view.backgroundColor = UIColor(patternImage: UIImage(named: "myImage")!)
   
  

Part 4 - UIView's User Interaction Enabled Property

When the user touches the screen, this is called a "user interaction". For a UIView, this property is defaulted to true. In code this property is userInteractionEnabled.

Observations

• Unchecking this property for a button prevents that button from being touched.
• If a UIView has User Interaction Enabled set to false, touches will still pass through to the views below it.
  Example:
  
  
       A - A UIView with User Interaction Enabled set to false.
       B - A UIButton.
       The button can still be clicked.
• Animations set User Interaction Enabled to false during the animation.
• Setting User Interaction Enabled to false on a parent UIView will disable user interaction on all UIViews within the parent (all subviews).
  Example:
  
  
       The button will not work.

(Xcode 8, Swift 3.0)

Part 3 - UIView's Tag Property

The Tag property is a number and when used with the corresponding viewWithTag function one can access a specific subview without the need for an outlet.

Example

 
override func viewDidLoad() {
    super.viewDidLoad()
    
    let label = view.viewWithTag(1) as! UILabel
    label.text = "New text here"
}
 

Observations

• You can give the same Tag to multiple views
• The first view in the document outline matching the Tag number is selected when viewWithTag is used

(Swift 3.0)

Part 1 - UIView's Content Mode

I decided to go down and learn every property for the UIView on the Attributes Inspector. Part of the whole "leave nothing misunderstood" quest.

Content Mode

I think most of us know how this applies to the UIImageView control but what about just the UIView?

This took a lot of digging to understand this property.

Here are some things I've found out but none of which actually came from Apple:

• For an image view, this is talking about the position/scaling of image.
• For a UIView that draws its content, this is talking about the drawn content.
  • Like using UIBezierPath to draw paths.
• It does not affect the layout of subviews inside a UIView.

How is this property beneficial?

• I won't go into how it is beneficial for a UIImageView. Most of you probably already know and if you don't then check out this great article.
• Use this property when drawing a path and then handling how that path is then positioned/scaled when the UIView's bounds or frame changes.
• The idea is to save processing time on redrawing when UIView's bounds change.

More Info from Apple

Animation With Spring (Bounce)

Code Example

 
 
UIView.animate(withDuration: 0.2, 
    delay: 0, 
    usingSpringWithDamping: 0.5, 
    initialSpringVelocity: 0.5, 
    options: .curveEaseOut, 
    animations: {
    // Your animation
}, completion: nil)
 

Parameters

• withDuration - How long the animation should last
• delay - How long to wait until starting the animation
• usingSpringWithDamping - Applies damping to the spring (bounce). Using 1 will completely damp out the spring so the animation just slides into place and stops. Lower the damping for more bounce (example: 0.1 - 0.9).
• initialSpringVelocity - How fast you want the initial animation to happen. Using 1 will start it fast, 0 is normal. Apple says, "You'll typically want to pass 0 for the velocity."
• options:
  • curveEaseInOut - Start slow, speed up, then slow down
  • curveEaseIn - ("In" specifies the start of the animation) Start slow, speed up, then suddenly stop
  • curveEaseOut - ("Out" specifies the end of the animation) start fast, then slow down until stop
  • curveLinear - Constant speed throughout animation

(Xcode 8, Swift 3.0)

Menus in Your Apps

In these videos I show you two options for creating menus that slide out from the side. The main thing I'm doing is using a UIView and animating the movement to show a menu.