ActionViewSplitter

ActionViewSplitter running on iPad

ActionViewSplitter running on iPad

Works With:

apple_logo

ActionViewSplitter

A draggable, customizable divider between two views for iOS.


  • Multiple drag styles and thumb placements
  • Customizable appearance
  • Multiple status events
  • Minimum before and after size
  • Automatic subview handling

$150$50

About ViewSplitter

ActionViewSplitter is a draggable, customizable divider between two views that can automatically handle resizing or moving the views attached to it. The ActionViewSplitter supports both horizontal and vertical orientations and has several options to control its behavior such as:

  • minimumBefore - Sets the minimal amount of space for the view before the splitter
  • minimunAfter - Sets the minimal amount of space for the view after the splitter
  • doubleTapAction - Can be set to move the splitter to the minimum before or after position
  • fullSplitterDraggable - Makes the entire splitter draggable and not just its dragThumb area

ActionViewSplitter is fully customizable with user definable appearances for every element of its UI and you can control the location of the dragThumb as: Top or Left, Middle, Bottom or Right (depending on the ActionViewSplitter's orientation).

Features

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

iOS Example

ActionViewSplitter was designed to make adding it to a project super easy. Start an iPad or iPhone project in Xamarin Studio and build the project. Next, double click the MyProjectViewController.xib file to open it in Xcode. Insert a UIView, make it 30 pixels wide and place it in the center of the view, change its Class to UIViewSplitter. Then add two other views to either side of the Splitter for it to control.

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

using Appracatappra.UIKit.ActionViewSplitter;
...

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

    // Set the location of the dragThumb
    viewSplitter.thumbLocation = UIViewSplitterThumbLocation.BottomOrRight;

    // Make the entire splitter draggable
    viewSplitter.fullSplitterDraggable = true;

    // Attach views
    viewSplitter.viewBefore=leftView;
    viewSplitter.minimumBefore = 0f;
    viewSplitter.viewAfter = rightView;
    viewSplitter.minimumAfter = 150F;

    // Send the splitter to the "before mimimum" if double tapped
    // If double tapped again, return to the previous location
    viewSplitter.doubleTapAction = UIViewSplitterDoubleTapAction.MovesToMimimumBefore;

    // Setup subSplitter
    subSplitter.onMainView = false;
    subSplitter.viewBefore = topView;
    subSplitter.minimumBefore = 200f;
    subSplitter.viewAfter = bottomView;
    subSplitter.minimumAfter = 100f;

    // Move the top view instead of scaling it
    subSplitter.viewBeforeAdjustAction = UIViewSplitterAdjustViewAction.MoveView;

    // Wireup the move button
    moveButton.TouchDown += (sender, e) => {
        // Move the first splitter to the given location
        viewSplitter.splitterAt=100f;
    };

    // Wireup the restyle button
    restyleButton.TouchDown+= (sender, e) => {
        // Restyle to second splitter
        subSplitter.appearance.background=UIColor.FromRGBA(0.038f, 0.581f, 0.836f, 1.000f);
        subSplitter.appearance.backgroundFade=UIColor.FromRGBA(0.587f, 1.000f, 0.568f, 1.000f);
        subSplitter.appearance.thumbBlendMode=MonoTouch.CoreGraphics.CGBlendMode.Normal;
        subSplitter.appearance.thumbBackground=UIColor.FromRGBA(0.587f, 1.000f, 0.568f, 1.000f);
        subSplitter.appearance.thumbBorder=UIColor.FromRGBA(0.038f, 0.581f, 0.836f, 1.000f);
    };
}

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

Trial Version

The Trial version of ActionViewSplitter is fully functional however the splitter background is watermarked. The fully licensed version removes this watermark.

Some screenshots created with PlaceIt.

ActionViewSplitter Component

Getting Started with ActionViewSplitters

To use an ActionViewSplitter in your mobile application include the ActionPack.iOS component and reference the following using statement in your C# code:

using Appracatappra.ActionComponents.ActionViewSplitter;

Optimum Splitter Size

