CollapsingToolbarLayout: özel contentScrim Facebook'a benzer

Question

collapsingToolbarLayout için özel bir contentScrim oluşturmak istiyorum. Benim çöktüğümToolbarLayout içinde bir imageview vardır. o kayar zaman teoride imageview karartmak için varsayalım ve benim ince bez rengi solmaya varsayalım

Hepimiz böyle bir scri yaratabilirsiniz biliyorum.

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

Ancak android varsayılan ince bez Sadece ekranın 3/4 ilerlediğinde çalışmaya başlamış gibi görünüyor. Bu noktadan önce, görüntü görüntüsü hala tam olarak gösterilmektedir. Ekranın 3/4 ulaştığınızda Ayrıca, kanaviçe devreye giriyor ve otomatik olarak ince kumaş rengine collapsingtoolbarlayout rengini değiştirir:

Bunun yerine 3 kaydırırken tam ekranı dolduracak sahip

/4 yol yukarı ve biz toolbar ulaşmadan önce, o kadar toolbar kadar kaydırılan kadar yavaşça solmasını istiyorum.

Oluşturmak istediğim efektin bir örneğini görmek isterseniz, Facebook uygulamasına bakın. Bu collapsingToolbarLayout tamamen genişletilir Facebook uygulaması geçerli:

aşağı yaklaşık 3/4 yoldan ilerleyin collapsingToolbarLayout bir soluk mavi rengi vardır ve mavi tamamen doygunluğa değildir:

Yani

içimde aşağıdaki oluşturmasını sağlamak benim 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> 

Çerçeve geçişi, imageview arka planının imageview arka planında görüntülenmesini sağlayan ve 0 ile bir alfa ile 'scrimColor'? Attr/colorPrimary 'i barındıran bir görüntü görüntüsü olan,zemininden oluşur. parlamak. Biz yukarı görüneceği şekilde Biz fading_backdrop ait alfa ayarlarken

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

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

:

Sonra appBarLayout en onOffsetChangedListener uyguladı. Ben yapay bir şekilde bir ince yaratmaya çalışıyorum. Ancak, bu düzgün çalışmıyor gibi görünmüyor. Bu kodu çalıştırdığımda hiç solma yok. Yanlış yaptığımı bilen var mı?

Answer 1

Bu günlerde epeyce uygulamada kullanılan özel bir scrim oluşturmayı başardım - Facebook'a bakarsanız, collapsingToolbarLayout için contentScrim standardını kullanmadığını görürsünüz. Aşağıdaki kod, Facebook'un kendi uygulamasında yaptıklarını kopyalar.

Etkinliğinize bir AppBarLayout.OnOffsetChangedListener ayarlamalı ve ardından araç çubuğunun boyutunu ve appBarLayout öğesinin boyutunu ölçmek için aşağıdaki kodu kullanın.Dinleyicinizin denir

, verticalOffset aslında tutturulmuş toolbar dokunduğunda tam noktaya genişletildiğinde gelen collapsingToolbarLayout ofset ölçer. Bu nedenle, verticalOffsettoolbar'un yüksekliğini EXCLUDES. Elmaları elmalarla karşılaştırmak için, toolbar yüksekliğini appBarLayout yüksekliğinden de dışlamak zorundayız, böylece verticalOffset'u totalHeight'a böldüğümüzde, ne verticalOffset ne de totalHeight ne toolbar yüksekliğini içeriyor. Bu, 255 alfa değerinizi uygulamak için bir yüzde elde etmek için gereklidir. Şimdi Kaydırdığınızda o facebook özel contentScrim benzer collapsingToolbarLayout resmin, güzel ile kaplayan, böylece yukarı doğru kaydırırken

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

, fading_backdrop kademeli olarak alfa kazanacaktır.