[关闭]
@Tyhj 2016-09-20T12:53:36.000000Z 字数 12424 阅读 1758

关于CoordinatorLayout的动画使用

Android

第一种： FloatingActionButton跟随Snackbar移动

xml代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout
  3.     android:id="@+id/main_content"
  4.     xmlns:android="http://schemas.android.com/apk/res/android"
  5.     xmlns:app="http://schemas.android.com/apk/res-auto"
  6.     android:layout_width="match_parent"
  7.     android:layout_height="match_parent">
  9.     <android.support.v7.widget.RecyclerView
  10.         android:id="@+id/rvToDoList"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="match_parent">
  13.     </android.support.v7.widget.RecyclerView>
  15.     <android.support.design.widget.FloatingActionButton
  16.         android:id="@+id/fab_1"
  17.         android:layout_width="wrap_content"
  18.         android:layout_height="wrap_content"
  19.         android:layout_gravity="bottom|right"
  20.         android:layout_margin="16dp"
  21.         android:src="@mipmap/ic_launcher"
  22.         app:layout_anchor="@id/rvToDoList"
  23.         app:layout_anchorGravity="bottom|right|end"/>
  24. </android.support.design.widget.CoordinatorLayout>

java代码

  1.  final FloatingActionButton fab_1= (FloatingActionButton) findViewById(R.id.fab_1);
  2.         fab_1.setOnClickListener(new View.OnClickListener() {
  3.             @Override
  4.             public void onClick(View v) {
  5.                 Snackbar.make(fab_1,"哈哈",Snackbar.LENGTH_SHORT).show();
  6.             }
  7.         });

第二种：Toolbar跟随RecyclerView消失

xml代码

  1. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     android:id="@+id/main_content"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  7.     <android.support.design.widget.AppBarLayout
  8.         android:id="@+id/app_bar"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="wrap_content"
  11.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  13.         <android.support.v7.widget.Toolbar
  14.             android:id="@+id/toolbar"
  15.             android:layout_width="match_parent"
  16.             android:layout_height="?attr/actionBarSize"
  17.             android:layout_marginTop="25dip"
  18.             app:layout_scrollFlags="scroll|enterAlways" />
  21.     </android.support.design.widget.AppBarLayout>
  23.     <android.support.v7.widget.RecyclerView
  24.         android:id="@+id/rvToDoList"
  25.         android:layout_width="match_parent"
  26.         android:layout_height="match_parent"
  27.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  29.     <android.support.design.widget.FloatingActionButton
  30.         android:layout_width="wrap_content"
  31.         android:layout_height="wrap_content"
  32.         android:layout_gravity="bottom|end"
  33.         android:layout_margin="@dimen/fab_margin"
  34.         android:src="@android:drawable/ic_dialog_email"
  35.         app:layout_scrollFlags="scroll|enterAlways" />
  36. </android.support.design.widget.CoordinatorLayout>

java代码

  1.     Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar);
  2.         toolbar.setTitle("哈哈");

第三种：制造toolbar的折叠效果

xml代码

  1. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:app="http://schemas.android.com/apk/res-auto"
  3.     android:id="@+id/main_content"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:fitsSystemWindows="true">
  8.     <android.support.design.widget.AppBarLayout
  9.         android:id="@+id/app_bar"
  10.         android:layout_width="match_parent"
  11.         android:layout_height="@dimen/app_bar_height"
  12.         android:fitsSystemWindows="true"
  13.         android:theme="@style/AppTheme.AppBarOverlay">
  15.         <android.support.design.widget.CollapsingToolbarLayout
  16.             android:id="@+id/collapsing_toolbar"
  17.             android:layout_width="match_parent"
  18.             android:layout_height="match_parent"
  19.             android:fitsSystemWindows="true"
  20.             app:contentScrim="?attr/colorPrimary"
  21.             app:expandedTitleMarginEnd="64dp"
  22.             app:expandedTitleMarginStart="48dp"
  23.             app:layout_scrollFlags="scroll|exitUntilCollapsed">
  25.             <android.support.v7.widget.Toolbar
  26.                 android:id="@+id/toolbar"
  27.                 android:layout_width="match_parent"
  28.                 android:layout_height="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
  29.         </android.support.design.widget.CollapsingToolbarLayout>
  31.     </android.support.design.widget.AppBarLayout>
  33.     <android.support.v7.widget.RecyclerView
  34.         android:id="@+id/rvToDoList"
  35.         android:layout_width="match_parent"
  36.         android:layout_height="match_parent"
  37.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  39.     <android.support.design.widget.FloatingActionButton
  40.         android:layout_width="wrap_content"
  41.         android:layout_height="wrap_content"
  42.         android:layout_gravity="bottom|end"
  43.         android:layout_margin="@dimen/fab_margin"
  44.         android:src="@android:drawable/ic_dialog_email"
  45.         app:layout_scrollFlags="scroll|enterAlways" />
  46. </android.support.design.widget.CoordinatorLayout>

