Hi guys, I’m back with another blog post, this time covering how to use the a custom view for header and footer to be used alongside iOS TableView / Android TableView. You’ll see how you can easily create custom views and use them as headers and footers in your Crosslight apps.

After this project has completed, you’ll end up with a custom header and footer in your ListView/TableView. When you click on the Add Item button on the top, new item will be added to the list, and you can see how the header and footer is correctly persisted when the items collection is updated.

To complete this project, there are several steps need to be completed:

• Preparing the project
• Creating custom views for iOS
• Preparing the BIndingProvider
• Preparing the ViewModel
• Modify iOS ViewController and running the project
• Creating custom views for Android
• Modifying Android ListActivity and running the project

Without further ado, let’s get started.

Preparing the project

For this sample, I’ll keep it nice and simple. This time, I’ll start from the Navigation template created using Crosslight Project Wizard. I’ll name this project: HeaderAndFooter.

Creating custom views for iOS

Let’s begin by creating a new custom header view for iOS, by right-clicking on the VIews folder in HeaderAndFooter.iOS/Views folder and choose Add, New File.

Then choose Crosslight, Crosslight iOS View for iPhone.

Give it a name of CustomHeader. This will generate two files, CustomHeader.xib and CustomHeader.cs for the designer files.

Then open the CustomHeader.xib using Xcode Interface Builder.

In Xcode Interface Builder, drag a Label and a button.

Set the label outlet as TxtHeader and the button as BtnHeader. I won’t go too much on the layouting details, but you can ensure the followings are set:

• Set the View size as Freeform, so you can adjust the view size freely.
  
• Turn off Auto Layout.
  
• Ensure that the View background is set to Default (no fill), this will avoid clipping issues when placed as the header view.
  

Your custom header is now ready. Let’s move on to custom footer.

Basically, you’re going to perform the same tasks as adding a custom header, but the difference is that you’re going to give it a file name of CustomFooter, then provide a label with the outlet of TxtCopyright.

Preparing the BindingProvider

Since you’ve successfully created the custom views, let’s prepare the BindingProvider first to prepare the properties and commands you wish to bind to the View. Open up NavigationBindingProvider (I renamed this file to MainBindingProvider to avoid confusion) and add the highlighted lines.

using Intersoft.Crosslight;

namespace HeaderAndFooter
{
    public class MainBindingProvider : BindingProvider
    {
        #region Constructors

        public MainBindingProvider()
        {
            ItemBindingDescription itemBinding = new ItemBindingDescription()
            {
                DisplayMemberPath = "Title",
                NavigateMemberPath = "Target"
            };

            this.AddBinding("TableView", BindableProperties.ItemsSourceProperty, "Items");
            this.AddBinding("TableView", BindableProperties.ItemTemplateBindingProperty, itemBinding, true);
            this.AddBinding("TableView", BindableProperties.SelectedItemProperty, "SelectedItem", BindingMode.TwoWay);
            
            this.AddBinding("BtnHeader", BindableProperties.TextProperty, "ButtonText");
            this.AddBinding("BtnHeader", BindableProperties.CommandProperty, "AddCommand");
            this.AddBinding("TxtCopyright", BindableProperties.TextProperty, "CopyrightText");
            this.AddBinding("TxtHeader", BindableProperties.TextProperty, "HeaderText");
        }

        #endregion
    }
}

From the added lines, notice that we’re going to do the following:

• Bind ButtonText property in the ViewModel to the BtnHeader button.
• Bind the ViewModel’s built-in AddCommand to the BtnHeader button. This is available in the EditableListViewModel shipped in Crosslight.
• Bind the HeaderText property in the ViewModel to the TxtHeader label.
• Bind the CopyrightText property in the ViewModel to TxtCopyright label. This is for the footer.

Since you’ve prepared everything in the BindingProvider, let’s modify the ViewModel.

Modifying the ViewModel

The  NavigationViewModel now looks like the following. It’s located inside the HeaderAndFooter.Core/ViewModels folder.

using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.Linq;
using Intersoft.Crosslight;

namespace HeaderAndFooter.ViewModels
{
    public class NavigationViewModel : SampleListViewModelBase<NavigationItem>
    {
        #region Constructors

        public NavigationViewModel()
        {
            ObservableCollection<NavigationItem> items = new ObservableCollection<NavigationItem>();

            items.Add(new NavigationItem("Simple Page", "About", typeof(SimpleViewModel)));
            items.Add(new NavigationItem("About This App", "About", typeof(AboutNavigationViewModel)));

            this.SourceItems = items;

            this.ButtonText = "Add Item";
            this.CopyrightText = "Copyright © Intersoft Solutions";
        }

        #endregion

        #region Properties

        private string _aboutText { get; set; }
        private string _buttonText { get; set; }
        private string _copyrightText { get; set; }
        private string _headerText { get; set; }

        public string AboutText
        {
            get { return _aboutText; }
            set
            {
                if (_aboutText != value)
                {
                    _aboutText = value;
                    OnPropertyChanged("AboutText");
                }
            }
        }

