ZwijanieToolbarLayout: niestandardowe treści podobne do Facebook

Question

Chcę utworzyć niestandardowy contentScrim dla mojego collapsingToolbarLayout. Mój collapsingToolbarLayout ma wewnątrz imageview. Kiedy przewija, teoretycznie ImageView jest przypuszczać, aby fade out i mój kolor siatka jest przypuszczać zanikać w

Wszyscy wiemy, możemy stworzyć tkaninę maskującą tak:.

  <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:contentScrim="?attr/colorPrimary" 
       android:background="@color/white" 
       app:expandedTitleMarginStart="48dp" 
       app:expandedTitleMarginEnd="64dp" 
       android:fitsSystemWindows="true" 
       app:expandedTitleTextAppearance="@color/transparent" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed" 
       > 

jednak android domyślne siatka wydaje się, że zaczyna działać dopiero po przewinięciu 3/4 w górę ekranu. Przed tym punktem widok obrazu nadal jest w pełni pokazany. Również po osiągnięciu 3/4 ekranu, tkanina maskująca w rzutach i automatycznie zmienia kolor collapsingtoolbarlayout do koloru scrim:

Zamiast to całkowicie wypełnia ekran podczas przewijania 3/4 drogi do góry i zanim dotarliśmy do toolbar, chcę, aby delikatnie zniknęło, aż przewiniesz do numeru toolbar.

Jeśli chcesz zobaczyć przykład efektu, który chcę utworzyć, zajrzyj do aplikacji Facebook. Jest to aplikacja Facebook gdy collapsingToolbarLayout jest w pełni rozwinięty:

Podczas przewijania do około 3/4 drogi w dół, collapsingToolbarLayout ma wyblakły kolor niebieski i niebieski nie jest całkowicie nasycając:

Więc muszę tworzyć następujące w moim collapsingToolbarLayout:

<FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:id="@+id/frame_picture"> 

     <com.customshapes.SquareImageView 
      android:id="@+id/backdrop" 
      android:contentDescription="@string/photo" 
      android:transitionName="@string/transition" 
      android:layout_width="match_parent" 
      android:layout_height="240dp" 
      android:scaleType="centerCrop" 
      android:fitsSystemWindows="true" 
      /> 

     <com.customshapes.SquareImageView 
      android:id="@+id/fading_backdrop" 
      android:layout_width="match_parent" 
      android:background="?attr/colorPrimary" 
      android:layout_height="240dp" 
      android:alpha="0" 
      android:fitsSystemWindows="true" 
      /> 

    </FrameLayout> 

Framelayout zawiera tło imageview, które przechowuje obraz wyświetlany wewnątrz mojego zwijacza ToolbarLayout, a przed nim znajduje się widok, w którym znajduje się "scrimColor"? Attr/colorPrimary z alfa 0, dzięki czemu tło imageview prześwitywać.

Potem wdrożył appBarLayout za onOffsetChangedListener:

@Override 
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 

    fading_backdrop.setImageAlpha(verticalOffset); 
    fading_backdrop.invalidate(); 
} 

Jesteśmy ustawiania alfa fading_backdrop tak, że pojawi się ona, kiedy przewijać w górę. Próbuję sztucznie stworzyć scrim.

Jednak wydaje się, że to nie działa poprawnie. Nie ma żadnego zanikania, gdy uruchamiam ten kod. Czy ktoś wie, co robię źle?

Answer 1

W ten sposób udało mi się stworzyć niestandardowe płótno, które wydaje się być używane w wielu aplikacjach w dzisiejszych czasach - jeśli spojrzysz na Facebooka, zobaczysz, że nie używają one standardu dla swojego collapsingToolbarLayout. Poniższy kod powiela to, co Facebook robi w swojej aplikacji.

Musisz ustawić AppBarLayout.OnOffsetChangedListener dla swojej aktywności, a następnie użyj poniższego kodu poniżej, aby zmierzyć rozmiar paska narzędzi i rozmiar appBarLayout.

Kiedy słuchacz nazywa, verticalOffset faktycznie mierzy przesunięcie collapsingToolbarLayout od kiedy jest w pełni rozwinięty do momentu, gdy dotknie przypięte toolbar. Dlatego verticalOffset WYKLUCZA wysokość toolbar. Aby porównać jabłka z jabłkami, musimy WYŁĄCZYĆ wysokość toolbar z wysokości appBarLayout, tak aby po podzieleniu verticalOffset przez totalHeight, ani parametr verticalOffset, ani totalHeight nie zawierały wysokości toolbar. Jest to konieczne, aby uzyskać wartość procentową do zastosowania wartości 255 alpha.

@Override 
    public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) { 

     //measuring for alpha 
     int toolBarHeight = toolbar.getMeasuredHeight(); 
     int appBarHeight = appBarLayout.getMeasuredHeight(); 
     Float f = ((((float) appBarHeight - toolBarHeight) + verticalOffset)/((float) appBarHeight - toolBarHeight)) * 255; 
     fading_backdrop.getBackground().setAlpha(255 - Math.round(f)); 
    } 

Podczas przewijania pory fading_backdrop będzie stopniowo zyskać alfa podczas przewijania w górę tak, że nakłada ładnie z obrazem w collapsingToolbarLayout, podobny do facebook zwyczaju contentScrim.