SideDrawer: Getting Started

This quick start tutorial demonstrates how to create a simple iOS application with TKSideDrawer.

Prerequisites

This article assumes that you have followed the Downloading UI for iOS, Installing UI for iOS and Setting Up the project steps from the common Getting Started article.

Setting up TKSideDrawer with TKSideDrawerController

Now that our project is created and the TelerikUI.framework is added, we can start referencing and using the TelerikUI types:

Open your ViewController.m file and add a reference to the TelerikUI header file:

#import <TelerikUI/TelerikUI.h>

Note that starting with Xcode 6 Apple doesn't generate the precompiled headers file automatically. That is why you should add import the UIKit framework before importing TelerikUI:

#import <UIKit/UIKit.h>

If you are writing Swift, add the same line in your bridging header.

If you are using Xamarin, add a reference to TelerikUI.dll in your project and use the using directive:

using TelerikUI;

Open the AppDelegate.h file and add references to the ViewController and TKSideDrawerController header files:

#import "ViewController.h"
#import <TelerikUI/TKSideDrawerController.h>

Type the following code in your AppDelegate implementation class, replacing the didFinishLaunchingWithOptions method (FinishedLaunching for C#):

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // Override point for customization after application launch.

    //For the SideDrawer GettingStarted
    SideDrawerGettingStarted *main = [[SideDrawerGettingStarted alloc] init];
    TKSideDrawerController *sideDrawerController = [[TKSideDrawerController alloc] initWithContent:main];
    [self.window setRootViewController:sideDrawerController];

    return YES;
}

//..
@end
class AppDelegate: UIResponder, UIApplicationDelegate {

   var window: UIWindow?

   @nonobjc func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject : AnyObject]?) -> Bool {
   // Override point for customization after application launch.

       let sideDrawerGettingStarted = SideDrawerGettingStartedViewController()
       let sideDrawerController = TKSideDrawerController(content: sideDrawerGettingStarted)
       self.window?.rootViewController = sideDrawerController

       return true
   }

//..
}
[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    // class-level declarations

    public override UIWindow Window {
        get;
        set;
    }

    public override bool FinishedLaunching (UIApplication application, NSDictionary launchOptions)
    {
        SideDrawerGettingStarted main = new SideDrawerGettingStarted ();
        TKSideDrawerController sideDrawerController = new TKSideDrawerController (main);
        this.Window.RootViewController = sideDrawerController;

        return true;
    }

    //..
}

This code creates an instance of TKSideDrawerController and sets it as a root view controller. TKSideDrawerController is a containter controller that has an TKSideDrawer instance embedded inside. The instance is then used by the content controllers of the TKSideDrawerController.

The next step is to add UINavigationBar, and items to our SideDrawer. You can get the TKSideDrawer instance from the TKSideDrawerController using the sideDrawer property.

Or, instead of using the sideDrawer property, you can call the TKSideDrawer class method findSideDrawerForViewController: (especially useful and necessary for the C# implementation).

Type the following code in the viewDidLoad method of the content controller:

@implementation SideDrawerGettingStarted
{
}

- (void)viewDidLoad {
[super viewDidLoad];

   self.view.backgroundColor = [UIColor grayColor];

   UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 64)];
   UINavigationItem *navItem = [[UINavigationItem alloc] initWithTitle:@"Getting Started"];
   UIBarButtonItem *showSideDrawerButton = [[UIBarButtonItem alloc] initWithTitle:@"Show"  style:UIBarButtonItemStylePlain target:self action:@selector(showSideDrawer)];
   navItem.leftBarButtonItem = showSideDrawerButton;
   navBar.items = @[navItem];
   [self.view addSubview:navBar];

   TKSideDrawerSection *sectionPrimary = [self.sideDrawer addSectionWithTitle:@"Primary"];
   [sectionPrimary addItemWithTitle:@"Social"];
   [sectionPrimary addItemWithTitle:@"Promotions"];

   TKSideDrawerSection *sectionLabels = [self.sideDrawer addSectionWithTitle:@"Labels"];
   [sectionLabels addItemWithTitle:@"Important"];
   [sectionLabels addItemWithTitle:@"Starred"];
   [sectionLabels addItemWithTitle:@"Sent Mail"];
   [sectionLabels addItemWithTitle:@"Drafts"];
}

