コンボボックスにカレンダーを表示して日付を選択する方法(Xamarin.iOS)

文書番号 : 81905     文書種別 : 使用方法     登録日 : 2016/12/12     最終更新日 : 2016/12/12
文書を印刷する
対象製品
Xuni
詳細
コンボボックスにカレンダーを表示して日付を選択する方法(Xamarin.iOS)

Xuniのコンポーネントを組み合わせて利用することで、コンボボックスのドロップダウン部分にカレンダーを表示することができます。ドロップダウンで表示したカレンダーから任意の日付を選択し、その日付をそのコンボボックスの値として取得可能です。

利用するXuniのコンポーネントは、Xuni InputとXuni Calendarです。

XuniInputのドロップダウンコントロールを構成する要素は、ヘッダー部(Header)とドロップダウン部(DropDown)です。


ヘッダー部で値の表示と入力が行われ、ドロップダウン部に選択肢が表示されます。
この例では、ヘッダー部にXuniInputのマスク入力コントロールを利用して日付表示、入力に対応させ、ドロップダウン部分にXuniCalendarを表示させています。

Xamarin.iOSで画面に配置するコントロールの定義を含めすべてコードで記述したサンプルコードが以下です。
このクラスは、コンボボックスを作成します。

サンプルコード
C#(Xamarin.iOS)
using Foundation;
using Xuni.iOS.Input;
using Xuni.iOS.Core;
using Xuni.iOS.Calendar;
using UIKit;

namespace Xuni_QuickStart
{
    public class CreateInput
    {
        // ドロップダウンと内部に表示するカレンダー
        // 変数を定義
        public XuniCalendar calendar;
        public static XuniMaskedTextField textField; 
        public static XuniDropDown d;

        public XuniDropDown getDropDown()
        {
            // ドロップダウンを作成
            var dropDown = new XuniDropDown();
            dropDown.DropDownHeight = 300;
            dropDown.DropDownWidth = dropDown.Bounds.Size.Width;
            // ドロップダウンは強制的に下部に表示する
            dropDown.DropDownDirection = XuniDropDownDirection.ForceBelow;
            dropDown.IsAnimated = true;
            d = dropDown;

            //MaskedInputを作成してヘッダー部に設定する
            textField= new XuniMaskedTextField();
            textField.Mask = @"0000/00/00";
            textField.BorderStyle = UITextBorderStyle.None;
            dropDown.Header = textField;

            // カレンダーを作成してドロップダウン部に設定する
            calendar = new XuniCalendar();
            calendar.Delegate = new myDelegate();
            dropDown.DropDownView = calendar;

            return dropDown;
        }
        // ドロップダウンに表示されたカレンダーで日付を選択した場合の処理
         class myDelegate : XuniCalendarDelegate 
        {
            public override void SelectionChanged(XuniCalendar sender, CalendarRange selectedDates)
            {
                // 日付の書式を指定して、ヘッダー部に指定されたMaskedInputの値に設定
                NSDateFormatter df = new NSDateFormatter();
                df.DateFormat = @"yyyy/MM/dd";
                textField.Text = df.ToString(sender.NativeSelectedDate);
                // ドロップダウンを閉じる
                d.IsDropDownOpen = false;

            }
        }
    }
}




このクラスで作成したコンボボックスを表示する場合のコードは、ViewControllerのViewDidLoadメソッドに記述します。
サンプルコード
C#(Xamarin.iOS)
var drop = new CreateInput().getDropDown();
drop.Frame = new CoreGraphics.CGRect(50, 290, View.Bounds.Width - 100, 30);
View.AddSubview(drop);





Xuni > 技術情報 > ドキュメント > DropDown

このナレッジベースで説明したサンプルコードを含むプロジェクトをWebサイトで公開しています。
お試し用のライセンスを組み込み済みですので、ダウンロードしてご利用ください。
Xuni > 技術情報 > クイックスタート
関連情報