June 6, 2013

Hands-on: Xamarin Studio’s powerful new iOS designer

By

At Xamarin Evolve 2013, Xamarin cofounder and CTO Miguel de Icaza unveiled a built-in iOS designer for Xamarin Studio. The new user interface design tool is fully integrated with the IDE, enabling end-to-end iOS application development within the Xamarin Studio environment. Xamarin application developers will no longer have to rely on Xcode for drag-and-drop construction of iOS user interface layouts.

iOS Designer Piechart

The new iOS designer is still under development, but an experimental version is already available for testing in the latest Xamarin Studio alpha releases. Developers who want to get an early look at the iOS designer can start using it today by switching to the alpha channel in the Xamarin Studio update dialog. Users can look forward to seeing it become an official part of Xamarin Studio stable releases in the coming months.

This article will give you a hands-on look at the new design tool and walk you through some of its advanced capabilities. Xamarin’s new iOS designer has several impressive features that you won’t find in Xcode, including support for live-rendering views and controls that are painted with custom drawing code. This article will show you how to take advantage of that functionality in your own applications.

Using the new designer

To test the new designer, update Xamarin Studio from the alpha release channel and create a Xamarin.iOS application from a template that includes a storyboard. When the user double-clicks a storyboard file in the Solution panel, the file will open in a new design tab right inside the IDE. The designer will display the full contents of the storyboard—all of the top-level views and their connections.

iosdesignerwindow

On the right-hand side of the window, the toolbox panel displays all of the available user interface controls. Immediately below the toolbox is the properties panel, which displays all of the configurable attributes of the selected control. There’s also a document outline panel which will eventually display a layout hierarchy, but it hasn’t been fully implemented yet.

The design surface works exactly as you would expect. The user can drag controls from the toolbox and drop them onto a view. Controls can be interactively sized and positioned as desired. Control autosizing behavior can be adjusted from the layout tab of the properties panel. The user can drag multiple view controllers onto the storyboard and create segues by holding the control key while click-dragging between them. The segues are represented by arrows on the storyboard, just like in Xcode.

Easy event handlers, just like Visual Studio

There are a number of key areas where Xamarin’s designer has been tuned to deliver a better and more intuitive experience than Xcode. Most notably, Xamarin’s iOS designer offers a much more intuitive, Visual Studio-like approach to establishing event handlers—insulating developers from Objective-C idiosyncrasies

When building iOS user interfaces in Xcode, developers typically have to manually create outlets and actions to expose user interface controls to source code and handle control events. Unlike Xcode, the new iOS designer in Xamarin Studio does all of that work behind the scenes. To expose an iOS control to source code in Xamarin Studio, the user simply has to click the control in the storyboard and type a value into the Name field in the properties panel. When a control is given a name, Xamarin Studio will automatically generate an outlet for it in the code-behind.

Xamarin Studio also makes it very easy to add event handlers. When the user double-clicks a button on the design surface, Xamarin Studio will automatically add a new method bound to the button’s TouchUpInside event to the class associated with the button’s parent view controller. The user can also create a handler for a specific event by using the events tab of the properties panel.

Xamarin Studio’s intuitive approach to creating outlets and event handlers will help advanced programmers save time while making graphical iOS development easier for new developers to understand.

Custom controls

One of the most compelling features of Xamarin Studio’s new iOS designer is its support for custom components. Developers can create their very own user interface controls that are accessible from the designer’s toolbox panel. The user can drag a custom component into a view on the storyboard and manipulate it just like any built-in user interface control. Custom controls that are painted with standard platform drawing APIs will even be rendered live in the designer.

Creating custom components is very easy—any class that inherits from UIView can be turned into a component simply by adding the Register attribute, as demonstrated below. If the class has a Draw method, the code will be compiled behind the scenes and used to render the control in the designer. The following example shows how to make a simple control that displays a red rounded rectangle:

[Register("RectSample")]
public class RectSample : UIView
{
    public RectSample () {}
    public RectSample (IntPtr handle) : base (handle) {}
    public override void Draw (RectangleF rect)
    {
        var path = UIBezierPath.FromRoundedRect(rect.Inset(1, 1), 4);
        UIColor.Red.SetFill();
        path.Fill();
        UIColor.Black.SetStroke();
        path.Stroke();
    }
}

In the iOS designer, the Rect Sample control will appear at the bottom of the toolbox panel in the Custom Components section. A small thumbnail that shows what the control looks like when rendered is displayed alongside the name in the toolbox. The control can be dragged out into the storyboard placed in a view. As you can see, it is rendered in the designer exactly as expected.

