CollapsingToolbarLayout - 使背景圖像變暗/模糊

我有一個帶有圖像視圖的摺疊工具欄。當擴展，它看起來像這樣：CollapsingToolbarLayout - 使背景圖像變暗/模糊

摺疊時，它看起來像這樣：

我知道，根據指引，工具欄應該是主色雖然崩潰了，但我喜歡我設置它的方式，並希望保持它那樣。

但是，顯然，如果圖像中有很多白色，工具欄標題將不可見。那麼，有沒有一種方法可以模糊/調暗背景，以便工具欄標題始終可見？

編輯：有問題的圖像，使用畢加索從互聯網加載。

2017-04-02 Guest1997

我對這個問題的最佳解決方案是重疊兩個圖像，即普通模糊圖像和模糊圖像，並更改模糊圖像的阿爾法。展開後，alpha值爲0.摺疊後的alpha值爲1。我用

AppBarLayout.addOnOffsetChangedListener

得到滾動事件。在我的情況

appBarLayout.addOnOffsetChangedListener((view, verticalOffset) -> { 
     if (mScrollRange == 0) { 
       mScrollRange = appBarLayout.getTotalScrollRange(); 
     } 
     ViewCompat.setAlpha(mBlurredImage, 
       (float) (1 - Math.pow(((mScrollRange + verticalOffset)/(float) mScrollRange), 4))); 
});

這是不理想，但它確實工作

來源

2017-04-02 12:50:47 Blackbelt

你是否在工具欄中添加了2個圖像瀏覽器？確實是 – Guest1997

。包裝在一個FrameLayout中。默認情況下模糊了alpha 0 – Blackbelt

你可以使用Blurry library

模糊是Android
容易模糊庫

// from Bitmap 
Blurry.with(context).from(bitmap).into(imageView);

//與畢加索一起使用

Blurry.with(MainActivity.this) 
       .radius(10) 
       .sampling(8) 
       .async() 
       .capture(findViewById(R.id.image_veiw)) 
       .into((ImageView) findViewById(R.id.image_veiw));

來源

2017-04-02 12:53:07 humazed

如果我使用picasso從互聯網加載圖像，該怎麼辦？ – Guest1997

您不僅限於位圖，我將編輯我的ansewer以向您展示如何使用現有的imageview – humazed

好吧，所以，我剛剛在佈局文件中使用android:tint爲了給圖像添加一個灰色的色調。作爲參考，我設置的色調值是#55000000。這似乎使標題即使在完全白色的背景下也可見。

來源

2017-04-02 13:21:00 Guest1997

你可以使用這個scrim。在可繪製文件夾中創建漸變文件。

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="rectangle"> 
<gradient 
    android:angle="-90" 
    android:startColor="#00000000" 
    android:centerColor="#00000000" 
    android:endColor="#4d000000" 
    android:type="linear" /> 
</shape>

創建上述文件後添加一個額外的視圖佈局這樣

<FrameLayout> 
<ImageView> 
<View 
android:background="@drawable/nameOfAboveFile"/> 
<TexTView> 
</FrameLayout>

來源

2017-04-02 17:46:17

如果使用畢加索來顯示圖像，然後您可以利用在畢加索的建設者轉型對象，並創建模糊效果類是這樣的：

public class BlurEffect implements Transformation { 
    private static final int UP_LIMIT = 25; 
    private static final int LOW_LIMIT = 1; 
    protected final Context context; 
    private final int blurRadius; 

    public BlurEffect(Context context, int radius) { 
    this.context = context; 

    if (radius < LOW_LIMIT) { 
     this.blurRadius = LOW_LIMIT; 
    } else if (radius > UP_LIMIT) { 
     this.blurRadius = UP_LIMIT; 
    } else { 
     this.blurRadius = radius; 
    } 
    } 

    @Override public Bitmap transform(Bitmap source) { 

    Bitmap blurredBitmap; 
    blurredBitmap = Bitmap.createBitmap(source); 

    RenderScript renderScript = RenderScript.create(context); 

    Allocation input = 
     Allocation.createFromBitmap(renderScript, source, 
Allocation.MipmapControl.MIPMAP_FULL, 
      Allocation.USAGE_SCRIPT); 

    Allocation output = Allocation.createTyped(renderScript, input.getType()); 

    ScriptIntrinsicBlur script = 
     ScriptIntrinsicBlur.create(renderScript, 
Element.U8_4(renderScript)); 

    script.setInput(input); 
    script.setRadius(blurRadius); 

    script.forEach(output); 
    output.copyTo(blurredBitmap); 

    return blurredBitmap; 
    } 

    @Override public String key() { 
    return "blurred"; 
    } 
}

然後你就可以以這種方式使用它從畢加索，在第二個參數的更多的價值在構造函數中， n blurer：

Picasso.with(appBarImage.getContext()) 
     .load(track.getUrl()) 
     .transform(new BlurEffect(this, 10)) 
     .into(appBarImage);

來源

2017-10-31 15:49:18

CollapsingToolbarLayout - 使背景圖像變暗/模糊

回答

相關問題