【Android 进阶】Android自定义系列：边缘凹凸的卡劵效果

最新推荐文章于 2024-05-13 09:49:35 发布

吴威龙

最新推荐文章于 2024-05-13 09:49:35 发布

阅读量749

点赞数 1

分类专栏： Android 之旅

本文链接：https://blog.csdn.net/leaf_130/article/details/56015737

版权

本文介绍了如何在Android中实现边缘凹凸的优惠券效果，通过自定义LinearLayout子类CouponView并在onDraw()方法中绘制小圆来达成。根据控件宽度动态计算画圆的数量，确保不同屏幕尺寸下效果一致。同时提供了布局文件的使用示例和源码链接。

摘要由CSDN通过智能技术生成

所谓前人栽树，后人乘凉，在此感谢博主的贡献。
原文：边缘凹凸的卡劵效果

先上效果图：

这里写图片描述

我实现的效果和原博主实现的效果是不一样的，我是左右边缘凹凸，而博主是上下边缘凹凸。其实理解了原理，哪个边缘实现这个效果都是可以的。

实现原理：

直接在view边缘上画一个个白色的小圆来实现这种效果，这个view：CouponView
可以让它继承LinearLayout，通过重写onDraw()方法实现重新绘制的效果。最后在布局文件中使用该自定义CouponView即可。

画圆的个数如何确定：

（这是原博主的经验，总结的的确很好）

假如我们上下线的半圆以及半圆与半圆之间的间距是固定的，那么不同尺寸的屏幕肯定会画出不同数量的半圆，那么我们只需要根据控件的宽度来获取能画的半圆数。
大家观察图片，很容易发现，圆的数量总是圆间距数量－1，也就是，假设圆的数量是circleNum,那么圆间距就是circleNum+1。
所以我们可以根据这个计算出
circleNum. circleNum = (int) ((w-gap)/(2*radius+gap));
这里gap就是圆间距，radius是圆半径，w是view的宽。

自定义LinearLayout：CouponView

/**
 * Created by Veyron on 2017/2/20.
 * Function：自定义实现边缘凹凸卡卷效果
 */

public class CouponView extends LinearLayout {
   

    private Paint mPaint;       //画笔
    private float gap = 8;      //圆间距  
    private float radius = 10;  //半径    
    private int circleNum;      //圆数量
    private float remain;
    private float width;