自定义图像视图切割左右边缘半圆形

Posted

技术标签:

【中文标题】自定义图像视图切割左右边缘半圆形【英文标题】:Custom Image View Cut Left and Right Edges Semi Circle 【发布时间】:2020-02-13 15:24:59 【问题描述】:

在开发自定义视图方面需要帮助。这是我需要发展的那种观点:

试过一个办法,但它看起来不像卡片,它的曲线和卡片可以在背景中看到。在切割的左右边缘需要透明的东西。

参考了https://github.com/mreram/TicketView,但这并没有像卡片一样的效果,需要一个在中间左右切边的视图,看起来像一张卡片。关于自定义图像视图看起来像这样的任何想法?

【问题讨论】:

我猜你可以在 porterduff 模式下使用掩码 查看“medium.com/@iamsadesh/…” 你为什么不用 XML drawables 来做呢 【参考方案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);
    

我的 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_
    android:layout_
    android:background="@android:color/white"
    android:paddingTop="30dp">

    <your.package.name.MyRoundCornerFrame
        android:id="@+id/card_view"
        android:layout_
        android:layout_
        android:layout_margin="20dp">

        <ImageView
            android:layout_
            android:layout_
            android:background="@drawable/food"
            android:padding="20dp" />

    </your.package.name.MyRoundCornerFrame>

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


</FrameLayout>

为了在中心显示半圆,我创建了一个名为 ticket_view.xml 层列表的 XML,如下所示

<?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:
        android:
        android:gravity="start|center">
        <shape android:shape="oval">
            <solid android:color="@android:color/white" />

        </shape>
    </item>

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

        </shape>
    </item>


</layer-list>

这样做的一个优点是您不需要任何库来创建它。

我希望这会对你有所帮助,祝你编码愉快

【讨论】:

以上是关于自定义图像视图切割左右边缘半圆形的主要内容,如果未能解决你的问题,请参考以下文章

如何在半圆自定义视图上包装内容?

UILabel 在圆形自定义 UIView 中不可见

如何在颤动中创建具有圆形边缘的自定义容器?

无法在 UI 表格视图自定义单元格中插入分隔符

android - 自定义圆形 imageView 得到错误膨胀

圆形自定义按钮的活动区域较小