1.前言

          最近在有的团购APP上见到有的订单会使用卡券的效果，其实要实现这种卡券效果无外乎两种方式，第一种是使用现成的图片做背景，第二种是自定义View来实现。由于自己觉得用现成的图片来做会导致在适配的过程中出现问题，所以用自定义View的方式来实现是一个比较理想的办法。

        

2.实现分析

       实现的效果图就跟上面的图片一样，其实上面的图片跟我们常用的布局LinearLayout，RelativeLayout是一样的，只不过上下两个边界多了半圆形的锯齿状的样子，那么要做成类似的效果只需要在上下两个边界处画上一个个白色的半圆即可。 假设边界处半圆与半圆之间的距离是固定不变的，那么由于不同尺寸的屏幕导致优惠券的长不同，必然就会画出不同数量的半圆，我们则需要根据优惠券不同的长度来获取需要画出半圆的个数。 观察上面的图可知，如果我们把一个半圆和一个圆间距画为一组，会发现圆间距的数量总是比半圆的数量多一个，也就是说如果半圆的数量为CircleNum，那么圆间距的数量为CircleNum+1。 所以我们设优惠券的长度为w，圆间距为gap，圆半径为radius 2*radius*CircleNum+gap*(CircleNum+1)=w 化简可以得出 CircleNum=(int)((w-gap)/(2*radius+gap))

3.具体的实现

上面的代码定义了圆的半径和圆间距，同时在构造函数中初始化了这些值 通过重写onDraw方法将圆一个个的画出      在布局文件中还需要这样使用

4.总结

该程序的关键在于一个自定义View组件，在程序中需要重写该View组件的onDraw方法，通过计算出圆的数量在该Canvas上绘制圆。 源代码地址为：https://github.com/ChuPeng1013/CouponsView