Whether creating an ActionViewSplitter in Xcode via a .xib file or direct in C#, we suggest the optimum splitter size of 30 pixels wide for Vertical splitters or 30 pixels high for Horizontal splitters. Gives gives enough "finger room" to keep the splitter touchable and draggable. However, thicker splitters can be created if so desired.

Adding an ActionViewSplitter

ActionViewSplitter was designed to be quickly and easily added to an iPad, iPhone or Universal Xamarin mobile app project. Either add a UIView to your project in Xcode and switch it's type to UIViewSplitter or create the splitter completely in C# code and add it to your Superview.

Based on how you create your splitter, it will automatically decide if it is a Horizontal or Vertical ActionViewSplitter.

Next create two subviews of any type and add them to the project for your ActionViewSplitter to controll. One on either side of the splitter touching trailing and leading edge of the ActionViewSplitter and pinned to the edge of the Superview they all belong to.

Attaching Child Views

In C# code, attach the two view that you want your view splitter to control and optionally set the minimum space before and the minimum space after the ActionViewSplitter. Example:

// Attach views
viewSplitter.viewBefore=leftView;
viewSplitter.minimumBefore = 0f;
viewSplitter.viewAfter = rightView;
viewSplitter.minimumAfter = 150F;

Adjust Draggability and Double-Tap Action

You can make the full body of your ActionViewSplitter draggable or limit dragging to just the dragTab. For example:

// Make the entire splitter draggable
viewSplitter.fullSplitterDraggable = true;

You can also control what happens if the user double-tapps your ActionViewSplitter as the following:

  • None - No action taken
  • MovesToMinimumBefore - The splitter jumps to the mimumum before position
  • MovesToMinimumAfter - The splitter jumps to the mimumum after position

Example:

// Send the splitter to the "before mimimum" if double tapped
// If double tapped again, return to the previous location
viewSplitter.doubleTapAction = UIViewSplitterDoubleTapAction.MovesToMimimumBefore;

Styling your ActionViewSplitter

ActionViewSplitter have several properties to adjust their appearance and the location of their dragThumbs. Example:

// Set the location of the dragThumb
viewSplitter.thumbLocation = UIViewSplitterThumbLocation.BottomOrRight;

// Restyle the splitter
viewSplitter.appearance.background=UIColor.FromRGBA(0.038f, 0.581f, 0.836f, 1.000f);
viewSplitter.appearance.backgroundFade=UIColor.FromRGBA(0.587f, 1.000f, 0.568f, 1.000f);
viewSplitter.appearance.thumbBlendMode=MonoTouch.CoreGraphics.CGBlendMode.Normal;
viewSplitter.appearance.thumbBackground=UIColor.FromRGBA(0.587f, 1.000f, 0.568f, 1.000f);
viewSplitter.appearance.thumbBorder=UIColor.FromRGBA(0.038f, 0.581f, 0.836f, 1.000f);

Examples

For full examples of using ActionViewSplitter in your mobile application please see the APTest.iOS example app included with this component. ActionViewSplitter are in the TicketView_iPad.xib and TicketView_iPhone.xib files.

The APTest.iOS app not only includes this documentation but it also includes the full API documentation for the entire ActionPack component suite.

See the API documentation for ActionViewSplitter for a complete list of features and their usage.

Trial Version

The Trial version of ActionViewSplitter is fully functional however the splitter background is watermarked. The fully licensed version removes this watermark.

ActionViewSplitter for iOS

You can find the full API documentation for ActionViewSplitter iOS here:

http://appracatappra.com/api/ios/

At Appracatappra we take quality very seriously and always strive to provide the easiest to use and most trouble free Xamarin Studio Components available.

If you are experiencing an issue with one of our components or have a question about it's usage please either visit our support forum or fill out the request form below:

Your Name (required)

Your Email (required)

Subject

Component:

Device:

iPhone/iPod TouchiPadAndroid PhoneAndroid Tablet

OS Version:

Type:

Question/Issue

Verification:

captcha

Please enter the text above: