使用ViewPager碎片时，Animate Toolbar标志/标题发生变化

Question

我使用ViewPager在我的主要活动中托管两个碎片。一个片段旨在在工具栏上显示应用徽标和其他标题。我能够做到这一点，没有任何问题。

但是，当我使用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> 

和它的作品！但是，如果我必须按照ViewPager的滚动位置来做到这一点。我试图把动画中的代码

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {} 

一部分，但动画运行失控，因为一旦滚动开始该回调每次调用，不管它实际上是滚动与否。

Answer 1

最后，这里就是我所做的，以达到预期的效果：

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) { 
     } 
    }); 

上面的代码导致了平稳过渡的B/W标志和标题文本时片段内viewpager滚动。

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

感谢埃米尔的指导。

Answer 2

对于动画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。