When you create a macOS Cocoa Application project, you project starts out with a Window Controller and a View Controller.
The Window Controller defines the actual window that appears on the screen but the View Controller defines the contents that appears inside the Window Controller. You need to place user interface items like buttons and text fields on the View Controller so when your program runs, these user interface items appear on the View Controller, which appears inside the Window Controller.
A View Controller represents a simple window, but Xcode offers several other types of view controllers such as a Page Controller, a Split View Controller, and a Tab View Controller. If you want any of these other types of controllers to appear inside the Window Controller, you need to follow two steps:
- Delete the currently existing View Controller
- Add the new controller you want to put in its place such as a Tab View Controller or Page Controller
To delete the existing View Controller, you need to delete both the View Controller in the storyboard and the ViewController.swift file. To delete the ViewController.swift file in the Navigator pane, just right-click over it and when a popup menu appears, choose Delete.
To delete the View Controller from the storyboard, select the View Controller by clicking the Show Document Outline icon and then clicking on View Controller Scene in the Document Outline. Then press Backspace or choose Edit > Delete.
Initially the contents of the Window Controller displayed View Controller but now it should display No Content View Controller.
Now drag another controller from the Object Library window to the storyboard such as Page Controller or Vertical Split Controller. This will place a new controller on the storyboard but now you’ll need to connect this newly added controller to appear inside the Window Controller.
Click on the blue icon that appears in the top, middle of the Window Controller. Hold down the Control key and Control-drag over the new controller you just added.
Release the Control key and the left mouse/trackpad button. A popup menu appears.
Choose window content. Your newly added controller now displays a connecting arrow to show that it appears inside the existing Window Controller.
Posted in macOS, User Interface, Xcode
A menu bar app is a macOS program that does not display its icon on the Dock when running or show its pull-down menus in the upper left corner of the screen. Instead, a menu bar app displays a title or icon in the upper right corner of the screen so it’s available when you need it. A typical menu bar app is the volume control icon that lets you adjust the volume or the Time Machine icon that lets you access Time Machine.
To create a menu bar app, follow the instructions in this earlier blog post. This post shows how to create a menu bar that displays a text title on the menu bar. In this post, you’ll learn how to use an icon instead.
First, you need to create an icon that’s 32 by 32 pixels in size. As an alternative to creating your own icon, you can visit Flaticon, a site that offers royalty-free icons. You can either purchase a subscription to this site or if you want to use an icon for free, you must give credit to the creator of the icon.
Icons should be stored in the .png file format. Whether you create an icon or download one from a site like Flaticon, the first step is to drag it into the Assets.xcassets folder of your Xcode project.
Click on your icon file name and choose View > Utilities > Show Attributes Inspector.
Make sure the “Mac” check box is selected and all other check boxes are clear.
Change the Render As popup menu to Template image.
Make sure your graphic image appears in the 2x box.
Remember the exact name of your icon file such as “egyptian-cat” without the .png file extension.
If you followed the first part about creating a menu bar app, you used code like this:
This code creates a text title on the menu bar. Delete this line and replace it with the following:
In the above example, “egyptian-cat” is the name of the icon file stored in the Assets.xcassets folder so replace this name with the actual name of your own icon file.
Now your icon will appear on the menu bar.
Posted in macOS, Xcode
If you look in the upper right corner on the menu bar of any Macintosh, you’ll see plenty of icons that represent volume control or access to your Time Machine backups. If you want to create a little utility that can be accessed through the menu bar, you need to create a menu bar app.
Unlike a regular macOS program, a menu bar app does not display a list of pull-down menu items, nor does a menu bar app display an icon on the Dock when it’s running. All a menu bar app needs to do is display an icon or menu title on the menu bar along with a menu of options for the user to choose from.
The first step to creating a menu bar app is to create a new macOS project Cocoa Application project where the “Use Storyboards” checkbox is clear. This will create a project that contains pull-down menus and a single window represented by a .xib file.
First, you can delete the .xib file or hide it. To hide the .xib window, click on it and choose View > Utilities > Show Attributes Inspector. Now clear the “Visible At Launch” check box. This keeps the window from appearing but still keeps it in your project in case you need it for any reason.
Once you’ve deleted or hidden the .xib window, the next step is to make sure the pull-down menus and program icon don’t appear on the Dock. To do this, click the Info.plist file in the Navigator pane to display a long list of various options.
Click on the last option and a + and – sign icon appears. Click this + icon to create a new line. In this new line, choose “Application is agent (UIElement)”.
Make sure the Type for this line is Boolean and its Value is YES. This option will keep the program’s icon from appearing on the Dock when running and keep its pull-down menus from appearing on the left side of the menu bar at the top of the screen.
Once you’ve hidden the window, pull-down menus, and Dock icon, the last step is to write Swift code to create the menu bar title and a pull-down menu.
Open the AppDelegate.swift file and underneath the class AppDelegate line, add the following:
This creates the object that will appear on the status bar. Inside the applicationDidFinishLaunching function, you need to assign this “item” object an actual value:
The above code creates an object, but we still need to display it on the menu bar. One way to display the menu bar is as an icon (which will be covered in a future blog post). A second way is as text, which you can create by defining its title property like this:
The string assigned to the title property can be anything you want, but keep it short and descriptive.
After you’ve created a menu title, the next step is to create a pull-down menu list. To do this, you need to create an NSMenu object and then fill it with titles like this:
To define each item in the pull-down menu, you need to use the addItem command. The title property defines the command that appears on the menu and the #selector identifies the function that runs when the user clicks on that menu item.
The keyEquivalent property lets you define a letter that represents a shortcut keystroke for accessing the command. In general, it’s best to leave it blank because it takes more time to use the keystroke shortcut than it will to simply click on the menu item they want.
Finally, you need to assign your NSMenu object to your menu bar’s menu property.
At this point, your pull-down menus will appear but won’t do anything because you still need to write functions that run when the user clicks on a particular menu item.
In the above example, the two #selector commands are looking for a testMe and a quitMe function (although you can choose any name you wish). So if you used the above code, the two functions you’d need to create are as follows:
The NSApplication.shared().terminate(self) command simply quits the program.
The complete code of the AppDelegate.swift file should look like this:
If you choose Product > Run, you should see the menu text “TestMe” appear on the menu bar. If you click on it, a pull-down menu appears displaying “Option 1” and “Quit”. If you click Option 1, the program prints “It works!” in the Debug area of the Xcode window. If you click Quit, your program stops running.
This simple project demonstrates how to create a simple menu bar app that displays a menu title (“TestMe”) on the menu bar. When the user clicks on this menu title, a pull-down menu appears with two options.
You can download the complete MenuBarApp project here.
Posted in macOS, Programming, Xcode
At one time, the only way to create user interfaces for macOS or iOS programs was to use .xib files. Nowadays, the only way to create user interfaces for iOS apps is to use storyboard files. To create macOS programs, you still have the option of using either .xib or .storyboard files, but since storyboards are used for iOS programming, you might as well start using storyboards for creating macOS user interfaces as well.
When you use storyboards to create a macOS project, you can create segues between scenes (windows) in your storyboard. For example, create a macOS Cocoa Application project that uses storyboards and you’ll wind up with a single window controller that looks like this:
The top box is the window controller and the bottom box is the view controller that appears inside the window controller. (Yes, I know this sounds confusing because it is.)
You need to add user interface items like buttons and text fields in the bottom box (the view controller). That view controller box is also connected to a class file called ViewController.swift so you can write IBOutlets and IBAction methods to control any user interface items you add to the view controller box.
If you want to add another scene to a storyboard, you have to drag a view controller from the Object Library on to the storyboard. Xcode offers several different types of view controllers such as the plain View Controller or the more sophisticated Tab View Controller or Horizontal/Vertical Split View Controller, which offers more than just a single window to display on the screen. Xcode offers the following types of view controllers you can add to a storyboard.
Whatever type of new controller you want to add to a storyboard doesn’t matter but whatever type you add, you must create a Swift Cocoa Class file to control that view controller. So if you add a View Controller, you must create a Cocoa Class file that’s a subclass of NSViewController. If you add a Page Controller, you must create a Cocoa Class file that’s a subclass of NSPageController.
After you’ve added a view controller to a storyboard, you need to choose File > New > File to create a macOS Cocoa Class as shown below.
After clicking the Next button in the bottom right corner, you need to give your class file a name (which can be anything, but more importantly, you must choose a subclass as shown below.
Once you’ve chosen the proper subclass to represent your newly added view controller in the storyboard, the final step is to connect that class file to the view controller in the storyboard.
To do this, click on your storyboard file in the Navigator pane and then click on the blue icon at the top, middle of the newly added view controller to select it. Choose View > Utilities > Show Identity Inspector. In the Class popup menu, choose the name of the class file you just created.
It’s important to remember that every view controller (scene) in a storyboard needs to be connected to a class file. When you add various user interface items to a view controller (scene), you can open the Assistant Editor and control-drag to create IBOutlets and IBAction methods in the class file connected to that view controller.
Posted in macOS, User Interface, Xcode
The Cocoa framework contains standard panels your programs can use to Open, Save, or Print a file. Of course, you have to write code to make those panels work, but the Cocoa framework provides the code to display standard panels for your program to use.
One panel you can use is the Color Panel, which displays different colors for the user to choose from. To create a panel, you must first define a constant to represent that panel. For a color panel, the code needs to use the NSColorWell class like this:
Next, you need to actually display that color panel using the activate command:
Once you’ve activated the color panel to display it, you need to retrieve the color value the user chooses. To do that, you need to use the action and #selector commands to run the changeColor function like this:
You must write your own code in the changeColor function to make it actually do something. Assuming you have a label on your user interface called myLabel, you could change the label’s textColor property by retrieving the color panel’s color property like this:
So if you put a push button and a label on a window, clicking the push button would display the color panel. When the user chooses a color, the label’s text color would change. The complete code would look like this:
The main key to using the color panel is to call the changeColor function and add your own code to the changeColor function to make it do something.
As you can see, by using standard panels in your macOS programs, you can easily create a macOS program that looks and behaves like a regular macOS program without needing to write hardly any code.
Posted in Algorithms, macOS, Xcode
Many people want to create an iOS app. While there are many companies and programs that promise to make this task easy, they all have tradeoffs. Either they cost a lot of money or they’re too limited to create any but the simplest apps.
The free solution is to learn Xcode, which is Apple’s free editor/compiler. Unfortunately, learning Xcode isn’t as straightforward as you might think.
First, you have to learn a programming language. Xcode supports Apple’s two official programming languages, Objective-C and Swift. Of these two choices, learn Swift and ignore Objective-C if you can. Objective-C is far more confusing, convoluted, and complicated than Swift. In fact, Apple created Swift specifically to fix all the problems of Objective-C while still being equal or even better than Objective-C.
So if you ant to create iOS apps, you must first learn the Swift programming language. This by itself isn’t that difficult because Xcode offers a feature called playgrounds that lets you practice writing Swift code without the hassle of writing complete programs. With Swift playgrounds, you can test your ideas out quickly and easily, so Swift is the best programming language to learn and use for iOS development.
Once you learn Swift, you have a second task in learning how to use Xcode. Xcode contains multiple commands for professionals, which means novices will often feel intimidated by the program. Fortunately you can sue Xcode without knowing or using all of its features. However, this means you must learn both Swift and Xcode.
Now to make matters more confusing, you not only need to learn Swift and Xcode, but you also need to learn Apple’s Cocoa Touch framework that provides commonly used code to create iOS apps.
So if you want to learn iOS programming, you have to learn Swift, Xcode, and the Cocoa Touch framework. That’s three different topics you must master before you can even start writing an iOS app.
If you have a burning idea for an app, the first step is never to start writing a program, but to figure out if your idea is any good in the first place.
First, ask what problem your app will solve. Next, ask other people if they might find your app useful. Finally, ask yourself why you want to create an app in the first place. If your only goal is to make money, chances are good you won’t make money because obstacles will appear and frustrate you long before you can complete your app and start making money. Unless you actually enjoy programming, don’t think creating an app will suddenly make you rich.
In fact, most app developers don’t make money. There are so many apps in the App Store that new apps get lost in the crowd everyday. That makes it hard for potential customers to find your app and even if they do find it, they’ll be far less likely to pay for an unknown app. That means you must find ways to convince people to try and eventually buy your app.
In other words, that requires taking time to learn how to market your app. If you thought learning Swift, Xcode, and the Cocoa Touch framework were enough, now learning marketing is a fourth task you must master as well. Without marketing, your app won’t attract many sales and you won’t make a lot of money (if any).
It’s still possible to make money selling apps, but it’s not easy, simple, or fast for anyone to do so. If you’re creating an app, be prepared to market and support it for years. In other words, create an app because it will solve your own problem or because it’s fun. Don’t try creating an app just to get rich because chances are good you won’t.
Creating an app isn’t difficult but is tedious and time-consuming. Unless you’re willing to put in the time to learn, then spend your time more productively doing something you really enjoy. If you really enjoy programing, then start learning Swift, Xcode, the Cocoa Touch framework, and marketing.
Who knows? You might wound up having fun and making money, but that’s only if you enjoy learning and mastering all these tasks simultaneously.
Creating an app isn’t any harder than mastering any skill such as learning to rebuild a car engine or knitting a quilt. It just takes time and desire. If you don’t have the desire, you won’t make the time. If you do have the desire, you will make the time and then you’ll find the world of app creation can be far more rewarding than just the financial rewards alone.
Posted in iOS, Xcode
Apple doesn’t always make life easy. If you want to write Touch Bar macOS programs in Xcode, you need the latest versions of macOS Sierra 10.12.1 and Xcode 8.1. However, the latest macOS Sierra update you need isn’t the one found in the Mac App Store. Instead, you have to download the latest macOS Sierra update directly from Apple at this link:
Until you download and install this latest macOS Sierra update, you won’t be able to see the Touch Bar simulator in Xcode 8.1. This is a simple problem made more complicated by the fact that you have to download the macOS update direct from Apple instead of the App Store.
Hopefully by the time you read this, Apple will have put the latest macOS update on the App Store but until then, this macOS update direct from Apple is the missing ingredient needed to add Touch Bar support to Xcode 8.1
Posted in Programming, Xcode
If you look at the apps that come with an iPhone or iPad, you’ll notice that one common feature is the use of rows of data such as viewing a list of email messages in the Mail app. Whenever you see multiple rows of data that you can scroll up or down on the screen, chances are good it’s a table view.
The basic idea behind a table view is to create a dynamic list of information on the screen that users can scroll through and tap to select. The first step is to put a table view (not a table view controller) on a view (the user interface).
Once you have a table view on your user interface, the next step is to write the actual code to store data in that table view. First, you must make sure your class adds the UITableViewDelegate and UITableViewDataSource as follows:
Second, you need to define your data. The simplest example is to use an array such as:
To physically access and display data in a table view, you need to create an IBOutlet between the table view on the user interface and your actual Swift class file like this:
Fourth, you need to define which file will act as the table view’s delegate and data source. If you store everything in a class file, you can just make the class file the delegate and data source. One way to do this is by control-dragging from the table view on the user interface to the view controller icon. However a more visible way to do this is to define this in Swift code like this:
Now you need to define how many items will appear in the table view. Since this number can vary, you need code that will automatically count the number of items to display. If you’re storing data in an array, you can use the array count method to define the total number of items to display in a table view like this:
Finally, you need to give the cell, in your table view, a unique identifier name such as “myCell” so you can identify it. Then the final step is to use this cell to fill with data. The first line of the following function tells the table view to use the cell identified by its name.
The second line says to store an array element into the text property of the cell.
The third line says to show that data in the cell of the table view, so the whole function looks like this:
If you want to identify which table row the user tapped on, you need to write another function like this:
So if you put a table view on your user interface and name the cell in that table view as “myCell”, the whole code looks like this:
Posted in iOS, Xcode
Your app can display a web page by using the Web View object on your user interface and then by writing three lines of code. So first, place a Web View on your user interface and give it a unique name such as webView, although the exact name isn’t important.
Next, create a variable or constant using any name you wish. Then set this variable/constant to a string that defines the complete web site address like this:
The only restriction is that the web site address must use https:// and not just plain http:// or else it won’t work.
After creating a variable/constant to represent the web site address, you need to create a second variable/constant to request the web site address, known as a URL:
Finally you need to use the loadRequest method on your Web View to request a particular web site domain address:
So the complete code to work with a Web View object on your user interface looks like this:
Just paste a different string for the web site address and you’ll be able to display a different web site. Remember, make sure the web site address uses https:// and also make sure the web site is optimized for mobile devices so it adapts to the smaller screen of an iPhone or iPad.
Posted in Programming, User Interface, Xcode
if you’re creating an iOS app that requires typing text, your app will need to display the iOS virtual keyboard that slides up from the bottom of the screen. The problem with the virtual keyboard is that although it pops up automatically, you have to write code to make it go away.
There are basically four steps you need to follow to write code that makes the virtual keyboard go away. First, you’ll likely need a text field to allow the user to type text on the virtual keyboard, so you need to add the UITextFieldDelete to your class file like this in Swift:
Second, you’ll need to set the text field to the UITextFieldDelegate. You can do through the Connections Inspector on Xcode or just use code like this in Swift:
Third, you need to create a function called textFieldShouldReturn to end editing. This function hides the virtual keyboard if the user taps the Return key:
Fourth, you need to create a second function called touchesBegan to tell the text field to let the virtual keyboard disappear if the user taps anywhere away from the text field:
So if you create a simple iOS, single view app in Xcode using Swift, just place a text field on the view (user interface) and link it to your view controller file as an IBOutlet such as naming the text field “textFieldEntry”. Then your entire Swift class would look like this:
Now if the user taps the Return key on the virtual keyboard or taps away from the text field and the virtual keyboard, the virtual keyboard will tuck itself out of sight.
Posted in iOS, Programming, Xcode