Category: User Interface

March 6th, 2017 by admin

If you want to make an item on the user interface appear to fade away and reappear again, you can use something called the animator() method. Essentially all you have to do is create an IBOutlet for a user interface item (such as a button or label) and then apply the animator() method along with defining the alphaValue property to 0 (completely invisible) or 1 (completely visible).

Of course, if you assign a user interface item’s alphaValue property to 0, it will suddenly disappear, so that’s why you need to create a delay effect using the following code:

NSAnimationContext.current().duration = 3

This simply tells code to delay the animator() action by three seconds (or whatever number you assign to the duration property.

Create a simply macOS project using storyboards and place a label and a push button anywhere on the view. Create IBOutlet for the label like this:

@IBOutlet weak var lblMessage: NSTextField!

Now create an IBAction method for the push button (call it AnimateMe) and fill it with Swift code such as:

    @IBAction func animateMe(_ sender: NSButton) {     
        if lblMessage.animator().alphaValue == 1 {
            NSAnimationContext.current().duration = 3
            lblMessage.animator().alphaValue = 0
        } else {
            NSAnimationContext.current().duration = 3
            lblMessage.animator().alphaValue = 1
        }
    }

This code simply checks what the alphaValue of the label might be. If its value is 1 (completely visible), then it slowly fades the label away in three seconds and sets its alphaValue property to 0. This creates a gradual fade out visual effect.

If the label’s alphaValue property is already 0, then the above Swift code takes three seconds to slowly set the alphaValue to 1, which creates a fade in visual effect.

Obviously there’s more to animation using the animator() method but this can get you started in seeing how simple it can be to create animation in a macOS program.

Posted in Algorithms, macOS, User Interface

February 24th, 2017 by admin

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

January 28th, 2017 by admin

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

January 7th, 2017 by admin

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

December 21st, 2016 by admin

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:

@IBOutlet var myWindow: NSView!

Assuming you named your window IBOutlet myWindow, you’ll be able to access the frame.width and frame.height properties like this:

myWindow.frame.height
myWindow.frame.width

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.

print ("Window height = \(myWindow.frame.height)")
print ("Window width = \(myWindow.frame.width)")

Posted in Algorithms, User Interface

May 5th, 2016 by admin

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:

                                        // 1. Add UIPickerViewDelegate and UIPickerViewDataSource to the class
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

Then you have to get data to place in the PickerView, which can be an array like this:

    // 2. Create an array of data to display in the picker view
    var pickerArrayItems = ["Cat", "Dog", "Hamster", "Goldfish", "Parrot", "Lizard"]

You also need to create an IBOutlet for your PickerView so you can refer to it in Swift code like this:

    // 3. Create an IBOutlet for the picker view on the user interface
    @IBOutlet weak var pickerViewUI: UIPickerView!

Once you’ve created an IBOutlet for your PickerView, you can then set its delegate to the view controller Swift file like this:

        // 4. Set the delegate of the picker view control to the view controller
        pickerViewUI.delegate = self

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:

    // 5. Define the number of parts or components of the picker view
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }

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:

    // 6. Define the number of items to appear in the picker view
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return pickerArrayItems.count
    }

Finally, you need to actually fill the PickerView with your data using another pickerView function:

    // 7. Define the title of each row of the picker view with the array items (Step 2 above)
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return pickerArrayItems[row]
    }

Your entire ViewController.swift file can look like this when linked to a view (user interface) that contains a picker view control:

import UIKit

                                        // 1. Add UIPickerViewDelegate and UIPickerViewDataSource to the class
class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {
    
    // 2. Create an array of data to display in the picker view
    var pickerArrayItems = ["Cat", "Dog", "Hamster", "Goldfish", "Parrot", "Lizard"]

    // 3. Create an IBOutlet for the picker view on the user interface
    @IBOutlet weak var pickerViewUI: UIPickerView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 4. Set the delegate of the picker view control to the view controller
        pickerViewUI.delegate = self
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    // 5. Define the number of parts or components of the picker view
    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int {
        return 1
    }
    
    // 6. Define the number of items to appear in the picker view
    func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        return pickerArrayItems.count
    }

    // 7. Define the title of each row of the picker view with the array items (Step 2 above)
    func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        return pickerArrayItems[row]
    }
    
}

Posted in iOS, User Interface

May 2nd, 2016 by admin

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 web address must be https:// and not just http://
        let showURL = NSURL(string: "https://www.apple.com")

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:

        let requestThis = NSURLRequest(URL: showURL!)

Finally you need to use the loadRequest method on your Web View to request a particular web site domain address:

        webView.loadRequest(requestThis)

So the complete code to work with a Web View object on your user interface looks like this:

        // The web address must be https:// and not just http://
        let showURL = NSURL(string: "https://www.apple.com")
        let requestThis = NSURLRequest(URL: showURL!)
        webView.loadRequest(requestThis)

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

HTML Snippets Powered By : XYZScripts.com