Animieren Toolbar Logo/Titel ändert sich bei Verwendung mit ViewPager Fragmente

Question

Ich verwende ViewPager, um zwei Fragmente in meiner Haupttätigkeit zu hosten. Ein Fragment soll das App-Logo und einen anderen Titel in der Toolbar anzeigen. Ich kann das ohne Probleme machen.

Allerdings möchte ich diese Änderungen animieren, wenn ich von einem Fragment zum anderen wische, indem ich auf ViewPager wische, wie Fade das Logo aus und fade den Titel ein.

Jeder Hinweis oder Idee, wie kann ich es tun.

Ok, wie pro Amir Vorschlag habe ich versucht, das unter Layout mit:

<?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> 

Und es funktioniert! Aber was, wenn ich es nach der Scroll-Position des ViewPagers machen müsste. Ich habe versucht, die Animation in

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

Teil des Codes platzieren, aber die Animation läuft unkontrollierbar, da dieser Rückruf jedes Mal aufgerufen wird, wenn die Scroll gestartet wird, und zwar unabhängig davon tatsächlich gescrollt wird oder nicht.

Answer 1

Schließlich ist hier, was ich den gewünschten Effekt zu erzielen tat

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

Der obige Code führte zu einem reibungslosen Übergang b/w Logo und Titeltext, wenn Fragmente innerhalb viewpager gescrollt werden.

Veröffentlichen der Antwort in der Hoffnung, dass dies jemand anderen helfen kann.

Danke Amir für die Führung.

Answer 2

Für Toolbar Animieren sollten Sie Ihre eigenen Toolbar etwas wie this definieren und für Elemente der Toolbar in Ihrem MainActivity Animieren Sie so etwas wie folgenden Code verwenden:

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

und zum Ändern Titel aufgrund ViewPager Position Definieren Sie einfach den Listener für Ihre ViewPager:

Animationsteil des Codes verfügbar here.