        public string ButtonText
        {
            get { return _buttonText; }
            set
            {
                if (_buttonText != value)
                {
                    _buttonText = value;
                    OnPropertyChanged("ButtonText");
                }
            }
        }

        public string CopyrightText
        {
            get { return _copyrightText; }
            set
            {
                if (_copyrightText != value)
                {
                    _copyrightText = value;
                    OnPropertyChanged("CopyrightText");
                }
            }
        }

        public string HeaderText
        {
            get
            {
                _headerText = this.Items.Count() + " items.";
                return _headerText;
            }
            set
            {
                if (_headerText != value)
                {
                    _headerText = value;
                    OnPropertyChanged("HeaderText");
                }
            }
        }

        #endregion

        #region Methods

        protected override bool CanExecuteAdd(object parameter)
        {
            return true;
        }

        protected override void ExecuteAdd(object parameter)
        {
            base.ExecuteAdd(parameter);

            NavigationItem newItem = new NavigationItem("Simple Page", "About", typeof(SimpleViewModel));
            var items = this.SourceItems.ToObservable();
            items.Add(newItem);
        }

        protected override void OnCollectionChanged(NotifyCollectionChangedEventArgs e)
        {
            this.OnPropertyChanged("HeaderText");
        }

        #endregion
    }
}

Let’s take a deeper look at this class, starting from the top. In the constructor, we’ve prepared our SourceItems with ObservableCollection. We then initialize the ButtonText property and the CopyrightText property. The ButtonText and CopyrightText property are all MVVM-ready properties. The HeaderText is also an MVVM-ready property, but in the property getter, the text is always updated according to the number of items which exists in the list.

Right after the properties, we then override the built-in CanExecuteAdd method to return true so that the AddCommand can be executed, as well as overriding the actions for the ExecuteAdd method. Here, we simply add a new NavigationItem to the list. Just right after the method, Crosslight has provided an elegant way to perform any additional changes to other properties or any other implementation by overriding the OnCollectionChanged method. In the method, we trigger the OnPropertyChanged of the HeaderText, so that the number of items is always updated in our custom header.

Modify iOS ViewController and running the project

Now that you got the Core project covered, let’s modify the MainViewController (located inside HeaderAndFooter.iOS/ViewControllers) a bit.

using CoreGraphics;
using Foundation;
using HeaderAndFooter.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.iOS;
using UIKit;

namespace HeaderAndFooter.iOS.ViewControllers
{
    [Register("MainViewController")]
    [ImportBinding(typeof(MainBindingProvider))]
    public class MainViewController : UITableViewController<NavigationViewModel>
    {
        #region Properties

        public override UIViewTemplate HeaderViewTemplate
        {
            get { return new UIViewTemplate(CustomHeader.Nib); }
        }

        public override UIViewTemplate FooterViewTemplate
        {
            get { return new UIViewTemplate(CustomFooter.Nib); }
        }

        public override TableViewInteraction InteractionMode
        {
            get { return TableViewInteraction.Navigation; }
        }

        public override bool ShowGroupHeader
        {
            get { return false; }
        }

        public override UITableViewStyle TableViewStyle
        {
			get { return UITableViewStyle.Plain; }
        }

        #endregion

        #region Methods

        protected override void InitializeView()
        {
            base.InitializeView();

            // set navigation title
            this.NavigationItem.Title = "Crosslight App";
        }

        #endregion
    }
}

In the MainViewController, we’ve overridden the HeaderViewTemplate as well as FooterViewTemplate to return the Nib for each custom header and footer view that we’ve just defined. We also made things simpler by not showing the group header as wellas ensuring that the used TableViewStyle is Plain. Run the project. You should get the following result.

If you’re curious about the separator that exists between the header with the table view, as well as the footer with the table view, it’s because I’ve added an additional view in the custom header and footer layout, with the height of 1 unit and giving it a light gray background, to show the boundaries of the custom header and custom footer view. We’re going to do the same with Android layout later. You’ve completed the iOS version. Let’s move on to the Android.

Creating custom views for Android

Similar to iOS, you’ll need to create a custom header view first for Android. To do this, simply right click on the Resources/layout folder in the HeaderAndFooter.Android/Views folder, then choose Add, New Item.

From the dialog that appears, choose Android, Layout, and give it a name of CustomHeader.

And here’s the contents of the CustomHeader.axml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout 
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        >
        <TextView
        	android:id="@+id/TxtHeader"
        	android:layout_width="fill_parent"
        	android:layout_height="30dp"
        	android:textSize="20sp"
        	android:gravity="left"
            android:layout_weight="1"
        />
        <Button 
            android:id="@+id/BtnHeader"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        />
    </LinearLayout>
    <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="1px"
            android:background="#f2f2f2"
        />
</LinearLayout>

This layout simply contains a pretty much similar layout with iOS, that contains a label, a button, and a gray separator at the bottom. Repeat the same procedure for the custom footer layout. Here’s the contents of the CustomFooter.axml file.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="1px"
        android:background="#f2f2f2"
    />
    <TextView
    	android:id="@+id/TxtCopyright"
    	android:layout_width="fill_parent"
    	android:layout_height="30dp"
    	android:textSize="12sp"
    	android:gravity="center"
        android:fontFamily="sans-serif-light" 
    />
