actiontray-128About ActionTray

ActionTray is a dockable, customizable, slide-out, tray view controller for iOS. ActionTrays can be used alone or in groups using an ActionTrayManager.

 

API Support Forum   Purchase

 

About ActionTray

ActionTray is a dockable, customizable, slide-out, tray view controller for iOS that can be attached to the top, left, bottom or right sides of the screen. ActionTray supports three tray types:

  • Draggable – The user can drag the tray out from the edged anywhere between its open and closed positions or double tap it to snap between open and closed.
  • Popup – The tray will snap between its open and closed positions when its Drag Tab is touched
  • AutoClosingPopup – Just like the Popup tray but it will also close if the user taps its content area

Use Alone or in Groups

You can place individual ActionTrays along any edge of the screen or place several ActionTrays togehter and attach them to anActionTrayManager to control them as a group and use them like palettes or menus. The ActionTrayManager provides events to respond to user interaction in any of the trays it controls and it automatically ensures that only one tray in the group is open at a time.

Events

ActionTray defines the following events that you can monitor and respond to:

  • Touched
  • Moved
  • Released
  • Opened
  • Closed

Appearance

ActionTray is fully customizable with user definable appearances for every element of its UI. ActionTray supports the following Drag Tabtypes:

  • Plain – An empty Drag Tab
  • GripOnly – A 3 line grip in the Drag Tab
  • GripAndText – A 3 line grip and a title in the Drag Tab
  • TitleOnly – Only the title in the Drag Tab
  • IconOnly – Only an icon in the Drag Tab
  • IconAndTitle – An icon and title in the Drag Tab

You can also position where the Drag Tab appears on the ActionTray as one of the following:

  • TopOrLeft – Appears on the top or left side of the ActionTray based on its orientation
  • Middle – Appears in the middle of the ActionTray
  • BottomOrRight – Appears on the bottom or right side of the ActionTray based on its orientation
  • Custom – You can control the position of the Drag Tab by setting the tabOffset property of the ActionTray

Features

ActionTray includes a fully documented API with comments for every feature. The ActionTray user interface is drawn with vectors and is fully resolution indenpendant.

Minimal Setup Required

Whether created as a .xib file in Xcode or built directly from C# code the following two properties must be set before the ActionTray is displayed:

// These values MUST be set in code before the view is displayed
tray.trayType = UIActionTrayType.Popup;
tray.orientation = UIActionTrayOrientation.Right;

Failure to set the above lines before display can result in an ActionTray that is drawn and/or behaves incorrectly.

If the tray is being created completely in C# code, set the above lines after you have set the tray’s Frame size and added the tray to the parentUIView so that it can correctly calculate its open and closed positions.

Example

ActionTray was designed to make adding it to a project super easy. Start an iPad, iPhone or Universal project in Xamarin Studio and build the project. Next, double click the MyProjectViewController.xib file to open it in Xcode. Insert a UIView and place it along one of the edges of the mainUIView making it a large as it will be when fully opened by the user. Next change its Class to UIActionTray and add any other views or components that will be part of the tray.

Now switch to the Editor view in Xcode and create an outlets for your UIActionTray and the views it controls. Save the project and switch back to Xamarin Studio. In your ViewDidLoad method setup your ActionTray and quickly attach the views for it to control:

...
using Appracatappra.UIKit.ActionTray;
...

