如何在Xamarin的自定义渲染器中对齐弹出选择器项?

时间:2019-02-08 16:29:35

标签: c# android xamarin alignment picker

我正在为Android和iOS开发Xamarin应用。此问题专门针对Android。 我试图呈现一个带有长文本的项目的选择器弹出窗口,该项目与水平方向可滚动(因此可以查看所有文本)的长文本左对齐,并且它具有当前选定项目滚轮的顶部和底部边界。我无法使选择器文本项从左侧出现一点填充,但仍然水平滚动。它可以显示为多行,但只要它仍然具有顶部和底部边框以标识所选项目即可。

我已经为两个平台都创建了一个自定义渲染器。我尝试在代码中设置以下内容:

picker.LayoutMode = ViewLayoutMode.ClipBounds;
picker.SetClipToPadding(false);
picker.SetHorizontalGravity(GravityFlags.Start);
picker.TextAlignment = TextAlignment.TextStart;

XAML:

<controls:ImagePicker HeightRequest="40" FontSize="Small" HorizontalOptions="FillAndExpand" x:Name="pkrSystem">
    <Picker.Effects>
         <effects:BackgroundEffect />
    </Picker.Effects>
</controls:ImagePicker>

android项目中的自定义渲染器:

[assembly: ExportRenderer(typeof(ImagePicker), typeof(ImagePickerRenderer))]
namespace ClientApp.Droid.Renderers
{
public class ImagePickerRenderer : PickerRenderer
    {
        private IElementController ElementController => Element as IElementController;
        private AlertDialog _dialog;

        public ImagePickerRenderer(Context context) : base(context)
        {

        }

        protected override void OnElementChanged(ElementChangedEventArgs<Picker> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Click += Control_Click;
            }
        }

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

        private void Control_Click(object sender, EventArgs e)
        {
            Picker model = Element;

            var picker = new NumberPicker(Context);
            if (model.Items != null && model.Items.Any())
            {
                picker.MaxValue = model.Items.Count - 1;
                picker.MinValue = 0;
                picker.SetDisplayedValues(model.Items.ToArray());
                picker.WrapSelectorWheel = false;
                picker.DescendantFocusability = DescendantFocusability.BlockDescendants;
                picker.Value = model.SelectedIndex;
                picker.SetFitsSystemWindows(true);
                //picker.LayoutMode = ViewLayoutMode.ClipBounds;
                //picker.SetClipToPadding(false);
                //picker.SetHorizontalGravity(GravityFlags.ClipHorizontal);
                //picker.TextAlignment = TextAlignment.TextStart;
            }

            var layout = new LinearLayout(Context) { Orientation = Orientation.Vertical };
            layout.AddView(picker);
            ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, true);

            var builder = new AlertDialog.Builder(Context);
            builder.SetView(layout);
            builder.SetTitle(model.Title ?? "");
            builder.SetNegativeButton("Cancel", (s, a) =>
            {
                ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
                Control?.ClearFocus();
                _dialog = null;
            });
            builder.SetPositiveButton("Ok", (s, a) =>
            {
                ElementController.SetValueFromRenderer(Picker.SelectedIndexProperty, picker.Value);
                if (Element != null)
                {
                    if (model.Items.Count > 0 && Element.SelectedIndex >= 0)
                        Control.Text = model.Items[Element.SelectedIndex];                    
                    ElementController.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);                    
                    Control?.ClearFocus();
                }
                _dialog = null;
            });

            _dialog = builder.Create();
            _dialog.DismissEvent += (ssender, args) =>
            {
                ElementController?.SetValueFromRenderer(VisualElement.IsFocusedProperty, false);
            };
            _dialog.Show();
        }
    }

}

预期结果: 选择器项目文本从左侧显示,带有少量填充并且可以水平完全滚动,或者选择器项目文本为多行,因此可以查看全文,但仍可以通过顶部和底部边框来识别。 expected 预期的屏幕截图:https://imgur.com/a/VrangdD

实际结果: 选择器项文本从每个选择器弹出项的中间出现,然后尝试向左滚动,它已裁剪了一些文本,因此无法完全向左滚动以查看全文,当前显示为单行文本。顶部和底部边框正确显示。 actual 实际屏幕截图:https://imgur.com/a/XGCZQeZ

0 个答案:

没有答案