Category: User Interface
A Split View Controller can display two or more views side by side. Separating the views is a divider that the user can drag back and forth to widen shrink a view. There are two ways to change the appearance of this divider:
- Choose a style
- Choose a color
The divider style can appear as Thick, Thin, or Pane Splitter. Strangely, the Thick and Pane Splitter styles look nearly identical with the only difference being that you can change the color of a Thick divider but not a Pane Splitter divider.
To choose a divider style, open the Document Outline pane and click on the Split View.
Next, open the Attributes Inspector pane by choosing View > Utilities > Show Attributes Inspector. In the Style popup menu, choose the style you want for your divider.
Changing the color of the divider is a bit stranger and trickier. Open the Document Outline pane and click on Split View. Now open the Identity Inspector pane by choosing View > Utilities > Show Identity Inspector.
Look for the User Defined Runtime Attributes category and click on the + icon. This creates a generic row of data listing keyPath, Boolean, and a check mark.
Double-click on keyPath and change this text to dividerColor and press Return.
Under the Type column, click the popup menu and change Boolean to Color.
Under the Value category, click the popup menu that appears there and choose a color.
If you chose a Thick or Thin style (not a Pane Splitter) and defined a color, run your project and you should see your chosen divider style and color appear in the split view.
Posted in macOS, User Interface
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
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
If you’re creating a macOS program using storyboards, you may need to know the size of a window. To get this information, you just need to follow two steps:
- Create an IBOutlet that represents your window. This IBOutlet should be of the type NSView
- Use the frame.width and frame.height properties to get the width and height of the window defined by your IBOutlet
To create an IBOutlet for a window, just opens he Assistant Editor, move the mouse pointer over the window, and Control-drag to the Swift class file linked to your window such as ViewController.swift. Then release the Control key and the left mouse button to create an IBOutlet.
You can use any name for your IBOutlet, but whatever name you choose will now represent your window such as:
Assuming you named your window IBOutlet myWindow, you’ll be able to access the frame.width and frame.height properties like this:
If you put the following two lines of code in the viewDidLoad function that runs as soon as a window appears, you’ll see the defined width and height of the window.
Posted in Algorithms, User Interface
if you’ve ever used the appointment feature of the iOS calendar, you’ve seen a spinning dial that lets you choose among multiple options such as the names of different months and days. A PickerView simply displays options that the user can choose. To fill a PickerView with data, you can use an array and place that PickerView on the user interface.
Next, you have to add the UIPickerViewDelegate and UIPickerViewDataSource to the class linked to the view (user interface) like this:
Then you have to get data to place in the PickerView, which can be an array like this:
You also need to create an IBOutlet for your PickerView so you can refer to it in Swift code like this:
Once you’ve created an IBOutlet for your PickerView, you can then set its delegate to the view controller Swift file like this:
Now you need to define the number of parts or components in your PickerView. The simplest PickerView displays just one type of data so you can define just 1 using the numberOfComponentsInPickerView function:
You must also define how many items to display in the PickerView. If your data is an array, you can just count the number of items in the array using the pickerView function:
Finally, you need to actually fill the PickerView with your data using another pickerView function:
Your entire ViewController.swift file can look like this when linked to a view (user interface) that contains a picker view control:
Posted in iOS, User Interface
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