This quick start tutorial demonstrates how to create a simple iOS application with TKSideDrawer
.
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.
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 ();
}
}
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();
}