java代码

  1.    CollapsingToolbarLayout collapsingToolbar =
  2.                 (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
  3.         collapsingToolbar.setTitle("Title");

第四种：制造视差效果

xml代码

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:background="@android:color/background_light"
  7.     android:fitsSystemWindows="true">
  9.     <android.support.design.widget.AppBarLayout
  10.         android:id="@+id/main.appbar"
  11.         android:layout_width="match_parent"
  12.         android:layout_height="300dp"
  13.         android:fitsSystemWindows="true"
  14.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  16.         <android.support.design.widget.CollapsingToolbarLayout
  17.             android:id="@+id/maincollapsing"
  18.             android:layout_width="match_parent"
  19.             android:layout_height="match_parent"
  20.             android:fitsSystemWindows="true"
  21.             app:contentScrim="?attr/colorPrimary"
  22.             app:expandedTitleMarginEnd="64dp"
  23.             app:expandedTitleMarginStart="48dp"
  24.             app:layout_scrollFlags="scroll|exitUntilCollapsed">
  26.             <ImageView
  27.                 android:id="@+id/main.backdrop"
  28.                 android:layout_width="match_parent"
  29.                 android:layout_height="match_parent"
  30.                 android:fitsSystemWindows="true"
  31.                 android:scaleType="centerCrop"
  32.                 android:src="@drawable/userbackgroud2"
  33.                 app:layout_collapseMode="parallax" />
  35.             <android.support.v7.widget.Toolbar
  36.                 android:id="@+id/main.toolbar"
  37.                 android:layout_width="match_parent"
  38.                 android:layout_height="?attr/actionBarSize"
  39.                 app:layout_collapseMode="pin"
  40.                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  41.         </android.support.design.widget.CollapsingToolbarLayout>
  42.     </android.support.design.widget.AppBarLayout>
  44.     <android.support.v7.widget.RecyclerView
  45.         android:id="@+id/rvToDoList"
  46.         android:layout_width="match_parent"
  47.         android:layout_height="match_parent"
  48.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  50.     <android.support.design.widget.FloatingActionButton
  51.         android:layout_width="wrap_content"
  52.         android:layout_height="wrap_content"
  53.         android:layout_margin="@dimen/activity_horizontal_margin"
  54.         android:src="@android:drawable/ic_dialog_email"
  55.         app:layout_anchor="@id/main.appbar"
  56.         app:layout_anchorGravity="bottom|right|end" />
  57. </android.support.design.widget.CoordinatorLayout>

java代码

  1.      CollapsingToolbarLayout collapsingToolbar =
  2.                 (CollapsingToolbarLayout) findViewById(R.id.maincollapsing);
  3.         collapsingToolbar.setTitle("Title");

第五种：FloatingActionBar随RecyclerView的滑出和滑入

xml代码

  1. <?xml version="1.0" encoding="utf-8"?>
  3. <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.     xmlns:app="http://schemas.android.com/apk/res-auto"
  5.     android:layout_width="match_parent"
  6.     android:layout_height="match_parent"
  7.     android:background="@android:color/background_light"
  8.     android:fitsSystemWindows="true">
  10.     <android.support.design.widget.AppBarLayout
  11.         android:id="@+id/main.appbar"
  12.         android:layout_width="match_parent"
  13.         android:layout_height="300dp"
  14.         android:fitsSystemWindows="true"
  15.         android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  17.         <android.support.design.widget.CollapsingToolbarLayout
  18.             android:id="@+id/maincollapsing"
  19.             android:layout_width="match_parent"
  20.             android:layout_height="match_parent"
  21.             android:fitsSystemWindows="true"
  22.             app:contentScrim="?attr/colorPrimary"
  23.             app:expandedTitleMarginEnd="64dp"
  24.             app:expandedTitleMarginStart="48dp"
  25.             app:layout_scrollFlags="scroll|exitUntilCollapsed">
  27.             <ImageView
  28.                 android:id="@+id/main.backdrop"
  29.                 android:layout_width="match_parent"
  30.                 android:layout_height="match_parent"
  31.                 android:fitsSystemWindows="true"
  32.                 android:scaleType="centerCrop"
  33.                 android:src="@drawable/userbackgroud2"
  34.                 app:layout_collapseMode="parallax" />
  36.             <android.support.v7.widget.Toolbar
  37.                 android:id="@+id/main.toolbar"
  38.                 android:layout_width="match_parent"
  39.                 android:layout_height="?attr/actionBarSize"
  40.                 app:layout_collapseMode="pin"
  41.                 app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  42.         </android.support.design.widget.CollapsingToolbarLayout>
  43.     </android.support.design.widget.AppBarLayout>
  45.     <android.support.v7.widget.RecyclerView
  46.         android:id="@+id/rvToDoList"
  47.         android:layout_width="match_parent"
  48.         android:layout_height="match_parent"
  49.         app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  51.     <android.support.design.widget.FloatingActionButton
  52.         android:layout_width="wrap_content"
  53.         android:layout_height="wrap_content"
  54.         android:layout_gravity="end|bottom"
  55.         android:layout_margin="@dimen/activity_horizontal_margin"
  56.         android:src="@android:drawable/ic_dialog_email"
  57.         app:layout_behavior="com.example.tyhj.pull.ScrollAwareFABBehavior" />
  58. </android.support.design.widget.CoordinatorLayout>

java代码 com.example.tyhj.pull.ScrollAwareFABBehavior.java

  1. package com.example.tyhj.pull;
  3. import android.content.Context;
  4. import android.support.design.widget.CoordinatorLayout;
  5. import android.support.design.widget.FloatingActionButton;
  6. import android.support.v4.view.ViewCompat;
  7. import android.util.AttributeSet;
  8. import android.view.View;
  10. public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
  11.     public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
  12.         super();
  13.     }
  16.     @Override
  17.     public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
  18.                                        FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
  19.         return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
  20.                 super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
  21.                         nestedScrollAxes);
  22.     }
  24.     @Override
  25.     public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
  26.                                View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
  27.         super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
  28.                 dyUnconsumed);
  30.         if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
  31.             child.hide();
  32.         } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
  33.             child.show();
  34.         }
  35.     }
  36. }

