How To Use Xuni iOS Controls With XCode Storyboards

XCode allows iOS developers several mechanisms for creating UI's including some code based methods and others that are visual. Most of the Xuni iOS Samples that have been created to date are focused on generating the controls through code, but today we will take a look at one of the other options that Apple provides UI design: Storyboards. This article is an introduction to using custom class UIViews in iOS Storyboards to design applications using Xuni with XCode 5.1+ and iOS 7.1+. We will start by creating a new project and selecting Single View application. From here, open up the storyboard file where there will be a single View Controller Scene. Xuni controls will not show up in the object library in XCode (unlike Apple’s built in objects) so we will have to employ a slightly different mechanism for adding the controls. Since UIView is the basis for the Xuni controls, we can add a View (something that is in the object library) onto our ViewController and set the Custom Class property so that the View represents a Xuni control when the application is run. Though the control will not appear as a Xuni control visually in the storyboard you can still position and resize the area in which the control will reside. The control will still require that most properties be set in code.

Adding Xuni via the Storyboard

To add a XuniLinearGauge to the storyboard:

1. Select a View from the object library and drag it onto your View Controller Scene
2. With the View selected, navigate to the identity selector
3. In the Custom Class section, set the Class to XuniLinearGauge

You can now move and size this area to represent your Linear Gauge. To make the control more visually distinct, you may find it easier set the background color for the View to something other than clear or white (I've set it to gray for this example).

Setting up the Outlet

Since we will need to set some properties for the control in code we will set up an IBOutlet with a named variable of the same type in our viewController. We have the option of using the Storyboard and Assistant Editor to create the outlet visually, or we can do this entirely in code. To do this in using the Storyboard and Assistant Editor:

1. Show the Assistant Editor by choosing View > Assistant Editor > Show Assistant Editor
2. In the Assistant Editor, select the implementation file of the object that you want to send mesages
3. Control-drag from your custom view object in the Storyboard to the Assistant Editor
4. When you release the mouse, a Connection menu will open
5. Choose Outlet from the Connection menu
6. Type the name of the new outlet and click Connect

Alternatively, to do this in code we can add: Swift

import UIKit  
import XuniGaugeKit  

class ViewController: UIViewController {  
    @IBOutlet var l : XuniLinearGauge!  
    override func viewDidLoad() {  
        super.viewDidLoad()  
        // Do any additional setup after loading the view, typically from a nib.  
    }  

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


}  

Objective C

//ViewController.h  
#import   
#import   

@interface ViewController : UIViewController  

@property IBOutlet XuniLinearGauge *l;  

@end  

//ViewController.m  
#import "ViewController.h"  

@interface ViewController ()  
@end  

@implementation ViewController  

@synthesize l;  

- (void)viewDidLoad {  
    [super viewDidLoad];  
    // Do any additional setup after loading the view, typically from a nib.  
}  
- (void)didReceiveMemoryWarning {  
    [super didReceiveMemoryWarning];  
    // Dispose of any resources that can be recreated.  
}  
@end  

If we've done this in code, we will need to link the IBOutlet and the custom View in the storyboard together (if you've done this visually with the Assistant Editor approach you can skip this part as it will have already completed it for you automatically). Connecting the two pieces together requires a few short steps:

1. Navigate back to the storyboard in your project
2. Select the XuniLinearGauge which we added to the project previously
3. Open the Connections Inspector
4. Drag from new referencing outlets to your view controller
5. Select the named variable (l in this case)

Adding the Obj C Flag to the Linker

Also, we will make want to make one special addition in the Objective C version of the project. To ensure that the XuniLinearGauge is recognized as a custom class (and avoid a potential exception) we will need to add a special flag to the linker. To do this:

1. Select your project
2. Choose your application from Targets
3. Navigate to the Build Settings tab
4. Under Linking, select Other Linker Flags
5. Add the Flag -ObjC

Configuring Xuni in Code

Now the control can be manipulated in code. We will set a few properties before running the application. Swift

l.pointerColor = UIColor.blueColor()  
l.min = 0  
l.max = 100  
l.value = 75  
l.pointer.thickness = 0.5  
l.showText = XuniShowText.All  

Objective C

l.pointerColor = [UIColor blueColor];  
l.min = 0;  
l.max = 100;  
l.value = 75;  
l.pointer.thickness = .5;  
l.showText = XuniShowTextAll;  

You should now be able to run the application.

Read more about Gauges >>