kamulog

xamarin.formsのネタなど

Xamarin.Forms の TriggerAction を使って Trigger に連動したアニメーションを設定する

Xamarin.Forms

この記事は Xamarin Advent Calendar 2019 の 1日目の記事です。

Triggerの機能にいつのまにか EnterActions / ExitActions なるものが実装されていたので試してみました。

docs.microsoft.com

今までの Trigger でできたこと

Triggerにも種類がありますが、ここでは DataTrigger を使う例を紹介していきます。 DataTriggerを使うと、あるデータに対応してプロパティを変更させたりできるので、色を変えたり可視状態を変えたりすることができます。 ただ、シンプルに切り替えるだけなので唐突な変化になってしまいます。

例えば以下のような XAML で、ViewModelのIsActiveの値に応じてOpacityを変更するようなコードを書くと

<Grid Grid.Row="0">
    <BoxView CornerRadius="60" HeightRequest="120" WidthRequest="120" BackgroundColor="Blue" HorizontalOptions="Center" VerticalOptions="Center" Opacity="0">
        <BoxView.Triggers>
            <DataTrigger TargetType="BoxView" Binding="{Binding IsActive.Value}" Value="True">
                <Setter Property="Opacity" Value="1" />
            </DataTrigger>
        </BoxView.Triggers>
    </BoxView>
</Grid>

www.youtube.com

唐突感は否めません。

TriggerAction を使うと

動画のように Trigger を使って対象の View にアニメーションを設定することができます。

www.youtube.com

これだと唐突感はないのでより自然な切り替えの効果を付ける場合に有効です。

実装方法

TriggerAction<T> のサブクラスを作成し

public class MoveTriggerAction:TriggerAction<VisualElement>
{
    public bool IsActive { get; set; }

    protected override void Invoke(VisualElement sender)
    {
        if (IsActive)
        {
            sender.TranslationX = -sender.Width;
            sender.Opacity = 0;

            sender.TranslateTo(0, 0);
            sender.FadeTo(1);
        }
        else
        {
            sender.TranslateTo(sender.Width, 0);
            sender.FadeTo(0);
        }
    }
}

Invoke メソッドの override にアクションの実装を記述します。 プロパティを設定すると使う時にパラメータを渡せるので、ここではOnとOffを区別するためのIsActiveというプロパティを作りました。 TriggerAction<T>のTはより具体的なクラスにしても良いですが、アニメーションの設定だけであれば汎用的に使えるVisualElementにしておくのが良いと思います。

でこれを、XAML で指定します。

<ContentPage ...
    xmlns:local="clr-namespace:Sample.Triggers"
    ...>
<Grid Grid.Row="0">
    <BoxView CornerRadius="60" HeightRequest="120" WidthRequest="120" BackgroundColor="Blue" HorizontalOptions="Center" VerticalOptions="Center" Opacity="0">
        <BoxView.Triggers>
            <DataTrigger TargetType="BoxView" Binding="{Binding IsActive.Value}" Value="True">
                <DataTrigger.EnterActions>
                    <local:MoveTriggerAction IsActive="True" />
                </DataTrigger.EnterActions>
                <DataTrigger.ExitActions>
                    <local:MoveTriggerAction IsActive="False" />
                </DataTrigger.ExitActions>
            </DataTrigger>
        </BoxView.Triggers>
    </BoxView>
</Grid>
...

EnterActions のところに Trigger の条件を満たした時のアクションを、ExitActionsのところに条件を満たさなくなった時のアクションを指定します。ここには複数のアクションを指定できるようです。

まとめ

TriggerAction を使うことで、Triggerきっかけでアニメーションを設定できるようになりました。 今までTriggerだけだとフワッと表示させたり消したりすることができませんでしたが、これで結構簡単にできるようになりました。地味に便利な機能かと思います。 記事で紹介した DataTrigger 以外のどのTriggerでも使えますのでぜひ使ってみてください。

今回のサンプル

github.com

「復習帳」 有料版の登録方法について

ポエム 復習帳 Xamarin.Forms

version 1.2.0 から 有料版 をご用意しましたので、その利用方法をご紹介します。

復習帳とは

「復習帳」は学習内容を忘れないように効率の良い復習をサポートするアプリです。

復習帳 のその他の記事はこちらです。

kamusoft.hatenablog.jp

復習帳のマニュアルはこちらです。

復習帳 目次 | 復習帳 ガイド

有料版について

定期購読型で以下の2種類をご用意しています。

  • 自動更新月額（1ヶ月）
    • ¥300 / 1ヶ月
  • 自動更新年額（12ヶ月）
    • ¥3,000 / 12ヶ月

有料版を購入すると以下の特典があります。

  • 広告削除
  • 教材カテゴリ作成数無制限
  • マイスケジュール作成数無制限
  • スケジュール登録日数 無制限
  • 一部の教材ソート順の解放

初めて購入する場合は1ヶ月間は無料でお試しできます。無料期間中に解約すれば料金はかかりません。解約しなければ自動で更新され次回から料金の請求が発生します。有料版の期限は自動的に更新されます。

また以下の利用規約とプライバシーポリシーもご確認ください。

利用規約

プライバシーポリシー

購入方法

f:id:kamusoft:20190804195947j:plain

「その他」→「有料版の購入」をタップして「有料版の購入」ページに移動します。 「利用規約」を一度確認して戻り、同意できましたら「自動更新月額（1ヶ月）」「自動更新年額（12ヶ月）」のどちらかご希望の商品をタップします。

