隐藏动作栏/工具栏时动画内容

时间:2014-10-22 21:24:03

标签: android android-5.0-lollipop

我使用了Google IO repo中的代码: https://github.com/google/iosched/blob/master/android/src/main/java/com/google/samples/apps/iosched/ui/BaseActivity.java

我试图在向上滚动时隐藏工具栏并且效果很好,但我的问题是当工具栏动画显示在屏幕外时,我的主要内容会保持固定。

在R.id.toolbar_actionbar上运行动画的代码是:

view.animate()
        .translationY(-view.getBottom())
        .alpha(0)
        .setDuration(HEADER_HIDE_ANIM_DURATION)
        .setInterpolator(new DecelerateInterpolator());

我尝试将工具栏放在带有内容的线性布局中,但它没有改变任何东西。只有当我将操作栏设置为visibility = gone时,内容才会向上移动。

有没有人知道我必须做些什么来使内容与工具栏的翻译动画一起动画?

基本上问题归结为:我如何为一个视图的位置设置动画并使其他视图具有动画效果?

Google IO代码似乎只是为工具栏制作动画,其余内容也随之动画,但我无法让它工作。

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

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


    <include
        android:id="@+id/toolbar_actionbar"
        layout="@layout/toolbar_actionbar" />

    <FrameLayout
        android:id="@+id/main_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/adsContainer"
        android:layout_below="@+id/toolbar_actionbar" />

    <LinearLayout
        android:id="@+id/adsContainer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#000000"
        android:orientation="horizontal" />
</RelativeLayout>
<!-- The navigation drawer -->

<ExpandableListView
    android:id="@+id/left_drawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#111"
    android:choiceMode="singleChoice"
    android:divider="@android:color/transparent"
    android:dividerHeight="0dp" />

</android.support.v4.widget.DrawerLayout>

2 个答案:

答案 0 :(得分:7)

您可以使用此小片段为视图的高度设置动画:

public void animateHeight(final View view, int from, int to, int duration) {
    ValueAnimator anim = ValueAnimator.ofInt(from, to);
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator valueAnimator) {
            int val = (Integer) valueAnimator.getAnimatedValue();
            ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
            layoutParams.height = val;
            view.setLayoutParams(layoutParams);
        }
    });
    anim.setDuration(duration);
    anim.start();
}

调用它看起来像这样:

View view = findViewById(R.id.view);
// Wait for layout to be drawn before measuring it
view.addOnLayoutChangeListener(new View.OnLayoutChangeListener() {
    @Override
    public void onLayoutChange(View view, int i, int i2, int i3, int i4, int i5, int i6, int i7, int i8) {
        view.removeOnLayoutChangeListener(this);
        animateHeight(view, view.getHeight(), 0, 5000);
    }
});

答案 1 :(得分:1)

当列表视图向上滚动时,即使在操作栏(appcompat v7工具栏小部件)向上滑动之后,我也遇到了相同的内容问题。

遵循Christer的活动布局布局。

这可能是脏修复或可能是我弄乱了我的布局。但仍然在这里发布以获得更好的解决方案所以这就是:

我的内容(片段布局)根元素是这样的:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="?attr/actionBarSize" >
............

我的活动布局如下:

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

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <include
        android:id="@+id/toolbar_actionbar"
        layout="@layout/action_bar" />
</RelativeLayout>
.........other stuff.........

脏修复是在Fragment布局中引入一个假工具栏并将其保留在顶部。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_content_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

<View
    android:id="@+id/fakeToolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:layout_alignParentTop="true" />

.............Other elements like ListView/GridView below this........ 

in onscroll方法使fakeToolbar可见/不可见以及实际的ToolBar向上/向下滑动:

    mToolbar.animate().translationY(0).alpha(1)
            .setDuration(HEADER_HIDE_ANIM_DURATION)
            .setInterpolator(new DecelerateInterpolator()).withStartAction(new Runnable() {

                @Override
                public void run() {
                    fakeToolbar.setVisibility(View.VISIBLE);                        
                }
            });     

此修复程序在滚动时平滑过渡到布局。

相关问题