Xamarin.iOS: TableView Recipe

In this article, we will see how we use the tableview control. Tableview is a very important and most widely used control. Thus, we will be having a lot of the tutorials that focus on the different aspects of it. This is the first one of the tableview series. We will be describing briefly about the tableview, talk about some common methods, and properties which are very beneficial and mandatory.

Ingredients

• Visual Studio 2012 or higher / Xamarin Studio 5
• Xamarin iOS 6.4.5 or higher
• Mac OS X Yosemite(10.10) & above.

Procedure

1. Create a new Application in Xamarin Studio by selecting New Solution from the welcome screen.
   
   
   
   
2. Select iOS app from the installed templates. Now, as you can see, we have a lot of options, like Single View app, Master-Detail app, Tabbed app. These are nothing but pre-defined UI screens for the ease-of-use for the developers. For this tutorial, we will select Single View app.
   
   
   
   
3. Now, we will name the app and select the minimum iOS version that our app will support, as shown:
   
   
   
   
4. Now, we will name the project, give the location for the solution to be saved and select the version control for git (if required), as shown:
   
   
   
   
5. Now, we can see that the solution file is created and it contains all the required files, as shown below:
   
   
   
   
6. Now, we will open ViewController.cs from the solution and import CoreGraphics and System.Collections.Generic. 

   using CoreGraphics;
   using System.Collections.Generic;

7. Create an object of UITableView in the ViewController class. 

   UITableView table;

8. To set the title of the app in the ViewDidLoad function, just write:

   Title = "Table View Sample";

9. Now, we will add the TableView properties in the ViewDidLoad function. Also, add the TableView to the View. Finally, our ViewDidLoad() will look, as given below:

   public override void ViewDidLoad()
           {
               base.ViewDidLoad();
               // Perform any additional setup after loading the view, typically from a nib.
               Title = "Table View Sample";
               table = new UITableView(new CGRect(0, 20, View.Bounds.Width, View.Bounds.Height - 20));
               //table.AutoresizingMask = UIViewAutoresizing.All;
               string[] tableItems = new string[] { "Apple", "Motorola", "Microsoft", "Google", "Nokia" };
               table.Source = new TableSource(tableItems);
   
   
               Add(table);
           }

10. Now, we will add a new class TableSource to the solution.
    
    
    
    
11. Once the file is added, open TableSource.cs and add the code, given below:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using Foundation;
    using UIKit;
    
    
    namespace TableViewSample
    {
        public class TableSource : UITableViewSource
        {
            protected string[] tableItems;
            protected string cellIdentifier = "TableCell";
    
            public TableSource(string[] items)
            {
                tableItems = items;
            }
            public override nint RowsInSection(UITableView tableview, nint section)
            {
                return tableItems.Length;
            }
    
           public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
            {
                // request a recycled cell to save memory
                UITableViewCell cell = tableView.DequeueReusableCell(cellIdentifier);
                // if there are no cells to reuse, create a new one
                if (cell == null)
                    cell = new UITableViewCell(UITableViewCellStyle.Default, cellIdentifier);
    
                cell.TextLabel.Text = tableItems[indexPath.Row];
    
                return cell;
            }
    
    
            public override nint NumberOfSections(UITableView tableView)
            {
                return 1;
            }
        }
    }

    This class is used to implement the abstract class UITableViewSource. Thus, we define the basic functions required for a TableView. RowsInSection, which is used to determine the number of rows present in a section, NumberOfSections is used to determine the number of sections the TableView is divided and the GetCell defines the UITableViewCell will be rendered for a particular row.
    
    
12. Now, we run the app on the iPhone simulator of our choice (I did it on iPhone 6S) and it looks, as shown below:

 

Make some beautiful apps, using Xamarin.iOS and tweet your queries to @adiiaditya. If you want to fork this project, visit my Git.