- (void)showSideDrawer
{
   [self.sideDrawer show];
}

@end
class SideDrawerGettingStartedViewController: UIViewController {

   override func viewDidLoad() {
       super.viewDidLoad()

       self.view.backgroundColor = UIColor.gray

       let navBar = UINavigationBar(frame: CGRect.init(x:0, y:0, width:self.view.frame.size.width, height:64))
       let navItem = UINavigationItem(title: "Getting Started")
       let showSideDrawerButton = UIBarButtonItem(title: "Show", style: UIBarButtonItemStyle.plain, target: self, action: #selector(showSideDrawer))
       navItem.leftBarButtonItem = showSideDrawerButton
       navBar.items = [navItem]
       self.view.addSubview(navBar)

       let sectionPrimary = self.sideDrawer.addSection(withTitle: "Primary")
        _ = sectionPrimary?.addItem(withTitle: "Social")
        _ = sectionPrimary?.addItem(withTitle: "Promotions")

       let sectionLabels = self.sideDrawer.addSection(withTitle: "Primary")
        _ = sectionLabels?.addItem(withTitle: "Social")
        _ = sectionLabels?.addItem(withTitle: "Promotions")
        _ = sectionLabels?.addItem(withTitle: "Sent Mail")
        _ = sectionLabels?.addItem(withTitle: "Drafts")
   }

   func showSideDrawer() {
       self.sideDrawer.show()
   }

}
public class SideDrawerGettingStarted : UIViewController
{
    TKSideDrawer SideDrawer;

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

        this.View.BackgroundColor = UIColor.Gray;

        UINavigationBar navBar = new UINavigationBar (new CGRect (0, 0, this.View.Frame.Size.Width, 64));
        UINavigationItem navItem = new UINavigationItem ("Getting Started");
        UIBarButtonItem showSideDrawerButton = new UIBarButtonItem ("Show", UIBarButtonItemStyle.Plain, this, new Selector ("ShowSideDrawer"));
        navItem.LeftBarButtonItem = showSideDrawerButton;
        navBar.Items = new UINavigationItem[]{ navItem };
        this.View.AddSubview (navBar);

        this.SideDrawer = TKSideDrawer.FindSideDrawer (0, this);
        TKSideDrawerSection sectionPrimary = this.SideDrawer.AddSection ("Primary");
        sectionPrimary.AddItem ("Social");
        sectionPrimary.AddItem ("Promotions");

        TKSideDrawerSection sectionLabels = this.SideDrawer.AddSection ("Labels");
        sectionLabels.AddItem ("Important");
        sectionLabels.AddItem ("Starred");
        sectionLabels.AddItem ("Sent Mail");
        sectionLabels.AddItem ("Drafts");
    }

    [Export ("ShowSideDrawer")]
    public void ShowSideDrawer ()
    {
        this.SideDrawer.Show ();
    }
}

Attaching TKSideDrawer to UIViewController

TKSideDrawer can be attached to your view controllers without TKSideDrawerController. In such a scenario, you should initialize TKSideDrawerView that should be added as subview to your UIViewController's view and use its mainView property to set up the content of the view.

