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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        app:cardCornerRadius="10dp"
        app:cardElevation="10dp"
        android:layout_margin="10dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_margin="10dp"
                android:id="@+id/img_bg"
                android:layout_width="120dp"
                android:layout_height="match_parent"
                android:src="@mipmap/bg" />

            <TextView
                android:id="@+id/tv_title"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/img_bg"
                android:text="清明时节雨纷飞"
                android:textSize="20sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/tv_title"
                android:layout_toRightOf="@id/img_bg"
                android:text="万恶的学习曾经让我感觉到。学的东西越多，自己的知识越少，从而产生了更大的恐慌" />
        </RelativeLayout>
    </android.support.v7.widget.CardView>

</LinearLayout>

详情页面xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/dl_at_draw_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBar"
            android:layout_width="match_parent"
            android:layout_height="450dp"
            android:fitsSystemWindows="true">

            <!-- AppBarLayout的直接子控件可以设置的属性:layout_scrollFlags(滚动模式) -->
            <!-- 1.scroll|exitUntilCollapsed:如果AppBarLayout的直接子控件设置该属性,该子控件可以滚动,向上滚动NestedScrollView出父布局(一般为CoordinatorLayout)时,会折叠到顶端,向下滚动时NestedScrollView必须滚动到最上面的时候才能拉出该布局
                 2.scroll|enterAlways:只要向下滚动该布局就会显示出来,只要向上滑动该布局就会向上收缩
                 3.scroll|enterAlwaysCollapsed:向下滚动NestedScrollView到最底端时该布局才会显示出来
                 4.scroll|snap:表示一个吸附效果，可以确保childView不会滑动停止在中间的状态
                 5.如果不设置该属性,则该布局不能滑动 -->
            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsingToolbarLayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <!-- CollapsingToolbarLayout的直接子布局可以使用的属性:layout_collapseMode(折叠模式) -->
                <!-- 1.pin:在滑动过程中,此自布局会固定在它所在的位置不动,直到CollapsingToolbarLayout全部折叠或者全部展开
                     2.parallax:视差效果,在滑动过程中,不管上滑还是下滑都会有视察效果,不知道什么事视察效果自己看gif图(layout_collapseParallaxMultiplier视差因子 0~1之间取值,当设置了parallax时可以配合这个属性使用,调节自己想要的视差效果)
                     3.不设置:跟随NestedScrollView的滑动一起滑动,NestedScrollView滑动多少距离他就会跟着走多少距离 -->
                <ImageView
                    android:id="@+id/iv_movie_icon"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/bg"
                    android:transitionName="basic"/>

                <android.support.v7.widget.Toolbar
                    android:id="@+id/tb_amd_toolbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    app:layout_collapseMode="parallax"
                    app:subtitleTextColor="#ff4081"
                    app:titleTextColor="#ff4081"/>

            </android.support.design.widget.CollapsingToolbarLayout>

        </android.support.design.widget.AppBarLayout>


        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:text="@string/content"
                    android:id="@+id/tv_content"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_margin="10dp"/>

            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>

        <android.support.design.widget.FloatingActionButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:src="@drawable/ic_launcher_background"
            app:layout_anchor="@id/appBar"
            app:layout_anchorGravity="bottom|end"/>

    </android.support.design.widget.CoordinatorLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorPrimary"
        android:gravity="center"
        android:text="this is menu"
        android:textColor="#fff"
        android:textSize="38sp"/>
</android.support.v4.widget.DrawerLayout>

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());
          }
      });    
  }
}

详情页面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);
               }
           }
       });
   }
}

Materail Design折叠效果和动画使用

Material Design控件

Material Design动画

推荐阅读更多精彩内容