[英]How to animate both top and bottom Toolbars(or any other view) enter/exit screen on scroll in CoordinatorLayout?
我的活動在CoordinatorLayout中包含2個AppBarLayouts,一個在屏幕頂部,另一個在底部。 我想讓兩個AppBarLayouts隱藏在RecyclerView的滾動上。
當只有最頂層的時候,通過將app:layout_scrollFlags="scroll|enterAlways"
到工具欄,並將app:layout_behavior="@string/appbar_scrolling_view_behavior"
到RecyclerView的容器中,可以很容易地將其隱藏在滾動上。
當只有底部的AppBarLayout隱藏在滾動上時,它通過自定義行為實現BottomAppBarLayoutBehavior extends AppBarLayout.Behavior
。
但是,當它們都在滾動時隱藏時,它們會成功隱藏但RecyclerView會在滾動時抖動。 頂部工具欄的區域在隱藏后留下空白空間。 下面是xml:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/topToolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="fill_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/RecyclerViewContainer"
android:layout_height="fill_parent"/>
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_gravity="bottom"
app:layout_behavior="myPackage.BottomAppBarLayoutBehavior">
<LinearLayout
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="match_parent">
<!-- some Views -->
</LinearLayout>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
以下是BottomAppBarLayoutBehavior的代碼:
public class BottomAppBarLayoutBehavior extends AppBarLayout.Behavior {
private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
private boolean mIsAnimatingOut = false;
public BottomAppBarLayoutBehavior(Context context, AttributeSet attrs) {
super();
}
@Override
public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final AppBarLayout child,
final View directTargetChild, final View target, final int nestedScrollAxes) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
|| super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
}
@Override
public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final AppBarLayout child,
final View target, final int dxConsumed, final int dyConsumed,
final int dxUnconsumed, final int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
animateOut(child);
} else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
animateIn(child);
}
}
private void animateOut(final AppBarLayout appBarLayout) {
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(appBarLayout).translationY(168F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
.setListener(new ViewPropertyAnimatorListener() {
public void onAnimationStart(View view) {
BottomAppBarLayoutBehavior.this.mIsAnimatingOut = true;
}
public void onAnimationCancel(View view) {
BottomAppBarLayoutBehavior.this.mIsAnimatingOut = false;
}
public void onAnimationEnd(View view) {
BottomAppBarLayoutBehavior.this.mIsAnimatingOut = false;
view.setVisibility(View.GONE);
}
}).start();
} else {
Animation anim = AnimationUtils.loadAnimation(appBarLayout.getContext(), R.anim.fab_out);
anim.setInterpolator(INTERPOLATOR);
anim.setDuration(200L);
anim.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
BottomAppBarLayoutBehavior.this.mIsAnimatingOut = true;
}
public void onAnimationEnd(Animation animation) {
BottomAppBarLayoutBehavior.this.mIsAnimatingOut = false;
appBarLayout.setVisibility(View.GONE);
}
@Override
public void onAnimationRepeat(final Animation animation) {
}
});
appBarLayout.startAnimation(anim);
}
}
private void animateIn(AppBarLayout appBarLayout) {
appBarLayout.setVisibility(View.VISIBLE);
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(appBarLayout).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
.setInterpolator(INTERPOLATOR).withLayer().setListener(null)
.start();
} else {
Animation anim = AnimationUtils.loadAnimation(appBarLayout.getContext(), R.anim.fab_in);
anim.setDuration(200L);
anim.setInterpolator(INTERPOLATOR);
appBarLayout.startAnimation(anim);
}
}
}
我自己找到了解決方案。 底部LinearLayout
的AppBarLayout
包裝器是多余的。 刪除AppBarLayout
包裝並使Behavior
類擴展CoordinatorLayout.Behavior<LinearLayout>
。 最后將行為添加到LinearLayout
,然后頂部Toolbar
和底部LinearLayout
進入和退出屏幕正確滾動。
正確的活動xml:
<android.support.design.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/top_toolbar"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways" />
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_width="fill_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
android:id="@+id/recycler_view_container"
android:layout_height="fill_parent"/>
<LinearLayout
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:orientation="horizontal"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_behavior="*THE_FULL_PACKAGE_NAME*.LinearLayoutBehavior ">
<!-- child views -->
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
正確的Behavior
類:
public class LinearLayoutBehavior extends CoordinatorLayout.Behavior<LinearLayout> {
private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
private boolean mIsAnimatingOut = false;
public LinearLayoutBehavior(Context context, AttributeSet attrs) {
super();
}
@Override
public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final LinearLayout child,
final View directTargetChild, final View target, final int nestedScrollAxes) {
return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
|| super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
}
@Override
public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final LinearLayout child,
final View target, final int dxConsumed, final int dyConsumed,
final int dxUnconsumed, final int dyUnconsumed) {
super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
// User scrolled down and the FAB is currently visible -> hide the FAB
animateOut(child);
} else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
// User scrolled up and the FAB is currently not visible -> show the FAB
animateIn(child);
}
}
private void animateOut(final LinearLayout linearLayout) {
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(linearLayout).translationY(168F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
.setListener(new ViewPropertyAnimatorListener() {
public void onAnimationStart(View view) {
LinearLayoutBehavior.this.mIsAnimatingOut = true;
}
public void onAnimationCancel(View view) {
LinearLayoutBehavior.this.mIsAnimatingOut = false;
}
public void onAnimationEnd(View view) {
LinearLayoutBehavior.this.mIsAnimatingOut = false;
view.setVisibility(View.GONE);
}
}).start();
} else {
Animation anim = AnimationUtils.loadAnimation(linearLayout.getContext(), R.anim.fab_out);
anim.setInterpolator(INTERPOLATOR);
anim.setDuration(200L);
anim.setAnimationListener(new Animation.AnimationListener() {
public void onAnimationStart(Animation animation) {
LinearLayoutBehavior.this.mIsAnimatingOut = true;
}
public void onAnimationEnd(Animation animation) {
LinearLayoutBehavior.this.mIsAnimatingOut = false;
linearLayout.setVisibility(View.GONE);
}
@Override
public void onAnimationRepeat(final Animation animation) {
}
});
linearLayout.startAnimation(anim);
}
}
private void animateIn(LinearLayout linearLayout) {
linearLayout.setVisibility(View.VISIBLE);
if (Build.VERSION.SDK_INT >= 14) {
ViewCompat.animate(linearLayout).translationY(0).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
.setInterpolator(INTERPOLATOR).withLayer().setListener(null)
.start();
} else {
Animation anim = AnimationUtils.loadAnimation(linearLayout.getContext(), R.anim.fab_in);
anim.setDuration(200L);
anim.setInterpolator(INTERPOLATOR);
linearLayout.startAnimation(anim);
}
}
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.