堆栈内存溢出
  繁体   English   中英

如何在focusArea周围在TextureView上添加阴影

[英]How to add Shadow Over TextureView around focusArea

 原文  2020-01-07 10:04:19  8   1    android/ android-layout/ camera/ android-custom-view/ textureview

问题描述

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

我当前的屏幕是我的屏幕

我想要类似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>

1 个解决方案

解决方案1
 0  2020-01-07 12:43:41

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

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

然后在我的布局中将它添加到 textureView 上

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

所以通过上面我能够通过在纹理视图上添加自定义叠加层来获得类似 qr 扫描仪的电话。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何在 TextureView 上添加视图 如何在圆形图像视图周围添加阴影 如何在LinearLayout周围制作阴影？ Android LinearLayout：在 LinearLayout 周围添加带阴影的边框 如何动态获得图像周围的黑色阴影？ 如何在 Android 中的线性布局周围显示阴影？ 如何在TextView周围设置阴影 如何将阴影添加到CircularNetworkImageView 如何为 DrawerLayout 添加阴影？ 如何将MediaController放在TextureView中
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM