Search code examples
iosxamarintableviewsearchbar

Xamarin iOS Table View Cells Intersecting Search Bar

I'm writing an iOS app using Xamarin and am having a problem with a table view and search bar - when the search bar has been clicked and text entered, the search results view controller doesn't work properly - the cells, when scrolled, intersect the search bar.

For clarity, I've recorded the problem:

YouTube - iOS Problem

So far, I've worked-out that the problem isn't related to the number of sections, the section header, or the table header. Completely out of ideas now, though...

The following can be used as an example, as the same problem appears there:

GitHub - TableSearch

In this example, adding the following line of code to the end of the 'ViewDidLoad ()' method within the 'MainTableViewController.cs' file will make the problem more obvious:

searchController.SearchBar.SearchBarStyle = UISearchBarStyle.Minimal;

EDIT

Looking at the image below, I ideally need to remove or shrink the top region (what seems to be a space for the iOS navigation bar):

Annotated

Solution

  • Have you had a look at the sample from Xamarin here which has the same layout you are using, just to compare how you set up the search bar.

    EDIT I now see what you mean, I think this is a bug in iOS as the background color is transparent on the search bar and you would never want that. I just added another view to cover up the status bar and set the background color to white:

            searchController.SearchBar.SearchBarStyle = UISearchBarStyle.Minimal;

        searchController.SearchBar.BackgroundColor = UIColor.White;
        var frame = searchController.SearchBar.Frame;
        frame.Height = searchController.SearchBar.Frame.Height + 22; 
        frame.Y = searchController.SearchBar.Frame.Y - 22;
        var bckGRound = new UIView (frame);
        bckGRound.BackgroundColor = UIColor.White;
        searchController.SearchBar.InsertSubview (bckGRound, 0);

    UPDATE I realised that for your scenario you can't just add a view to cover this up so i was looking into adding blurring to searchbar like so:

            var frame = searchController.SearchBar.Frame;
        frame.Height = searchController.SearchBar.Frame.Height + 44; 
        frame.Y = searchController.SearchBar.Frame.Y - 22;

        var blurryBackGround = new UIView (frame);
        if (!UIAccessibility.IsReduceTransparencyEnabled) 
        {
            blurryBackGround.BackgroundColor = UIColor.Clear;
            var blureffect = UIBlurEffect.FromStyle (UIBlurEffectStyle.Light);
            var blureffectview = new UIVisualEffectView (blureffect);
            blureffectview.Frame = frame;
            blurryBackGround.AddSubview (blureffectview);
        }
        else
        {
            blurryBackGround.BackgroundColor = UIColor.Black;
        }
        searchController.SearchBar.InsertSubview (blurryBackGround, 0);

    enter image description here

    UPDATE 2

    If your background doesnt move with the table then you might be able to get away with just cropping the background image section that the search bar covers then set the backgroundimage for the search bar with this code:

            searchController.SearchBar.SetBackgroundImage (new UIImage ("image.jpg"), UIBarPosition.TopAttached, UIBarMetrics.Default);