Логотип панели анимации/Изменение названия при использовании с фрагментами ViewPager

Question

Я использую ViewPager для размещения двух фрагментов в моем основном действии. Один фрагмент предназначен для отображения логотипа приложения и другого только названия на панели инструментов. Я могу сделать это без каких-либо проблем.

Тем не менее, я хочу оживить эти изменения, когда я прокручиваю один фрагмент в другой, используя салфетки на ViewPager, например, Fade out the logo и исчезает в заголовке.

Любая подсказка или идея, как я могу это сделать.

Хорошо, согласно предложению Амира я попробовал, используя следующую схему:

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

Приведенный выше код привело к плавному переходу б/ш Логотип и текст заголовка, когда фрагменты прокручивается внутри ViewPager.

Проводя ответ, надеясь, что это может помочь кому-то другому.

Спасибо Амиру за руководство.

Answer 2

Для Анимационные Toolbar вы должны определить свой собственный Toolbar что-то вроде this и Анимационные элементы Toolbar в вашем MainActivity вы можете использовать что-то вроде следующего кода:

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.