Xamarin

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

はじめに

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

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

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

開発手順

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

iOS/Android両OS向けなのでMultiplatformのアプリを選択してください。
ここでフォームアプリを選択すると、残念なことに大量に余計なコードが書き込まれたファイルが生成されますので、Blank Forms Appを選択してください。

説明1.png

続いて、アプリ名を記入して設定をいじらずに次へを押してください。

説明2.png

次のページも何もいじらず作成を押してください。

説明3.png

そうするとソリューションが生成されます。

説明4.png

状況確認

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

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

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>
CountPage.xaml.cs_編集前
using Xamarin.Forms;

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

見た目の編集

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

Xamarin.Formsの公式サイトによると、ビューの形式は以下の5種類あるようです。

box1.png

また、レイアウトの形式は以下の7種類を組み合わせて設定できるようです。
box2.png

使うことのできるUIパーツはいっぱいあるみたいです。
box3.png

とりあえず、カウントアップ機能とビューのサイズ変更機能を実装してみたかったので、こんな感じのレイアウトにしてみました。
レイアウト.png

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属性にてイベントハンドラの関数を指定できます。
SliderMaximumMinimumの順番が大事で、この順番じゃないとエラーになるっぽいです。

機能の実装

機能を実装は.csファイルを使います。
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