Question

我正在使用ViewPager在我的主要活动中托管两个片段。一个片段旨在显示工具栏上的app徽标和其他一个标题。我能够毫无问题地做到这一点。

但是，当我使用ViewPager上的滑动从一个片段滑动到另一个片段时，我希望为这些更改设置动画，例如淡出徽标并淡入标题。

任何线索或想法我该怎么做。

好的，根据Amir的建议，我尝试使用以下布局：

./script.sh
   4    4    6 ISOSCELES
   4    5    5 ISOSCELES
   4    5    3 SCALENE
   4    4    4 EQUILATERAL
   2    9    1 not a triangle
   2    3    2 ISOSCELES
 100    3    3 not a triangle
   1    2 1000 not a triangle
1003    3    3 side out of range

它有效！但是，如果我必须按照ViewPager的滚动位置来做这件事。我尝试将动画放在

中

    <?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="wrap_content"
    android:layout_height="wrap_content">
<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <RelativeLayout
        android:id="@+id/toolbar_logo_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:alpha="1"
        >
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo"
        android:id="@+id/toolbar_logo_image"
        android:alpha="1"
       />
    </RelativeLayout>

    <RelativeLayout
        android:layout_toRightOf="@id/toolbar_log_container"
        android:layout_alignWithParentIfMissing="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/toolbar_info_container"
        >
    <ImageView
        android:id="@+id/toolbar_profile_pic"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/one"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginRight="@dimen/value_12"
        />

    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/toolbar_user_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextInfoName"
        android:layout_alignParentTop="true"
        android:layout_toRightOf="@+id/toolbar_profile_pic"
        android:layout_toEndOf="@+id/toolbar_profile_pic"
        android:layout_marginTop="@dimen/value_8"
        />
    <android.support.v7.widget.AppCompatTextView
        android:id="@+id/toolbar_user_detail"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextInfoWork"
        android:layout_below="@+id/toolbar_user_name"
        android:layout_toRightOf="@+id/toolbar_profile_pic"
        android:layout_toEndOf="@+id/toolbar_profile_pic"
        android:layout_alignBottom="@id/toolbar_profile_pic"
        />
    </RelativeLayout>

</RelativeLayout>
</android.support.v7.widget.Toolbar>

部分代码，但动画无法控制地运行，因为一旦滚动启动，每次都会调用此回调，无论它是否实际滚动。

Answer 1

对于动画Toolbar，您应该定义自己的Toolbar类似this的内容，并为 MainActivity 中的Toolbar元素制作动画，您可以使用类似于以下代码：

 getLeftIcon().animate()
                .translationY(0)
                .setDuration(300)
                .setStartDelay(300);
        getAppLogo().animate()
                .translationY(0)
                .setDuration(300)
                .setStartDelay(400);

并且由于ViewPager位置更改了标题，只需为ViewPager定义听众：

viewPager.setOnPageChangeListener(new OnPageChangeListener() {
    public void onPageScrollStateChanged(int state) {}
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}

    public void onPageSelected(int position) {
        // Change your title here 
    }
});

动画部分代码可用here。

Answer 2

最后，这是我为达到预期效果所做的工作：

mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
        private float prevPosition = 0.0f;
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            ///hold current position
            if(prevPosition == 0) {
                prevPosition = positionOffset;
                return;
            }

            ///check if prev position is equal to current one, avoid multiple calls
            if(prevPosition == positionOffset) {
                return;
            }

            /// zero position check
            if(prevPosition >= 0.9) {
                if(positionOffset == 0.0f) {
                    Logger.log_error("Do not hide infoHolder");
                    return;
                }
            }
            //update previous position
            prevPosition = positionOffset;

            ///animate title text and logoholder accordingly
            logoHolder.animate().translationX(logoHolder.getWidth() -positionOffset * logoHolder.getWidth()) .alpha(positionOffset).setDuration(0).start();
            mTitleText.animate().translationX(- positionOffset * mTitleText.getWidth()).alpha(1.0f - logoHolder.getAlpha()).setDuration(0).start();

        }

        @Override
        public void onPageSelected(int position) {
        }

        @Override
        public void onPageScrollStateChanged(int state) {
        }
    });

当在viewpager中滚动片段时，上面的代码导致了b / w徽标和标题文本的平滑过渡。

发布答案希望这可以帮助其他人。

感谢Amir的指导。

与ViewPager碎片一起使用时，动画工具栏徽标/标题会发生变化

2 个答案: