TKSideDrawer: Customizations

TKSideDrawer allows customizing almost every aspect of its visual appearance. This article demonstrates some of the customization techniques that can be used with it.

The most useful settings for changing the visual appearance of TKSideDrawer are grouped in its style property.

sideDrawer.style.headerHeight = 44;
sideDrawer.style.shadowMode = TKSideDrawerShadowModeHostview;
sideDrawer.style.shadowOffset = CGSizeMake(-2, -0.5);
sideDrawer.style.shadowRadius = 5;

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

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

Note that the default transition set to TKSideDrawer is SlideInOnTop whith blur enabled. If you prefer a solid color instead, you should set the blurType property to TKSideDrawerBlurTypeNone before setting the desired fill:

self.sideDrawer.fill = [TKSolidFill solidFillWithColor:[UIColor grayColor]];
self.sideDrawer.style.blurType = TKSideDrawerBlurTypeNone;

sideDrawer.fill = TKSolidFill(color: UIColor.gray)
sideDrawer.style.blurType = TKSideDrawerBlurType.none

sideDrawer.Fill = new TKSolidFill (UIColor.Gray);
sideDrawer.Style.BlurType = TKSideDrawerBlurType.None;

There are cases when you may need to update the styles of specific TKSideDrawer items like the text color. Or, you may need to show a separator. This can be done by adopting the TKSideDrawerDelegate protocol and implementing its sideDrawer:updateVisualsForItem:inSection: method.

- (void)sideDrawer:(TKSideDrawer *)sideDrawer updateVisualsForItemAtIndexPath:(NSIndexPath *)indexPath
{
    TKSideDrawerSection *section = sideDrawer.sections[indexPath.section];
    TKSideDrawerItem *item = section.items[indexPath.item];
    item.style.contentInsets = UIEdgeInsetsMake(0, -5, 0, 0);
}

func sideDrawer(_ sideDrawer: TKSideDrawer!, updateVisualsForItemAt indexPath: IndexPath!) {
    let currentItem = (sideDrawer.sections[indexPath.section] as! TKSideDrawerSection).items[indexPath.item] as! TKSideDrawerItem
    currentItem.style.contentInsets = UIEdgeInsetsMake(0, -10, 0, 0)
    currentItem.style.separatorColor = TKSolidFill(color: UIColor.clear)
}

public override void UpdateVisualsForItem (TKSideDrawer sideDrawer, NSIndexPath indexPath)
{
    TKSideDrawerItem item = sideDrawer.Sections[indexPath.Section].Items[indexPath.Item];
    item.Style.ContentInsets = new UIEdgeInsets (0, -5, 0, 0);
    item.Style.SeparatorColor = new TKSolidFill (UIColor.Clear);
}

If needed you can easily update the visual styles of the sections. This is done by implementing TKSideDrawerDelegate method sideDrawer:updateVisualsForSection::

- (void)sideDrawer:(TKSideDrawer *)sideDrawer updateVisualsForSection:(NSInteger)sectionIndex
{
    TKSideDrawerSection *section = sideDrawer.sections[sectionIndex];
    section.style.contentInsets = UIEdgeInsetsMake(0, -15, 0, 0);
}

func sideDrawer(_ sideDrawer: TKSideDrawer!, updateVisualsForSection sectionIndex: Int) {
    let section = sideDrawer.sections[sectionIndex] as! TKSideDrawerSection
    section.style.contentInsets = UIEdgeInsetsMake(0, -15, 0, 0)
}

public override void UpdateVisualsForSection (TKSideDrawer sideDrawer, int sectionIndex)
{
    TKSideDrawerSection section = sideDrawer.Sections[sectionIndex];
    section.Style.ContentInsets = new UIEdgeInsets (0, -15, 0, 0);
}

Custom content

In some scenarios you may need to use custom views for TKSideDrawer header or footer. The TKSideDrawer properties headerView and footerView inherit from UIView allowing you to use the view that best suit your needs.

Setting the content property of TKSideDrawer you can easily change the content of the side drawer. It also inherits from UIView. By default the content is TKSideDrawerTableView.

Documentation for UI for Xamarion.iOS and UI for iOS

TKSideDrawer: Customizations

Custom content