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

Question

我们正在使用picker控制我们的应用程序。我想自定义选择器，同时单击将显示的下拉弹出列表。在弹出窗口中，我想显示带有文本的左侧图标。如何使用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();
}
}

最后，你可以在你的页面中使用.xaml，比如：

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