Materail Design折叠效果和动画使用

Material Design中提供了比较酷炫的一些页面折叠联动效果和Activity出场动画，先看一下效果图，这个效果现在很多大厂App中都有看到，使用Material Design中的控件和一些动画很容易实现

ezgif.com-video-to-gif.gif

Material Design控件

• CardView
• CoordinatorLayout
• AppBarLayout
• CollapsingToolbarLayout
• NestedScrollView

Material Design动画

• Fade 淡入动画
• Slide 滑动动画
• Explode 分解动画
• 共享元素动画
  首页布局文件和详情页布局文件代码如下，其中几种滑动属性具体效果可以看注解和自己运行结果
  1.首页xml

2. 详情页面xml

3. MainActivity代码如下

import android.app.ActivityOptions;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.ActivityOptionsCompat;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.CardView;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity {
  private CardView mCardView;
  private ImageView mImageView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);

      mCardView = findViewById(R.id.card_view);
      mImageView = findViewById(R.id.img_bg);
        //淡入，滑动、分解入场动画
//        mCardView.setOnClickListener(new View.OnClickListener() {
//            @Override
//            public void onClick(View v) {
//                //
//                Intent intent = new Intent(MainActivity.this, MaterialDesignActivity.class);
//                startActivity(intent, ActivityOptions.makeSceneTransitionAnimation(MainActivity.this).toBundle());
//
//
//            }
//        });

      mImageView.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
               //共享元素动画
              ActivityOptionsCompat optionsCompat = ActivityOptionsCompat.makeSceneTransitionAnimation(
                      MainActivity.this,
                      mImageView,
                      "basic"
              );
              Intent intent = new Intent(MainActivity.this, MaterialDesignActivity.class);
              startActivity(intent, optionsCompat.toBundle());
          }
      });    
  }
}

4. 详情页面MaterialDesignActivity代码如下

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.design.widget.CollapsingToolbarLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Window;

public class MaterialDesignActivity extends AppCompatActivity {

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       //允许使用transitions
       getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);
       //淡入动画
//        getWindow().setEnterTransition(new Fade());
       //滑动动画
//        getWindow().setEnterTransition(new Slide());
       //分解动画
//        getWindow().setEnterTransition(new Explode());

       setContentView(R.layout.activity_material_design);

       final Toolbar toolbar = findViewById(R.id.tb_amd_toolbar);
       if (toolbar != null) {
           setSupportActionBar(toolbar);
       }

       //使用CollapsingToolbarLayout必须把title设置到CollapsingToolbarLayout上，设置到Toolbar上则不会显示
       CollapsingToolbarLayout collapsingToolbarLayout = findViewById(R.id.collapsingToolbarLayout);
       collapsingToolbarLayout.setTitle("CollapsingToolbarLayout");
       //通过CollapsingToolbarLayout修改字体颜色
       collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);//设置还没收缩时状态下字体颜色
       collapsingToolbarLayout.setCollapsedTitleTextColor(Color.BLACK);//设置收缩后Toolbar上字体的颜色

       AppBarLayout appBarLayout = findViewById(R.id.appBar);

       appBarLayout.addOnOffsetChangedListener(new AppBarStateChangeEvent() {
           @Override
           public void onStateChanged(AppBarLayout appBarLayout, AppBarStateChangeEvent.State state, int verticalOffset) {
               if (toolbar == null) return;
               if (state == AppBarStateChangeEvent.State.COLLAPSED) {
                   toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
               } else {
                   toolbar.setBackgroundColor(Color.TRANSPARENT);
               }
           }
       });
   }
}