ActionView

ActionView running on iPad

ActionView running on iPad

Works With:

apple_logo google_android

ActionPack Busniess

ActionView is available exclusively as part of the ActionPack Component Suite.


  • Includes: ActionTray, DownloadManager, NavBar & ActionViewSplitter
  • ActionViews - Low level component set
  • ActionTable - Cross platform table/list manager
  • ActionToast - Toast for iOS
  • And many more functions and features

$199

About ActionView

ActionView is a collection of custom view controls and helper methods for iOS and Android that take the grunt work out of common user interface tasks. Create stunning experiences with easy by using ActionViews directly or use them as the basis of your own custom controls. If fact, ActionViews form the basis of our other Action Components in the ActionPack suite.

Reduce Repetative Code

Creating immersive, captivating mobile user interfaces usually means writing similar, repetative code for common interface tasks. At Appracatappra we say, "Why reinvent the wheel?" That's why we created our ActionView low-level tool suite. They encapsulate the logic to handle common tasks such as tapping, moving, rotating and dragging so you can focus on making your mobile app great and not the details of implementation.

ActionView Elements

The ActionView low-level tool suite is composed of the following time-saving elements:

UIActionImage

This static class contains several helper functions for working with UIImages including the ability to detect an iPhone 5 (or greater) images in the form name-568@2x.ext and automatically load them in the place of name.ext or name@2x.ext files and helper routines for easily dealing with rotation.

UIActionImage iOS Features:

  • FromFile - Returns a UIImage specified by the given filename in the form name.ext. If running on a retina based device and a file in the form name@2x.ext exists in the same path, it will be loaded instead. If running on an iPhone 5 (or greater) and a file in the form name-568@2x.ext exists, it loads automatically.
  • DegreesToRadians - Converts the given degrees to radians
  • RotateImage - Rotates the given UIImage to the given degrees.

UIActionImage Android Features:

  • FromFile - Returns a Bitmap for the image specified by the given filename and optional adjusts its width and/or height
  • ImageInfoFromFile - Returns information about the image with the given filename without loading the image into memory
  • FromResource - Returns a Bitmap for the image specified by the given resource ID and optional adjusts its width and/or height
  • ImageInfoFromResource - Returns information about the image with the given resource ID without loading the image into memory
  • CalculateInSampleSize - Calculates the sampling factor for an image being loaded into memory and down-sampled at the same time
  • RotateImage - Rotates the given image Bitmap about it center axis to the given degrees

UIActionImageView

Is a custom UIImageView that contains many useful built-in features such as being draggable with optional constraints for it's X and Y axis, user interaction events such as touched, moved and released, and provides methods to make moving, rotating and resizing easier and with less code.

