如何以 xamarin 形式显示下拉列表 IOS

问题描述

这是我的 IOS iPad 页面我想显示下拉菜单，请帮助我如何编写代码， 我为此使用了选择器，但菜单项显示在底部，我如何解决此问题

解决方法

这是一种通过“控件组合”实现这种“下拉”的解决方法。

首先，在视图上添加一个 UITextField 来显示选中的项目。

UITextField _dropTextField;
UIView _dropDownView;
UIPickerView _pickerView;

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

    // add textfield
    _dropTextField = new UITextField();
    _dropTextField.Frame = new CGRect(100,100,300,30);
    _dropTextField.BackgroundColor = UIColor.Gray;
    this.View.AddSubview(_dropTextField);
    // call CreateDropDownView
    CreateDropDownView();
}

其次，定义一个方法来创建一个自定义的 UIView 持有一个 UIPickerView。

// create a custom UIView to show pickView
private void CreateDropDownView()
{
    _dropDownView = new UIView(new CGRect(_dropTextField.Frame.X,_dropTextField.Frame.Y,_dropTextField.Frame.Width,300));
    _dropTextField.Delegate = this;
    _pickerView = new UIPickerView();
    _pickerView.Frame = new CGRect(_dropTextField.Bounds.X,_dropTextField.Bounds.Y + _dropTextField.Frame.Height,300);
    PeopleModel pickerModel = new PeopleModel(_dropTextField,_dropDownView);
    _pickerView.Model = pickerModel;
    _dropDownView.AddSubview(_pickerView);
}

然后，要在 TextField 聚焦时显示 UIView，还需要实现接口 IUITextFieldDelegate。

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

以上代码中的PeopleModel请参考本documentation中的“class PeopleModel”。此外，您需要覆盖其中的一些方法。

private UITextField dropTextField;
private UIView dropDownView;

public PeopleModel(UITextField dropTextField,UIView dropDownView)
{
    this.dropDownView = dropDownView;
    this.dropTextField = dropTextField;
}

public override nint GetComponentCount(UIPickerView pickerView)
{
    return 1;
}

// ...

public override void Selected(UIPickerView pickerView,nint row,nint component)
{
    dropDownView.RemoveFromSuperview();
    dropTextField.Text = $"{names[pickerView.SelectedRowInComponent(0)]}";
}

// ...