创建带有投影的矢量可绘制对象以覆盖图像

Question

我想实现一个看起来像 "desired" 图像的布局，作为初始应用状态的一部分，通知用户一些基本操作。现在我正在获取 "actual" 图像。

我需要任何 drawable/image 的背景图像，它具有从左下角到右上角倾斜的任何颜色的叠加层。这也必须在任何数量的设备、手机或平板电脑上以相同的形状进行扩展，并支持回到 SDK 16。

到目前为止，我已经放弃了使用矢量图像创建倾斜可绘制对象然后使用 FrameLayout 将其覆盖在背景图像之上以获得分层效果的想法。我不确定这是否是实现此目的的最佳方式，但我希望叠加可绘制对象是矢量可绘制对象或九补丁，这样它就不会在更宽的布局上像素化。

layout/view_layout.xml

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/background_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/bg_image"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="52dp"
        android:layout_gravity="bottom"
        android:background="@drawable/overlay"/>

</FrameLayout>

drawable/overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp" android:height="36dp"
    android:viewportWidth="48" android:viewportHeight="36">

    <path
        android:fillColor="#fff"
        android:pathData="M48,0 L48,36 L0,36 L0,32 Z"/>

</vector>

如果有人知道如何向矢量可绘制对象添加投影（我还没有找到方法），或者如果有更好的方法，我们将不胜感激任何帮助或建议。谢谢！

Answer 1

我最终解决这个问题的方法是扩展 ImageView class 并添加自定义绘制逻辑以覆盖图像。它没有像我希望的那样使用 Vector Drawable，但它确实呈现了我希望的确切效果。这是我的 class:

的基本轮廓

public class CoveredImageView extends ImageView {

    static float DENSITY = 1f;
    static final float SHADOW_DISTANCE = 10f;
    static final int SHADOW_COLOR = 0xAA000000;

    Path path;
    Paint paint;

    Point p1, p2, p3;

    public CoveredImageView(Context context) {
        this(context, null);
    }

    public CoveredImageView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CoveredImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context);
    }

    void init(@NonNull Context context) {
        DENSITY = context.getResources().getDisplayMetrics().density;

        path = new Path();
        paint = new Paint();
        p1 = new Point();
        p2 = new Point();
        p3 = new Point();

        // Required to make the ShadowLayer work properly
        setLayerType(LAYER_TYPE_SOFTWARE, null);
    }

    void updateDrawVariables() {
        int shadowSize = (int)(SHADOW_DISTANCE * DENSITY);

        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.FILL);
        paint.setAntiAlias(true);
        paint.setShadowLayer(shadowSize, 0, -1, SHADOW_COLOR);

        // Offset the actual position by the shadow size so
        int left = 0 - shadowSize;
        int right = getMeasuredWidth() + shadowSize;
        int bottom = getMeasuredHeight();

        p1.set(left, bottom);
        p2.set(right, bottom - (int)(52 * DENSITY));
        p3.set(right, bottom);

        path.setFillType(Path.FillType.EVEN_ODD);
        path.moveTo(p1.x, p1.y);
        path.lineTo(p2.x, p2.y);
        path.lineTo(p3.x, p3.y);
        // Move the path shape down so that the shadow doesn't "fade" at the left and right edges
        path.lineTo(p3.x, p3.y + shadowSize);
        path.lineTo(p1.x, p1.y + shadowSize);
        path.close();
    }

    @Override
    public void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        // Update all the drawing variables if the layout values have changed
        if(changed) {
            updateDrawVariables();
        }
    }

    @Override
    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // Paint the current path values that were set after onLayout()
        canvas.drawPath(path, paint);
    }
}

创建带有投影的矢量可绘制对象以覆盖图像

Create Vector Drawable with Drop Shadow to Overlay an Image

android

android-vectordrawable