Implement The Dropdown In Xamarin.iOS

Introduction

In this article, I will explain the Dropdown feature in iOS and its dropdown looks like an Android dropdown and I explain how to show the list of the dropdown items after clicking the UITextField in the simulator.

The purpose of this article is to show you how we can achieve the android-based dropdown in Xamarin iOS.

Step 1

Create the Main.storyboard in your project and map the corresponding UIViewController in the custom class section in Xcode.

Step 2

Write the below code for initializing the storyboard design and define the List item which is showing in the UITextField as a dropdown.

public partial class ViewController: UIViewController, IUITableViewDataSource, IUITableViewDelegate, IUITextFieldDelegate {
    private UITableView _dropDownTableView;
    private UIView _dropDownView;
    private readonly string[] _optionsList = new string[] {
        "Manikandan",
        "Joseph Frank",
        "Martin Juc",
        "Mansion House",
        "Monitor"
    };
    protected ViewController(IntPtr handle): base(handle) {}
    public override void ViewDidLoad() {
        base.ViewDidLoad();
        dropTextField.Delegate = this;
        CreateDropDownView(new CGRect(dropTextField.Frame.X, dropTextField.Frame.Y, dropTextField.Frame.Width, 43 * _optionsList.Length));
    }
}

Step 2

Write the below code for UITextField to trigger after selecting the text field as a dropdown.

[Export("textFieldShouldBeginEditing:")]
public bool ShouldBeginEditing(UITextField textField) {
    View.AddSubview(_dropDownView);
    UIApplication.SharedApplication.KeyWindow.BringSubviewToFront(_dropDownTableView);
    return false;
}

Step 3

Write the below code to define the Listview export functionality to access all features like Selection value, Index, List Item...etc.

[Export("tableView:numberOfRowsInSection:")]
public nint RowsInSection(UITableView tableView, nint section) {
        return _optionsList.Length;
    }
    [Export("tableView:cellForRowAtIndexPath:")]
public UITableViewCell GetCell(UITableView tableView, NSIndexPath indexPath) {
        UITableViewCell cell = tableView.DequeueReusableCell("DropDownCell");
        cell.TextLabel.Text = _optionsList[indexPath.Row];
        return cell;
    }
    [Export("tableView:viewForFooterInSection:")]
public UIView GetViewForFooter(UITableView tableView, nint section) {
        UIView footerView = new UIView(new CGRect(0, 0, 0, 0));
        return footerView;
    }
    [Export("tableView:heightForFooterInSection:")]
public nfloat GetHeightForFooter(UITableView tableView, nint section) {
        return 1;
    }
    [Export("tableView:didSelectRowAtIndexPath:")]
public void RowSelected(UITableView tableView, NSIndexPath indexPath) {
    dropTextField.Text = _optionsList[indexPath.Row];
    _dropDownView.RemoveFromSuperview();
}

Step 4

Write the below code function to make the dropdown design and position of showing dropdown.

private void CreateDropDownView(CGRect frameForDropDown) {
    _dropDownView = new UIView(frameForDropDown);
    _dropDownTableView = new UITableView(new CGRect(0, 0, frameForDropDown.Width, frameForDropDown.Height));
    _dropDownTableView.RegisterClassForCellReuse(typeof(UITableViewCell), "DropDownCell");
    _dropDownTableView.DataSource = this;
    _dropDownTableView.Delegate = this;
    _dropDownView.AddSubview(_dropDownTableView);
    AddShadowToDropDown();
}
private void AddShadowToDropDown() {
    var shadowPath = UIBezierPath.FromRect(_dropDownView.Bounds);
    _dropDownView.Layer.MasksToBounds = false;
    _dropDownView.Layer.ShadowColor = UIColor.Black.CGColor;
    _dropDownView.Layer.ShadowOffset = new CGSize(width: 0, height: 0.5);
    _dropDownView.Layer.ShadowOpacity = 0.2 f;
    _dropDownView.Layer.ShadowPath = shadowPath.CGPath;
    _dropDownTableView.ClipsToBounds = true;
}

Output

Conclusion

Hopefully, this article has given you sufficient information for you to implement the dropdown in Xamarin iOS. Feel free to leave a comment if you would like me to further elaborate on anything within this article.