1日目

タイトル：BottonCode

Xamarin.forms　 SampleアプリBottonCodeの作成

本日の目標：

本日はサンプルの BottonCodeを作りましょう。このアプリは右の図のように画面をタップした回数 (右の図では 2回 )を記録する至ってシンプルなものです。

特に断りがない限り、各ページにある赤い番号はそのページにのみ有効とします。

それでは早速始めましょう。まず新規で BottonCodeという名前でソリューションを作成しましょう。ソリューションの作成は他のスライドを参考にしてください。

作成したら右のような画面が表示されます。

最初に右の画面の❶に注目してください。ButtonCodeをクリックしましょう。

❶

ButtonCodeをクリックすると右の画像の様になると思います。まずパッケージ (❶) ”について 1 update”と

あるので右クリック > 更新でアップデートを行いましょう。

❶

❷

次に App.cs(❷)を編集していきます。 App.csをダブルクリックしましょう。

App.csは最初、上の図のうち左図の様になっているので右図の様に書き換えてください。❶の部分を書き換えたわけですが

❶

この文で Appクラスを宣言して

この分で GetMainPageメソッドを宣言をします。

そして上の文ではこの GetMainPageメソッドの中で ButtonCodePageのインスタンスを返す様に指示しています。これについては後ほど詳しく記します。

namespace>class>methodの順番に階層が分かれています。

このアプリの場合はButtonCode>App>GetMainPageですね。ちなみに classとmethodに同じ名前をつける事はできないので気をつけましょう。

次は ButtonCodePage.csを作っていきます。

ButtonCodePage.csを作成するにあたって新しいファイルの追加方法をみていきましょう。まず ButtonCodeを右クリックすると下の様な画面が出てきます。

追加 (❶)を右クリックします。

❶

続いて新しいファイル (❶)をクリックします。これをクリックすると左下の様な画面が表示されると思います。

❶

左の画面が出てきたらGeneral(❷)>空のファイル (❸)の順番で選択します。

続いて名称 (❹)のところにButtonCodePageと入力しましょう。

そして新規ボタンを押したらBottonCodePage.csが作成されます。

❷❸

❹

作成された直後のButtonCodePage.csは空っぽなので上のコードを書き込んでください。さてGenymotionでこのアプリを実行してみるともうアプリとして動きます。

アプリ自体は完成しました。次は ButtonCodePageについて解説していきます。

前述したようにnamespace>class>methodの構造の通りButtonCode(❶)>ButtonCodePage(❷)>ButtonCodePage(❸)の構造になっています。

しかし、よく見ると classとmethodが同じ名前になっています。前述 (5ページ )した様に classとmethodが同じ名称になってはいけません。ここでこれらの名前が一緒なのは❸がmethodではなく❸が❷のコンストラクタだからです。

コンストラクタとはインスタンスが生成された瞬間に実行されるメソッドです。

また、インスタンスとはクラスを鋳型と考えたときに生成されるものにあたります。要は、作ったクラスはインスタンスとして生成しなければ使えません。

❶❷

❸

さらに ButtonPageCodeをみていきましょう。上の画面の❶に注目してください。

❶一行目でボタンのインスタンスを作っています。❷はインスタンスを作りたいクラスの名前で❸はそのインスタンスの名前を書きます。この場合❸に該当するクラスの作成は行っていませんが、このクラスはデフォルトで存在してるのでそのまま用いて構いません。

それ以降にある❹についてはそのまま付けてください。また、それ以降の❺についてはButtonクラス内の Text ”フィールドに Tap for click count!”という文を入れています。また、その文の前の String.FormatについてはStringクラスの Formatメソッドを意味しています。

”最後に ;”を忘れずに付けましょう。

❷ ❸ ❹

❺

❶

次は❶についてみていきましょう。この部分は具体的には先ほどのページで用意したボタンに役割をあたえています。

❷

❸についてbutton.Clickedは文字通り” ”ボタンがタップされたらの意味で、これを書いておけばボタンを押したときの動作がわかります。

❹についてこれは❷で宣言した countの値を 1だけ大きくするという意味です。例えば最初に設定した countの値は 0でした (❷)が、 count++;を 1回実行すると countの値が 1になります。

❸❹❺

前のページの❺についてこのコードに関しては、 botton.Text、つまりボタン

”の上の文字として =”以降を表示するという事です。”また =”以降のコードに関してですが

“{0}” ”や {1}”というのはここに文字を代入しますよという宣言だと思ってください。

”” ”これについては 内の次である count”,”count == 1 ?””:”s””が代入されます。

”ここで count == 1 ?””:”s”はcountが 1の場合 (count==1) ””は、 、つまりなにも返さずcountが 1 ”でない場合は s”を返します。

これは Formatの機能を活用しているといえます。

最後に this.Contentに作成した buttonを付け加えましょう。これをしないと App.csでこのクラスを用いても bottonが表示されません。