如何在focusArea周围添加Shadow Over TextureView答案

【问题标题】：How to add Shadow Over TextureView around focusArea如何在focusArea周围添加Shadow Over TextureView
【发布时间】：2020-01-07 10:04:19
【问题描述】：

我正在 Android Studio 中构建二维扫描仪，并使用 cameraX Api 并使用 TextureView 进行预览。在布局中，我希望像大多数 qr 扫描仪应用程序一样在纹理视图上产生阴影。

我当前的屏幕是 my screen

我想要类似的东西 phonepe qr

那么如何在焦点区域周围添加叠加层。是否可以在布局中或我必须使用 CustomView。

我目前的布局是

<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<data>

</data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorGrey">




    <TextureView
        android:id="@+id/texture_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="visible"
        app:layout_constraintTop_toTopOf="@+id/included"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
         />

    <include
        android:id="@+id/included"
        layout="@layout/custom_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>






    <View
        android:id="@+id/texture_view_border"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/scanner_border"
        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_mid"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@id/guideline_vertcal_right"
        app:layout_constraintStart_toEndOf="@id/guideline_vertcal_left"
        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_up" />

    <TextView
        android:id="@+id/qr_code_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Scan QR code"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textColor="@color/colorWhite"
        app:layout_constraintStart_toStartOf="@id/guideline_vertcal_left"
        app:layout_constraintEnd_toEndOf="@id/guideline_vertcal_right"
        app:layout_constraintTop_toBottomOf="@id/texture_view_border"
        />


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertcal_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertcal_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.90" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.20" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal_mid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.80" />

    <View
        android:id="@+id/scanner_bar"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="@color/colorLoginPrimary"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="@id/texture_view_border"
        app:layout_constraintEnd_toEndOf="@id/texture_view_border"
        app:layout_constraintStart_toStartOf="@id/texture_view_border"
        app:layout_constraintTop_toTopOf="@id/texture_view_border" />

    <View
        android:layout_width="30dp"
        android:layout_height="5dp"
        android:background="@color/colorLoginPrimary"
        app:layout_constraintStart_toStartOf="@id/texture_view_border"
        app:layout_constraintTop_toTopOf="@id/texture_view_border" />

    <View
        android:layout_width="5dp"
        android:layout_height="30dp"
        android:background="@color/colorLoginPrimary"
        app:layout_constraintStart_toStartOf="@id/texture_view_border"
        app:layout_constraintTop_toTopOf="@+id/texture_view_border" />

    <View
        android:layout_width="30dp"
        android:layout_height="5dp"
        android:background="@color/colorLoginPrimary"
        app:layout_constraintEnd_toEndOf="@id/texture_view_border"
        app:layout_constraintTop_toTopOf="@id/texture_view_border" />

    <View
        android:layout_width="5dp"
        android:layout_height="30dp"
        android:background="@color/colorLoginPrimary"
        app:layout_constraintEnd_toEndOf="@+id/texture_view_border"
        app:layout_constraintTop_toTopOf="@id/texture_view_border" />

    <View
        android:id="@+id/view"
        android:layout_width="30dp"
        android:layout_height="5dp"
        android:background="@color/colorLoginPrimaryDark"
        app:layout_constraintBottom_toBottomOf="@id/texture_view_border"
        app:layout_constraintStart_toStartOf="@id/texture_view_border" />

    <View
        android:layout_width="30dp"
        android:layout_height="5dp"
        android:background="@color/colorLoginPrimary"
        app:layout_constraintBottom_toBottomOf="@id/texture_view_border"
        app:layout_constraintEnd_toEndOf="@+id/texture_view_border" />

    <View
        android:layout_width="5dp"
        android:layout_height="30dp"
        android:background="@color/colorLoginPrimary"
        app:layout_constraintBottom_toBottomOf="@+id/texture_view_border"
        app:layout_constraintStart_toStartOf="@id/texture_view_border" />

    <View
        android:layout_width="5dp"
        android:layout_height="30dp"
        android:background="@color/colorLoginPrimary"
        app:layout_constraintBottom_toBottomOf="@+id/texture_view_border"
        app:layout_constraintEnd_toEndOf="@id/texture_view_border" />


</androidx.constraintlayout.widget.ConstraintLayout>

【问题讨论】：

标签： android android-layout camera android-custom-view textureview

【解决方案1】：

所以我想出了这个解决方案：我添加了一个自定义布局类如下

public class CircleOverlayView extends LinearLayout{
private Bitmap bitmap;

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

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

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

@TargetApi(Build.VERSION_CODES.LOLLIPOP)
public CircleOverlayView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
    super(context, attrs, defStyleAttr, defStyleRes);
}

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

    if (bitmap == null) {
        createWindowFrame();
    }
    canvas.drawBitmap(bitmap, 0, 0, null);
}

protected void createWindowFrame() {
    bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
    Canvas osCanvas = new Canvas(bitmap);

    RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());

    RectF innerRectangle = new RectF(getWidth() * .10f, getHeight() * .20f, getWidth() * .90f, getHeight() * .70f);

    Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
    paint.setColor(getResources().getColor(R.color.colorBlack));
    paint.setAlpha(150);
    osCanvas.drawRect(outerRectangle, paint);

    paint.setColor(Color.TRANSPARENT);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
    //osCanvas.drawRect(innerRectangle,paint);
    osCanvas.drawRoundRect(innerRectangle, 45, 45, paint);

   /* paint.setColor(Color.TRANSPARENT);
    paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
    float centerX = getWidth() / 2;
    float centerY = getHeight() / 2;
    float radius = getResources().getDimensionPixelSize(R.dimen.fab_margin);
    osCanvas.drawCircle(centerX, centerY, radius, paint);*/
}

@Override
public boolean isInEditMode() {
    return true;
}

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    bitmap = null;
}}

然后在我的布局中将它添加到纹理视图上

<data>

</data>

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <include
        android:id="@+id/included"
        layout="@layout/custom_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <TextureView
        android:id="@+id/texture_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/included" />


    <com.example.studentapp.utils.CircleOverlayView
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@id/texture_view" />


    <View
        android:id="@+id/texture_view_border"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/scanner_border"
        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_mid"
        app:layout_constraintDimensionRatio="1:1"
        app:layout_constraintEnd_toStartOf="@id/guideline_vertcal_right"
        app:layout_constraintStart_toEndOf="@id/guideline_vertcal_left"
        app:layout_constraintTop_toBottomOf="@id/guideline_horizontal_up" />

    <TextView
        android:id="@+id/qr_code_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="Scan QR code"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium"
        android:textColor="@color/colorWhite"
        app:layout_constraintBottom_toTopOf="@id/guideline_horizontal_mid"
        app:layout_constraintEnd_toEndOf="@id/guideline_vertcal_right"
        app:layout_constraintStart_toStartOf="@id/guideline_vertcal_left" />


    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertcal_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.1" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_vertcal_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.90" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.20" />

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_horizontal_mid"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.80" />

    <View
        android:id="@+id/scanner_bar"
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:background="@color/colorLoginPrimary"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="@id/texture_view_border"
        app:layout_constraintEnd_toEndOf="@id/texture_view_border"
        app:layout_constraintStart_toStartOf="@id/texture_view_border"
        app:layout_constraintTop_toTopOf="@id/texture_view_border" />
</androidx.constraintlayout.widget.ConstraintLayout>

所以通过上面我能够通过在纹理视图上添加自定义覆盖来获得像二维码扫描仪一样的电话。

【讨论】：