UIActionImageView iOS features:

  • draggable - If true this ActionView can be dragged around the screen by the user. Optional UIActionViewDragContraints can be applied to the X and/or Y axis to automatically limit movement to none, locked, or constrained to a minimum and maximum value.
  • bringToFrontOnTouched - if true this ActionView will automatically become the top UIView when touched by the user.
  • Custom Constructors - Featuring shortcuts such as creating an UIActionImageView from an image file or placing it at a given X/Y position quickly.
  • FromFile - Loads the UIActionImageView with the image file specified using UIActionImage (with all of it's features). If this UIActionImageView already contained an image, this routine ensures that all memory used by that image is released first.
  • DisposeImage - Releases any memory used by a UIImage attached to this UIActionImageView.
  • MoveToPoint - Moves this ActionView to the given point.
  • Resize - Changes the size of this ActionView to the given size.
  • RotateTo - Rotates this ActionView to the given degrees.
  • RotateImageTo - Rotates the UIImage contained in this UIActionImageView to the given degrees.
  • PointInside - Tests to see if the given point is inside this ActionView's Frame.
  • Purge - Forces this ActionView to release all memory contained within it and recursively any subviews attached to it.
  • User Interaction Events - Respond to touched, moved, or released events to provide user interaction with this ActionView.

UIActionImageView Android features are the same as iOS with the exception of:

  • TopMargin, BottomMargin, LeftMargin, RightMargin, LayoutWidth, LayoutHeight - Helper properties for working with the Android layout the UIActionImageView is hosted in.
  • FromBitmap - Loads the UIActionImageView with the given Bitmap image.
  • FromResource - Loads the UIActionImageView with the given image from the Resource ID
  • Purge - Is not currently supported on Android

UIActionLabel

Is a custom UILabel that containes events such and touched and released and helper methods to easily handle moving, rotating, and resizing.

UIActionLabel iOS features:

  • bringToFrontOnTouched - if true this ActionView will automatically become the top UIView when touched by the user.
  • MoveToPoint - Moves this ActionView to the given point.
  • Resize - Changes the size of this ActionView to the given size.
  • RotateTo - Rotates this ActionView to the given degrees.
  • User Interaction Events - Respond to touched or released events to provide user interaction with this ActionView.

UIActionLabel Android features are the same as iOS with the exception of:

  • TopMargin, BottomMargin, LeftMargin, RightMargin, LayoutWidth, LayoutHeight - Helper properties for working with the Android layout the UIActionLabel is hosted in.
  • RotateTo - Is not currently supported on Android

UIActionView

Is a custom UIView that contains many useful built-in features such as being draggable with optional constraints for it's X and Y axis, user interaction events such as touched, moved and released, and provides methods to make moving, rotating and resizing easier and with less code.

UIActionView iOS features:

  • draggable - If true this ActionView can be dragged around the screen by the user. Optional UIActionViewDragContraints can be applied to the X and/or Y axis to automatically limit movement to none, locked, or constrained to a minimum and maximum value.
  • bringToFrontOnTouched - if true this ActionView will automatically become the top UIView when touched by the user.
  • MoveToPoint - Moves this ActionView to the given point.
  • Resize - Changes the size of this ActionView to the given size.
  • RotateTo - Rotates this ActionView to the given degrees.
  • PointInside - Tests to see if the given point is inside this ActionView's Frame.
  • Purge - Forces this ActionView to release all memory contained within it and recursively any subviews attached to it.
  • User Interaction Events - Respond to touched, moved, or released events to provide user interaction with this ActionView.

UIActionView Android features are the same as iOS with the exception of:

  • GetViewHeight, SetViewHeight, GetViewWidth, SetViewWidth, GetViewTopMargin, SetViewTopMargin, GetViewBottomMargin, SetViewBottomMargin, GetViewLeftMargin, SetViewLeftMargin, GetViewRightMaring, SetViewRightMargin - STATIC helper routines for working with Android views no matter what layout they are in.
  • TopMargin, BottomMargin, LeftMargin, RightMargin, LayoutWidth, LayoutHeight - Helper properties for working with the Android layout the UIActionView is hosted in.
  • RotateTo - Is not currently supported on Android

UIActionViewController

Is an Android component for working with Views that have been inflated from a .axml file by providing a place to hold the code to handle any UI Widgets so you don't have to put it in the Activity class that is loading the view or create a new activity to support it. Create a child of this class, override the Initialize method and place the code to handle your UI Widgets there.

UIActionViewController Android features:

  • LoadLayout - Inflates the given layout and calls the Initialize method to instantiate it.
  • Initialize - Override this method and put all of your initialization code here.
  • OnSaveInstanceState - Override this method to save the views state.
  • OnRestoreInstanceState - Override this method to restore the views state.

UIActionWebView

Is a custom UIWebView that contains many useful built-in features such as being draggable with optional constraints for it's X and Y axis, user interaction events such as touched, moved and released, and provides methods to make moving, rotating and resizing easier and with less code. Helper methods such as LoadFile and LoadURL make working with web views easier and with less code.

UIActionWebView iOS features:

  • draggable - If true this ActionView can be dragged around the screen by the user. Optional UIActionViewDragContraints can be applied to the X and/or Y axis to automatically limit movement to none, locked, or constrained to a minimum and maximum value.
  • bringToFrontOnTouched - if true this ActionView will automatically become the top UIView when touched by the user.
  • displayNetworkActivityIndicator - If true, automatically display the Network Activity Indicator when loading a file or a url.
  • LoadFile - Displays the given file in this UIActionWebView.
  • LoadURL - Displays the given URL in this UIActionWebView.
  • ClearContents - Empties this UIActionWebView of content.
  • MoveToPoint - Moves this ActionView to the given point.
  • Resize - Changes the size of this ActionView to the given size.
  • RotateTo - Rotates this ActionView to the given degrees.
  • PointInside - Tests to see if the given point is inside this ActionView's Frame.
  • Purge - Forces this ActionView to release all memory contained within it and recursively any subviews attached to it.
  • User Interaction Events - Respond to touched, moved, or released events to provide user interaction with this ActionView.

UIActionWebView Android features are the same as iOS with the exception of:

  • TopMargin, BottomMargin, LeftMargin, RightMargin, LayoutWidth, LayoutHeight - Helper properties for working with the Android layout the UIActionWebView is hosted in.
  • LoadFile - is not supported on Android.
  • LoadAssest - Loads the given file from the Assests folder of your application
  • RotateTo - Is not currently supported on Android

iOSDevice

Is a static, helper class that returns information about the iOS device your Xamarin.iOS app is running on.

iOSDevice features:

  • isPhone - If true, you are running on an iPhone device.
  • isPad - If true, you are running on an iPad device.
  • is568h - If true, you are running on an iPhone 5 or greater device.
  • isRetina - If true, you are running on a retina display iOS device.
  • currentDeviceOrientation - Returns the rotation of the iOS devices as UIInterfaceOrientation.
  • RotatedScreenBounds - Returns the Bounds of the iOS devices screen adjusted for rotation.
  • AvailableScreenBounds - Returns the Bounds of the iOS devices screen adjusted for rotation minus the space taken up by the Status Bar if it is visible in the current mobile application.

Features

ActionView includes a fully documented API with comments for every feature. ActionView is available exclusively as part of the ActionPack Action Component Suite by Appracatappra, LLC.

Trial Version

The Trial versions of ActionViews are fully functional however the background of several components are watermarked. The fully licensed version removes these watermark.

Some screenshots created with PlaceIt.

ActionView Components

Getting Started with ActionViews

ActionView is available exclusively as part of the ActionPack Action Component Suite by Appracatappra, LLC. To use an ActionView in your mobile application include the ActionPack.iOS or ActionPack.Android component and reference the following using statement in your C# code:

using Appracatappra.ActionComponents.ActionView;

To use the iOSDevice element of the ActionView also include the following:

using Appracatappra.ActionComponents.Device;

Using Dragable

Several of the elements of ActionView feature built-in drag handling with optional constraints on the X and/or Y axis. In the following example a UIActionImageView has been added to our .xib file. In code we will make it draggable, lock it's Y coordinate in place and allow the X coordinate to be drug within a given range:

// Set thumb to be draggable and apply limits to it's movement
dragThumb.draggable = true;
dragThumb.xConstraint.constraintType = UIActionViewDragConstraintType.Constrained;
if (iOSDevice.isPad) {
    dragThumb.xConstraint.minimumValue = 140f;
    dragThumb.xConstraint.maximumValue = 920f;
} else {
    dragThumb.xConstraint.minimumValue = 58f;
    dragThumb.xConstraint.maximumValue = 272f;
}
dragThumb.yConstraint.constraintType = UIActionViewDragConstraintType.Locked;

The drag controls work exactly the same on Android as well.

User Interaction

Several of the elements of ActionView were designed to handle interaction via their touched, moved, or released events. The following is an example of handling a user touch on an UIActionLabel added to our .xib file:

// Show graphic when the label is touched
labelWhyChoose.Touched += (view) => {
    // Define Animation
    UIView.BeginAnimations("ShowWhyChoose");
    UIView.SetAnimationDuration(1.0f);

    // Animate property
    whyChooseBox.Alpha=1.0f;

    // Execute Animation
    UIView.CommitAnimations();
};

And here is an example of handling a move event for our dragThumb UIactionImageView defined above:

// Wire-up the moved event
dragThumb.Moved += (view) => {
    // Convert the Left position into an index
    var index = ThumbPositionToIndex(view.Frame.Left);

    // Use shortcut feature of UIActionImageView to change image
    // NOTE: Existing image is automatically purged from memory before change
    switch(index){
    case 0:
        acBadge.FromFile ("ACBadge.png");
        banner.FromFile("Banner.png");
        break;
    case 1:
        acBadge.FromFile ("ACBadge2.png");
        banner.FromFile("Banner2.png");
        break;
    case 2:
        acBadge.FromFile ("ACBadge3.png");
        banner.FromFile("Banner3.png");
        break;
    case 3:
        acBadge.FromFile ("ACBadge4.png");
        banner.FromFile("Banner4.png");
        break;
    case 4:
        acBadge.FromFile ("ACBadge5.png");
        banner.FromFile("Banner5.png");
        break;
    }
};

Again, user interaction is the same on Android

UIActionViewController

The UIActionViewController is useful when handling the views controlled by a NavBar ActionComponent. Create your layout in a .axml file as usual. Next create a new view controller class to handle the layout and inherrit from UIActionViewController, example:

using Appracatappra.ActionComponents.ActionView;
...

namespace APTest.Android
{
    public class DocumentViewController : UIActionViewController 
    {
        #region Private Variables
        // Storage for our UI widgets
        private UIActionWebView webView;
        ...
        #endregion 

        #region Constructors
        // Required minimal Constructor
        public DocumentViewController (Activity activity, int resourceID) :  base(activity, resourceID) {

        }
        #endregion 

        #region Override Methods
        // Required override of initialize to wire-up your widgets
        public override void Initialize ()
        {
            // Access interface items
            webView = activity.FindViewById<UIActionWebView> (Resource.Id.webView);
            ...

            //---------------------------------------------
            // Configure Webview
            //---------------------------------------------
            webView.LoadAsset (String.Format ("{0}About.html",currentComponent));
            ...

        }
        #endregion 
    }
}

Use the following code to call the controller, load the view it controls and wire-up its widgets (this example is from a NavBar ActionComponent):

// Add document view
navBar.top.AddAutoDisposingButton (Resource.Drawable.book,true,false).RequestNewView += (responder) => {
    // Bring view into existance
    viewDocument = new DocumentViewController(this,Resource.Layout.DocumentView);

    // Attach view to the button
    responder.attachedView = viewDocument.view;
};

Examples

For full examples of using ActionViews in your mobile application please see the APTest.iOS or APTest.Android example app included with this component. ActionView are used throughout both apps.

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

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

Trial Version

The Trial version of ActionViews are fully functional however the background of several elements are watermarked. The fully licensed version removes these watermarks.

ActionView for iOS

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

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

 

ActionView for Android

You can find the full API documentation for ActionView Android here:

http://appracatappra.com/api/android/

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: