Блог

Я хочу создать один экран, на котором я могу щелкнуть изображение карты, как показано на приведенном ниже изображении.

Я создал подобный экран с помощью кода, приведенного ниже, и этот код действительно работает, но я просто не уверен, как добавить к этому макет выреза карты.

 <RelativeLayout
            android:id="@ id/rlCamera"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible">

            <androidx.camera.view.PreviewView
                android:id="@ id/viewFinder"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:alpha="0.5"
                android:background="@color/black" />

            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <RelativeLayout
                    android:layout_width="@dimen/_24sdp"
                    android:layout_height="@dimen/_24sdp"
                    android:layout_margin="@dimen/_15sdp">

                    <com.google.android.material.card.MaterialCardView
                        android:layout_width="@dimen/_34sdp"
                        android:layout_height="@dimen/_34sdp"
                        android:alpha="0.2"
                        app:cardBackgroundColor="@color/white"
                        app:cardCornerRadius="@dimen/_50sdp" />

                    <androidx.appcompat.widget.AppCompatImageView
                        android:layout_width="@dimen/_15sdp"
                        android:layout_height="@dimen/_15sdp"
                        android:layout_centerInParent="true"
                        android:src="@drawable/ic_close"
                        android:tint="@color/white" />

                </RelativeLayout>

                <androidx.appcompat.widget.AppCompatTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerHorizontal="true"
                    android:layout_marginTop="@dimen/_25sdp"
                    android:text="License"
                    android:textColor="@color/white"
                    android:textSize="@dimen/_14sdp"
                    android:textStyle="bold" />

                <androidx.appcompat.widget.LinearLayoutCompat
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_marginTop="@dimen/_120sdp"
                    android:gravity="center_horizontal"
                    android:orientation="vertical">

                    <androidx.camera.view.PreviewView
                        android:id="@ id/viewFinderCard"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/_150sdp"
                        android:layout_marginHorizontal="@dimen/_40sdp" />

                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="@dimen/_40sdp"
                        android:text="Front of card"
                        android:textColor="@color/white"
                        android:textSize="@dimen/_14sdp"
                        android:textStyle="bold" />

                    <androidx.appcompat.widget.AppCompatTextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginHorizontal="@dimen/_70sdp"
                        android:layout_marginTop="@dimen/_10sdp"
                        android:text="All 4 corners should be aligned to card given above."
                        android:textAlignment="center"
                        android:textColor="@color/white"
                        android:textSize="@dimen/_12sdp" />

                </androidx.appcompat.widget.LinearLayoutCompat>

                <androidx.appcompat.widget.AppCompatImageView
                    android:id="@ id/imgCapture"
                    android:layout_width="@dimen/_54sdp"
                    android:layout_height="@dimen/_54sdp"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="@dimen/_40sdp"
                    android:src="@drawable/ic_capture" />

            </RelativeLayout>

        </RelativeLayout>
 

Результат

Но теперь я не уверен, как добавить прозрачный вырез для прямоугольника изображения карты.

Кто-нибудь может мне помочь с этим?

Я настоятельно рекомендую использовать 9-patch bitmap для такого выреза. если у некоторых ViewGroup есть сплошное / полупрозрачное / изображение в качестве фона, то его трудно «вырезать» какую-то его часть с дочерней стороны, вы должны переопределить onDraw его и выполнить некоторую ручную математику и работу Canvas … это должно быть как минимум drawable , но ваш образец нелегко создать программно (особенно цветные углы).

было бы проще установить 9-patch в качестве фона для всего макета вместо текущего "@color/black" и alpha . обратите внимание на содержимое и области растягивания и установите некоторые maxWidth и maxHeight (или фиксированные) для рамки с предварительным просмотром карты. 9-patch красиво обернет его