以 xamarin 形式间隔 15 分钟的 TimePicker

Question

我需要在时间选择器中设置 15 分钟的间隔。我已经完成 iOS。但在 Android 中它不起作用。

对于 iOS 我使用了以下代码并且它正在运行：

public class CustomTimePickerRenderer : TimePickerRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
    {             base.OnElementChanged(e);             var view = (TimePicker)Element; 
        if (view != null)
        {                 var timePicker = (UIDatePicker)Control.InputView;
            timePicker.MinuteInterval = 15;             }
    }
}

对于 Android，我正在尝试使用以下代码：

public class CustomTimePickerRenderer : TimePickerRenderer
{
    Context _context;

    public CustomTimePickerRenderer(Context context) : base(context)
    {
        _context = context;
    }

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TimePicker> e)
    {
        base.OnElementChanged(e);

        TimePickerDialogIntervals timePickerDlg = new TimePickerDialogIntervals(this.Context, new EventHandler<TimePickerDialogIntervals.TimeSetEventArgs>(UpdateDuration),
            Element.Time.Hours, Element.Time.Minutes, true);

        var control = new EditText(this.Context);
        control.Focusable = false;
        control.FocusableInTouchMode = false;
        control.Clickable = false;
        control.Click += (sender, ea) => timePickerDlg.Show();
        control.Text = Element.Time.Hours.ToString("00") + ":" + Element.Time.Minutes.ToString("00");

        SetNativeControl(control);
    }

    void UpdateDuration(object sender, Android.App.TimePickerDialog.TimeSetEventArgs e)
    {
        Element.Time = new TimeSpan(e.HourOfDay, e.Minute, 0);
        Control.Text = Element.Time.Hours.ToString("00") + ":" + Element.Time.Minutes.ToString("00");
    }
}

public class TimePickerDialogIntervals : TimePickerDialog
{
    public const int TimePickerInterval = 15;
    private bool _ignoreEvent = false;

    public TimePickerDialogIntervals(Context context, EventHandler<TimePickerDialog.TimeSetEventArgs> callBack, int hourOfDay, int minute, bool is24HourView)
        : base(context, (sender, e) => {
            callBack(sender, new TimePickerDialog.TimeSetEventArgs(e.HourOfDay, e.Minute * TimePickerInterval));
        }, hourOfDay, minute / TimePickerInterval, is24HourView)
    {
    }

    protected TimePickerDialogIntervals(IntPtr javaReference, JniHandleOwnership transfer) : base(javaReference, transfer)
    {
    }

    public override void SetView(Android.Views.View view)
    {
        SetupMinutePicker(view);
        base.SetView(view);
    }

    void SetupMinutePicker(Android.Views.View view)
    {
        var numberPicker =  FindMinuteNumberPicker(view as ViewGroup);
        if (numberPicker != null)
        {
            numberPicker.MinValue = 0;
            numberPicker.MaxValue = 3;
            numberPicker.SetDisplayedValues(new String[] { "00", "15", "30", "45" });
        }
    }

    protected override void OnCreate(Android.OS.Bundle savedInstanceState)
    {
        base.OnCreate(savedInstanceState);
        GetButton((int)DialogButtonType.Negative).Visibility = Android.Views.ViewStates.Gone;
        this.SetCanceledOnTouchOutside(false);
    }

    private NumberPicker FindMinuteNumberPicker(ViewGroup viewGroup)
    {
        for (var i = 0; i < viewGroup.ChildCount; i++)
        {
            var child = viewGroup.GetChildAt(i);
            var numberPicker = child as NumberPicker;
            if (numberPicker != null)
            {
                if (numberPicker.MaxValue == 59)
                {
                    return numberPicker;
                }
            }

            var childViewGroup = child as ViewGroup;
            if (childViewGroup != null)
            {
                var childResult = FindMinuteNumberPicker(childViewGroup);
                if (childResult != null)
                    return childResult;
            }
        }

        return null;
    }
}

但是 Android 代码不起作用。我认为问题在于 SetupMinutePicker 方法中的数字选择器。我在数字选择器中变得空了。请告诉我如何解决这个数字选择器问题，或者是否有任何替代解决方案可以在时间选择器中设置 15 分钟间隔。

Answer 1

我已经为 Android 找到了 解决方法 。之前的overrideSetView(...)方法现在获取不到NumberPicker，这里我们可以修改overrideOnTimeChanged方法中的分钟间隔如下：

public override void OnTimeChanged(Android.Widget.TimePicker view, int hourOfDay, int minute)
{
    if (_ignoreEvent) return;

    if (minute % TimePickerInterval != 0)
    {
        int minuteFloor = minute - (minute % TimePickerInterval);
        minute = minuteFloor + (minute == minuteFloor + 1 ? TimePickerInterval : 0);
        if (minute == 60)
            minute = 0;
        _ignoreEvent = true;
        view.CurrentMinute = (Java.Lang.Integer)minute;
        _ignoreEvent = false;
    }
}

