11

Click here to load reader

Building Custom view controllers with Xamarin

Embed Size (px)

DESCRIPTION

Code is available at https://github.com/glennstephens/CustomCollections/ A fifteen minute talk at the last C# Mobile Developer meetup in Brisbane July 2013. Takes you through the process of creating a custom styled collection container with Xamarin Studio

Citation preview

Page 1: Building Custom view controllers with Xamarin

Collections Fun @ the Queensland C# Mobile Developers Meetup

Glenn [email protected]://www.orchardebusiness.com0432 933 972

Wednesday, 31 July 13

Page 2: Building Custom view controllers with Xamarin

iOS ViewControllers

• Most of us are familiar with the common ones

• UINavigationController

• UITabViewController

Wednesday, 31 July 13

Page 3: Building Custom view controllers with Xamarin

What if...

• We wanted a custom display of sorts

• Its surprisingly simple

Wednesday, 31 July 13

Page 4: Building Custom view controllers with Xamarin

To create custom collection systems

• You need to store a list of UIViewController

• Position these controllers where you want them

• Animate between them (optional but recommended)

• Perform Lazy Loading where/if possible

Wednesday, 31 July 13

Page 5: Building Custom view controllers with Xamarin

Creating custom collection systems

• For my Evernote style, I worked out the initial position based on the number of tabs and then animated to and from the initial position

• Tabs above the selected tab get animated up

• Tabs below the selected tab get animated down

• I expose two events OnShowTab and OnShowAll. I use this to do whatever I want in the area above the tabs, such as having a UIView fade in and out

• Hitting the tab animates to the tab

• Tapping the tab again goes back to the main screen

Wednesday, 31 July 13

Page 6: Building Custom view controllers with Xamarin

Hitting the Green Tab

Hit the tab

Hit the controller

Wednesday, 31 July 13

Page 7: Building Custom view controllers with Xamarin

Another example

• TabBar replacement

• Animates the tab status and buttons

• The same technique as the others

• Using Lazy loading of UIView Controllers this time

Wednesday, 31 July 13

Page 8: Building Custom view controllers with Xamarin

Surprisingly simple

• Again, creating a new UIViewController subclass

• Storing a list of other UIViewController subclasses

• with some extra info this time

• Using UIView based animation to get a smooth effect

Wednesday, 31 July 13

Page 9: Building Custom view controllers with Xamarin

Declaring the class

! public class AnimatedTabBarViewController : UIViewController! {! ! public AnimatedTabBarViewController () : base()! ! {! ! }

! ! public class TabEntry! ! {! ! ! public UIImage ButtonImage;! ! ! public UIViewController ViewController;

! ! ! public UILabel Label = null;! ! ! public TapableImageView Button = null;

! ! ! public bool HasCreated = false;

! ! ! public override string ToString ()! ! ! {! ! ! ! return ViewController.Title;! ! ! }! ! }

! ! public List<TabEntry> Tabs = new List<TabEntry>();

! ! public void AddTab(UIImage buttonImage, UIViewController viewController)

Wednesday, 31 July 13

Page 10: Building Custom view controllers with Xamarin

Animating where required

! ! void ProcessTabButtonTouch (object sender, EventArgs e)! ! {! ! ! // Change the Tab! ! ! ActiveTabIndex = (sender as TapableImageView).Tag;! ! ! ShowCurrentTab();

! ! ! // Animate the Button Popping in and out! ! ! UIView.BeginAnimations("MoveShapyThing");! ! ! UIView.SetAnimationDuration(0.4f);! ! ! UIView.SetAnimationCurve(UIViewAnimationCurve.EaseInOut);

! ! ! _highlightShape.Frame = new RectangleF(PaddingSizeHorizontal + ActiveTabIndex * (RectangleWidth + PaddingSizeHorizontal), ! ! ! PaddingSizeVertical, RectangleWidth, RectangleHeight);

! ! ! UIView.CommitAnimations();! ! }

Wednesday, 31 July 13

Page 11: Building Custom view controllers with Xamarin

Q&A

• This was a quick 15 minute talk at the July 2013 Queensland C# Mobile Developers Meetup http://www.meetup.com/Queensland-based-MonoTouch-and-Mono-for-Android/

• For more info, questions, or general Xamarin chit chatEmail: [email protected] Web: http://www.orchardebusiness.comSkype: glennthomasstephens

Wednesday, 31 July 13