rectsample

That simple demonstration of custom components is already fairly impressive, but it gets even better: it’s possible to take properties that are defined in a class and expose them through the properties panel in the designer. To illustrate that capability, I’ll show you how to modify the RectSample code above to make the color customizable.

[Register("RectSample")]
public class RectSample : UIView
{
    public RectSample () {}
    public RectSample (IntPtr handle) : base (handle) {}
    [Export, Browsable(true)]
    public int Red { get; set; }
    [Export, Browsable(true)]
    public int Green { get; set; }
    [Export, Browsable(true)]
    public int Blue { get; set; }
    public override void Draw (RectangleF rect)
    {
        var path = UIBezierPath.FromRoundedRect(rect.Inset(1, 1), 4);
        UIColor.FromRGB (Red, Green, Blue).SetFill ();
        path.Fill();
        UIColor.Black.SetStroke();
        path.Stroke();
    }
}

The new version of the RectSample class has Red, Green, and Blue properties that the Draw method uses to set the fill color of the rounded rectangle. As you can see in the screenshot, the Export and Browsable attributes that I applied to those properties cause Xamarin Studio to expose them in the properties panel of designer when a Rect Sample control is selected.

proppanel

The Draw method of the RectSample class uses the Red, Green, and Blue properties to establish the fill color. When the value of those fields is adjusted in the designer’s properties panel, the designer will instantly change the color of the round rectangle to reflect the inputted numbers.

The RectSample class is a fairly trivial example, but the live rendering will work with much more sophisticated drawing code. While demonstrating the live drawing feature during the Evolve 2013 keynote, Miguel used a pie chart control. As he changed the values of each pie segment in the properties panel, the pie chart control in the designer changed accordingly.

The current version of the designer supports string and integer properties. In the designer’s properties panel, strings are displayed with conventional line entry textboxes and integers are displayed with spin-button textboxes. Additional types will be supported in the future.

The designer’s support for custom controls is impressive on many different levels, but one of the most exciting facets is the possibilities that it unlocks for the Xamarin Component Store. Imagine adding a component to your project that makes custom controls accessible through the designer’s toolbox panel—you will be able to use custom widgets from the Xamarin Component Store with the same drag-and-drop simplicity that you get today with the standard platform user interface controls.

Making more elaborate controls with PaintCode

While testing the new iOS designer, I wanted to try creating a control with non-trivial drawing code. Of course, writing code that draws complex widgets can be very difficult and time-consuming to do by hand. To simplify the task, I used PixelCut’s PaintCode, a powerful vector drawing application that outputs code. PaintCode, which gained support for Xamarin.iOS last year, can produce Xamarin-compatible C# code.

glassshelf

PaintCode lets developers interactively design complex graphical elements and then copy generated code into their own project, where those graphical elements can be turned into custom user interface controls. The PaintCode approach offers a lot more power and flexibility than using conventional static graphical assets—programmatic drawing makes it easy to dynamically alter the appearance of a graphical element based on application state.

You could, for example, modify the code generated by PaintCode so that the color of your control is populated from a property that is exposed in the designer. Or you could use conditional expressions to make a special kind of toggle switch where the state is dictated by user input. There are a ton of different possibilities.

As a first step, I wanted to see if one of PixelCut’s elaborate samples would work as expected in the Xamarin Studio iOS designer. I used PixelCut’s Glass Shelf sample file, which draws a green glass panel that resembles the ones in the mobile version of iPhoto. It worked beautifully in Xamarin Studio.

Conclusion

Xamarin Studio’s new iOS designer has the potential to greatly simplify Xamarin.iOS development. It eliminates the need to use Xcode for interactive interface creation and opens the door for tighter integration between the design surface and underlying source code. Advanced features like live widget rendering offer clear technical advantages over Apple’s own user interface design tools.

The new iOS designer has much to offer. It’s also fairly robust and enjoyable to use—I’ve switched to the alpha channel to use it for all of my day-to-day iOS development. As you would expect of pre-release software that is in the alpha testing stage, it’s still under heavy development. The developers are issuing updates through the alpha release channel at very regular intervals, so improvements will arrive frequently as the designer matures.

At the present time, the new designer is available in Xamarin Studio on Mac OS X. It relies on the local availability of the iOS SDK, which it uses to render the storyboard. To get started with it today, simply configure Xamarin Studio’s built-in updater to use the Alpha channel.

TwitterFacebookGoogle+LinkedInEmail