Xamarin.iOS: Applying Search Bar In TableView

Aditya Kumar
8y
11.5k
0
1

Article

In this article, we will see how we can add a search bar to 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 third one of the TableView series. The others are:

Ingredients

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

Procedure

Create a new Application in Xamarin Studio by selecting New Solution from the welcome screen.
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 of the developers. For this tutorial, we will select Single View app.
Now, we will name the app and select the minimum iOS version that our app will support, as shown here.
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 below:
Now, we can see that the solution file is created and it contains all the required files, as shown below.
Now, we will open ViewController.cs from the solution and import CoreGraphics, System, System.Collections.Generic, and UIKit.
using System;
using CoreGraphics;
using System.Collections.Generic;
using UIKit;
Create an object of UITableView, TableSource, UISearchBar and List<TableItem>
in the ViewController class.
UITableView table;
TableSource tableSource;
List<TableItem> tableItems;
UISearchBar searchBar;
To set the title of the app in the ViewDidLoad function, just write the following:
Title = "SearchBarWithTableView Sample";
Now, we will add the TableView properties in the ViewDidLoad function. Also, add the TableView to the View and the SearchBar to the TableHeaderView. Finally, our ViewDidLoad() will look, as given below:
protected ViewController(IntPtr handle) : base(handle)
        {
            // Note: this .ctor should not contain any initialization logic.
        }

        public override void ViewDidLoad()
        {
            base.ViewDidLoad();
            // Perform any additional setup after loading the view, typically from a nib.

            //Declare the search bar and add it to the header of the table
            searchBar = new UISearchBar();
            searchBar.SizeToFit();
            searchBar.AutocorrectionType = UITextAutocorrectionType.No;
            searchBar.AutocapitalizationType = UITextAutocapitalizationType.None;
            searchBar.TextChanged += (sender, e) =>
            {
                //this is the method that is called when the user searches
                searchTable();
            };

            Title = "SearchBarWithTableView Sample";
            table = new UITableView(new CGRect(0, 20, View.Bounds.Width, View.Bounds.Height - 20));
            //table.AutoresizingMask = UIViewAutoresizing.All;
            tableItems = new List<TableItem>();

            tableItems.Add(new TableItem("Vegetables") { ImageName = "Vegetables.jpg" });
            tableItems.Add(new TableItem("Fruits") { ImageName = "Fruits.jpg" });
            tableItems.Add(new TableItem("Flower Buds") { ImageName = "Flower Buds.jpg" });
            tableItems.Add(new TableItem("Legumes") { ImageName = "Legumes.jpg" });
            tableItems.Add(new TableItem("Tubers") { ImageName = "Tubers.jpg" });
            tableSource = new TableSource(tableItems);
            table.Source = tableSource;
            table.TableHeaderView = searchBar;
            Add(table);
        }
We also add the searchTable
() method for the UISearchBar to perform the search action.
private void searchTable()
        {
            //perform the search, and refresh the table with the results
            tableSource.PerformSearch(searchBar.Text);
            table.ReloadData();
        }
Now, we will add a new class, TableSource, to the solution.
Once the file is added, open TableSource.cs and add the code, as given below:
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using Foundation;
using UIKit;

namespace SearchBarWithTableView
{
    public class TableSource : UITableViewSource
    {
        private List<TableItem> tableItems = new List<TableItem>();
        private List<TableItem> searchItems = new List<TableItem>();
        protected string cellIdentifier = "TableCell";

        public TableSource(List<TableItem> items)
        {
            this.tableItems = items;
            this.searchItems = items;
        }

        public override nint RowsInSection(UITableView tableview, nint section)
        {
            return searchItems.Count;
        }

        public override UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath)
        {
            // request a recycled cell to save memory
            UITableViewCell cell = tableView.DequeueReusableCell(cellIdentifier);


            var cellStyle = UITableViewCellStyle.Default;

            // if there are no cells to reuse, create a new one
            if (cell == null)
            {
                cell = new UITableViewCell(cellStyle, cellIdentifier);
            }

            cell.TextLabel.Text = searchItems[indexPath.Row].Title;
            cell.ImageView.Image = UIImage.FromFile("Images/" + searchItems[indexPath.Row].ImageName);

            return cell;
        }

        public override nint NumberOfSections(UITableView tableView)
        {
            return 1;
        }

        public void PerformSearch(string searchText)
        {
            searchText = searchText.ToLower();
            this.searchItems = tableItems.Where(x => x.Title.ToLower().Contains(searchText)).ToList();
        }
    }
}
This class is used to implement the abstract class UITableViewSource. Thus, we define the basic functions required for a TableView. RowsInSection is used to determine the number of rows present in a section; NumberOfSections are used to determine the number of sections; the TableView is divided and the GetCell defines the UITableViewCell that will be rendered for a particular row. We also add methods which help in depicting the Search in action by adding a PerformSearch() method.
Now, we will add another class, TableItem, to the solution, for the customized cell style. Once the file is added, open TableItem.cs and add the code, as given below:
using System;
using UIKit;

namespace SearchBarWithTableView
{
    public class TableItem
    {
        public string Title { get; set; }

        public string ImageName { get; set; }

        public UITableViewCellStyle CellStyle
        {
            get { return cellStyle; }
            set { cellStyle = value; }
        }
        protected UITableViewCellStyle cellStyle = UITableViewCellStyle.Default;

        public UITableViewCellAccessory CellAccessory
        {
            get { return cellAccessory; }
            set { cellAccessory = value; }
        }
        protected UITableViewCellAccessory cellAccessory = UITableViewCellAccessory.None;

        public TableItem() { }

        public TableItem(string title)
        { Title = title; }

    }
}
Now, we run the app on the iPhone simulator of our choice (I did it on iPhone 4S) and it looks, as shown below.
Start typing the word that you want to search.