読者です 読者をやめる 読者になる 読者になる

Xamarin 日本語情報

Xamarin(ザマリン) の代理店だったエクセルソフト田淵のブログです。主に Xamarin に関するエントリーをアップしていきます。(なるべく正しい有益な情報を掲載していきたいと考えていますが、このブログのエントリーは所属組織の公式見解ではありませんのでご注意ください)

Unified API 対応 Xamarin.Forms 1.3 のアップデート内容 (ビデオ付き)

Xamarin Xamarin.Forms Xamarin.iOS

こんにちは。エクセルソフトの田淵です。

Major Enhancements to Xamarin.Forms | Xamarin Blog にあるように、Xamarin.Forms 1.3 でいくつかの機能強化が図られています。なお、Xamarin.Forms 1.3 を使用するには Xamarin.iOS 8.6 が必要ですので、Stable Channel で最新版にアップデートしてください。

Xamarin.Forms 1.3 の強化点

以下、ざっと翻訳しました。なお、2015/2/18 時点での最新版は 1.3.4(!) でそれまでの変更点、修正点は Xamarin.Forms 1.3.4 リリースのお知らせと各アップデート内容の纏め - Xamarin 日本語情報 に纏めてあります。併せてご参照ください。

アプリケーションライフサイクル

Xamarin.Forms アプリケーションでライフサイクルイベントに簡単に対応できるようになりました。新しい Application ベースクラスで OnStart, OnSleep, OnResume などのライフサイクルメソッドを活用できます。また Application クラスはあなたのアプリケーションの MainPage を指定するシンプルなソリューションを提供します。新しい Application クラスは以下のようになります。

public class App : Xamarin.Forms.Application
{
    public App ()
    {
        MainPage = new ContentPage { Title = "App Lifecycle Sample" }; // your page here
    }
    protected override void OnStart()
    {
        // Handle when your app starts
        Debug.WriteLine ("OnStart");
    }
    protected override void OnSleep()
    {
        // Handle when your app sleeps
        Debug.WriteLine ("OnSleep");
    }
    protected override void OnResume()
    {
        // Handle when your app resumes
        Debug.WriteLine ("OnResume");
    }
}

詳細は こちらのドキュメント をご参照ください。

スタイル

Xamarin の開発者は iOS, Android, Windows Phone の UI 構築で XAML を好んで使用します。しかし、大量のプロパティがあると XAML が雑然としてしまいます。しかも、もしすべてのコントロールの見た目を変更したい場合は、すべてのコントロールを個別にアップデートしなければいけませんでした。Styles を導入することで、ResourceDictory のコントロールのデフォルト値を定義できます。以下は複数のボタンがページでどのように見えるかのサンプルです。

<!--?xml version="1.0" encoding="UTF-8"?-->
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StylesApps.MyPage">
  <ContentPage.Content>
    <StackLayout Padding="10" Spacing="10">
      <Button Text="Login"
              HorizontalOptions = "FillAndExpand"
              HeightRequest = "42"
              BackgroundColor = "#77d065"
              BorderColor = "Black"
              BorderRadius = "5"
              BorderWidth = "0"
              TextColor = "White"/>
      <Button Text="Logout"
              HorizontalOptions = "FillAndExpand"
              HeightRequest = "42"
              BackgroundColor = "#77d065"
              BorderColor = "Black"
              BorderRadius = "5"
              BorderWidth = "0"
              TextColor = "White"/>
      <Button Text="Register"
              HorizontalOptions = "FillAndExpand"
              HeightRequest = "42"
              BackgroundColor = "#77d065"
              BorderColor = "Black"
              BorderRadius = "5"
              BorderWidth = "0"
              TextColor = "White"/>
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

複数のボタンに同じプロパティが設定されているのが分かると思います。これをキレイにするには、ContentPage の Resources にベーススタイルを定義し、Button の Style プロパティにキーをセットするだけです。

<!--?xml version="1.0" encoding="UTF-8"?-->
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="StylesApps.MyPage">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="ButtonStyle" TargetType="Button">
         <Setter Property="HorizontalOptions" Value="FillAndExpand"/>
         <Setter Property="BackgroundColor" Value="#77d065"/>
         <Setter Property="BorderColor" Value="Black"/>
         <Setter Property="HeightRequest" Value="42"/>
         <Setter Property="BorderRadius" Value="5"/>
         <Setter Property="BorderWidth" Value="0" />
         <Setter Property="TextColor" Value="White"/>
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>
    <ContentPage.Content>
      <StackLayout Padding="10" Spacing="10">
        <Button Text="Login" Style="{StaticResource ButtonStyle}" />
        <Button Text="Logout" Style="{StaticResource ButtonStyle}"/>
        <Button Text="Register" Style="{StaticResource ButtonStyle}"/>
      </StackLayout>
  </ContentPage.Content>