java代码 Activity

  1.    CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.maincollapsing);
  2.         collapsingToolbar.setTitle("Title");

其中com.example.tyhj.pull.ScrollAwareFABBehavior.java是一个自定义的类，此处只是一个默认的消失和出现的动画，通过这个类应该可以自己设计出自己想要的各种控件的效果，用法是在xml的FloatingActionBar（其他应该也是可以）中添加如下代码：

  1. app:layout_behavior="com.example.tyhj.pull.ScrollAwareFABBehavior"

如果这个自定义类用下面的代码，自定义了两个动画效果，会实现滑入和滑出的效果，好看一些：

  1. package com.example.tyhj.pull;
  3. import android.content.Context;
  4. import android.support.design.widget.CoordinatorLayout;
  5. import android.support.design.widget.FloatingActionButton;
  6. import android.support.v4.view.ViewCompat;
  7. import android.support.v4.view.ViewPropertyAnimatorListener;
  8. import android.support.v4.view.animation.FastOutSlowInInterpolator;
  9. import android.util.AttributeSet;
  10. import android.view.View;
  12. public class ScrollAwareFABBehavior2 extends FloatingActionButton.Behavior {
  13.     private static final android.view.animation.Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
  14.     private boolean mIsAnimatingOut = false;
  16.     public ScrollAwareFABBehavior2(Context context, AttributeSet attrs) {
  17.         super();
  18.     }
  21.     @Override
  22.     public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout,
  23.                                        FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {
  24.         return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL ||
  25.                 super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target,
  26.                         nestedScrollAxes);
  27.     }
  29.     @Override
  30.     public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
  31.                                View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
  32.         super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
  33.                 dyUnconsumed);
  35.         if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
  36.             animateOut(child);
  37.         } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
  38.             animateIn(child);
  39.         }
  40.     }
  42.     private void animateOut(final FloatingActionButton button) {
  43.         ViewCompat.animate(button).translationY(500)
  44.                 .setInterpolator(INTERPOLATOR).withLayer()
  45.                 .setListener(new ViewPropertyAnimatorListener() {
  46.                     @Override
  47.                     public void onAnimationStart(View view) {
  48.                         ScrollAwareFABBehavior2.this.mIsAnimatingOut = true;
  49.                     }
  51.                     @Override
  52.                     public void onAnimationEnd(View view) {
  53.                         ScrollAwareFABBehavior2.this.mIsAnimatingOut = false;
  54.                         view.setVisibility(View.GONE);
  55.                     }
  57.                     @Override
  58.                     public void onAnimationCancel(View view) {
  59.                         ScrollAwareFABBehavior2.this.mIsAnimatingOut = false;
  61.                     }
  62.                 }).start();
  63.     }
  65.     private void animateIn(FloatingActionButton button) {
  66.         button.setVisibility(View.VISIBLE);
  67.         ViewCompat.animate(button).translationY(0)
  68.                 .setInterpolator(INTERPOLATOR).withLayer().setListener(null)
  69.                 .start();
  70.     }
  71. }
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注