Xamarin.Forms 〜描画処理を実装する〜
記事IT・テクノロジー
ではまず、画面を描画する処理を実装していこうと思います。
自分でビットマップ画像を生成して描画する形を取ります。
ですので、まずタイマイベントを実装して、その中で描画が必要か否かを判断して、再描画が必要であれば、ビットマップ画像を更新して、ビューの再描画をリクエストします。
■タイマイベントの実装
コンストラクタ内で、タイマイベントを登録します。
今回は、そんなに頻繁な更新は必要がありませんが、とりあえず１秒間に３０回程度のタイマイベント呼出しにしておきます。
public MainPage()
{
InitializeComponent();
// タイマイベント = スタート (30fps)
Device.StartTimer(TimeSpan.FromMilliseconds( (int)( 1000 / 30 ) ), OnTimerTick);
}
次に、タイマイベントをMainPage.xaml.cs内に追加します。
描画が正しく動作しているか確認するため、ラベルを更新してみましょう。
bool OnTimerTick()
{
// ここに描画処理を実装していく。
// ラベルに、現在時刻 時:分:秒.ミリ秒を表示する。
DateTime t0 = DateTime.Now;
LabelTimerTest.Text = String.Format("{0}:{1}:{2}.{3}"
, t0.Hour, t0.Minute, t0.Second, t0.Millisecond
);
return true;
}
最後に、タイマイベントからアクセスするラベルを、画面上に配置します。
MainPage.xamlを開いて、次のようなコードを実装します。
（※注）ｈは半角に変換して使用してください。
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="ｈttp://xamarin.com/schemas/2014/forms"
xmlns:x="ｈttp://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Code59.MainPage">
<ContentView
x:Name="MainView">
<Label
x:Name="LabelTimerTest">
</Label>
</ContentView>
</ContentPage>
■動作確認について
これで、基本的な動作確認の準備が整いました。
それでは、実際にコンパイルして、Androidの実機上で動かしてみましょう。
Xamarin.Formsでは、PC上でAndroidエミュレータを実行してそこでデバッグすることもできますが、動作が重いため、あまりおススメしません。
私は、Lenovo Yogapad YT3-X50Fというタブレットを使用しています。
Androidスマホをお持ちであれば、それでも全然OKです。
■Android端末を開発者モードにする
「設定」アプリ内で、「ビルド番号」を７回連続してタップします。
すると「これでデベロッパーになりました！」とメッセージが表示されます。
■開発者向けオプションの設定
設定＞開発者向けオプションから以下の項目を設定します。
・スリープモードにしない ＝ ON
・USBデバッグ ＝ ON
■さぁ、動作確認しましょう。
まず、PCとAndroid端末をUSBケーブルで接続します。
ここからは、VisualStudioの操作です。
ソリューションエクスプローラ＞～～.Android＞右クリック＞スタートアッププロジェクトに設定
ツールバーの「再生」ボタンのプルダウンから、USBケーブルで接続した端末を選択する。
(私の場合は"LENOVO YT3-X50F (Android5.1 - API22))
実行するため、キーボードの[F5]キーを押下します。
画面下側のステータスバーに、ビルドの進捗状況が表示された後、「XAMLホットリロードが接続されました」と表示されます。
そしてしばらくすると、接続したAndroid端末の画面が変化して、現在時刻 時:分:秒.ミリ秒が表示されるはずです。
■あとがき
こうして手順をステップbyステップでブログ記事にしていると、私自身の忘備録としても非常に有用になるな～と感じております。
これからもマイペースで書いていこうと思いますので、良かったら「いいね」ボタンを宜しくお願いします。励みになります。