@implementation SideDrawerGettingStarted

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.navigationController.interactivePopGestureRecognizer.enabled = NO;

    self.sideDrawerView = [[TKSideDrawerView alloc] initWithFrame:self.view.bounds];
    [self.view addSubview:_sideDrawerView];

    UIImageView *backgroundView = [[UIImageView alloc] initWithFrame:self.sideDrawerView.mainView.bounds];
    backgroundView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
    backgroundView.image = [UIImage imageNamed:@"sdk-examples-bg"];
    [self.sideDrawerView.mainView addSubview:backgroundView];

    UINavigationBar *navBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(self.sideDrawerView.mainView.bounds), 44)];
    _navItem = [[UINavigationItem alloc] init];
    _navItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"menu"]
                                                                  style:UIBarButtonItemStylePlain
                                                                 target:self
                                                                 action:@selector(showSideDrawer)];;
    navBar.items = @[_navItem];
    navBar.autoresizingMask = UIViewAutoresizingFlexibleWidth;
    [self.sideDrawerView.mainView addSubview:navBar];

    TKSideDrawer *sideDrawer = self.sideDrawer;
    sideDrawer.delegate = self;
    sideDrawer.headerView = [[SideDrawerHeaderView alloc] initWithButton:YES target:self selector:@selector(dismissSideDrawer)];
    sideDrawer.style.headerHeight = 44;
    sideDrawer.style.shadowMode = TKSideDrawerShadowModeHostview;
    sideDrawer.style.shadowOffset = CGSizeMake(-2, -0.5);
    sideDrawer.style.shadowRadius = 5;
    TKSideDrawerSection *section = [sideDrawer addSectionWithTitle:@"Primary"];
    [section addItemWithTitle:@"Social"];
    [section addItemWithTitle:@"Promotions"];

    section = [sideDrawer addSectionWithTitle:@"Labels"];
    [section addItemWithTitle:@"Important"];
    [section addItemWithTitle:@"Starred"];
    [section addItemWithTitle:@"Sent Mail"];
    [section addItemWithTitle:@"Drafts"];
}

- (void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    _sideDrawerView.frame = self.view.bounds;
}

- (void)viewWillDisappear:(BOOL)animated
{
    [super viewWillDisappear:animated];
    self.navigationController.interactivePopGestureRecognizer.enabled = YES;
}

- (void)showSideDrawer
{
    [self.sideDrawer show];
}

- (void)dismissSideDrawer
{
    [self.sideDrawer dismiss];
}

- (TKSideDrawer *)sideDrawer
{
    return _sideDrawerView.defaultSideDrawer;
}
class SideDrawerGettingStarted: TKExamplesExampleViewController, TKSideDrawerDelegate {

    let sideDrawerView = TKSideDrawerView()
    let navItem = UINavigationItem()