その後、ログインしてない場合はログイン画面に自動的に進みます。

ログインについて

ログインすると、購入した有料コンテンツの利用が可能になり、所有の各端末間(iPhone-Android問わず)で購入情報を共有できます。登録もここから行えます。SNSアカウントがあればメールアドレスは不要です。メールアドレスでの登録も可能です。

購入情報は共有できますが、データまでは共有されませんので、その場合はバックアップを使いデータを移動してください。

ユーザー登録してない場合

そのままログイン画面に進みますので、ここで新規登録が可能です。登録済みの方はそのままログインしてください。また、ログイン済みの方はこの画面はスキップされます。

f:id:kamusoft:20190804200015j:plain

iPhoneの場合は、確認が画面が出ますので「続ける」をタップします。

SNSアカウントで登録する場合

以下のアカウントをお持ちの場合は連携して登録することができます。

利用したいアカウントのボタンを押して進むと、各SNSの認証や権限確認画面が出ますので連携を許可してください。 これでSNSアカウントでの登録は完了です。

メールアドレスで登録する場合

SNSアカウントを使わず、メールアドレスで登録する場合は画面をスクロールして「今すぐ登録」ボタンをタップして新規登録ページに進んでください。

f:id:kamusoft:20190804200035j:plain

メールアドレスを入力し、「確認コードの送信」ボタンをタップすると、入力したメールアドレス宛に確認コードが届きます。 そのコードを確認コード欄に入力して、「コードの確認」ボタンをタップします。 次に登録するパスワードを入力してから「作成」ボタンをタップします。 これで完了です。

購入の確定

f:id:kamusoft:20190804200312j:plain

ログイン済みまたはログイン処理終了後、各ストアの確認画面がでてきますので図のように進めると購入が完了します。

購入の確認・解約

「有料版の購入」の「購読の確認・管理画面を開く」で iPhoneの場合はApple IDの登録確認画面、Androidの場合はPlayストアの定期購読確認画面に移動できますのでそこから確認と解約ができます。

上記確認画面は

からでも同じ確認画面に移動できます。

購入状態の復元

機種変更などで端末が変更した際は、「有料版の購入」ページの下の「購入状態を復元する」ボタンをタップすることで購入状態を復元することができます。

異なるプラットフォーム（iPhoneからAndroidやその逆）の場合は復元はできませんので、その場合はログインによって状態を引き継いでください。

「復習帳」 version 1.2.0 新機能のご紹介

復習帳 Xamarin.Forms ポエム

1年以上更新してなくて大変申し訳ありませんでしが、この度 version 1.2.0 をリリースしましたので、その変更点をご紹介します。

復習帳とは

「復習帳」は学習内容を忘れないように効率の良い復習をサポートするアプリです。

復習帳 のその他の記事はこちらです。

kamusoft.hatenablog.jp

カテゴリ機能 / 教材の並べ替え

f:id:kamusoft:20190721210710j:plain

教材にカテゴリが設定できるようになり、教材選択画面でカテゴリ別の表示ができるようになりました。

また、教材のソート順を以下の中から変更できるようにしました。 従来の標準は「学習更新日（新→旧）」です。 ただし * の項目は有料版のみとなります。

  • 学習更新日（新→旧）
  • 教材名（昇順）
  • 学習更新日（旧→新） *
  • 教材名（降順）*
  • 登録日（新→旧）*
  • 登録日（旧→新）*

教材の検索

f:id:kamusoft:20190721210727j:plain

登録してある教材をキーワード検索できるようになりました。

バーコード読み取り / キーワード検索

f:id:kamusoft:20190721210748j:plain

バーコードから教材を検索して登録できるようになりました。

画像検索は、以前は単純に検索サイトの画像検索に投げて、そこから利用者自身が探してダウンロードだけアプリで行う間借り方式だったんですが、どの検索サイトも画像の直接ダウンロードのリンクが無くなって機能しなくなってしまったので Google Books の API からアプリ側で取得するように変更しました。 従来の画像検索は廃止しましたので、Webから検索したい場合は各自でブラウザで画像保存し、その画像をアプリで指定するという方法でお願いします。

Android版 タブ位置を下に

従来の上タブから下タブに変更しました。これによって見た目はiOSと同じような感じになり、かつ片手で操作しやすくなったかと思います。

有料版の追加

定期購読型で有料版を購入できるようになりました。

  • ¥300 / 月
  • ¥3,000 / 年

有料版を購入すると以下の特典があります。

  • 広告削除
  • 教材カテゴリ作成数無制限
  • マイスケジュール作成数無制限
  • 一部の教材ソート順の解放

購入は「その他」から「有料版の購入」から行えます。最初にログインの必要がありますが、新規登録も購入と同時に行うことができます。登録は各種SNSアカウント・メールアドレスがご利用いただけます。

購入方法の詳細はまた別記事にて案内する予定です。

初めて購入する場合は1ヶ月間は無料でお試しできます。無料期間中に解約すれば料金はかかりません。解約しなければ自動で更新され次回から料金の請求が発生しますのでご注意ください。

おわりに

開発が、1年以上止まってしまいましたが、その間もご利用していただいている方に本当に感謝いたします。ようやく更新をリリースできました。有料版に関しては広告削除以外は大した機能はありませんが、ご購入いただけると大変開発の励みになりますので、開発支援という意味でもよろしくお願いいたします。