</LinearLayout>

Modifying Android ListActivity and running the project

Since you’ve prepared the custom views let’s modify the Android ListActivity to display our custom header and footer. Open up MainActivity in the HeaderAndFooter.Android/Activities folder and take note of the following changes.

using Android.App;
using HeaderAndFooter.ViewModels;
using Intersoft.Crosslight;
using Intersoft.Crosslight.Android;

namespace HeaderAndFooter.Android
{
    [Activity(Label = "Crosslight App", Icon = "@drawable/icon")]
    [ImportBinding(typeof(MainBindingProvider))]
    public class MainActivity : ListActivity<NavigationViewModel>
    {
        #region Methods

        protected override void InitializeView()
        {
            base.InitializeView();

            this.RegisterViewIdentifier("TableView", this.ListView);
        }

        #endregion

        #region Properties

        protected override int ContentLayoutId
        {
            get { return Intersoft.Crosslight.Android.Resource.Layout.listgroupsectionlayout; }
        }

        protected override int FooterLayoutId
        {
            get { return Resource.Layout.CustomFooter; }
        }

        protected override int HeaderLayoutId
        {
            get { return Resource.Layout.CustomHeader; }
        }

        public override ListViewInteraction InteractionMode
        {
            get { return ListViewInteraction.Navigation; }
        }

        #endregion
    }
}

All you need to do is just override the FooterLayoutId as well HeaderLayoutId and provide the layout you’ve just created. If you notice in the template, right in the InitializeView method, we’re registering the ListView with the TableView identifier at runtime. This is how you would register a view at runtime. For more information in registering view at runtime, check out this document in the Developer Center.

You’re now ready to run the project. You should get the result similar to the following.

Wrapping Up

You’ve seen how easy it is to set up a custom header and footer view to use with iOS TableView and Android ListView. With Crosslight, the custom views are automatically compatible with data binding and Crosslight takes care of the magic, so you can focus on building your app instead of having to worry about wiring behind the scenes. Hopefully this gives you a good insight on how Crosslight accomplishes business scenarios elegantly, without compromising any of the MVVM-design pattern enforced throughout the app.

As always, you can find the source code to this post here: http://git.intersoftsolutions.com/projects/CT/repos/crosslightheaderandfooter/browse.

See you in the next post,
Nicholas Lie

Building on rock-solid foundation, the next major iteration of Crosslight will continue to offer new components and features that make cross-platform apps development even easier and more rapidly. There are a number of key areas that we’re focusing in the upcoming release which include data access, enterprise frameworks, form builders, modern UI components based on latest platforms, as well as new component category that will surely boost your decelopment productivity even further.

In this post, I will give you a sneak preview of the upcoming features particularly for the iOS platform.

Sliding Parallax Animation

Since its initial release, Crosslight includes a rich drawer navigation component with sliding animation available for all platforms. The next release will include many visual improvements for the drawer navigation. Specifically for the iOS platform, we’ll be adding a nice, modern parallax effect alongside with the drawer slide animation. See the example below.

It’s worth noted that the parallax velocity can be customized according to your desire. It also supports the right-side drawer with consistent experience.

Stunning Spring Animation

Yep, you read it right! With just a simple property set, you can now quickly add a compelling spring animation to your drawer navigation apps. No wrestling through hundred lines of code and tedious animation works. The built-in spring  animation also handles rotation well when the drawer was opened, then recalculate the new scale size based on the updated orientation — all in buttery-smooth animation.

New Visual Effect Settings for Table View

In addition to stunning animations, the next release will also include a vast array of new, iOS 8-esque visual effects that can be applied to the table view with just a single property set.

Unlike the conventional approach which will require you to create a custom cell template just to apply the vibrancy effect, Crosslight’s enhanced table view lets you apply a visual effect to the entire table view content by simply specifying the type of the effect you wish to apply. No tedious workaround necessary. So if you’ve got dozens of table view in existing projects, you’ll really appreciate this handy time-saving feature.

Furthermore, you can also easily apply the gorgeous vibrancy effect to the selection background, which beautifully blends together with the new spring layout of drawer navigation.

Alternatively, if you prefer a solid color for the table view content (which still looks great with the parallax background btw), you might want to apply a subtle vibrancy effect to the table separator, just like how Apple did it in some of their interfaces such as in the Notification Center.

More to Come

We’ve got much more exciting stuff in the next major release of Crosslight. Beyond just UI components, the upcoming major release will also deliver the next generation data and enterprise framework which will transform the way you build reliable and scalable business-oriented apps, including support for comprehensive key scenarios on large-scale data sync. Furthermore, data access performance will never be the same again as we’re coming up with an advanced OData implementation supporting previously-impossible navigational query and aggregate projection — all programmable directly from the client.

Subscribe to our blogs, Facebook and Twitter —stay tuned for our next updates.

Best,
Jimmy