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

关于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">
  8. <android.support.v7.widget.RecyclerView
  9. android:id="@+id/rvToDoList"
  10. android:layout_width="match_parent"
  11. android:layout_height="match_parent">
  12. </android.support.v7.widget.RecyclerView>
  13. <android.support.design.widget.FloatingActionButton
  14. android:id="@+id/fab_1"
  15. android:layout_width="wrap_content"
  16. android:layout_height="wrap_content"
  17. android:layout_gravity="bottom|right"
  18. android:layout_margin="16dp"
  19. android:src="@mipmap/ic_launcher"
  20. app:layout_anchor="@id/rvToDoList"
  21. app:layout_anchorGravity="bottom|right|end"/>
  22. </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">
  6. <android.support.design.widget.AppBarLayout
  7. android:id="@+id/app_bar"
  8. android:layout_width="match_parent"
  9. android:layout_height="wrap_content"
  10. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  11. <android.support.v7.widget.Toolbar
  12. android:id="@+id/toolbar"
  13. android:layout_width="match_parent"
  14. android:layout_height="?attr/actionBarSize"
  15. android:layout_marginTop="25dip"
  16. app:layout_scrollFlags="scroll|enterAlways" />
  17. </android.support.design.widget.AppBarLayout>
  18. <android.support.v7.widget.RecyclerView
  19. android:id="@+id/rvToDoList"
  20. android:layout_width="match_parent"
  21. android:layout_height="match_parent"
  22. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  23. <android.support.design.widget.FloatingActionButton
  24. android:layout_width="wrap_content"
  25. android:layout_height="wrap_content"
  26. android:layout_gravity="bottom|end"
  27. android:layout_margin="@dimen/fab_margin"
  28. android:src="@android:drawable/ic_dialog_email"
  29. app:layout_scrollFlags="scroll|enterAlways" />
  30. </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">
  7. <android.support.design.widget.AppBarLayout
  8. android:id="@+id/app_bar"
  9. android:layout_width="match_parent"
  10. android:layout_height="@dimen/app_bar_height"
  11. android:fitsSystemWindows="true"
  12. android:theme="@style/AppTheme.AppBarOverlay">
  13. <android.support.design.widget.CollapsingToolbarLayout
  14. android:id="@+id/collapsing_toolbar"
  15. android:layout_width="match_parent"
  16. android:layout_height="match_parent"
  17. android:fitsSystemWindows="true"
  18. app:contentScrim="?attr/colorPrimary"
  19. app:expandedTitleMarginEnd="64dp"
  20. app:expandedTitleMarginStart="48dp"
  21. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  22. <android.support.v7.widget.Toolbar
  23. android:id="@+id/toolbar"
  24. android:layout_width="match_parent"
  25. android:layout_height="?attr/actionBarSize"></android.support.v7.widget.Toolbar>
  26. </android.support.design.widget.CollapsingToolbarLayout>
  27. </android.support.design.widget.AppBarLayout>
  28. <android.support.v7.widget.RecyclerView
  29. android:id="@+id/rvToDoList"
  30. android:layout_width="match_parent"
  31. android:layout_height="match_parent"
  32. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  33. <android.support.design.widget.FloatingActionButton
  34. android:layout_width="wrap_content"
  35. android:layout_height="wrap_content"
  36. android:layout_gravity="bottom|end"
  37. android:layout_margin="@dimen/fab_margin"
  38. android:src="@android:drawable/ic_dialog_email"
  39. app:layout_scrollFlags="scroll|enterAlways" />
  40. </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">
  8. <android.support.design.widget.AppBarLayout
  9. android:id="@+id/main.appbar"
  10. android:layout_width="match_parent"
  11. android:layout_height="300dp"
  12. android:fitsSystemWindows="true"
  13. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  14. <android.support.design.widget.CollapsingToolbarLayout
  15. android:id="@+id/maincollapsing"
  16. android:layout_width="match_parent"
  17. android:layout_height="match_parent"
  18. android:fitsSystemWindows="true"
  19. app:contentScrim="?attr/colorPrimary"
  20. app:expandedTitleMarginEnd="64dp"
  21. app:expandedTitleMarginStart="48dp"
  22. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  23. <ImageView
  24. android:id="@+id/main.backdrop"
  25. android:layout_width="match_parent"
  26. android:layout_height="match_parent"
  27. android:fitsSystemWindows="true"
  28. android:scaleType="centerCrop"
  29. android:src="@drawable/userbackgroud2"
  30. app:layout_collapseMode="parallax" />
  31. <android.support.v7.widget.Toolbar
  32. android:id="@+id/main.toolbar"
  33. android:layout_width="match_parent"
  34. android:layout_height="?attr/actionBarSize"
  35. app:layout_collapseMode="pin"
  36. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  37. </android.support.design.widget.CollapsingToolbarLayout>
  38. </android.support.design.widget.AppBarLayout>
  39. <android.support.v7.widget.RecyclerView
  40. android:id="@+id/rvToDoList"
  41. android:layout_width="match_parent"
  42. android:layout_height="match_parent"
  43. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  44. <android.support.design.widget.FloatingActionButton
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:layout_margin="@dimen/activity_horizontal_margin"
  48. android:src="@android:drawable/ic_dialog_email"
  49. app:layout_anchor="@id/main.appbar"
  50. app:layout_anchorGravity="bottom|right|end" />
  51. </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"?>
  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">
  8. <android.support.design.widget.AppBarLayout
  9. android:id="@+id/main.appbar"
  10. android:layout_width="match_parent"
  11. android:layout_height="300dp"
  12. android:fitsSystemWindows="true"
  13. android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
  14. <android.support.design.widget.CollapsingToolbarLayout
  15. android:id="@+id/maincollapsing"
  16. android:layout_width="match_parent"
  17. android:layout_height="match_parent"
  18. android:fitsSystemWindows="true"
  19. app:contentScrim="?attr/colorPrimary"
  20. app:expandedTitleMarginEnd="64dp"
  21. app:expandedTitleMarginStart="48dp"
  22. app:layout_scrollFlags="scroll|exitUntilCollapsed">
  23. <ImageView
  24. android:id="@+id/main.backdrop"
  25. android:layout_width="match_parent"
  26. android:layout_height="match_parent"
  27. android:fitsSystemWindows="true"
  28. android:scaleType="centerCrop"
  29. android:src="@drawable/userbackgroud2"
  30. app:layout_collapseMode="parallax" />
  31. <android.support.v7.widget.Toolbar
  32. android:id="@+id/main.toolbar"
  33. android:layout_width="match_parent"
  34. android:layout_height="?attr/actionBarSize"
  35. app:layout_collapseMode="pin"
  36. app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
  37. </android.support.design.widget.CollapsingToolbarLayout>
  38. </android.support.design.widget.AppBarLayout>
  39. <android.support.v7.widget.RecyclerView
  40. android:id="@+id/rvToDoList"
  41. android:layout_width="match_parent"
  42. android:layout_height="match_parent"
  43. app:layout_behavior="@string/appbar_scrolling_view_behavior" />
  44. <android.support.design.widget.FloatingActionButton
  45. android:layout_width="wrap_content"
  46. android:layout_height="wrap_content"
  47. android:layout_gravity="end|bottom"
  48. android:layout_margin="@dimen/activity_horizontal_margin"
  49. android:src="@android:drawable/ic_dialog_email"
  50. app:layout_behavior="com.example.tyhj.pull.ScrollAwareFABBehavior" />
  51. </android.support.design.widget.CoordinatorLayout>

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

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

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;
  2. import android.content.Context;
  3. import android.support.design.widget.CoordinatorLayout;
  4. import android.support.design.widget.FloatingActionButton;
  5. import android.support.v4.view.ViewCompat;
  6. import android.support.v4.view.ViewPropertyAnimatorListener;
  7. import android.support.v4.view.animation.FastOutSlowInInterpolator;
  8. import android.util.AttributeSet;
  9. import android.view.View;
  10. public class ScrollAwareFABBehavior2 extends FloatingActionButton.Behavior {
  11. private static final android.view.animation.Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
  12. private boolean mIsAnimatingOut = false;
  13. public ScrollAwareFABBehavior2(Context context, AttributeSet attrs) {
  14. super();
  15. }
  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. }
  23. @Override
  24. public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child,
  25. View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
  26. super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed,
  27. dyUnconsumed);
  28. if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
  29. animateOut(child);
  30. } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
  31. animateIn(child);
  32. }
  33. }
  34. private void animateOut(final FloatingActionButton button) {
  35. ViewCompat.animate(button).translationY(500)
  36. .setInterpolator(INTERPOLATOR).withLayer()
  37. .setListener(new ViewPropertyAnimatorListener() {
  38. @Override
  39. public void onAnimationStart(View view) {
  40. ScrollAwareFABBehavior2.this.mIsAnimatingOut = true;
  41. }
  42. @Override
  43. public void onAnimationEnd(View view) {
  44. ScrollAwareFABBehavior2.this.mIsAnimatingOut = false;
  45. view.setVisibility(View.GONE);
  46. }
  47. @Override
  48. public void onAnimationCancel(View view) {
  49. ScrollAwareFABBehavior2.this.mIsAnimatingOut = false;
  50. }
  51. }).start();
  52. }
  53. private void animateIn(FloatingActionButton button) {
  54. button.setVisibility(View.VISIBLE);
  55. ViewCompat.animate(button).translationY(0)
  56. .setInterpolator(INTERPOLATOR).withLayer().setListener(null)
  57. .start();
  58. }
  59. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注