A swift game of words, part I

I wanted to create a simple app to make learning vocab for my kids a little more fun and at the same time use the new drag and drop methods in iOS 11.

I ended up with this and thought I would share it with you.

Image for post
Image for post
A simple drag and drop game

You have two tabs, the first is intended to provide an area you can type and edit words in, it is a simple tableview. The second jumbles the letters in each of the words you have entered in the tableview presenting them one by one, inviting the user to re-arrange the letters to get the spelling right.

Of course its not perfect; I didn’t put the editing in the tableview yet and it doesn’t tell you when you got it correct, but the barebones are there and besides which I didn’t want to make this article too long. Long rambling technical tutorials I just not my thing.

How does it work, here goes. First you need a pick tab based app in Xcode, and having created it go to the VC managing the first tab. Within which you can add the following code.

var myTableView: UITableView = UITableView()

It’s all pretty vanilla code, perhaps the most important aspect the common swift class data file it references, within which I put the core data structure a simple array.

var itemsToLoad: [String] = [“dog”, “cat”, “mat”,”sat”]

A technic rightly or wrongly I find myself using again and again. Moving ahead to the second tab’s View Controller, you need to start off by creating the button to switch data sets. You do so with this code.

override func viewDidLoad() {

The firstRun bool ensures it is created just once; the button itself cycles around the itemsToLoad array of words and presents them to be unscrambled thru the loadScramble method one by one.

The code for loadScamble mthod in the meantime looks like this. We start with a stackview, to which we add the letters individually for each word to fixed sizes boxes.

func loadScramble(word2L: Int) {
whiteWin = UIStackView()
whiteWin.axis = UILayoutConstraintAxis.horizontalwhiteWin.distribution = UIStackViewDistribution.equalSpacing
whiteWin.alignment = UIStackViewAlignment.center
whiteWin.spacing = 8.0
self.view.addSubview(whiteWin)
whiteWin.translatesAutoresizingMaskIntoConstraints = false
whiteWin.centerYAnchor.constraint(equalTo: self.view.centerYAnchor).isActive = true

We also add the new drag and drop delegate interactions [don’t forget to add the delegates to the class method].

Which brings us to the new code part, the drag and drop methods.

var dragLocation: UIView!

The drag method captures the source label and the text on it and passes across to the drop method, the drop makes the swap. And there you have it. I will finish the tableview in the coming days and add some code to check the answers, will post a followup story to this one.

Written by

Coding for 35+ years, enjoying using and learning Swift/iOS development. Writer @ Better Programming, @The StartUp, @Mac O’Clock, Level Up Coding & More

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store