完整的android渲染器代码如下：

public class CustomTimePickerRenderer : TimePickerRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.TimePicker> e)
    {
        base.OnElementChanged(e);

        TimePickerDialogIntervals timePickerDlg = new TimePickerDialogIntervals(this.Context, new EventHandler<TimePickerDialogIntervals.TimeSetEventArgs>(UpdateDuration),
            Element.Time.Hours, Element.Time.Minutes, true);

        var control = new EditText(this.Context);
        control.Focusable = false;
        control.FocusableInTouchMode = false;
        control.Clickable = false;
        control.Click += (sender, ea) => timePickerDlg.Show();
        control.Text = Element.Time.Hours.ToString("00") + ":" + Element.Time.Minutes.ToString("00");

        SetNativeControl(control);
    }

    void UpdateDuration(object sender, Android.App.TimePickerDialog.TimeSetEventArgs e)
    {
        Element.Time = new TimeSpan(e.HourOfDay, e.Minute, 0);
        Control.Text = Element.Time.Hours.ToString("00") + ":" + Element.Time.Minutes.ToString("00");
    }
}

public class TimePickerDialogIntervals : TimePickerDialog
{
    public const int TimePickerInterval = 15;
    private bool _ignoreEvent = false;

    public TimePickerDialogIntervals(Context context, EventHandler<TimePickerDialog.TimeSetEventArgs> callBack, int hourOfDay, int minute, bool is24HourView)
        : base(context, (sender, e) => {
            callBack(sender, new TimePickerDialog.TimeSetEventArgs(e.HourOfDay, e.Minute * TimePickerInterval));
        }, hourOfDay, minute / TimePickerInterval, is24HourView)
    {
    }

    public override void OnTimeChanged(Android.Widget.TimePicker view, int hourOfDay, int minute)
    {
        base.OnTimeChanged(view, hourOfDay, minute);
        
        if (_ignoreEvent) return;

        if (minute % TimePickerInterval != 0)
        {
            int minuteFloor = minute - (minute % TimePickerInterval);
            minute = minuteFloor + (minute == minuteFloor + 1 ? TimePickerInterval : 0);
            if (minute == 60)
                minute = 0;
            _ignoreEvent = true;
            view.CurrentMinute = (Java.Lang.Integer)minute;
            _ignoreEvent = false;
        }
    }
}

效果：

Answer 2

对我来说，Junior Jiang 的解决方案在 Xamarin.Forms 5.0 中不再有效。这样做的原因是基础渲染器总是调用它自己的 TimePickerDialog。幸运的是，您可以覆盖必要的方法。

我还更改了分钟跳转到离当前位置最近的下一个间隔的行为。我认为这比完全拉到下一个间隔要快一点。该分钟的某些特定值也存在轻微计算错误，导致指针闪烁。

public class IntervalTimePickerRenderer : TimePickerRenderer
{
    private Context _context;

    public IntervalTimePickerRenderer(Context context) : base(context)
    {
        _context = context;
    }

    protected override TimePickerDialog CreateTimePickerDialog(int hours, int minutes)
    {
        return new TimePickerDialogIntervals(
            Context,
            UpdateDuration,
            hours,
            minutes,
            DateFormat.Is24HourFormat(_context));
    }

    void UpdateDuration(object sender, TimePickerDialog.TimeSetEventArgs e)
    {
        Element.Time = new TimeSpan(e.HourOfDay, e.Minute, 0);
        Control.Text = Element.Time.Hours.ToString("00") + ":" + Element.Time.Minutes.ToString("00");

        Element.Unfocus();
    }
}

public class TimePickerDialogIntervals : TimePickerDialog
{
    public const int TimePickerInterval = 15;
    private bool _ignoreEvent = false;

    public TimePickerDialogIntervals(
        Context context,
        EventHandler<TimeSetEventArgs> callBack,
        int hourOfDay,
        int minute,
        bool is24HourView)
        : base(context,
              (sender, e) =>
              {
                  callBack(sender, new TimePickerDialog.TimeSetEventArgs(e.HourOfDay, e.Minute));
              },
              hourOfDay,
              minute,
              is24HourView)
    {
    }

    public override void OnTimeChanged(Android.Widget.TimePicker view, int hourOfDay, int minute)
    {
        base.OnTimeChanged(view, hourOfDay, minute);

        if (_ignoreEvent) return;

        if (minute % TimePickerInterval != 0)
        {
            float minuteFactor = (float)minute / TimePickerInterval;
            int intervalFactor = (int)Math.Round(minuteFactor, 0);

            minute = intervalFactor * TimePickerInterval;
            
            if (minute == 60)
            {
                minute = 0;
            }

            _ignoreEvent = true;
            view.Minute = minute;
            _ignoreEvent = false;
        }
    }
}

以 xamarin 形式间隔 15 分钟的 TimePicker

TimePicker with 15 minutes interval in xamarin forms

timepicker

xamarin.android

xamarin

numberpicker

xamarin.forms