如何防止自定义视图绘制被视图边界裁剪?

11

我正在尝试扩展ImageView并添加阴影。但是我遇到了一个问题,阴影被视图边界裁剪,看起来很糟糕:

clipped shadow

我已经尝试通过LayoutParams编程方式设置宽度/高度,以及尝试使用不同的XML属性,如android:adjustViewBounds,但显示没有改变。同样,设置android:layout_margin无效,无法防止阴影被剪切。

有人能帮我找出如何避免这种剪切吗?我确定我在这里忽略了一些明显的东西。

更新:

此时我的代码非常特定,只适用于一个情况:我正在尝试在圆形位图下绘制一个圆形“阴影”。很明显,视图边界导致了剪切,但我还没有找到解决方案,可以让我扩展视图边界。

在xxhdpi屏幕上,密度为3.0时,56dp图像的宽度和高度分别为168px。在添加2dp的宽度和高度以便偏移后,layoutParams的宽度为174,高度为174。

我的基本方法是让超级ImageView做它该做的事情,并在xml中指定绘制位图,而我只想额外绘制一些东西。这种方法从根本上有缺陷吗?
在onLayout中,我使用宽度或高度中较大的那个来确定阴影圆的半径:radius = Max(width, height) / 2。我以此半径画一个圆,并将其圆心放置在(Cx, Cy)处,其中Cx是宽度的中点加上一个x偏移量,Cy是高度的中点加上一个y偏移量,以创建阴影效果。我使用画布将附加圆绘制到位图中,并在onDraw中将我的圆放置在画布上,然后允许ImageView超级onDraw处理源位图。
此外,在我的onLayout中,我尝试考虑x和y偏移距离,并通过LayoutParams将它们添加到我的视图的宽度和高度中,但当视图被绘制时,视图的大小没有变化。

这是我正在使用的代码: https://gitlab.com/dm78/ImageViewWithShadowExample/

以下是相关代码:

activity_main.xml

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

    <dm78.example.imageviewwithshadowexample.CustomShadowImageView
        android:id="@+id/circle"
        android:layout_gravity="center"
        android:src="@drawable/circle"
        android:layout_margin="16dp"
        android:layout_width="56dp"
        android:layout_height="56dp"/>

</FrameLayout>

CustomShadowImageView.java

package dm78.example.imageviewwithshadowexample;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Build;
import android.renderscript.Allocation;
import android.renderscript.Element;
import android.renderscript.RenderScript;
import android.renderscript.ScriptIntrinsicBlur;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
import android.util.TypedValue;
import android.widget.FrameLayout;
import android.widget.ImageView;

public class CustomShadowImageView extends ImageView {

    public static final String TAG = CustomShadowImageView.class.getSimpleName();
    public static final float SHADOW_RADIUS_DP = 3f;
    public static final float SHADOW_X_OFFSET_DP = 2f;
    public static final float SHADOW_Y_OFFSET_DP = 2f;

    private Paint mPaint;
    private float mShadowRadius;
    private float radius;
    private float cx;
    private float cy;
    private float mShadowXOffset;
    private float mShadowYOffset;
    private Bitmap mShadowBitmap;
    private FrameLayout.LayoutParams layoutParams;
    private boolean expanded;

    public CustomShadowImageView(Context context) {
        super(context);
        init();
    }

    public CustomShadowImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        Log.d(TAG, "init " + this.hashCode());

        DisplayMetrics dm = getContext().getResources().getDisplayMetrics();
        mShadowRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, SHADOW_RADIUS_DP, dm);
        mShadowXOffset = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, SHADOW_X_OFFSET_DP, dm);
        mShadowYOffset = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, SHADOW_Y_OFFSET_DP, dm);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //noinspection deprecation
        int shadowColor = getContext().getResources().getColor(R.color.shadow);
        mPaint.setColor(shadowColor);

        expanded = false;
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        Log.d(TAG, String.format("onMeasure %d w: %d, h: %d", this.hashCode(), MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec)));
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        Log.d(TAG, String.format("onLayout %d changed: %b, l: %d, t: %d, r: %d, b: %d", this.hashCode(), changed, left, top, right, bottom));
        super.onLayout(changed, left, top, right, bottom);

        if (changed) {
            if (!expanded) {
                layoutParams = (FrameLayout.LayoutParams) getLayoutParams();
                layoutParams.width = (int) (layoutParams.width + mShadowXOffset);
                layoutParams.height = (int) (layoutParams.height + mShadowYOffset);
                expanded = true;
            }

            cx = (right - left) / 2 + mShadowXOffset;
            cy = (bottom - top) / 2 + mShadowYOffset;

            boolean widthGreater = (right - left) > (bottom - top);
            radius = (widthGreater ? right - left : bottom - top) / 2;

            if (mShadowBitmap == null) {
                Bitmap bitmap = Bitmap.createBitmap(right - left, bottom - top, Bitmap.Config.ARGB_8888);
                Canvas canvas = new Canvas(bitmap);
                canvas.drawCircle(cx, cy, radius, mPaint);

                if (Build.VERSION.SDK_INT >= 17 && !isInEditMode()) {
                    RenderScript rs = RenderScript.create(getContext());
                    Allocation input = Allocation.createFromBitmap(rs, bitmap, Allocation.MipmapControl.MIPMAP_NONE, Allocation.USAGE_SCRIPT);
                    Allocation output = Allocation.createTyped(rs, input.getType());
                    ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs));
                    script.setRadius(mShadowRadius);
                    script.setInput(input);
                    script.forEach(output);
                    output.copyTo(bitmap);
                }

                mShadowBitmap = bitmap;
            }
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Log.d(TAG, "onDraw " + this.hashCode());
        canvas.drawBitmap(mShadowBitmap, mShadowXOffset, mShadowYOffset, null);
        super.onDraw(canvas);
    }
}

尝试设置填充? - pskink
@pskink 是的,我尝试设置填充。但是它并没有帮助...至少现在我的代码还不行。 - dm78
你能在这里发布一些代码吗? - ci_
@ci_ 在上面的问题中有一个指向GitLab仓库的链接。 - dm78
这个链接有帮助吗?父级视图上使用android:clipChildren="false"呢? - ci_
很遗憾,没有。那个线程里的东西对我都没用。在我的情况下,父级是一个FrameLayout,而自定义视图要小得多且居中,因此不存在父级导致一个子项被裁剪的威胁。我对canvas.clipRect寄予厚望,但它也无效。 - dm78
3个回答

5

默认情况下,视图只允许其父视图在其范围内绘制而不超出范围。

你有两个选择:

  • 要么为你的ImageView添加一些填充来扩大其范围,而不是使用layout_margin,并在这些范围内绘制。
  • 要么通过将android:clipChildren="false"设置为你的FrameLayout来禁用子视图裁剪行为。

2
如果问题是因为父视图的padding引起的,请在父元素的xml中添加以下行:
android:clipToPadding="false"

父视图没有填充。 - dm78

1
在父布局中使用android:clipChildren="false"对我很有帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接