コンボボックスにカレンダーを表示して日付を選択する方法(Xamarin.iOS)
対象製品
Xuni
詳細
コンボボックスにカレンダーを表示して日付を選択する方法(Xamarin.iOS)
Xuniのコンポーネントを組み合わせて利用することで、コンボボックスのドロップダウン部分にカレンダーを表示することができます。ドロップダウンで表示したカレンダーから任意の日付を選択し、その日付をそのコンボボックスの値として取得可能です。
利用するXuniのコンポーネントは、Xuni InputとXuni Calendarです。
XuniInputのドロップダウンコントロールを構成する要素は、ヘッダー部(Header)とドロップダウン部(DropDown)です。
ヘッダー部で値の表示と入力が行われ、ドロップダウン部に選択肢が表示されます。
この例では、ヘッダー部にXuniInputのマスク入力コントロールを利用して日付表示、入力に対応させ、ドロップダウン部分にXuniCalendarを表示させています。
Xamarin.iOSで画面に配置するコントロールの定義を含めすべてコードで記述したサンプルコードが以下です。
このクラスは、コンボボックスを作成します。
サンプルコード
C#(Xamarin.iOS)
このクラスで作成したコンボボックスを表示する場合のコードは、ViewControllerのViewDidLoadメソッドに記述します。
サンプルコード
C#(Xamarin.iOS)
Xuni > 技術情報 > ドキュメント > DropDown
このナレッジベースで説明したサンプルコードを含むプロジェクトをWebサイトで公開しています。
お試し用のライセンスを組み込み済みですので、ダウンロードしてご利用ください。
Xuni > 技術情報 > クイックスタート
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 > 技術情報 > クイックスタート