Xamarin.Forms で Nuget のカレンダーを使う（１）

4670 ワード
VisualStudio2017 nuget calendar Xamarin.Forms Android Android テキストリンク

初投稿です。Xamarin.Forms を使って何でもいいからスマフォアプリが作りたくて勉強中。

今回やりたいこと

Xamarin.Forms でカレンダーの表示・利用。
ただ Android の CalendarView みたいなものがないので、どうすればいいのか…と思案。調べてもなかなか出てきません。各ネイティブ層で別々に作るか、それらしいのを自力で作るしかないのかと思ったところで、Nuget に有志が作ってくれたパッケージがあることを知り、それを試してみることにしました。

Android/iPhone 両方で作りたいのですが、今は iMac 環境が無いのでとりあえず Android 環境でのみ確認しておきます。

使うのは Nuget にあった XamForms.Controls.Calendar です。

環境

  • Visual Studio 2017 v15.5.5
  • .NET Framework 4.7
  • Xamarin.Forms 2.5
  • Android Emulator x86 (v6.0 API23)

事前準備

  1. [ツール]->[ソリューションのパッケージの管理] を開く
  2. 今回は XamForms.Controls.Calendar v1.1.1 を選択
  3. 「インストール」ボタンを押下してインストール

基本表示

カレンダーを貼り付けたい XAML の ContextPage に以下文を追加します。

Sample.xaml
xmlns:controls="clr-namespace:XamForms.Controls;assembly=XamForms.Controls.Calendar"
  1. カレンダーを貼り付けたい XAML に以下文を追加
Sample.xaml
            <controls:Calendar Padding="10,0,10,0" StartDay="Sunday" 
                               SelectedBorderWidth="4" DisabledBorderColor="Black" />

cs ソースは変更なし。
単純にカレンダーを表示させるだけならこれで OK です。

属性

XamForms.Controls.Calendar は結構属性が多いです。
以下は一例。どっかに API ないのかしら…

属性 概要 指定文字
TitleLabelTextColor 年月表示の色を指定する 色
TitleLabelFormat 年月表示のフォーマットを指定する e.g.) "YYYY年 MM月"
StartDay 開始曜日の指定 曜日
SelectedBorderWidth 選択した日の枠の太さ 数字
Padding 前後左右の余白 左幅,上幅,右幅,下幅,
DatesTextColor 年月に該当する日々の色を指定する 色

取り合えずデフォルトでは 2 2018 みたいな感じでダサいので、 TitleLabelFormat 属性でいいフォーマットにしておいたほうが良さそうです。

Sample4.xaml
            <controls:Calendar Padding="10,0,10,0" StartDay="Sunday" 
                               SelectedBorderWidth="4" DisabledBorderColor="Black"
                               TitleLabelFormat="yyyy年MM月" />

画面遷移と土日祝日の設定

続きを書きました。
Xamarin.Forms で Nuget のカレンダーを使う（２）

リンク

基本的な使い方は本家参照。
https://github.com/rebeccaXam/XamForms.Controls.Calendar