Question

我有一个带有imageview的折叠工具栏。扩展后，它看起来像这样：

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

我知道根据指南，工具栏在折叠时应该是原色，但我喜欢我设置它的方式，并希望保持这样。

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

编辑：使用毕加索从互联网上加载相关图片。

Answer 1

我对此问题的最佳解决方案是重叠两个图像，即正常图像和模糊图像，并更改模糊图像的alpha。展开时，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)));
 });

这不是理想的，但它确实有效

Answer 2

您可以使用Blurry library

模糊是Android的简易模糊库

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

//与Picasso一起使用

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

Answer 3

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

Answer 4

你可以使用稀松布。在drawable文件夹中创建渐变文件。

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

Answer 5

如果您使用Picasso来显示图像，那么您可以利用Picasso构建器中的Transformation对象并使用以下内容创建一个Blur效果类：

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

然后你可以用这种方式从Picasso中使用它，构造函数中第二个参数的值越多，然后是blurer：

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

CollapsingToolbarLayout - 暗淡/模糊背景图像

5 个答案: