Customizing Appearance of iOS Composite Controls

An example of a "composite control" is a Search Bar.
If you want to customize one of the controls in the composite control and there is no direct property for it, then you can use the UIAppearance protocol that controls implement.

Example

 
let textfieldsInSearchBars = UITextField.appearance
    (whenContainedInInstancesOf: [UISearchBar.self])
textfieldsInSearchBars.tintColor = .lightGray
textfieldsInSearchBars.backgroundColor = .darkGray
textfieldsInSearchBars.textColor = .lightGray
 

(Swift 3)

iOS Tinder-Like Swipe - Part 1- UIPanGestureRecognizer (Xcode 8, Swift 3)

Create Tinder-like swiping in your app. This was a fun tutorial series to make. Hope you enjoy it!

Also, a viewer pointed out something that can make the dragging of the card code a little simpler.

Instead of:

 
let point = sender.translation(in: view)
card.center = CGPoint(x: view.center.x + point.x, y: view.center.y + point.y)
 

You can just do:

 
card.center = sender.location(in: view)
 

Easy!

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.

Adding Done Button to Keyboard

In this example I use a UIToolBar to contain the done button but you can use any UIView to assign to inputAccessoryView.

 
class ViewController: UIViewController {

    @IBOutlet weak var nameTextField: UITextField!
    @IBOutlet weak var phoneNumberTextField: UITextField!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let keyboardToolBar = UIToolbar()
        keyboardToolBar.sizeToFit()
        
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: 
            UIBarButtonSystemItem.flexibleSpace, target: nil, action: nil)
        let doneButton = UIBarButtonItem(barButtonSystemItem: 
            UIBarButtonSystemItem.done, target: self, action: #selector(self.doneClicked) )
        
        keyboardToolBar.setItems([flexibleSpace, doneButton], animated: true)
        
        nameTextField.inputAccessoryView = keyboardToolBar
        phoneNumberTextField.inputAccessoryView = keyboardToolBar
    }

    func doneClicked() {
        view.endEditing(true)
    }
}
 

Here is an example of using a Navigation Bar:

 
let navItem = UINavigationItem()
let doneBtn = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.done, 
    target: self, action: #selector(self.doneClicked))
navItem.rightBarButtonItem = doneBtn

let navBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: view.frame.width, 
    height: 44))
navBar.pushItem(navItem, animated: true)

nameTextField.inputAccessoryView = navBar
phoneNumberTextField.inputAccessoryView = navBar
 

(Xcode 8, Swift 3.0)

Custom TableView Section Headers

There are two ways you can add custom tableview section headers:

• Build a view in code
• Dequeue a prototype cell from the storyboard

In both cases 2 delegate methods must be implemented:

1. viewForHeaderInSection
2. heightForHeaderInSection

Building a View in Code

 
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let view = UIView()
    view.backgroundColor = UIColor.orange
    
    let image = UIImageView(image: sectionImages[section])
    image.frame = CGRect(x: 5, y: 5, width: 35, height: 35)
    view.addSubview(image)
    
    let label = UILabel()
    label.text = sectionTitles[section]
    label.frame = CGRect(x: 45, y: 5, width: 100, height: 35)
    view.addSubview(label)

    return view
}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    return 60
}
 

Dequeuing a Prototype Cell

 
func tableView(_ tableView: UITableView, viewForHeaderInSection section: Int) -> UIView? {
    let cell = tableView.dequeueReusableCell(withIdentifier: "headerCell") as! HeaderCell

    cell.headerImage.image = sectionImages[section]
    cell.headerLabel.text = sectionTitles[section]

    return cell
}

func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {
    switch section {
    case 0,2:
        return 45
    default:
        return 60
    }
}
 

(Xcode 8, Swift 3.0)

Refresh Control on TableView

You can use the table view's new refreshControl property to set your UIRefreshControl.

 
override func viewDidLoad() {
    super.viewDidLoad()
    
    tableView.delegate = self
    tableView.dataSource = self
    
    refreshControl.addTarget(self, action: #selector(ViewController.refreshData), 
        for: UIControlEvents.valueChanged)
    
    if #available(iOS 10.0, *) {
        tableView.refreshControl = refreshControl
    } else {
        tableView.addSubview(refreshControl)
    }
}

func refreshData() {
    // Refresh data code
    
    tableView.reloadData()
    refreshControl.endRefreshing()
}
 

(Xcode 8, Swift 3.0)

Refresh Control on Collection View

You can use the new refreshControl property on the UICollectionView to assign your UIRefreshControl.

 

override func viewDidLoad() {
    super.viewDidLoad()
        
    collectionView.delegate = self
    collectionView.dataSource = self
        
    refreshControl.addTarget(self, action: #selector(CollectionVC.refreshData), 
        for: UIControlEvents.valueChanged)
    refreshControl.attributedTitle = NSAttributedString(string: "Refresh Collection View",
        attributes: nil)
        
    if #available(iOS 10.0, *) {
        collectionView.refreshControl = refreshControl
    } else {
        collectionView.addSubview(refreshControl)
    }
}
    
func refreshData() {
    // Your get data code
        
    collectionView.reloadData()
    refreshControl.endRefreshing()
}

 

(Xcode 8, Swift 3.0)