Xamarin.Formsでとりあえず両OS対応の簡単なアプリを作りたいんじゃ〜

# はじめに

Xamarin.Formsを使うとiOS/Android 両OS対応のアプリが一つのソースでできるらしいではないか。早速作ってみるぞ！
と思ったけれど、初心者向けの超々シンプルなアプリの例が出てこないじゃないか(怒
ということで小一時間くらい悩みながらなんとか基礎の基礎っぽい成果物が出来たのでまとめておく

# 説明はいいからソースをよこせという方へ

githubにソース上げてあります。どうぞ。
https://github.com/Kyome22/XamarinCount

# 開発手順

## 新しいソリューションの作成

iOS/Android両OS向けなので**Multiplatform**のアプリを選択してください。
ここで**フォームアプリ**を選択すると、残念なことに大量に余計なコードが書き込まれたファイルが生成されますので、**Blank Forms App**を選択してください。
<img width="700" alt="説明1.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/8e43586c-fb72-5583-8c5e-47b010b68fcd.png">

続いて、アプリ名を記入して設定をいじらずに次へを押してください。
<img width="700" alt="説明2.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/e3eea4de-189f-4c10-efb9-3129a3789df3.png">

次のページも何もいじらず作成を押してください。
<img width="700" alt="説明3.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/c8e20ac6-5282-5a95-736d-4f4bbaa9c197.png">

そうするとソリューションが生成されます。
![説明4.png](https://qiita-image-store.s3.amazonaws.com/0/67153/5c115087-d38e-ccee-a430-ab3a12fe45f4.png)

## 状況確認

今回使うのは、**CountPage.xaml**と**CountPage.xaml.cs**の二つのファイルだけです。
**CountPage.xaml**はxml形式でアプリの見た目を編集します。
**CountPage.xaml.cs**はC#で機能を実装します。

編集前はそれぞれ下のようになっています。

```xml:CountPage.xaml_編集前
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Count" x:Class="Count.CountPage">
    <Label Text="Welcome to Xamarin Forms!" VerticalOptions="Center" HorizontalOptions="Center" />
</ContentPage>
```

```c#:CountPage.xaml.cs_編集前
using Xamarin.Forms;

namespace Count
{
    public partial class CountPage : ContentPage
    {
        public CountPage()
        {
            InitializeComponent();
        }
    }
}
```

## 見た目の編集

見た目の編集つまりレイアウトは`.xaml`ファイルを使います。
タグと属性を用いた編集なので、HTML&JavascriptでのWebページ開発と似ていますね。

Xamarin.Formsの公式サイトによると、ビューの形式は以下の5種類あるようです。
<img width="800" alt="box1.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/a76ea30e-679a-5806-bfa6-ad3761b3ea62.png">

また、レイアウトの形式は以下の7種類を組み合わせて設定できるようです。
<img width="800" alt="box2.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/ee0c5c52-ebfe-7fc4-0c8b-dfae333677f5.png">

使うことのできるUIパーツはいっぱいあるみたいです。
<img width="800" alt="box3.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/9f9054cd-0e87-eabf-3937-f4a15adc0c0c.png">

とりあえず、カウントアップ機能とビューのサイズ変更機能を実装してみたかったので、こんな感じのレイアウトにしてみました。
<img width="300" alt="レイアウト.png" src="https://qiita-image-store.s3.amazonaws.com/0/67153/a6025d11-a91c-cde8-5315-6e111775089a.png">

```xml:CountPage.xaml_編集後
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" xmlns:local="clr-namespace:Count" x:Class="Count.CountPage">

    <StackLayout VerticalOptions="Center" HorizontalOptions="Center" Spacing="10" >
        <Label 
            x:Name="countLabel" 
            Text="0" 
            TextColor="Black"
            WidthRequest="150"
            HorizontalOptions="Center" 
            HorizontalTextAlignment="Center" >
        </Label>
        <Button 
            x:Name="countButton"
            Text="Push"
            Clicked="CountUp" 
            WidthRequest="150"
            HorizontalOptions="Center" >
        </Button>
        <Button 
            x:Name="resetButton"
            Text="Reset"
            Clicked="Reset"
            WidthRequest="150"
            HorizontalOptions="Center" >
        </Button>
        <BoxView
            x:Name="box1"
            WidthRequest="50"
            HeightRequest="50"
            BackgroundColor="Lime"
            HorizontalOptions="Center" >
        </BoxView>
        <Slider
            x:Name="widthSlider"
            Maximum="100"
            Minimum="50"
            ValueChanged="WidthChanged"
            HorizontalOptions="Center" >
        </Slider>
    </StackLayout>

</ContentPage>
```

### 補足

`WidthRequest`にてコンポーネントの横幅を指定できるようですが、`Reguest`とあるように絶対にそうなるわけではないみたいです。
`StackLayout`内で`WidthRequest`を発動させるためには、`HorizontalOptions`の指定が必須みたいです。
`x:Name`にてコンポーネントに名前をつけることができ、`.cs`ファイルの方で扱うことができるようになります。
`Button`の場合は`Clicked`属性、`Slider`の場合は`ValueChanged`属性にてイベントハンドラの関数を指定できます。
`Slider`は`Maximum`と`Minimum`の順番が大事で、この順番じゃないとエラーになるっぽいです。

## 機能の実装

機能を実装は`.cs`ファイルを使います。
c#で書いていきます。

```c#:CountPage.xaml.cs_編集後
using Xamarin.Forms;
using System;

namespace Count
{
    public partial class CountPage : ContentPage
    {
        int cnt = 0;
        public CountPage()
        {
            InitializeComponent();
        }

        void CountUp(object sender, EventArgs e)
        {
            cnt += 1;
            countLabel.Text = cnt.ToString();
            if (cnt > 10) {
                countLabel.TextColor = Color.Red;
            }
        }

        void Reset(object sender, EventArgs e)
        {
            cnt = 0;
            countLabel.Text = cnt.ToString();
            countLabel.TextColor = Color.Black;
        }

        void WidthChanged(object sender, EventArgs e)
        {
            box1.WidthRequest = (int)widthSlider.Value;
            box1.HeightRequest = (int)widthSlider.Value;
        }
    }
}
```

### 補足

イベントハンドラの関数の引数は`object`型の引数と`EventArgs`型の引数を指定するようです。
基本的には勘で実装できます。

# 実行

iOSならXcodeがPCに入っていればiOSシミュレータが起動し、AndroidならAndroid Studioが入っていればAndroidエミュレータが起動するみたいです。

# まとめ

Xamarin.Formsを使ったアプリ開発は難しくない！
簡単なものなら両OSに対応したアプリが作れるみたいですね。

## 参考

https://www.xamarin.com/forms