如何使用 xamarin 表单在 Picker 下拉弹出列表中添加图标

Question

我们正在使用选择器控制我们的应用。我想在单击下拉弹出列表时自定义选择器。在该弹出窗口中，我想显示带有文本的左侧图标。使用xamarin表单选择器android和ios平台如何实现？

Answer 1

您可以使用CustomRenderer 来实现此目的。

这是一个示例：

创建自定义选择器：

public class MyPicker : Picker
{

}

适用于 Android：

在 Android 中创建自定义渲染器：

public class CustomPicker : PickerRenderer
{
  private Dialog dialog;

  protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
  {
    base.OnElementChanged(e);
    Control.Click += Control_Click1;
  }


  protected override void Dispose(bool disposing)
  {
    Control.Click -= Control_Click1;
    base.Dispose(disposing);
  }

  private void Control_Click1(object sender, EventArgs e)
  {
    //throw new NotImplementedException();
    Picker model = Element;
    dialog = new Dialog(Forms.Context);
    dialog.SetContentView(Resource.Layout.custom_picker_dialog);
    Android.Widget.ListView listView = (Android.Widget.ListView)dialog.FindViewById(Resource.Id.listview);
    //listView.Adapter = new CustomPickerAdapter(((List<PickerModel>)model.ItemsSource), model.SelectedIndex);
    listView.Adapter = new MyAdaptr((List<string>)model.ItemsSource);
    listView.ItemClick += (object sender1, ItemClickEventArgs e1) =>
    {
        Element.SelectedIndex = e1.Position;
        dialog.Hide();
    };
    if (model.ItemsSource.Count > 3)
    {
        var height = Xamarin.Forms.Application.Current.MainPage.Height;
        var width = Xamarin.Forms.Application.Current.MainPage.Width;
        dialog.Window.SetLayout(700, 800);
    }
    dialog.Show();
  }

  class MyAdaptr : BaseAdapter
  {
    private IList<string> mList;
    public MyAdaptr(IList<string> itemsSource)
    {
        mList = itemsSource;
    }



    public override int Count => mList.Count;



    public override Java.Lang.Object GetItem(int position)
    {
        return mList[position];
    }



    public override long GetItemId(int position)
    {
        return position;
    }



    public override Android.Views.View GetView(int position, Android.Views.View convertView, ViewGroup parent)
    {
        Android.Views.View view = convertView;
        convertView = LayoutInflater.From(parent.Context).Inflate(Resource.Layout.celllayout, null); //here is the style you want to achieve
        TextView text = convertView.FindViewById<TextView>(Resource.Id.textview1);
        text.Text = mList[position];

        return convertView;
    }
  }
}

custom_picker_dialog.axml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="vertical"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center"
>

 <TextView
    android:text="Select One Option"
    android:layout_width="200dp"
    android:layout_height="25dp"
    android:paddingLeft="25dp"
    android:paddingRight="25dp"/>

 <ListView
    android:id="@+id/listview"
    android:layout_gravity="center"
    android:background="@drawable/abc_list_pressed_holo_light"
    android:layout_width="match_parent"
    android:dividerHeight="3dp"
    android:layout_height="0dp"
    android:layout_weight="1">

 </ListView>
</LinearLayout>

celllayout.axml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:orientation="horizontal"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center">

  <ImageView
    android:id="@+id/img"
    android:src="xxx"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

  <TextView
    android:id="@+id/textview1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    />

</LinearLayout>

iOS版：

在 ios 中创建自定义渲染器

public class CustomPicker : PickerRenderer
{
  List<string> itemList;
  protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
  {
    base.OnElementChanged(e);


    Picker myPicker = Element;
    itemList = myPicker.Items.ToList();

    UITextField textField = Control;
    UIPickerView pickerView = textField.InputView as UIPickerView;
    pickerView.Delegate = new MyPickerViewDelegate(itemList,Control);
    textField.InputView = pickerView;

    var toolbar = new UIToolbar(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width , 1)) { BarStyle = UIBarStyle.Default, Translucent = true };
    textField.InputAccessoryView = toolbar;
  }
}

internal class MyPickerViewDelegate : UIPickerViewDelegate
{
  private List<string> itemList;
  private UITextField textField;
  public MyPickerViewDelegate(List<string> itemList, UITextField control)
  {
    this.itemList = itemList;
    this.textField = control;
  }

   //Define the Font size or style
  public override NSAttributedString GetAttributedTitle(UIPickerView pickerView, nint row, nint component)
  {
        var text = new NSAttributedString(
        itemList[(int)row],
        font: UIFont.SystemFontOfSize(24),
        foregroundColor: UIColor.Red,
        strokeWidth: 4
        );

      return text;
  }
  //Define the row height
  public override nfloat GetRowHeight(UIPickerView pickerView, nint component)
  {
    return 45;
  }

  //define the itemview in your listview,you could add a UIImage here for your  scene
  public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
  {
    UIView contentView = new UIView(new CoreGraphics.CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 45));

    UILabel label = new UILabel();
    label.Frame = contentView.Bounds;
    contentView.AddSubview(label);
    label.Text = itemList[(int)row];
    return contentView;
  }

  public override void Selected(UIPickerView pickerView, nint row, nint component)
  {
    //base.Selected(pickerView, row, component);
    textField.Text = itemList[(int)row];
    textField.ResignFirstResponder();
  }

}

最后你可以在你的 page.xaml 中使用：

<local:MyPicker x:Name="picker" Title="Select An option" />