开发者社区> 问答> 正文

如何在focusArea周围的TextureView上添加Shadow

我正在Android Studio中构建一个qr扫描仪,并使用cameraX Api,并使用TextureView进行预览。在布局中,我希望像大多数qr扫描仪应用程序一样,在textureview上形成阴影。

我当前的屏幕是 我的屏幕

我想要像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>

展开
收起
Puppet 2020-01-07 21:32:54 781 0
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;
    }}
    然后在我的布局中将其添加到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>
    

    因此,通过在Textureview上添加自定义叠加层,我能够获得像qr扫描仪一样的音素。

    2020-01-07 21:33:30
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载