Панель инструментов Android и анимация изображения пользователя, как и твиттер

Я пытаюсь создать панель инструментов и анимацию образа пользователя, такую ​​как та, которая используется в профиле пользователя Twitter.

Я пробовал много вещей, но я не могу быстро закрепить развернутую панель инструментов в верхней части экрана с некоторым фоном, когда он был расширен, и сделать User Image первым над панелью инструментов, а затем сделать масштаб вниз и перемещайтесь под панелью инструментов во время прокрутки.

Как твиттер делает гладкий эффект в изображении профиля пользователя? Как они сначала имеют это изображение перед панелью инструментов, а затем, когда прокрутка идет позади и достигает того плавного эффекта, идущего под панелью инструментов?

Я пробовал все следующие сценарии:

  • Панель инструментов с эффектом параллакса с CollapseParallaxMultiplier.
  • Настройка панели инструментов Pin 100dp и minHeight? attr/actionBarSize.
  • 2 Панели инструментов, один с фоном изображения, а другой - с прозрачным цветом фона.
  • Сканирование UserImage, а затем перемещение позиции Y (невозможно добиться эффекта, который плавно перемещает изображение пользователя под панелью инструментов).

Ни один из предыдущих сценариев не работал хорошо для меня.

XML-иерархия:

<android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.AppBarLayout>
       <android.support.design.widget.CollapsingToolbarLayout>
             <LinearLayout>
                   <!--Some TextViews and ImageViews-->
             </LinearLayout>
             <ImageView src="My User profile Img"/> <!--Image first above toolbar and when toolbar is collapsing scale down and then go below toolbar-->
             <ImageView src="My background"  app:layout_collapseMode="parallax" app:layout_collapseParallaxMultiplier="0.8"/> 
             <android.support.v7.widget.Toolbar app:layout_collapseMode="pin"/>
       </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

  <!--Second Part, where the ViewPager should be pinned below the Toolbar-->
  <NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <LinearLayout> 
      <android.support.design.widget.TabLayout/>
      <android.support.v4.view.ViewPager/>
     </LinearLayout>
     </NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

В приложении вы можете увидеть эффект Twitter на активность профиля пользователя.

введите описание изображения здесь

Ответы

Ответ 1

Я считаю, что вы пытаетесь сделать более трудным, чем должно быть

CollapsingToolbarLayout имеет этот элемент contentScrim, который обычно используется с цветом, но на самом деле это может быть любой Drawable.

Из исходного кода вы можете видеть, что он нарисован непосредственно за Toolbar

//Это немного странно. Наш холм должен находиться за панелью инструментов (если она присутствует),
//но перед другими детьми, которые стоят за ним. Для этого перехватим
//drawChild(), и сначала рисуем наш холст при рисовании панели инструментов

https://android.googlesource.com/platform/frameworks/support/+/refs/heads/master/design/src/android/support/design/widget/CollapsingToolbarLayout.java#271

Итак, я думаю, вы начинаете с "стандартного" XML-макета:
" Координатор → AppBar → CollapsingToolbar → Панель инструментов

а затем вызовите setContentScrim с некоторым BitmapDrawable, чтобы посмотреть, что произойдет.

collapsingToolbar.setContentScrim(
                   context.getResources()
                     .getDrawable(R.drawable.something);

После этого вам понадобится геометрия, чтобы она выглядела точно на месте, но это не область моего ответа. Кажется, что твиттер также делает изображение немного размытым, но тогда это другой вопрос (используйте RenderScript).

Кроме того, может быть, что холст продолжает перемещаться, пока вы просматриваете представление, тогда вам может понадобиться создать настраиваемый чертеж, который позволит вам компенсировать позицию рисования, чтобы он выглядел правильно. Но это все "майбы" и "ноты". Основная идея есть.

Ответ 2

Вы можете попробовать под xml файлом:

<android.support.design.widget.CoordinatorLayout >
     <android.support.design.widget.AppBarLayout>
         <android.support.design.widget.CollapsingToolbarLayout
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary">
             <ImageView
                app:layout_collapseMode="parallax"/>

            <android.support.v7.widget.Toolbar
                app:layout_collapseMode="pin" />
         </android.support.design.widget.CollapsingToolbarLayout>

    </android.support.design.widget.AppBarLayout>

      <NestedScrollView app:layout_behavior="@string/appbar_scrolling_view_behavior">
   <LinearLayout> 
      <android.support.design.widget.TabLayout/>
      <android.support.v4.view.ViewPager/>
     </LinearLayout>
     </NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

Также используйте Паллет, чтобы добавить цвет параллакса в CollapsingToolbar.

Подробнее см. ссылку .