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

1. Collections Fun @ the Queensland C# Mobile
Developers Meetup
Glenn Stephens
glenn@orchardebusiness.com
http://www.orchardebusiness.com
0432 933 972
Wednesday, 31 July 13

2. iOS ViewControllers
• Most of us are familiar with the common ones
• UINavigationController
• UITabViewController
Wednesday, 31 July 13

3. What if...
• We wanted a custom
display of sorts
• Its surprisingly simple
Wednesday, 31 July 13

4. 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

5. 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

6. Hitting the Green Tab
Hit the tab
Hit the controller
Wednesday, 31 July 13

7. 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

8. 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

9. 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

10. 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

11. 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 chat
Email: glenn@orchardebusiness.com
Web: http://www.orchardebusiness.com
Skype: glennthomasstephens
Wednesday, 31 July 13