Пользовательский вид изображения Вырезать левый и правый края полукруг

Question

Нужна помощь в разработке собственного представления. Мне нужно разработать такой вид:

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

Ссылались https://github.com/mreram/TicketView, но это не дает эффекта, подобного карточке, нужен вид с обрезанным краем слева и справа в середина и выглядит как карта. Любые идеи по настройке вида изображения, чтобы выглядеть так?

Answer 1

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

Вот как будет выглядеть вывод

Я добился этого с помощью следующего кода.

MyRoundCornerFrame. java

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.View;
import android.widget.FrameLayout;

public class MyRoundCornerFrame extends FrameLayout {
    private final static float CORNER_RADIUS = 30.0f; //card radius chnage accordingly
    private float cornerRadius;

    public MyRoundCornerFrame(Context context) {
        super(context);
        init(context, null, 0);
    }

    public MyRoundCornerFrame(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public MyRoundCornerFrame(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        int count = canvas.save();

        final Path path = new Path();
        path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight()), cornerRadius, cornerRadius, Path.Direction.CW);
        canvas.clipPath(path, Region.Op.INTERSECT);

        canvas.clipPath(path);
        super.dispatchDraw(canvas);
        canvas.restoreToCount(count);
    }
}

My XML файл выглядит следующим образом

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    android:paddingTop="30dp">

    <your.package.name.MyRoundCornerFrame
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="20dp">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/food"
            android:padding="20dp" />

    </your.package.name.MyRoundCornerFrame>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginTop="20dp"
        android:layout_marginBottom="20dp"
        android:background="@drawable/ticket_view"
        android:padding="10dp"
        tools:ignore="ContentDescription" />


</FrameLayout>

для отображения полукругов в центре. Я создал XML с именем ticket_view. xml layer-list, который выглядит ниже

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <corners android:radius="5dp" />
        </shape>
    </item>

    <item
        android:width="50dp"
        android:height="50dp"
        android:gravity="start|center">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />

        </shape>
    </item>

    <item
        android:width="50dp"
        android:height="50dp"
        android:gravity="end|center">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />

        </shape>
    </item>


</layer-list>

Плюсом для этого является то, что вам не нужна никакая библиотека для ее создания.

Надеюсь, это вам как-то поможет, счастливое кодирование