使用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。