Question

我在相机预览上创建了一个叠加椭圆形视图。

aaa

我试图为ImageView设置动画并将其转换为椭圆的中心。几乎一切都运行正常，剩下的唯一问题是动画的ImageView与椭圆形重叠，就像你在这个gif中看到的那样：https://imgur.com/a/0P5vy（对不起分辨率）。

我已尝试设置z索引，设置高程，以提前查看视图，但这些都不起作用。任何想法如何将视图设置在椭圆视图上方而不与其重叠？谢谢！

叠加椭圆形视图：

public class OverlayView extends View {
private Paint transparentBackground;
private Paint eraser;
private Paint borderPaint;
private float horizontalMargin;
private float verticalMargin;

private float WIDTH_FACTOR = 2.9f;
private float HEIGHT_FACTOR = 12f;

public OverlayView(Context context) {
    super(context);
}

public OverlayView(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
}

public OverlayView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    setLayerType(LAYER_TYPE_SOFTWARE, null);
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);

    if (horizontalMargin == 0) {
        horizontalMargin = getMeasuredWidth() / WIDTH_FACTOR;
    }

    if (verticalMargin == 0) {
        verticalMargin = getMeasuredHeight() / HEIGHT_FACTOR;
    }

    Rect rect = new Rect(0, 0, getMeasuredWidth(), getMeasuredHeight());
    canvas.drawRect(rect, transparentBackground);

    canvas.drawArc(new RectF(
            horizontalMargin,
            verticalMargin,
            getMeasuredWidth() - horizontalMargin,
            getMeasuredHeight() - verticalMargin), 0, 360, true, borderPaint);

    canvas.drawArc(new RectF(
                    horizontalMargin,
                    verticalMargin,
                    getMeasuredWidth() - horizontalMargin,
                    getMeasuredHeight() - verticalMargin),
            0, 360, true, eraser);

}

public void init(int borderColor, float horizontalMargin, float verticalMargin) {
    this.horizontalMargin = horizontalMargin;
    this.verticalMargin = verticalMargin;

    transparentBackground = new Paint();
    transparentBackground.setColor(Color.BLACK);
    transparentBackground.setAlpha(200);
    transparentBackground.setStyle(Paint.Style.FILL);

    borderPaint = new Paint();
    borderPaint.setColor(borderColor);
    borderPaint.setStrokeWidth(15);
    borderPaint.setStyle(Paint.Style.STROKE);

    eraser = new Paint();
    eraser.setAntiAlias(true);
    eraser.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
    eraser.setStyle(Paint.Style.FILL);
 }
}

动画功能：

private void moveViewToScreenCenter( View view )
{
    final RelativeLayout root = (RelativeLayout) findViewById( R.id.relativeLayoutRoot );
    DisplayMetrics dm = new DisplayMetrics();
    this.getWindowManager().getDefaultDisplay().getMetrics( dm );
    int statusBarOffset = dm.heightPixels - root.getMeasuredHeight();

    int originalPos[] = new int[2];
    view.getLocationOnScreen( originalPos );

    int xDest = dm.widthPixels/2;
    xDest -= (view.getMeasuredWidth()/2);
    int yDest = dm.heightPixels/2 - (view.getMeasuredHeight()/2) - statusBarOffset;

    faceView.setVisibility(View.VISIBLE);

    Toast.makeText(this, "Please place your face within the oval.", Toast.LENGTH_LONG).show();

    TranslateAnimation anim = new TranslateAnimation( 0, xDest - originalPos[0] , 0, yDest - originalPos[1] );
    anim.setDuration(1000);
    view.startAnimation(anim);
}

布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/relativeLayoutRoot"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent">

<net.ossrs.yasea.SrsCameraView
    android:id="@+id/glsurfaceview_camera"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentStart="true"
    android:layout_alignParentTop="true" />


<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:clipChildren="false"
    android:clipToPadding="false"
    android:gravity="center_vertical"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/faceView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/id_face"/>
</LinearLayout>

Answer 1

我通过从主活动中删除叠加视图并将其移动到DialogFragment来修复此问题。该类将显示叠加视图和动画。创建活动时，我会显示对话框片段，并在 onAnimationEnd 事件中关闭对话框。现在没有任何重叠的视图问题，因为我在当前活动上显示新对话框，并且动画在所有布局元素之上。

动画ImageView与叠加视图重叠

1 个答案: