Friday, August 14, 2015

Implementing the Toolbar and Scrolling Tabs

After spending a lot of time working on what was essentially a single page view, I felt like I had enough blocked functionality to really start broadening my horizons. There is too much data on a single character sheet to warrant it all on one view, nor would that make for pretty UI Code.

As a reference, here is what we are basing everything off of, pulled straight from the Dungeons and Dragons Website
This does not include the spells page, that will be its own beast that I will tackle later, but there are some logical groupings of information that we can use. What makes the most sense is to add a Tab Control based layout to scroll through sections of information.

First step was the Toolbar. I wanted to try to use all the new latest and greatest and was previously using an ActionBar. Luckily James Montemagno gave a great overview for adding a Toolbar to your app to replace the ActionBar, I suggest starting with a read there:

https://blog.xamarin.com/android-tips-hello-toolbar-goodbye-action-bar/

From a visual side of things everything looked roughly the same, but gives me greater flexibility in the long run. Next step was to add new menu items. I have learned that Android really likes its .xml files and menus are no different. For now, we will start with a new, save and load button. For spacial consideration I am just showing the add button for now, but it gives the app a nice look I think:



I also am going to remove the floating action button for the time being. I have some ideas for it down the line, but likely will only resurface once I get a more complete product (much later).

The next step was to add a TabLayout to the toolbar. I also wanted to include both tap and swipe navigation as it adds a logical flow to the app. This is where I also had to learn about fragments and ViewPagers. This definitely took a bit of research as there were a number of parts to get a handle on.

From a high level overview, Fragments are a way for Android to both compartmentalize UI into component pieces, to allow you to better support multiple screen sizes, and just break down your UI easier. A good overview that helped me can be found here:

http://developer.xamarin.com/guides/android/platform_features/fragments/

To create my desired setup, this guide on the Android developer docs was highly valuable:

http://developer.android.com/training/implementing-navigation/lateral.html

You break it down by having your TabLayout add 2+ ViewPager objects to represent each tab. Each ViewPager object is going to be a unique Fragment on the back end, or basically a UI view. Really cool stuff.

So the first thing I need to do is set up each of my ViewPager objects, so that they are grouped together and can be "swipable". The following code handles all of that.

var viewPager = FindViewById<ViewPager> (Resource.Id.viewPager);
SetupViewPagers (viewPager);


private void SetupViewPagers(ViewPager viewPager)
{
      var adapter = new MyAdapter (SupportFragmentManager);
      adapter.AddFragment (new CharSheetOverviewFragment (), "Overview");
      adapter.AddFragment(new CharSheetSkillsFragment(), "Skills");
      viewPager.Adapter = adapter;
}


This will create my ViewPager object, where the SetupViewPagers method creates each individual Page, and then sets the adapter to group them together. The final result is a ViewPager object, or a number of views that are side by side and have built in scrolling. Pretty neat. SupportFragmentManager is a predefined Adapter provided by the Android Support Package that we need to set all this up. the viewPager resource is simply something that I added to my main .axml file that will house the ViewPager spells.

From there you are following the same process as normal. You create a Fragment .axml file and a correspoding Activity class to load it. The difference being instead of inheriting from "Activity" you are inheriting from Fragment. Your OnCreateView method inflates the fragment UI and returns the view.
   public override View OnCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
     var root = inflater.Inflate (Resource.Layout.fragment_charsheet_overview, 
container
, false);
     return root;
}


One of the cool side effects of using Fragments is they also maintain a reference to the parent Activity which loaded them. So in my case, the parent Activity, a CharacterSheetView has a loaded set of character Data. Each of my fragments can pull from that data by using this.Activity.

A view of what we see now can be found below, I have been updating some of the code to modify how my attributes are being displayed, moving from a TableLayout to GridLayout



I am going to spend a little more time polishing the attribute list and then actually look to start replicating this in iOS to help broaden my skillset. I do know that I will likely use a ListView for the skills so I may just tackle that next. We will see.


1 comment: