自定义优惠券

最近做项目的时候，加入优惠券模块，效果图如下：

下面简单的说下实现过程。

• 首先是自定义了一个控件CouponView，该控件继承了LinearLayout，该控件有如下几个自定义属性：

<declare-styleable name="CouponView">
        <attr name="radius" format="dimension"/>
        <attr name="sawtooth_color" format="color"/>
        <attr name="background_color" format="color"/>
        <attr name="sawtooth_width_gap" format="dimension"/>
        <attr name="sawtooth_weight" format="float"/>
    </declare-styleable>

其中radius表示的是右边那列小锯齿的半径大小，sawtooth_color表示左边的锯齿部分的背景颜色，background_color表示整体的背景颜色，sawtooth_width_gap表示锯齿之间的间隙大小，sawtooth_weight表示左边含有锯齿部分的宽度占整个布局的宽度比例。

• 接下来在CouponView中获取到这些属性：

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CouponView);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {

            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.CouponView_radius:
                    mRRadius = a.getDimension(attr, 10);
                    break;
                case R.styleable.CouponView_sawtooth_color:
                    mSawtoothColor = a.getColor(attr, 0);
                    break;
                case R.styleable.CouponView_sawtooth_width_gap:
                    mRCircleGap = a.getDimension(attr, 8);
                    break;
                case R.styleable.CouponView_sawtooth_weight:
                    mSawtoothWeight = a.getFloat(attr, 0.65f);
                    break;
                case R.styleable.CouponView_background_color:
                    mBackgroundColor = a.getColor(attr, 0);
            }
        }
        a.recycle();

获取参数这个没什么好说的，获取完参数之后别忘了初始化Paint，还有千万别漏了setWillNotDraw(false)，如果不设置该属性为false，onDraw有可能不会被调用到：

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.FILL);
        //别忘了将该属性设置为false
        setWillNotDraw(false);

• 接着根据既有数值算出锯齿的个数及剩余空间：

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if(changed) {
            //计算剩余空间
            if (mRRemain == 0) {
                mRRemain = (int) (b - t - mRCircleGap - getPaddingTop() - getPaddingBottom()) % (2 * mRRadius + mRCircleGap);
            }
            //计算锯齿半圆个数
            mRCircleNum = (int) ((b - t - mRCircleGap - getPaddingTop() - getPaddingBottom()) / (2 * mRRadius + mRCircleGap));
        }
    }

这里的剩余空间是指根据指定的半径大小画了mRCircleNum个 半圆后还剩余的高度，用于指定画半圆的开始的位置。

• 接下来就是draw的过程了：

 float width = getWidth() - getPaddingLeft() - getPaddingRight();
        float height = getHeight() - getPaddingTop() - getPaddingBottom();
        mPaint.setColor(mSawtoothColor);
        //画锯齿背景
        canvas.drawRect(getPaddingLeft(), getPaddingTop(), getPaddingLeft() + (width * mSawtoothWeight), getPaddingTop() + height, mPaint);

        mPaint.setColor(mBackgroundColor);
        //画锯齿部分
        for (int i = 0; i < mRCircleNum; i++) {
            float y = mRCircleGap + mRRadius + mRRemain / 2 + ((mRCircleGap + mRRadius * 2) * i) + getPaddingTop();
            canvas.drawCircle(getPaddingLeft() + width * mSawtoothWeight, y, mRRadius, mPaint);
        }
        //画右边剩余部分
        canvas.drawRect(getPaddingLeft() + width * mSawtoothWeight, getPaddingTop(), width + getPaddingLeft(), height + getPaddingTop(), mPaint);
mPaint);
        //画左边的大的半圆
        mOval.set(getPaddingLeft() - mLRadius,
                getPaddingTop() + (height - 2 * mLRadius) / 2,
                getPaddingLeft() + mLRadius,
                getPaddingTop() + (height - 2 * mLRadius) / 2 + 2 * mLRadius);
        canvas.drawArc(mOval, -90, 180, true, mPaint);

这里需要说明的是画左边的半圆用的是drawArc而不是drawCircle，因为drawCircle会画出整个圆，所以这里通过计算弧度来画半圆。其余的都比较简单，不用多说。

• 最后在布局文件中使用就行了：

<com.example.coupondemo.view.CouponView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:coupon="http://schemas.android.com/apk/res-auto"
    coupon:background_color="@android:color/white"
    coupon:sawtooth_color="@color/coupon_sawtooth_bg_color"
    coupon:sawtooth_weight="0.7"
    android:layout_width="match_parent"
    android:layout_height="120dp"
    android:paddingLeft="30dp"
    android:paddingRight="30dp"
    android:orientation="horizontal">

代码就这么多，基本实现了该效果。

附上代码：
CouponDemo