iOS Xamarin.Forms 的选取器渲染器? [英] Picker renderer for iOS Xamarin.Forms?

问题描述

我是 Xamarin.Forms 编程的新手.想自定义/更改选择器的方式

I'm new to Xamarin.Forms programming. Would like to customize/change the way the Picker

如图:- 带有文本选择"的按钮，点击时调用 picker.Focus()-选择按钮后面带有黑色背景和文本颜色的选择器- 空列表视图- 选择器选项轮窗格，弹出选择器'聚焦'

In the picture: -Button with the text 'Select', when clicked calls picker.Focus() -Picker with both black background and text colors behind the select button -Empty ListView -The picker options wheel pane, pops up when a picker is 'Focused'

选择器实现代码:

Picker picker = new Picker
{
    HorizontalOptions = LayoutOptions.Start,
    VerticalOptions = LayoutOptions.Center,
    WidthRequest = 73,
    HeightRequest = 25,
    BackgroundColor = Color.Black,
    TextColor = Color.Black
};

List<string> myList = new List<string>();
myList.Add("OPTIONS 1");
myList.Add("OPTIONS 2");
myList.Add("OPTIONS 3");
myList.Add("OPTIONS 4");
myList.Add("OPTIONS 5");

foreach (string str in myList)
{
    picker.Items.Add(str);
}

代码自定义框"，用户单击该框"以显示选择器选项轮窗格，但不(或至少看起来)不提供任何用于自定义选择器窗格的选项.

Code customizes the 'box' that a user clicks to bring the picker options wheel pane into view, but doesn't (or at least appear to) offer any options for customizing the picker pane.

如何将选择器轮弹出窗格放置在 ListView 内部?如何更改选择器轮内选项的字体大小并更改显示选项的窗格的高度?

How to place the picker wheel pop-up pane inside of the ListView? How to change font size of the options inside the picker wheel and change the height of the pane displaying the options?

tl;dr - 如何更改选择器窗格高度、项目字体大小、窗格位置?

tl;dr - How to change picker pane height, item font size, pane placement?

这就是我所得到的......

This is as far as I've gotten...

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;

using AppName.iOS;
using AppName;

[assembly: ExportRenderer(typeof(MyPicker), typeof(MyPickerRenderer))]
namespace AppName.iOS
{
    public class MyPickerRenderer : PickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null)
            {
                // Unsubscribe from event handlers and cleanup any resources
            }

            if (e.NewElement != null)
            {
                // Configure the native control and subscribe to event handlers
            }
        }
    }
}

推荐答案

iOS 中名为 UIPickerView 的选择器轮，我们可以在渲染器中获得这个控制，例如:

The picker wheel in iOS called UIPickerView we can get this contol in renderer like:

UITextField textField = Control;
UIPickerView pickerView = textField.InputView as UIPickerView;

然后我们可以使用 Delegate 自定义您想要的内容.

Then we can customize this just as what you want using Delegate.

首先我们应该得到 dataSource 在你的情况下我们可以得到它:

Firstly we should get the dataSource in your case we can get it like:

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

第二次创建委托并将列表设置为参数:

Secondly create the delegate and set the list as parameter:

pickerView.Delegate = new MyPickerViewDelegate(itemList);

public class MyPickerViewDelegate: UIPickerViewDelegate
{

    List<string> itemList;

    public MyPickerViewDelegate(List<string> list)
    {
        itemList = list;
    }
}

最后，我们可以开始自定义以下事件:

At last we can begin customizing with the events below:

//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 80;
}

此外，如果您想自定义更灵活(包括放置)，您可以使用以下方法:

Moreover if you want to customize more flexible(including placement), you can use following method:

public override UIView GetView(UIPickerView pickerView, nint row, nint component, UIView view)
{
    UIView contentView = new UIView(new CGRect(0, 0, UIScreen.MainScreen.Bounds.Size.Width, 80));

    UILabel label = new UILabel();
    label.Frame = contentView.Bounds;
    contentView.AddSubview(label);

    label.Text = itemList[(int)row];
    //Change the label style
    label.Font = UIFont.SystemFontOfSize(24);
    label.TextColor = UIColor.Red;

    return contentView;
}

这是我的自定义渲染器供您参考:

Here is my custom renderer for you referring to:

public class MyPickerRenderer : 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);
    }
}

这篇关于iOS Xamarin.Forms 的选取器渲染器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！