engineers_blogこんにちは。スマホアプリエンジニアの都築です。Appの「マネーフォワード」アプリの資産タブについて書かせていただきたいと思います。Appのフルリニューアルを行ったのですが、リニューアル時の資産タブはこんな感じでした。面白い動きで評判も良かったのですが、なにせ動作が遅い...。動作が遅かったかというと、以前の資産タブでは標準のUIパーツを使用せず、自前のUIパーツを利用していた為、例えばUINavigationControllerのPush/Popといったような画面遷移も自前で実装する必要がありました。実装の都合で、画面遷移後のオブジェクトもあらかじめ生成しておく必要がありました...。資産タブの初期画面では、その画面に不要なオブジェクトもHidden状態で生成されているというリソースの無駄使いをしていました。Hidden状態のオブジェクトをDCIntrospectというツールを使って表示してみると、オブジェクトが重なりあってヒドいことに...。リソースの無駄使いの観点からだけでなく、実装的にも今後新たな機能を追加していく際に、機能拡張が難しいということで思い切って資産タブをリニューアルすることになりました。デザイナーの方に作成していただきました。作成していただいた動きはこんな感じ。Vimeo.標準のUIパーツには無い動きなので一見難しそう(?)に見えますが、標準のUIに少し手を加えるだけで実現できてしまいます。動作要素は大きく分けて2つ。カードの詳細を表示した状態から、カードを元のリストに戻す動き1.の動きをさらに分解すると、タップされたカードがUITableViewを飛び出して画面上部に移動する動きと、画面下から別Viewがモーダルとして表示される動きに分解できます。モーダルの表示は一般的な実装なので割愛して、今回はタップされたカードがUITableViewを飛び出して画面上部に移動する動きにフォーカスします。今回の資産タブは、前回の教訓を活かして標準のUITableViewをベースにしたので、各金融機関のカードはUITableViewCellとして実装しています。UITableViewCellをタップした際のdidSelectRowAtIndexPath:メソッド内のコードの簡単な流れは、以下になります。UIWindowからremoveFromSuperviewなぜ、UIWindowにaddSubviewしているのか?と思った方もいるかと思いますが、下から出てくるモーダルがカードに重なった場合、カードが隠れてしまう為、一度UIWindowにaddSubviewしてカードを最前面に表示した状態で移動しています。Modal遷移をした際、UIWindowが常に最前面に表示されてしまう為、アニメーション完了後は、UIWindowから削除しています。...}上記の実装で、アニメーション対象のUIViewを画面上部までアニメーションさせたので、今度はモーダル側で処理を行います。以下のモーダル側の実装では、表示完了時に呼び出されるviewDidAppear:メソッド内で、UIWindowからカードViewを削除し、Modalとして表示したUIViewにaddSubviewする処理を行っています。...}上記の実装により、UITableView上に並んだカードViewがUITableViewから飛び出すというような、デザイナーさんにいただいたイメージに近いものができました。カードを閉じる際の処理は、もうお分かりかもしれませんが、上記で行った処理を逆の順番で行うことになります。動きを追加したい場合ちなみに、上記の実装例ではコードがややこしくなるので簡略化しましたが、実際のAppではオリジナルのデザインには無いちょっとしたカードの動きを追加しています。実際のAppを触っていただくとお分かりになると思いますが、カードをタップした際にスプリングアニメーションを追加しています。スプリングアニメーションの追加は、下記のENABLE_SPRING_ANIMATION定義時に呼び出されるUIViewのanimateWithDuration:delay:usingSpringWithDamping:initialSpringVelocity:options:animations:completion:メソッドを呼び出すことで簡単に追加できます。Appの新しい資産タブのアニメーションについて書いてみました。標準のUIパーツを使いつつも、少し手を加えることで面白みのある動きを追加することができます。