はじめに
Xamarin.Formsを使うとiOS/Android 両OS対応のアプリが一つのソースでできるらしいではないか。早速作ってみるぞ！
と思ったけれど、初心者向けの超々シンプルなアプリの例が出てこないじゃないか(怒
ということで小一時間くらい悩みながらなんとか基礎の基礎っぽい成果物が出来たのでまとめておく
説明はいいからソースをよこせという方へ
githubにソース上げてあります。どうぞ。
https://github.com/Kyome22/XamarinCount
開発手順
新しいソリューションの作成
iOS/Android両OS向けなのでMultiplatformのアプリを選択してください。
ここでフォームアプリを選択すると、残念なことに大量に余計なコードが書き込まれたファイルが生成されますので、Blank Forms Appを選択してください。
続いて、アプリ名を記入して設定をいじらずに次へを押してください。
次のページも何もいじらず作成を押してください。
そうするとソリューションが生成されます。
状況確認
今回使うのは、CountPage.xamlとCountPage.xaml.csの二つのファイルだけです。
CountPage.xamlはxml形式でアプリの見た目を編集します。
CountPage.xaml.csはC#で機能を実装します。
編集前はそれぞれ下のようになっています。
<?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>
using Xamarin.Forms;
namespace Count
{
public partial class CountPage : ContentPage
{
public CountPage()
{
InitializeComponent();
}
}
}
見た目の編集
見た目の編集つまりレイアウトは.xamlファイルを使います。
タグと属性を用いた編集なので、HTML&JavascriptでのWebページ開発と似ていますね。
Xamarin.Formsの公式サイトによると、ビューの形式は以下の5種類あるようです。
また、レイアウトの形式は以下の7種類を組み合わせて設定できるようです。
使うことのできるUIパーツはいっぱいあるみたいです。
とりあえず、カウントアップ機能とビューのサイズ変更機能を実装してみたかったので、こんな感じのレイアウトにしてみました。
<?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#で書いていきます。
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に対応したアプリが作れるみたいですね。