[Xamarin][iOS] SingleViewアプリの基礎

今回は、Visual Studio for Mac(Preview)を使用して、SingleViewアプリを作成してみます。

ダイアログこそ異なるものの、Windows版 Visual Studioでも同様にして作成することが可能です。

SingleViewアプリは、単一のViewで構成されるアプリケーションのことです。

はじめに、新規ソリューションの作成をしましょう。

新しいプロジェクトのダイアログでiOSを選択し、一覧からSingle View Appを選択し[次へ]ボタンをクリックします。

続いて「iOSアプリを構成する」画面が表示されます。App Nameにはアプリケーションの名前を、Organization Identifierには組織名を入力します(通常はURLを逆から記述し増す)。

Deviceでは、アプリを提供するデバイスにチェックを付けます。

最後にターゲットOSの最小バージョンを選択します。

最後にソリューション名、プロジェクト名を確認し[作成]ボタンをクリックします。

[Xamarin][CrossPlatform][Deviceクラス] Device.Stylesを使用して組み込みスタイルを使用する

Device.Stylesを使用すると、あらかじめ決められた組み込みスタイルを使用することができます。

以下に例を示します。

はじめに書くスタイルをかくにんできるようにLabelを6つ配置しておきます。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DevuceClassSapmle3"
             x:Class="DevuceClassSapmle3.MainPage">

  <StackLayout Padding="10, 30, 10, 10">
      <Label x:Name="label1" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label2" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label3" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label4" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label5" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
      <Label x:Name="label6" Text="Welcome Xamarin Forms!"
           VerticalOptions="Center" HorizontalOptions="Center" />
  </StackLayout>

</ContentPage>

つづいて、各LabelのStyleプロパティに組み込みスタイルの値を設定します。

public MainPage()
{
    InitializeComponent();

    label1.Style = Device.Styles.BodyStyle;
    label2.Style = Device.Styles.CaptionStyle;
    label3.Style = Device.Styles.ListItemDetailTextStyle;
    label4.Style = Device.Styles.ListItemTextStyle;
    label5.Style = Device.Styles.TitleStyle;
    label6.Style = Device.Styles.SubtitleStyle;
}

上記例のように、組み込みスタイルを使用すると、各プラットフォームで適切なスタイルが設定されるようになります。

実行例を以下に示します。

[Xamarin][CrossPlatform][Deviceクラス] Device.OnPlatformを使用してプラットフォーム毎にXAMLを記述する

XAML内でDevice.OnPlatformを使用すると、プラットフォーム毎に固有の値を記述することができます。

以下はDevice.OnPlatfomrを使用して、プラットフォーム別にLableのテキストカラーを設定する例を以下に示します。

<OnPlatform>のx:TypeArgumentには、コントロールのどの属性を設定するのかを指定します。ここではColotとしているので、テキストカラーをプラットフォーム別に設定することを意味します。

また、iOSやAndroidというプラットフォーム別のプロパティに各値を設定します。

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:DevuceClassSapmle3"
             x:Class="DevuceClassSapmle3.MainPage">

  <Label Text="Welcome to Xamarin Forms!"
           VerticalOptions="Center"
           HorizontalOptions="Center" >
    <Label.TextColor>
      <OnPlatform x:TypeArguments="Color"
        iOS="Red"
        Android="Blue"
      />
    </Label.TextColor>
  </Label>

</ContentPage>

実行例を以下に示します。

[Xamarin][CrossPlatform][Deviceクラス] Device.OpenUriでブラウザを起動する

Device.OpenUriメソッドを使用すると、デバイスで既定のブラウザを起動して任意のページを表示することができます。

構文
Device.OpenUri(表示したいページのURL);

「表示したいページのURL」には new Url(“http://blog.hiros-dot.net”) のように記述し増す。

以下に例を示します。

public MainPage()
{
    InitializeComponent();

    Device.OpenUri(new Uri("http://blog.hiros-dot.net"));
}

実行結果を以下に示します。

[Xamarin][CrossPlatform][Deviceクラス] Device.OnPlatformで様々なサイズを微調整する

Device.OnPlatformメソッドを使用するとターゲット(iOS, Android, Windows Phone)の微調整を行うことができます。

構文は以下の通りで引数は3つあります。

構文:
Device.OnPlatform(iOS用の値, Android用の値, Windows Phone用の値)

このメソッドは、実行時にターゲットを判断します。現在起動しているターゲットがiOSである場合には第1引数の値を、Androidである場合は第2引数の値を、Windows Phoneである場合は第3引数の値を返します。

以下はターゲット毎にパディングの値を変更する例です。Thicknessのそれぞれの引数は、順に左、上、右、下を表しており、この例では第2引数の「上」のパディング値をターゲット毎に変更できるようにしています。

layout.Padding = new Thickness (5, Device.OnPlatform(30,0,0), 5, 0);

また、以下のように記述することで、ターゲット毎に処理を実行させることもできます。

Device.OnPlatform(
    Android: () =>
    {
        lblIdiom.BackgroundColor = Color.Black;
    },
    iOS:() =>
    {
        lblIdiom.BackgroundColor = Color.Red;
    },
    WinPhone: () =>
    {
        lblIdiom.BackgroundColor = Color.Purple;
    }
);