# 2、实现思路

（1）是继承View还是ViewGroup？
（2）边缘怎么来处理？
（3）绘制的时机？

``/** * 计算垂直方向需要画圆或三角形的数量和初始偏移量 * @param gapSize 每个圆形或三角形之间的间距 */private void calculateVerticalCount(float gapSize){    mVerticalCount = (int) ((mHeight - gapSize) / (2 * mRadius + gapSize));    mVerticalInitSize = (int) ((mHeight - (2 * mRadius * mVerticalCount + (mVerticalCount + 1) * gapSize)) / 2);}/** * 计算水平方向上圆或三角形的数量和初始偏移量 * @param gapSize 每个圆形或三角形之间的间距 */private void calculateHorizontalCount(float gapSize) {    mHorizontalCount = (int) ((mWidth - gapSize) / (2 * mRadius + gapSize));    mHorizontalInitSize = (int) ((mWidth - (2 * mRadius * mHorizontalCount + (mHorizontalCount + 1) * gapSize)) / 2);}复制代码``

``@Overrideprotected void dispatchDraw(Canvas canvas) {    super.dispatchDraw(canvas);    if(vertical_style == 1){//如果垂直方向是半圆形        drawVerticalCircle(canvas);    }else if(vertical_style == 2){//垂直方向是三角形        drawVerticalTriangle(canvas);    }    if(horizontal_style == 1){//如果水平方向是半圆形        drawHorizontalCircle(canvas);    }else if(horizontal_style == 2){//如果水平方向是三角形        drawHorizontalTriangle(canvas);    }}/** * 在水平方向上绘制三角形 * @param canvas */private void drawHorizontalTriangle(Canvas canvas) {    //先计算出水平方向上的数量    calculateHorizontalCount(0);    Path path = new Path();    float x = 0;    //绘制上面部分    for(int i = 0; i < mHorizontalCount; i++){        path.reset();        x = mHorizontalInitSize + i * 2 * mRadius;        path.moveTo(x, 0);        x += mRadius;        path.lineTo(x, mRadius);        x += mRadius;        path.lineTo(x, 0);        path.close();        canvas.drawPath(path, mPaint);    }    //绘制下面部分    x = 0;    for(int i = 0; i < mHorizontalCount; i++){        path.reset();        x = mHorizontalInitSize + i * 2 * mRadius;        path.moveTo(x, mHeight);        x += mRadius;        path.lineTo(x, mHeight - mRadius);        x += mRadius;        path.lineTo(x, mHeight);        path.close();        canvas.drawPath(path, mPaint);    }}/** * 在水平方向上绘制圆形 * @param canvas */private void drawHorizontalCircle(Canvas canvas) {    //先计算出水平方向上的数量    calculateHorizontalCount(mGapSize);    float x = mHorizontalInitSize + mGapSize + mRadius;    //先绘制上面部分    for(int i = 0; i < mHorizontalCount; i++){        canvas.drawCircle(x, 0, mRadius, mPaint);        x += 2 * mRadius + mGapSize;    }    //再绘制下面部分    x = mHorizontalInitSize + mGapSize + mRadius;    for(int i = 0; i < mHorizontalCount; i++){        canvas.drawCircle(x, mHeight, mRadius, mPaint);        x += 2 * mRadius + mGapSize;    }}/** * 在垂直方向绘制三角形 * @param canvas */private void drawVerticalTriangle(Canvas canvas) {    //计算一下三角形的数量和初始距离    calculateVerticalCount(0);    Path path = new Path();    float y = 0;    //先画左边    for(int i = 0; i < mVerticalCount; i++){        path.reset();        y = mVerticalInitSize + i * 2 * mRadius;        path.moveTo(0, y);        y += mRadius;        path.lineTo(mRadius, y);        y += mRadius;        path.lineTo(0, y);        path.close();        canvas.drawPath(path, mPaint);    }    //再画右边    y = 0;    for(int i = 0; i < mVerticalCount; i++){        path.reset();        y = mVerticalInitSize + i * 2 * mRadius;        path.moveTo(mWidth, y);        y += mRadius;        path.lineTo(mWidth - mRadius, y);        y += mRadius;        path.lineTo(mWidth, y);        path.close();        canvas.drawPath(path, mPaint);    }}/** * 在垂直方向绘制半圆形 * @param canvas */private void drawVerticalCircle(Canvas canvas) {    //计算一下圆形的数量和初始偏移距离    calculateVerticalCount(mGapSize);    //这次使用画弧来绘制出圆形    RectF rectF = new RectF();    //先画左边    for(int i = 0; i < mVerticalCount; i++){        rectF.left = -mRadius;        rectF.top = mVerticalInitSize + mGapSize * (i + 1) + i * 2 * mRadius;        rectF.right =  mRadius;        rectF.bottom = rectF.top + 2 * mRadius;        canvas.drawArc(rectF, -90, 180, false, mPaint);    }    //再画右边    for(int i = 0; i < mVerticalCount; i++){        rectF.left = mWidth - mRadius;        rectF.top = mVerticalInitSize + mGapSize * (i + 1) + i * 2 * mRadius;        rectF.right = rectF.left + 2 * mRadius;        rectF.bottom = rectF.top + 2 * mRadius;        canvas.drawArc(rectF, 90, 180, false, mPaint);    }}复制代码``

# 3、使用方法

``<declare-styleable name="CouponStyle">    <attr name="vertical_style">        <enum name="none" value="0"/>        <enum name="circle" value="1" />        <enum name="triangle" value="2"/>    </attr>    <attr name="horizontal_style">        <enum name="none" value="0"/>        <enum name="circle" value="1" />        <enum name="triangle" value="2"/>    </attr></declare-styleable>复制代码``

``<com.scu.lly.couponbgdemo.view.CouponBgView    android:layout_width="match_parent"    android:layout_height="200dp"    android:layout_marginLeft="20dp"    android:layout_marginRight="20dp"    android:orientation="horizontal"    android:background="#47BDBD"    android:gravity="center_vertical"    coupon:horizontal_style="circle" <!-- 指定水平方向边缘的类型 -->    coupon:vertical_style="triangle">    <LinearLayout        android:layout_width="0dp"        android:layout_weight="1"        android:layout_height="match_parent"        android:padding="30dp"        android:orientation="vertical">        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/white"            android:textSize="18sp"            android:text="顺旺基优惠券"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="#FC4A36"            android:layout_marginTop="15dp"            android:textSize="16sp"            android:text="全场五折优惠"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/white"            android:layout_marginTop="15dp"            android:textSize="15sp"            android:text="券编号：2016070920160720"/>        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textColor="@color/white"            android:layout_marginTop="15dp"            android:textSize="15sp"            android:text="有效期：2016-07-09至2016-07-20"/>    </LinearLayout>    <ImageView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginRight="20dp"        android:src="@mipmap/iv_coupon"        android:layout_gravity="center"/></com.scu.lly.couponbgdemo.view.CouponBgView>复制代码``