Xamarin.iOS 中的選擇器控件

可 UIPickerView 藉由卷動類似滾輪介面的個別元件，從清單中挑選值。

選擇器經常用來選取日期和時間;Apple 提供 UIDatePicker 此用途的類別。

本文說明如何實作和使用 和 UIPickerView UIDatePicker 控件。

UIPickerView

實作選擇器

藉由具現化新的 UIPickerView來實作選擇器：

UIPickerView pickerView = new UIPickerView(
    new CGRect(
        UIScreen.MainScreen.Bounds.X - UIScreen.MainScreen.Bounds.Width,
        UIScreen.MainScreen.Bounds.Height - 230,
        UIScreen.MainScreen.Bounds.Width,
        180
    )
);

選擇器和分鏡腳本

若要在 iOS 設計工具中建立選擇器，請將 [選擇器檢視] 從 [工具箱] 拖曳至設計介面。

使用選擇器控制件

選擇器會使用 模型 來與資料互動：

public override void ViewDidLoad()
{
    base.ViewDidLoad();
    var pickerModel = new PeopleModel(personLabel);
    personPicker.Model = pickerModel;
}

基 UIPickerViewModel 類會實作兩個介面：IUIPickerDataSource 和 IUIPickerViewDelegate，它會宣告各種方法來指定選擇器的數據，以及處理互動的方式：

public class PeopleModel : UIPickerViewModel
{
    public string[] names = new string[] {
            "Amy Burns",
            "Kevin Mullins",
            "Craig Dunn",
            "Joel Martinez",
            "Charles Petzold",
            "David Britch",
            "Mark McLemore",
            "Tom Opegenorth",
            "Joseph Hill",
            "Miguel De Icaza"
        };

    private UILabel personLabel;

    public PeopleModel(UILabel personLabel)
    {
        this.personLabel = personLabel;
    }

    public override nint GetComponentCount(UIPickerView pickerView)
    {
        return 2;
    }

    public override nint GetRowsInComponent(UIPickerView pickerView, nint component)
    {
        return names.Length;
    }

    public override string GetTitle(UIPickerView pickerView, nint row, nint component)
    {
        if (component == 0)
            return names[row];
        else
            return row.ToString();
    }

    public override void Selected(UIPickerView pickerView, nint row, nint component)
    {
        personLabel.Text = $"This person is: {names[pickerView.SelectedRowInComponent(0)]},\n they are number {pickerView.SelectedRowInComponent(1)}";
    }

    public override nfloat GetComponentWidth(UIPickerView picker, nint component)
    {
        if (component == 0)
            return 240f;
        else
            return 40f;
    }

