自定义邮票锯齿背景效果

自定义邮票锯齿边框效果实现

最新推荐文章于 2025-09-09 00:15:00 发布

原创

最新推荐文章于 2025-09-09 00:15:00 发布 · 865 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何创建邮票风格的背景效果，包括半圆锯齿边缘和虚线内边框。通过自定义属性和布局，详细解释了实现这种效果的步骤，并提供了一个项目地址供参考。

简介

最近项目中有一个需求，需要做一个类似于邮票那样的背景效果，它主要是由半圆锯齿和虚线边框结合而成。

效果图：

效果图

我用到的效果是上面图中的第一种，四周边缘是半圆锯齿，内部是虚线边框。当然，具体效果可以根据自定义属性自己定制。

使用

1、在attr.xml中定义属性

<declare-styleable name="StampView">
    <!-- 半圆之间间距 -->
    <attr name="sv_semicircle_gap" format="dimension|reference" />
    <!-- 半圆半径 -->
    <attr name="sv_semicircle_radius" format="dimension|reference" />
    <!-- 半圆颜色 -->
    <attr name="sv_semicircle_color" format="color|reference" />
    <!-- 半圆覆盖线宽 -->
    <attr name="sv_semicircle_cover_stroke_width" format="dimension|reference" />
    <!-- 半圆覆盖颜色 -->
    <attr name="sv_semicircle_cover_color" format="color|reference" />
    <!-- 开启顶部半圆曲线 -->
    <attr name="sv_semicircle_top" format="boolean|reference" />
    <!-- 开启底部半圆曲线 -->
    <attr name="sv_semicircle_bottom" format="boolean|reference" />
    <!-- 开启左边半圆曲线 -->
    <attr name="sv_semicircle_left" format="boolean|reference" />
    <!-- 开启右边半圆曲线 -->
    <attr name="sv_semicircle_right" format="boolean|reference" />
    <!-- 虚线的长度 -->
    <attr name="sv_dash_line_length" format="dimension|reference" />
    <!-- 虚线的间距 -->
    <attr name="sv_dash_line_gap" format="dimension|reference" />
    <!-- 虚线的高度 -->
    <attr name="sv_dash_line_height" format="dimension|reference" />
    <!-- 虚线的颜色 -->
    <attr name="sv_dash_line_color" format="color|reference" />
    <!-- 顶部虚线距离View顶部的距离 -->
    <attr name="sv_dash_line_top" format="boolean|reference" />
    <!-- 底部虚线距离View底部的距离 -->
    <attr name="sv_dash_line_bottom" format="boolean|reference" />
    <!-- 左侧虚线距离View左侧的距离 -->
    <attr name="sv_dash_line_left" format="boolean|reference" />
    <!-- 右侧虚线距离View右侧的距离 -->
    <attr name="sv_dash_line_right" format="boolean|reference" />
    <!-- 开启顶部虚线 -->
    <attr name="sv_dash_line_margin_top" format="dimension|reference" />
    <!-- 开启底部虚线 -->
    <attr name="sv_dash_line_margin_bottom" format="dimension|reference" />
    <!-- 开启左边虚线 -->
    <attr name="sv_dash_line_margin_left" format="dimension|reference" />
    <!-- 开启左边虚线 -->
    <attr name="sv_dash_line_margin_right" format