Material Design 初步

Material Design 初步

一、Activity設置主題

android:theme="@style/AppTheme.main"

<style name="AppTheme.main" parent="android:Theme.Material.Light.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

二、主題中設置過渡動畫

<style name="AppTheme.Details" parent="android:Theme.Material.Light.NoActionBar">
	<!-- 指定進入和退出transitions -->  
    <item name="android:windowEnterTransition">@transition/explode</item>  
    <item name="android:windowExitTransition">@transition/explode</item>  

    <item name="android:windowEnterTransition">@transition/details_window_enter_transition</item>
    <item name="android:windowReturnTransition">@transition/details_window_return_transition</item>
</style>

三、編寫動畫文件

<?xml version="1.0" encoding="utf-8"?>
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"
           android:transitionOrdering="together"
           android:duration="500">
    <fade>
        <targets>
            <target android:excludeId="@android:id/statusBarBackground" />
            <target android:excludeId="@android:id/navigationBarBackground" />
        </targets>
    </fade>
    <slide android:slideEdge="top">
        <targets>
            <target android:targetId="@id/details_header_container" />
        </targets>
    </slide>
    <slide android:slideEdge="bottom">
        <targets>
            <target android:targetId="@id/details_text_container" />
        </targets>
    </slide>
</transitionSet>

四、共享元素設置TransitionName

• 第一個Activity

  ImageView mAlbumImage = (ImageView) itemView.findViewById(R.id.main_card_album_image);

  mAlbumImage.setTransitionName("Pablo Honey");

• 第二個Activity

  ImageView mAlbumImage = (ImageView) rootView.findViewById(R.id.details_album_image);
    mAlbumImage.setTransitionName("Pablo Honey");

  也可以使用標籤設置

  android:transitionName="shareName"

五、啓動Activity

一、一個共享元素

startActivity(intent,
	ActivityOptions.makeSceneTransitionAnimation(MainActivity.this,mAlbumImage, 
		mAlbumImage.getTransitionName()).toBundle());

二、多個共享元素

ActivityOptions.makeSceneTransitionAnimation(this,  
    Pair.create(view1, "agreedName1"), Pair.create(view2, "agreedName2"));

六、 若要暫時延遲Transition的使用，等待共享元素加載和

第一個界面

在Activity 的onCreate()中調用postponeEnterTransition(),暫時阻止啓動共享元素 Transition。


第二個界面
在共享元素準備好後調用	startPostponedEnterTransition來恢復過渡效果。 

mAlbumImage.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
		@Override
		public boolean onPreDraw() {
			mAlbumImage.getViewTreeObserver().removeOnPreDrawListener(this);
			getActivity().startPostponedEnterTransition();
			return true;
		}
	});

以延遲共享元素返回 Transition

@Override
public void onActivityReenter(int requestCode, Intent data) {
    super.onActivityReenter(requestCode, data);
    postponeEnterTransition();
    mRecyclerView.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
            mRecyclerView.getViewTreeObserver().removeOnPreDrawListener(this);
            // TODO: figure out why it is necessary to request layout here in order to get a smooth transition.
            mRecyclerView.requestLayout();
            startPostponedEnterTransition();
            return true;
        }
    });
}