public override void ViewDidLoad ()
{
	base.ViewDidLoad ();

	// Create a TrayManager to handle a collection of "palette"
	// trays. It will automatically close any open tray when 
	// another tray in this collection is opened.
	trayManager = new UIActionTrayManager ();

	// Automatically close the left tray when any tray
	// in the manager's collection is opened
	trayManager.TrayOpened += (tray) => {
		// Animate the tray being closed
		leftTray.CloseTray (true);

		// Are we on an iPhone?
		if (UserInterfaceIdiomIsPhone) {
			// Yes, close the right tray too
			rightTray.CloseTray (true);
		}
	};
	
	// Wireup the left side tray created in the .xib file and style
	// it to be a drag out tray.
	if (leftTray != null) {
		// Set tray type
		leftTray.orientation = UIActionTrayOrientation.Left;
		leftTray.tabLocation=UIActionTrayTabLocation.BottomOrRight;
		leftTray.frameType=UIActionTrayFrameType.EdgeOnly;
		leftTray.tabType=UIActionTrayTabType.IconAndTitle;

		// Style tray
		leftTray.appearance.background=UIColor.LightGray;
		leftTray.appearance.frame=UIColor.DarkGray;
		leftTray.icon=UIImage.FromFile ("Images/icon_calendar.png");
		leftTray.title="Events";
		leftTray.CloseTray (false);

		// Respond to the tray being touched
		leftTray.Touched+= (tray) => {
			// Are we on an iPhone?
			if (UserInterfaceIdiomIsPhone) {
				//Yes, close this tray and aminate the closing
				rightTray.CloseTray (true);
			}

			// Tell any open palette trays to close
			trayManager.CloseAllTrays ();

			// Close document tray
			if (documentTray!=null) 
				documentTray.CloseTray (true);
		};
	}

	// Wireup the right tray created in the .xib file and style it
	// to be a popup tray. Touch it's dragTab to open and close it.
	if (rightTray != null) {
		// Are we on an iPhone?
		if (UserInterfaceIdiomIsPhone) {
			// Move the subview into view and attach it to the master view
			rightTray.MoveTo (new PointF(320f-rightTray.Frame.Width,0f));
			View.AddSubview(rightTray);

			// iPhone specific settings
			rightTray.tabLocation=UIActionTrayTabLocation.BottomOrRight;
		}

		// Set tray type
		rightTray.trayType=UIActionTrayType.Popup;
		rightTray.orientation=UIActionTrayOrientation.Right;
		rightTray.bringToFrontOnTouch=true;
		if (UserInterfaceIdiomIsPhone) rightTray.CloseTray(false);

		// Style the tray
		rightTray.appearance.background=UIColor.DarkGray;

		// Respond to the tray being opened
		rightTray.Opened+= (tray) => {
			//Are we on an iPhone?
			if (UserInterfaceIdiomIsPhone) {
				//Yes, close this tray and aminate the closing
				leftTray.CloseTray (true);
			}

			// Tell any open palette trays to close
			trayManager.CloseAllTrays ();

			// Close document tray
			if (documentTray!=null) 
				documentTray.CloseTray (true);
		};
	}

	// Wireup the document tray created in the .xib file and style it
	// to be an auto closing popup. When the user selects something
	// from it's content area, it is automatically closed.
	if (documentTray != null) {
		// Set tray type
		documentTray.trayType=UIActionTrayType.AutoClosingPopup;
		documentTray.orientation = UIActionTrayOrientation.Bottom;
		documentTray.tabType=UIActionTrayTabType.GripAndTitle;

		// Style tray
		documentTray.tabWidth=125f;
		documentTray.appearance.background=UIColor.DarkGray;
		documentTray.title="Documents";
		documentTray.CloseTray (false);

		// Respond to the tray being opened
		documentTray.Opened += (tray) => {
			// Close left and right trays
			leftTray.CloseTray(true);
			rightTray.CloseTray(true);
		};
	}

	// Palette 1
	// Wireup the 1st palette from the .xib file and style it
	// to be an auto closing popup. When the user selects something
	// from it's content area, it is automatically closed.
	if (paletteTray != null) {
		// Are we on an iPhone?
		if (UserInterfaceIdiomIsPhone) {
			// Move the subview into view and attach it to the master view
			paletteTray.MoveTo (new PointF(0,0));
			View.AddSubview(paletteTray);

			// Adjust tab location
			paletteTray.tabLocation=UIActionTrayTabLocation.Custom;
			paletteTray.tabOffset=55f;

			//iPhone specific settings
			paletteTray.orientation=UIActionTrayOrientation.Right;
		} else {
			// iPad specific settings
			paletteTray.tabLocation=UIActionTrayTabLocation.TopOrLeft;
			paletteTray.orientation=UIActionTrayOrientation.Top;
		}

		// Set tray type
		paletteTray.trayType=UIActionTrayType.AutoClosingPopup;
		paletteTray.tabType=UIActionTrayTabType.IconAndTitle;
		paletteTray.CloseTray (false);

		// Style tray
		paletteTray.tabWidth=125f;
		paletteTray.appearance.background=UIColor.DarkGray;
		paletteTray.icon=UIImage.FromFile ("Images/icon_palette.png");
		paletteTray.title="Palette";

		// Add this tray to the manager's collection
		trayManager.AddTray (paletteTray);
	}

	// Palette 2
	// Wireup the 2nd palette from the .xib file and style it
	// to be a popup tray. Touch it's dragTab to open and close it.
	if (propertyTray != null) {
		// Are we on an iPhone?
		if (UserInterfaceIdiomIsPhone) {
			// Move subview into view and attach it to the master view
			propertyTray.MoveTo(new PointF(0,170));
			View.AddSubview(propertyTray);

			// iPhone specific settings
			propertyTray.orientation=UIActionTrayOrientation.Right;
		} else {
			// iPad specific settings
			propertyTray.orientation=UIActionTrayOrientation.Top;
		}

		// Set tray type
		propertyTray.trayType=UIActionTrayType.Popup;
		propertyTray.tabLocation=UIActionTrayTabLocation.TopOrLeft;
		propertyTray.tabType=UIActionTrayTabType.IconAndTitle;
		propertyTray.CloseTray (false);
		
		// Style tray
		propertyTray.tabWidth=125f;
		propertyTray.appearance.background=UIColor.DarkGray;
		propertyTray.icon=UIImage.FromFile ("Images/icon_measures.png");
		propertyTray.title="Properties";

		// Add this tray to the manager's collection
		trayManager.AddTray (propertyTray);
	}

	// Palette 3
	// Wireup the 3rd palette from the .xib file and style it 
	// to be an auto closing popup. When the user selects something
	// from it's content area, it is automatically closed.
	if (toolsTray != null) {
		// Are we on an iPhone?
		if (UserInterfaceIdiomIsPhone) {
			// Move the subview into view and attach it to the master view
			toolsTray.MoveTo (new PointF(0,0));
			View.AddSubview(toolsTray);

			// Adjust tab location
			toolsTray.tabLocation=UIActionTrayTabLocation.Custom;
			toolsTray.tabOffset=5f;

			// iPhone specific settings
			toolsTray.orientation=UIActionTrayOrientation.Right;
		} else {
			// iPad specific settings
			toolsTray.orientation=UIActionTrayOrientation.Top;
		}

		// Set tray type
		toolsTray.trayType=UIActionTrayType.AutoClosingPopup;
		toolsTray.tabType=UIActionTrayTabType.IconOnly;
		toolsTray.CloseTray (false);
		
		// Style tray
		toolsTray.tabWidth=50f;
		toolsTray.appearance.background=UIColor.FromRGB (38,38,38);
		toolsTray.icon=UIImage.FromFile ("Images/icon_pencil.png");

		// Add this tray to the manager's collection
		trayManager.AddTray (toolsTray);
	}

}

NOTE: ActionTrays and the UIViews that they control can be completely created in C# code without using .xib files.