Android

[Androidアニメーション]Shared Elements遷移

投稿日:2017年10月30日 更新日:

はじめに

最近、雨が多いですね。そんな時は家にこもって、プログラミングをするのが良いですよね。

今回は、Acitivity間の遷移をちょっとしたコーディングでかっこよくできる、Shared Elements遷移について紹介したいと思います。

※Android 5.0以降を前提としています。

Shared Elements遷移とは

Activity間の遷移アニメーションの一つです。2つのActivity間で共有(Share)されているビュー(Element)を、各Activity間でアニメーションさせて、遷移させることができます。Android Developerサイトにとても詳しく書かれていますので、こちらもご参照ください。

文章だけでは、よくわからないと思いますので、Master ActivityからDetail Activityに画像をアニメーションさせて、遷移するというシンプルな例で説明したいと思います。

layout xml

Master ActivityとDetail Activity間で共有したいビューに android:transitionName 属性を追加し、値としては同じ文字列を指定します。

Activity遷移

上記の設定をしたら、あとはMaster ActivityからDetail Activityに遷移させる実装します。特にDetailActivity側には処理を実装する必要はありません。

Master Activityの一番上の画像をタップしたら、Detail Activityに遷移させる単純な実装です。

その他

アニメーションの設定については、下記のとおりstyles.xmlで指定できます。自分でアニメーションのxmlを記述すれば、カスタム遷移も可能です。今回は、SDKで提供されているものを指定しています。

さいごに

今回は、Shared Elements遷移の簡単なサンプルを紹介しました。

実際の開発では、アニメーションのカスタマイズや、画像をサーバから取得する場合の工夫など、色々と実装しなければならないこともあると思います。まずは、このサンプルでShared Elements遷移のイメージだけでも掴んでいただければ幸いです。

blog-page_footer_336




blog-page_footer_336




-Android
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Kotlin MPAndroidChartライブラリを使い移動平均線を描画してみる。

1 はじめに2 MPAndroidChartライブラリについて2.1 ライブラリの導入2.2 描画の準備3 折れ線グラフを描画する3.1 LineChartの設定3.2 LineChart用のデータ作 ...

【Kotlin】RecyclerViewAdapterを使ってリスト表示

1 はじめに2 GradleファイルにRecyclerViewの設定を追加する3 レイアウトファイルの作成4 Adapterクラスの追加5 Activityファイルへの追加6 さいごに7 おすすめ書籍 ...

Android Studioでエラーログを詳細表示する

1 はじめに2 初期設定でのビルドエラーメッセージ3 詳細なビルドエラーメッセージを出力4 おまけ5 さいごに6 おすすめ書籍 はじめに こんにちは。Android開発を久しぶりにやっているのですが、 ...

【Androidマテリアル】Ripple Effect

1 はじめに2 Ripple Effectとは3 設定方法4 カスタマイズ5 さいごに はじめに こんにちは、ソニーから新Aiboが発表されましたね。個人的には欲しいと思っているのですが、最近Goog ...

Kotlin MPAndroidChartライブラリを使いボリンジャーバンドを描画してみる。

1 はじめに2 ボリンジャーバンドとは2.1 ライブラリの導入2.2 描画の準備3 ボリンジャーバンドを描画する3.1 CombinedChartの設定3.2 CombinedChart用のデータ作成 ...

フォロー

follow us in feedly

blog-page_side_responsive

2017年10月
« 9月 11月 »
1234567
891011121314
15161718192021
22232425262728
293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。