Action Nav Bar

For iOS and Android development with Xamarin and Visual Studio

Available exclusively as part of the Action Component suite.

About Action Nav Bar

Action Nav Bar is a left-side, icon based, customizable navigation strip and view controller for tablet based iOS and Android devices that supports several different types of user definable buttons such as:

View – Handles hiding and showing an attached view.
AutoDisposingView – Handles hiding and showing an attached view and removes the view from memory when it loses focus.
Tool – A button that has a user defined action when touched.
Notification – A non-touchable icon displayed in the bar.

Action Nav Bar has three separate regions that you can add buttons to: Top, Middle and Bottom. Action Nav Bar automatically handles the spacing and placement of buttons within the regions and responds to UIInterfaceOrientation events with smoothly animated transitions.

Note: While Action Nav Bar will work on small screen devices such as iPhones, iPod Touches and Android phones, it was designed for tablet devices as may not provide the best User Experience in these situations.

Features

Action Nav Bar features a fully documented API with full comments for every element. Action Nav Bar is fully customizable with user definable appearances for every element of its UI and its interface is built from vectors to be fully resolution independent.

iOS Example

Action Nav Bar was designed to make adding it to an iOS project super easy. Open your .xib file in Xcode, insert a UIView, make it 80 pixels wide and pin it to the left hand side of the screen. Then change its Class to ACNavBar, next switch to the Editor view in Xcode and create an outlet for your ACNavBar called “navBar”.

Switch back to Visual Studio and quickly add buttons and views to your Action Nav Bar for it to control:

using ActionComponents;
...

public override void ViewDidLoad ()
{
    UIImageView homeView = null;
    ACNavBarButton warning = null, delete = null, ticket = null;

    base.ViewDidLoad ();

    //---------------------------------------------
    // NavBar created from a UIView set to ACNavBar
    // in Xcode and saved to the .xib file
    //---------------------------------------------
    // Adjust the appearance of the NavBar
    navBar.appearance.border = UIColor.Gray;

    // Create a new view from code
    // Adjust view to match current interface orientation
    switch (UIApplication.SharedApplication.StatusBarOrientation) {
    case UIInterfaceOrientation.LandscapeLeft:
    case UIInterfaceOrientation.LandscapeRight:
        homeView = new UIImageView(new RectangleF(0,0,1024,748));
        homeView.Image=UIImage.FromFile("homeview.png");
        break;
    case UIInterfaceOrientation.Portrait:
    case UIInterfaceOrientation.PortraitUpsideDown:
        homeView = new UIImageView(new RectangleF(0,0,748,1004));
        homeView.Image=UIImage.FromFile("homeview-portrait.png");
        break;
    }

    //---------------------------------------------
    // Add buttons to the top of the bar
    //---------------------------------------------
    // The first button added to the top collection will automatically be selected
    ACNavBarButton home = navBar.top.AddButton (UIImage.FromFile ("Icons/house.png"), true, false);

    // Wire up request for this button's view
    home.RequestNewView += responder => {
        // Attaching a view to a button will automatically display it under the NavBar
        home.attachedView = homeView;
    };

    //Add an action to the home button
    home.Touched += responder => {
        // Hide warning notification in NavBar
        if (warning != null) warning.Hidden = true;

        // Disable the delete button
        if (delete != null) delete.Enabled = false;
    };

    // Request that the initial view being controlled by the NavBar be displayed
    navBar.DisplayDefaultView ();

    navBar.top.AddAutoDisposingButton (UIImage.FromFile ("Icons/bar-chart.png"), true, false).RequestNewView += responder => {
        // Build new view from a .xib file and attach it to the button it will automatically
        // be displayed under the NavBar
        responder.attachedView = BarChartView.Factory (this);
    };

    navBar.top.AddButton (UIImage.FromFile ("Icons/orgchart.png"), true, false).RequestNewView += responder => {
        responder.attachedView = OrgChartView.Factory (this);
    };

    ticket = navBar.top.AddButton (UIImage.FromFile ("Icons/ticket.png"), true, false);

    ticket.RequestNewView += responder => {
        responder.attachedView = TicketView.Factory (this);
    };

    ticket.Touched += responder => {
        // Enable the delete button
        if (delete != null) delete.Enabled = true;
    };

    //--------------------------------------------
    // Add buttons to the middle of the bar
    //--------------------------------------------
    navBar.middle.AddTool (UIImage.FromFile ("Icons/printer.png"), true, false).Touched += responder => {
        // Display Alert Dialog Box
        using (var alert = new UIAlertView ("NavBar", "Sorry but printing is not available at this time.", null, "OK", null)) {
            alert.Show ();    
        }

        // Display warning notification in NavBar
        if (warning != null) warning.Hidden = false;
    };

    delete = navBar.middle.AddTool (UIImage.FromFile ("Icons/trash.png"), false, false);
    delete.Touched += responder => {
        // Verify that the user really wants to stop downloading information
        var alert = new UIAlertView ("NavBar", "Delete Item?", null, "Cancel", "OK");
        // Wireup events
        alert.CancelButtonIndex = 0;
        alert.Clicked += (sender, buttonArgs) => {
            // Did the user verify termination?
            if (buttonArgs.ButtonIndex == 1) {
                // Yes
                delete.Enabled = false;
            }
        };

        // Display dialog
        alert.Show ();
    };

    //-----------------------------------------
    // Add buttons to the bottom of the bar
    //-----------------------------------------
    warning = navBar.bottom.AddNotification (UIImage.FromFile ("Icons/warning.png"), null, true);
    navBar.bottom.AddButton (UIImage.FromFile ("Icons/gear.png"), true, false).RequestNewView += responder => {
        responder.attachedView = SettingsView.Factory (this, navBar);
    };
}

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

