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

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

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

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

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

  • Панель инструментов с эффектом параллакса с 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>

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

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


android android-animation android-coordinatorlayout android-toolbar android-twitter
person JpCrow    schedule 04.05.2016    source источник
comment
Вы сделали этот эффект?   -  person mio4kon    schedule 09.04.2018
comment
@mio4kon Нет, можно добиться чего-то подобного, но без такого эффекта :(   -  person JpCrow    schedule 09.04.2018
comment
Достигли ли вы эффекта прокрутки? Первая панель инструментов со сворачивающимся изображением заголовка, затем информация о пользователе сворачивается с макетом вкладки, закрепленным под панелью инструментов.   -  person Ralph    schedule 08.01.2019
comment
@ Ральф, к сожалению, нет :(   -  person JpCrow    schedule 08.01.2019
comment
искал весь день, и я все еще не могу этого добиться :( спасибо за ответ!   -  person Ralph    schedule 08.01.2019

Ответы (2)


arrow_upward
5
arrow_downward

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

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:
`Координатор -> Панель приложений -> Панель CollapsingToolbar -> Панель инструментов.

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

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

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

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

person Budius    schedule 04.05.2016
comment
Спасибо за ответ, я попробую использовать contentcrim с возможностью рисования и дам вам знать, если это сработает! - person JpCrow; 05.05.2016
comment
@JpCrow Не уверен, какой эффект вы хотите, но я просмотрел еще несколько раз, и мне кажется, что то, что Twitter использует в качестве сетки контента, представляет собой размытую версию того же изображения на заднем плане. Таким образом, когда CollapsableLayout изменяет его альфа-канал, вы видите этот переход - person Budius; 05.05.2016
comment
Budius, вы думаете, что в твиттере весь топ-контент находится в AppBarLayout, а во вложенномScrollview только вьюпейджер? - person JpCrow; 05.05.2016
comment
Я не думаю, что вложенныйScrollView вообще существует. Приложение, над которым я работаю, использовало Header/ViewPager, как Twitter, и очень сложно синхронизировать все это вместе. Но с вариантом использования CoordinatorLayout я считаю, что это просто ViewPager с app:layout_behavior="@string/appbar_scrolling_view_behavior" и height=match_parent. CoordinatorLayout перемещает ViewPager вверх-вниз, а RecyclerView внутри ViewPager получает остальную часть движения прокрутки. - person Budius; 05.05.2016
comment
но да... @JpCrow весь остальной контент находится внутри CollapsingToolbar - person Budius; 05.05.2016
comment
Я пытался, как вы говорите, но не могу добиться того, чего хочу, так же, как и в твиттере, Content Scrim появляется только тогда, когда я заканчиваю прокрутку до панели инструментов, мне нужно, чтобы он был всегда. Я попробую еще несколько тестов и дам вам знать - person JpCrow; 05.05.2016
comment
Я считаю, что Twitter использует изображение в 2 раза больше. Один раз в обычном ImageView внутри CollapsibleToolbar с app:layout_collapseMode="parallax", а другой в качестве содержимого экрана с размытым / затемненным изображением (вы можете заметить в твиттере тот последний момент, когда он переходит от одного к другому). - person Budius; 05.05.2016

arrow_upward
-1
arrow_downward

Вы можете попробовать ниже 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>

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

Для получения более подробной информации вы можете перейти по этой ссылке.

person Mehta    schedule 11.05.2016
comment
Спасибо, но это не то, чего я пытался достичь. Это нормальный и красивый пример. :D - person JpCrow; 11.05.2016