Spell Checker iOS Tutorial

The UITextChecker object can be used to spell-check a string. In this tutorial a few words will be displayed inside a Table View. When the words are selected, they will be checked for spelling, the background color will change to green if the spelling is correct, otherwise the background color will change to red. This tutorial is made in Xcode 10 and built for iOS 12.

Open Xcode and create a new Single View Application. For product name, use IOSSpellingCheckerTutorial and then fill out the Organization Name and Organization Identifier with your customary values. Enter Swift as Language and choose Next.

Remove the View Controller from the Storyboard and drag a Navigation Controller to the empty canvas. This will also include a Table view Controller. When the initial View Controller is deleted there isn't a starting point defined. Select the Navigation Controller and go to the Attribute Inspector. In the View Controller Section  select the "Is Initial View Controller" checkbox.

Double-click on the Navigation Bar in The Table View Controller and set the title to "Choose the correct spelling".  Select the Table View Cell and go to the Attributes Inspector. In the Table View Cell section set the Identifier  to "C ell" .

The Storyboard should look like this.

Since we have deleted the View Controller from the Storyboard we can also delete the ViewController.swift file. Add a new file to the project, select iOS->Source->Cocoa Touch Class. Name it TableViewController and make it a subclass of UITableViewController.

The TableViewController class needs to be linked to The Table View Controller object in the Storyboard. Select it and go the Identity Inspector. In the Custom Class section change the class to TableViewController

..

Go to the TableViewController.swift file and add the following property

let words = ["devalopment", "development","devellopment"]

This array of strings will be displayed inside the Table View. Next, alter the predefined delegate methods.

override func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return words.count
}

  
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
  let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)

  cell.textLabel?.text = words[indexPath.row]
  cell.textLabel?.backgroundColor = UIColor.clear

  return cell
}

The Table View has one section and three rows from the words array. The background color of the cell will be set to a clear color, because later on the background color of the cell will be changed. When the user selects a row from the Table View the tableView(_:didSelectRowAtIndexPath:)  delegate method will be called.

override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
  if let cell = tableView.cellForRow(at: indexPath) {
    let currentWord = cell.textLabel?.text
    if let currentWord = currentWord {
      if wordIsSpelledCorrect(word: currentWord) {
        cell.backgroundColor = UIColor.green
      } else {
        cell.backgroundColor = UIColor.red
      }

      tableView.reloadData()
    }
  }
}

The word from the selected cell will be checked for spelling. If this word is spelled correctly. the cell's background will be green, otherwise it will be red. The actual spelling checker will be done in the wordIsSpelledCorrect method. 

func wordIsSpelledCorrect(word: String) -> Bool {
  let checker = UITextChecker()
  let range = NSRange(location: 0, length: word.count)
  let wordRange = checker.rangeOfMisspelledWord(in: word, range: range, startingAt: 0, wrap: false, language: "en")

  return wordRange.location == NSNotFound
}

The UITextChecker class can be used to check a string for the right spelling. a range is created which include the whole word. The rangeOfMisspelledWord(in:range:startingAt:wrap:language:) method is used to check the range for errors. If a word is spelled correctly a NSNotFound is returned from this method so the return value will be a boolean with the value of true, otherwise the value will be false.

Build and Runthe project, select the rows, if the word is spelled correctly the background color will change to green. otherwise it is misspelled and the background color will change to red.

You can download the source code of the IOSSpellingCheckerTutorial at the ioscreator repository on Github .