    public override nfloat GetRowHeight(UIPickerView picker, nint component)
    {
        return 40f;
    }

選擇器可以有多個數據行或 元件。 元件將選擇器分割成多個區段，以方便且更具體的數據選取：

若要指定選擇器中的元件數目，請使用 GetComponentCount 方法。

自訂選擇器的外觀

若要自定義選擇器的外觀，請使用 UIPickerView.UIPickerViewAppearance類別或覆寫 GetView 中的UIPickerViewModel和 GetRowHeight 方法。

UIDatePicker

實作日期選擇器

藉由具現化 UIDatePicker來實作日期選擇器：

UIPickerView pickerView = new UIPickerView(
    new CGRect(
        UIScreen.MainScreen.Bounds.X - UIScreen.MainScreen.Bounds.Width,
        UIScreen.MainScreen.Bounds.Height - 230,
        UIScreen.MainScreen.Bounds.Width,
        180
     )
);

日期選擇器和分鏡腳本

若要在 iOS 設計工具中建立日期選擇器，請將日期選擇器從 [工具箱] 拖曳至設計介面。

日期選擇器屬性

最小和最大日期

MinimumDate 並 MaximumDate 限制日期選擇器中可用的日期範圍。 例如，下列程式代碼會將日期選擇器限制在目前時刻之前六十年：

var calendar = new NSCalendar(NSCalendarType.Gregorian);
var currentDate = NSDate.Now;
var components = new NSDateComponents();
components.Year = -60;
NSDate minDate = calendar.DateByAddingComponents(components, currentDate, NSCalendarOptions.None);
datePickerView.MinimumDate = minDate;
datePickerView.MaximumDate = currentDate;

提示

可以明確地將 轉換成 DateTime NSDate：

DatePicker.MinimumDate = (NSDate)DateTime.Today.AddDays (-7);
DatePicker.MaximumDate = (NSDate)DateTime.Today.AddDays (7);

分鐘間隔

屬性會 MinuteInterval 設定選擇器顯示分鐘數的間隔：

datePickerView.MinuteInterval = 10;

模式

日期選擇器支援四 種模式，如下所述：

UIDatePickerMode.Time

UIDatePickerMode.Time 顯示具有小時和分鐘選取器的時間，以及選擇性的 AM 或 PM 指定：

datePickerView.Mode = UIDatePickerMode.Time;

UIDatePickerMode.Date

UIDatePickerMode.Date 顯示具有月份、日和年份選取器的日期：

datePickerView.Mode = UIDatePickerMode.Date;

選取器的順序取決於日期選擇器的地區設定，預設會使用系統地區設定。 上圖顯示地區設定中 en_US 選取器的版面配置，但下列將順序變更為 Day |月份 |年：

datePickerView.Locale = NSLocale.FromLocaleIdentifier("en_GB");

UIDatePickerMode.DateAndTime

UIDatePickerMode.DateAndTime 會顯示日期的縮短檢視、以小時和分鐘為單位的時間，以及選擇性的AM或PM指定（視是否使用12或24小時制而定）：

datePickerView.Mode = UIDatePickerMode.DateAndTime;

如同 UIDatePickerMode.Date，選取器的順序和使用12或24小時制取決於日期選擇器的地區設定。

提示

Date使用 屬性，在模式UIDatePickerMode.Time、 UIDatePickerMode.Date或 UIDatePickerMode.DateAndTime中擷取日期選擇器的值。 此值會儲存為 NSDate。

UIDatePickerMode.CountDownTimer

UIDatePickerMode.CountDownTimer 顯示小時與分鐘值：

datePickerView.Mode = UIDatePickerMode.CountDownTimer;

屬性 CountDownDuration 會擷取模式中 UIDatePickerMode.CountDownTimer 日期選擇器的值。 例如，若要將倒數值新增至目前的日期：

var currentTime = NSDate.Now;
var countDownTimerTime = datePickerView.CountDownDuration;
var finishCountdown = currentTime.AddSeconds(countDownTimerTime);

dateLabel.Text = "Alarm set for:" + coundownTimeformat.ToString(finishCountdown);

NSDateFormatter

若要格式化 NSDate，請使用 NSDateFormatter。

若要使用 NSDateFormatter，請呼叫其 ToString 方法。 例如：

var date = NSDate.Now;
var formatter = new NSDateFormatter();
formatter.DateStyle = NSDateFormatterStyle.Full;
formatter.TimeStyle = NSDateFormatterStyle.Full;
var formattedDate = formatter.ToString(d);
// Tuesday, August 14, 2018 at 11:20:42 PM Mountain Daylight Time

DateFormat

DateFormat的屬性 （字串） NSDateFormatter 允許自訂的日期格式規格：

NSDateFormatter dateFormat = new NSDateFormatter();
dateFormat.DateFormat = "yyyy-MM-dd";

TimeStyle

TimeStyle屬性 （的 NSDateFormatter 會NSDateFormatterStyle根據預先決定的樣式指定時間格式設定：

NSDateFormatter timeFormat = new NSDateFormatter();
timeFormat.TimeStyle = NSDateFormatterStyle.Short;

各種 NSDateFormatterStyle 值會顯示時間，如下所示：

• NSDateFormatterStyle.Full：下午 7：46：00 東部日光節約時間
• NSDateFormatterStyle.Long：下午 7：47：00 EDT
• NSDateFormatterStyle.Medium：下午 7：47：00
• NSDateFormatterSytle.Short：下午 7：47

DateStyle

DateStyle屬性 （aNSDateFormatterStyle） NSDateFormatter 會根據預先決定的樣式指定日期格式設定：

NSDateFormatter dateTimeformat = new NSDateFormatter();
dateTimeformat.DateStyle = NSDateFormatterStyle.Long;

各種 NSDateFormatterStyle 值會顯示日期，如下所示：

• NSDateFormatterStyle.Full： 2017 年 8 月 2 日星期三下午 7：48
• NSDateFormatterStyle.Long： 2017 年 8 月 2 日下午 7：49
• NSDateFormatterStyle.Medium： 2017 年 8 月 2 日，下午 7：49
• NSDateFormatterStyle.Short：8/2/17，下午 7：50

注意

DateFormat 和 DateStyle/TimeStyle 提供指定日期和時間格式的不同方式。 最近設定的屬性會決定日期格式子的輸出。