Android Example

Action Nav Bar was designed to make adding it to an Android project super easy. Open your Main.axml file in Visual Studio, insert a View, make it 80 pixels wide and pin it to the left hand side of the screen. Then change its Class to ACNavBar then edit it’s Activity and make it look like the following:

using ActionComponents;
...

[Activity (Label = "NavBarTestAndroid", MainLauncher = true)]
public class Activity1 : Activity
{
    #region Constants
    const int DialogLongMessage=1;
    const int DialogLongMessageOkCancel=2;
    #endregion 

    #region Private Variables
    private ACNavBar navBar;
    private ImageView viewHome;
    private View viewBarChart, viewOrgChart, viewTicket, viewSettings;
    private Button showHideNavBar = null;
    private ACNavBarButton warning = null, delete = null, ticket = null;
    private string dialogMessage="";
    #endregion 

    #region Override Methods
    protected override void OnCreate (Bundle bundle)
    {

        base.OnCreate (bundle);

        // Set our view from the "main" layout resource
        SetContentView (Resource.Layout.Main);

        // Gain Access to all views and controls in our layout
        navBar = FindViewById (Resource.Id.navBar);
        viewHome = FindViewById (Resource.Id.viewHome);

        //Are we rehydrating after a state change?
        if (bundle!=null) {
            //Yes, attempt to restore the previously selected NavBar button
            navBar.rehydrationId = bundle.GetInt ("SelectedButton");
            navBar.Hidden = bundle.GetBoolean("Hidden");
        }

        // Style bar
        navBar.appearance.border = Color.LightGray;

        //---------------------------------------------
        // Add buttons to the top of the bar
        //---------------------------------------------
        // The first button added to the top collection will automatically be selected
        ACNavBarButton home = navBar.top.AddButton(Resource.Drawable.house,true,false);

        // Wire up request for this button's view
        home.RequestNewView += responder => {
            // Attach view to the button
            responder.attachedView=viewHome;
        };

        // Add an action to the home button
        home.Touched += responder => {
            // Hide warning notification in NavBar
            if (warning != null) warning.Hidden = true;

            // Disable the delete button
            if (delete != null) delete.Enabled = false;
        };

        // Add Bar Chart
        navBar.top.AddAutoDisposingButton (Resource.Drawable.barchart,true,false).RequestNewView += (responder) => {
            // Bring view into existance
            viewBarChart = (View)LayoutInflater.Inflate (Resource.Layout.ViewBarChart,null);

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

        // Add Org Chart
        navBar.top.AddAutoDisposingButton (Resource.Drawable.orgchart,true,false).RequestNewView += (responder) => {
            // Bring view into existance
            viewOrgChart = (View)LayoutInflater.Inflate (Resource.Layout.ViewOrgChart,null);

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

        // Add ticket
        ticket = navBar.top.AddAutoDisposingButton (Resource.Drawable.ticket,true,false);

        ticket.RequestNewView += responder => {
            // Bring view into existence
            viewTicket = (View)LayoutInflater.Inflate (Resource.Layout.ViewTIcket,null);

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

        ticket.Touched += responder => {
            // Enable the delete button
            if (delete != null) delete.Enabled = true;
        };

        //--------------------------------------------
        // Add buttons to the middle of the bar
        //--------------------------------------------
        navBar.middle.AddTool (Resource.Drawable.printer,true,false).Touched+= (responder) => {
            // Inform user (dialogMessage defined as a global variable)
            dialogMessage="Sorry but printing is not supported at this time";
            ShowDialog (DialogLongMessage);

            // Display warning notification in NavBar
            if (warning != null) warning.Hidden = false;
        };

        delete = navBar.middle.AddTool (Resource.Drawable.trash,false,false);

        delete.Touched += (responder) => {
            // Inform user (dialogMessage defined as a global variable)
            dialogMessage="Are you sure you what to delete the item?";
            ShowDialog (DialogLongMessageOkCancel);
        };

        //-----------------------------------------
        // Add buttons to the bottom of the bar
        //-----------------------------------------
        warning = navBar.bottom.AddNotification (Resource.Drawable.warning, null, true);
        navBar.bottom.AddAutoDisposingButton (Resource.Drawable.gear, true, false).RequestNewView += responder => {
            // Bring view into existance
            viewSettings = (View)LayoutInflater.Inflate (Resource.Layout.ViewSettings,null);

            // Attach view to the button
            responder.attachedView=viewSettings;

            // grab show/hide button
            showHideNavBar = FindViewById (Resource.Id.showHideButton);

            //-----------------------------------------
            // Wireup button action
            //-----------------------------------------
            if (showHideNavBar!=null) {
                showHideNavBar.Click += (sender, e) => {
                    //Is the NavBar visible?
                    navBar.Hidden=(!navBar.Hidden);
                };
            }
        };

    }

    protected override void OnStart ()
    {
        base.OnStart ();

        //-----------------------------------------
        // Ask the Nav Bar to display the first view
        //-----------------------------------------
        navBar.DisplayDefaultView();
    }

    protected override Dialog OnCreateDialog (int id)
    {
        Dialog alert = null;
        AlertDialog.Builder builder;

        base.OnCreateDialog (id);

        // Build requested dialog type
        switch (id){
        case DialogLongMessage:
            builder = new AlertDialog.Builder(this);
            builder.SetIcon (Android.Resource.Attribute.AlertDialogIcon);
            builder.SetTitle ("NavBar");
            builder.SetMessage(dialogMessage);
            builder.SetPositiveButton ("OK", delegate(object sender, DialogClickEventArgs e) {
                // Ignore for now
            });
            alert=builder.Create ();
            break;
        case DialogLongMessageOkCancel:
            builder = new AlertDialog.Builder(this);
            builder.SetIcon (Android.Resource.Attribute.AlertDialogIcon);
            builder.SetTitle ("NavBar");
            builder.SetMessage(dialogMessage);
            builder.SetPositiveButton ("OK", delegate(object sender, DialogClickEventArgs e) {
                // Ignore for now
            });
            builder.SetNegativeButton ("Cancel", delegate(object sender, DialogClickEventArgs e) {
                // Ignore for now
            });
            alert=builder.Create ();
            break;
        }

        // Return dialog
        return alert;
    }

    protected override void OnSaveInstanceState (Bundle outState)
    {
        //Save the NavBar's selected button before the state change
        outState.PutInt("SelectedButton",navBar.SelectedButtonId ());
        outState.PutBoolean("Hidden",navBar.Hidden);

        base.OnSaveInstanceState (outState);
    }
    #endregion
}

Trial Version

The Trial version of Action Nav Bar is fully functional however the bar background is watermarked. The fully licensed version removes this watermark.