    override func viewDidLoad() {
        super.viewDidLoad()

        self.sideDrawerView.frame = self.view.bounds
        self.view.addSubview(sideDrawerView)

        let mainView = sideDrawerView.mainView

        let backgroundView = UIImageView(frame: mainView.bounds)
        backgroundView.autoresizingMask = UIViewAutoresizing(rawValue: UIViewAutoresizing.flexibleWidth.rawValue | UIViewAutoresizing.flexibleHeight.rawValue)
        backgroundView.image = UIImage(named: "sdk-examples-bg")
        mainView.addSubview(backgroundView)

        let navigationBar = UINavigationBar(frame: CGRect(x: 0, y: 0, width: mainView.bounds.size.width, height: 44))
        navigationBar.autoresizingMask = UIViewAutoresizing.flexibleWidth
        let showSideDrawerButton = UIBarButtonItem(image: UIImage(named: "menu"), style: UIBarButtonItemStyle.plain, target: self, action: #selector(SideDrawerGettingStarted.showSideDrawer))
        navItem.leftBarButtonItem = showSideDrawerButton
        navigationBar.items = [navItem]
        mainView.addSubview(navigationBar)

        let sideDrawer = sideDrawerView.sideDrawers[0]
        sideDrawer.delegate = self
        sideDrawer.headerView = SideDrawerHeaderView(addButton: true, target: self, selector: #selector(SideDrawerGettingStarted.dismissSideDrawer))

        sideDrawer.style.headerHeight = 44
        sideDrawer.style.shadowMode = TKSideDrawerShadowMode.hostview
        sideDrawer.style.shadowOffset = CGSize(width: -2, height: -0.5)
        sideDrawer.style.shadowRadius = 5

        var section = sideDrawer.addSection(withTitle: "Primary")
        _ = section?.addItem(withTitle: "Social")
        _ = section?.addItem(withTitle: "Promotions")

        _ = section = sideDrawer.addSection(withTitle: "Label")
        _ = section?.addItem(withTitle: "Important")
        _ = section?.addItem(withTitle: "Starred")
        _ = section?.addItem(withTitle: "Sent Mail")
        _ = section?.addItem(withTitle: "Drafts")
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        self.sideDrawerView.frame = self.view.bounds
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)

        if let navController = self.navigationController {
            if navController.responds(to: #selector(getter: UINavigationController.interactivePopGestureRecognizer)) {
                self.navigationController!.interactivePopGestureRecognizer!.isEnabled = true
            }
        }
    }


    func showSideDrawer() {
        sideDrawerView.sideDrawers[0].show()
    }

    func dismissSideDrawer() {
        sideDrawerView.sideDrawers[0].dismiss()
    }
[Register("SideDrawerGettingStarted")]
public class SideDrawerGettingStarted : XamarinExampleViewController
{
    private TKSideDrawerSection primarySection;
    private TKSideDrawerSection labelsSection;
    SideDrawerDelegate sideDrawerDelegate;

    public UINavigationItem NavItem {
        get;
        set;
    }

    public TKSideDrawerView SideDrawerView {
        get;
        set;
    }

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

        this.SideDrawerView = new TKSideDrawerView (this.View.Bounds);
        this.SideDrawerView.AutoresizingMask = UIViewAutoresizing.FlexibleHeight | UIViewAutoresizing.FlexibleWidth;
        this.View.AddSubview (this.SideDrawerView);

        UIImageView backgroundView = new UIImageView (this.SideDrawerView.MainView.Bounds);
        backgroundView.AutoresizingMask = UIViewAutoresizing.FlexibleWidth | UIViewAutoresizing.FlexibleHeight;
        backgroundView.Image = UIImage.FromBundle ("sdk-examples-bg.png");
        this.SideDrawerView.MainView.AddSubview (backgroundView);

        UINavigationBar navBar = new UINavigationBar (new CGRect (0, 0, this.SideDrawerView.MainView.Bounds.Width, 44));
        navBar.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
        this.NavItem = new UINavigationItem ();
        UIBarButtonItem showSideDrawer = new UIBarButtonItem (UIImage.FromBundle ("menu.png"), UIBarButtonItemStyle.Plain, this, new Selector ("ShowSideDrawer"));
        this.NavItem.LeftBarButtonItem = showSideDrawer;
        navBar.Items = new UINavigationItem[] { this.NavItem };
        this.SideDrawerView.MainView.AddSubview (navBar);

        primarySection = new TKSideDrawerSection ("Primary");
        primarySection.AddItem ("Social");
        primarySection.AddItem ("Promotions");

        labelsSection = new TKSideDrawerSection ("Labels");
        labelsSection.AddItem ("Important");
        labelsSection.AddItem ("Starred");
        labelsSection.AddItem ("Sent Mail");
        labelsSection.AddItem ("Drafts");

        this.sideDrawerDelegate = new SideDrawerDelegate ();
        TKSideDrawer sideDrawer = this.SideDrawerView.SideDrawers[0];
        sideDrawer.HeaderView = new SideDrawerHeader (true, this, new Selector ("DismissSideDrawer"));
        sideDrawer.AddSection (primarySection);
        sideDrawer.AddSection (labelsSection);
        sideDrawer.Delegate = this.sideDrawerDelegate;

        sideDrawer.Style.HeaderHeight = 44;
        sideDrawer.Style.ShadowMode = TKSideDrawerShadowMode.Hostview;
        sideDrawer.Style.ShadowOffset = new CGSize (-2f, -0.5f);
        sideDrawer.Style.ShadowRadius = 5;
    }

    public override void ViewWillDisappear (bool animated)
    {
        base.ViewWillDisappear (animated);
        if (this.NavigationController != null) {
            this.NavigationController.InteractivePopGestureRecognizer.Enabled = true;
        }

    }

    [Export ("ShowSideDrawer")]
    public void ShowSideDrawer()
    {
        this.SideDrawerView.SideDrawers[0].Show();
    }

    [Export ("DismissSideDrawer")]
    public void DismissSideDrawer()
    {
        this.SideDrawerView.SideDrawers[0].Dismiss();
    }