Materail Design折疊效果和動畫使用

Material Design中提供了比較酷炫的一些頁面折疊聯(lián)動效果和Activity出場動畫，先看一下效果圖，這個效果現(xiàn)在很多大廠App中都有看到，使用Material Design中的控件和一些動畫很容易實現(xiàn)


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="清明時節(jié)雨紛飛"
                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>
  1. 詳情頁面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不會滑動停止在中間的狀態(tài)
                 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時可以配合這個屬性使用,調節(jié)自己想要的視差效果)
                     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>
  1. 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());
          }
      });    
  }
}
  1. 詳情頁面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);//設置還沒收縮時狀態(tài)下字體顏色
       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);
               }
           }
       });
   }
}
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,244評論 4贊 61
  • 天亮后，在七點四十 眼皮就不曾閉合 冬天的陽光輕而易舉得溫和 十一點三十才開始有些神色 窗臺上的水仙花 青蔥可愛，...
    Ailing_Cccc閱讀 190評論 0贊 1
  • 近來熱播的虎媽貓爸相信很多人都看了，看到虎媽的瘋狂不覺膽怯現(xiàn)實的壓力，大城市帶來了機遇卻也帶來了更多的壓力。相...
    赫之米閱讀 241評論 0贊 2

友情鏈接更多精彩內容