[Xuni:Calendar] iOSアプリにカレンダーを表示する方法 (Xamarin.Forms/Xamarin.iOS/iOS)
対象製品
Xuni
詳細
iOSアプリにカレンダーを表示する場合、自作やライブラリの利用などいくつかの選択肢があります。
Xuniは、カレンダーの基本機能を搭載したUIコントロール「Xuni Calendar」を収録しているので開発環境からアプリに組み込むことができます。
Xamarinプラットフォームとネイティブの両方でiOSアプリ開発に利用できるので、ネイティブ、Xamarin.Forms、Xamarin.iOSと3つの方法で実現可能です。
コントロールの利用方法は製品ヘルプや解説資料にも記載があります。
Xuni > 技術情報 > ドキュメント > Calendarクイックスタート: iOS/Xamarin
Xuni > 技術情報 > 解説:5分ではじめるXuni
各言語での実装方法のサンプルコードは以下です。
表示方法とカレンダーをめくる方向(月を横または縦方向に送る)を記述しています。
サンプルコード
C#(Xamarin.Forms)
XAML(Xamarin.Forms)
C#(Xamarin.iOS)
Objective-C
Swift
Xuniは、カレンダーの基本機能を搭載したUIコントロール「Xuni Calendar」を収録しているので開発環境からアプリに組み込むことができます。
Xamarinプラットフォームとネイティブの両方でiOSアプリ開発に利用できるので、ネイティブ、Xamarin.Forms、Xamarin.iOSと3つの方法で実現可能です。
コントロールの利用方法は製品ヘルプや解説資料にも記載があります。
Xuni > 技術情報 > ドキュメント > Calendarクイックスタート: iOS/Xamarin
Xuni > 技術情報 > 解説:5分ではじめるXuni
各言語での実装方法のサンプルコードは以下です。
表示方法とカレンダーをめくる方向(月を横または縦方向に送る)を記述しています。
サンプルコード
C#(Xamarin.Forms)
using Xamarin.Forms; using Xuni.Forms.Calendar; namespace Xuni_Calendar { public partial class App : Application { public App() { InitializeComponent(); // ライセンスキーを設定 Xuni.Forms.Core.LicenseManager.Key = License.Key; XuniCalendar calendar = new XuniCalendar(); // カレンダーの初期表示を月モードに設定 calendar.ViewMode = CalendarViewMode.Month; calendar.Orientation = CalendarOrientation.Horizontal; // 水平方向に月を送る // アプリに表示するContentPage を作成 MainPage = new ContentPage() { // Deviceクラスを利用してiOSの場合にのみ上部にステータスバー領域を確保 Padding = new Thickness(0, Device.OnPlatform(20, 0, 0), 0, 0), // カレンダーを設定 Content = calendar }; } protected override void OnStart() { } protected override void OnSleep() { } protected override void OnResume(){ } } }
XAML(Xamarin.Forms)
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:xuni="clr-namespace:Xuni.Forms.Calendar;assembly=Xuni.Forms.Calendar" x:Class="Calendar101.GettingStarted" x:Name="page" Padding="20"> <StackLayout> <Grid VerticalOptions="FillAndExpand"> <!--XAMLで記述した例:縦方向にカレンダーをめくるため、ヘッダーの両脇にナビゲーションボタンを表示--> <xuni:XuniCalendar x:Name="calendar" VerticalOptions="FillAndExpand" ShowNavigationButtons="true" Orientation="Vertical" /> </Grid> </StackLayout> </ContentPage>
C#(Xamarin.iOS)
using System; using UIKit; using Xuni.iOS.Calendar; namespace Xuni_Calendar { public partial class ViewController : UIViewController { protected ViewController(IntPtr handle) : base(handle) { } // カレンダーを定義 private XuniCalendar calendar = new XuniCalendar(); public override void ViewDidLoad() { base.ViewDidLoad(); // カレンダーオブジェクトを設定し、画面に表示 calendar.Orientation = XuniCalendarOrientation.Horizontal; // 水平方向に月を送る // 表示する大きさを設定してViewに追加 calendar.Frame = new CoreGraphics.CGRect(0, 20, View.Bounds.Width, View.Bounds.Height - 20); View.AddSubview(calendar); } public override void DidReceiveMemoryWarning() { base.DidReceiveMemoryWarning(); } } }
Objective-C
#import "ViewController.h" #import "XuniCalendarKit/XuniCalendarKit.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // カレンダー(Calendar)を定義 XuniCalendar *calendar = [[XuniCalendar alloc] initWithFrame:CGRectZero]; // カレンダーオブジェクトを設定し、画面に表示 CGSize size = self.view.bounds.size; calendar.frame = CGRectMake(0, 20, size.width, size.height - 20); [self.view addSubview:calendar]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; } @end
Swift
import UIKit import XuniCalendarKit class ViewController: UIViewController { // カレンダー(Calendar)を定義 var _calendar = XuniCalendar() override func viewDidLoad() { super.viewDidLoad() // カレンダーオブジェクトを設定し、画面に表示 _calendar.orientation = XuniCalendarOrientation.vertical // 垂直方向に月を送る // カレンダーの初期表示を年モードに設定 _calendar.viewMode = XuniCalendarViewMode.year // 表示する大きさを設定してViewに追加 let size = self.view.bounds.size _calendar.frame = CGRect(x: 0, y: 20, width: size.width, height: size.height - 20) view.addSubview(_calendar) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() } }
関連情報
- [Xuni:Calendar] 1年間を表示したカレンダー(年ビュー)で月の表示書式を変更する方法 (Xamarin.Forms/Xamarin.iOS)
- Xamarin.FormsでXuniのコンポーネントを表示した場合、iOSアプリだけ画面上部にはみ出して表示される。[追記:Device.RuntimePlatform に方式を変更](Xamarin.Forms)
- コンボボックスにカレンダーを表示して日付を選択する方法(Xamarin.iOS)
- カレンダーの日付領域に画像を表示する方法(Xamarin.Forms)
- 土曜日と日曜日の色を変更したカレンダーを表示する方法(Xamarin.Forms)
- [Xuni:Calendar][Android]レイアウトの階層の下位にコントロールを配置した場合にイベントが発生しない。 (Xamarin.Forms)
- [Xuni:Calendar] 指定した期間の日付のみを選択可能にする方法 (Xamarin.Forms)