</ContentPage>

これでスタイルのプロパティのどれかを変更すれば自動的にこのスタイルが設定されているページのすべてのボタンに適用されます。

http://blog.xamarin.com/wp-content/uploads/2015/01/Styles2-300x250.png

トリガー

イベント、データ、マルチトリガー含む様々な種類のトリガーを Xamarin.Forms で利用可能になりました。以前にスタイリングとしてのトリガーのことを聞いたことがない場合は、基本的にコントロールで特定の条件が満たされたときに変更を適用することができるオブジェクトと考えてください。例えば、Entry フィールドにフォーカスした際にテキストを緑にするなどができます。これを実装するコードはコントロールにスタイルを拡張するのと同じくらい簡単です。トリガーのプロパティが満たされると、セッターが自動的に実行されます。トリガーのプロパティが満たされない状態になるか変更された場合は、セッターは元の値に戻されます。

<!--?xml version="1.0" encoding="UTF-8"?-->
<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StylesApps.MyPage2">
  <ContentPage.Resources>
    <ResourceDictionary>
      <Style x:Key="EntryTrigger" TargetType="Entry">
        <Style.Triggers>
          <Trigger Property="IsFocused" Value="True" TargetType="Entry">
            <Setter Property="Scale" Value="1.1" />
            <Setter Property="TextColor" Value="Green" />
          </Trigger>
        </Style.Triggers>
      </Style>
    </ResourceDictionary>
  </ContentPage.Resources>
  <ContentPage.Content>
    <StackLayout Padding="20" Spacing="10">
      <Entry Placeholder="Username" Style="{StaticResource EntryTrigger}" />
      <Entry Placeholder="Password" Style="{StaticResource EntryTrigger}"/>
      <Button Text="Login" />
    </StackLayout>
  </ContentPage.Content>
</ContentPage>

http://blog.xamarin.com/wp-content/uploads/2015/01/ezgif.com-crop-1.gif

ナビゲーションスタック

Xamarin.Forms のナビゲーションシステムは、PUSH, POP やページを簡単に挿入できるようにオーバーホールされました。さらに、ナビゲーションでページに in, out する際にアニメーションするかを指定できます。以下、新しい INavigation API をご覧ください。

public interface INavigation
{
    IReadOnlyList NavigationStack { get; }
    IReadOnlyList ModalStack { get; }
    void RemovePage (Page page);
    void InsertPageBefore (Page page, Page before);
    Task PushAsync (Page page);
    Task PopAsync ();
    Task PopToRootAsync ();
    Task PushModalAsync (Page page);
    Task PopModalAsync ();
    Task PushAsync (Page page, bool animated);
    Task PopAsync (bool animated);
    Task PopToRootAsync (bool animated);
    Task PushModalAsync (Page page, bool animated);
    Task PopModalAsync (bool animated);
}

http://blog.xamarin.com/wp-content/uploads/2015/01/ezgif.com-crop.gif

また、今回のアップデートでデバイスの物理 戻る ボタンが押されたかを調べる OnBackButtonPressed() 仮想メソッドを発見できるでしょう。これらのアップデートを組み合わせて、より柔軟なアプリケーションを是非構築してください。

今回紹介したのは一部の機能にすぎません。すべての機能、バグ修正をご覧になりたい場合は こちらのフォーラム をご参照ください。
合わせて ドキュメント もアップデートしてあります。

Webinar 録画

こちらです。

その他情報

使ってみたいですね!

既存の Forms アプリの修正や 1.3 のアップデート情報は以下もご参照ください。

Xamarin を 1.3 以上に更新したら前回のコードが動かなくなった! - しっぽを追いかけて

ちょっと未来のXamarin.Formsを試す(1.3.0 Technology Preview) - Qiita

Xamarin 気になった方は

是非 ダウンロード(直接) / ダウンロード(弊社経由) して触ってみてください。 学習用リソースJXUG リンクページ に参考資料を纏めてますので併せてどうぞ。

以上です。