CollapsingToolbarLayout - 使背景图像变暗/模糊

问题描述：

我有一个带有图像视图的折叠工具栏。当扩展，它看起来像这样：CollapsingToolbarLayout - 使背景图像变暗/模糊

折叠时，它看起来像这样：

我知道，根据指引，工具栏应该是主色虽然崩溃了，但我喜欢我设置它的方式，并希望保持它那样。

但是，显然，如果图像中有很多白色，工具栏标题将不可见。那么，有没有一种方法可以模糊/调暗背景，以便工具栏标题始终可见？

编辑：有问题的图像，使用毕加索从互联网加载。

答

我对这个问题的最佳解决方案是重叠两个图像，即普通模糊图像和模糊图像，并更改模糊图像的阿尔法。展开后，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))); 
});

这是不理想，但它确实工作

你是否在工具栏中添加了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));

如果我使用picasso从互联网加载图像，该怎么办？ – Guest1997

您不仅限于位图，我将编辑我的ansewer以向您展示如何使用现有的imageview – humazed

答

好吧，所以，我刚刚在布局文件中使用android:tint为了给图像添加一个灰色的色调。作为参考，我设置的色调值是#55000000。这似乎使标题即使在完全白色的背景下也可见。

答

你可以使用这个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>

答

如果使用毕加索来显示图像，然后您可以利用在毕加索的建设者转型对象，并创建模糊效果类是这样的：

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

CollapsingToolbarLayout - 使背景图像变暗/模糊

相关推荐