android自定义布局实现优惠券效果

最近须要实现一个凹凸效果的拟物化优惠券效果，我一看，原本想用.9图片作背景实现的，虽然说图片作背景实现省事儿方便，可是能用代码实现最好不过了，最终我仍是选择了用代码来实现，因而有了下文。

最终效果图

demo下载地址

###1.完整代码 先看完整的代码，后面咱们再对代码逐一的解释

public class CouponDisplayView extends RelativeLayout {

    private Paint mPaint;
    private Paint mPaint2;
// 圆间距
    private float gap = 0;
// 半径
    private float radius = 20;
// 圆数量
    private int circleNum;
    private float remain;
    private int color;

    public CouponDisplayView(Context context) {
        super(context);
    }
    public CouponDisplayView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setColor(color);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (remain == 0) {
            remain = (int) (w - gap) % (2 * radius + gap);
        }
        circleNum = (int) ((w - gap) / (2 * radius + gap));

    }
    public CouponDisplayView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < circleNum; i++) {
            float x = gap + radius + remain / 2 + ((gap + radius * 2) * i);
            canvas.drawCircle(x, 0, radius, mPaint);
        }
        mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint2.setDither(true);
        mPaint2.setColor(getResources().getColor(R.color.divider_color_car));
        mPaint2.setStyle(Paint.Style.FILL);

        Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.DKGRAY);
        Path path = new Path();
        path.moveTo(0, getHeight() / 2 + 60);
        path.lineTo(getWidth(), getHeight() / 2 + 60);
        PathEffect effects = new DashPathEffect(new float[]{15, 15, 15, 15}, 2);
        paint.setPathEffect(effects);
        canvas.drawPath(path, paint);
        canvas.drawCircle(0, getHeight() / 2 + 60, radius, mPaint2);
        canvas.drawCircle(getWidth(), getHeight() / 2 + 60, radius, mPaint2);
    }
    public void setColor(int color) {
        this.color = color;
    }
}
复制代码

###2.方法解释 一、CouponDisplayView继承自RelativeLayout，经过打印日志测试已知View的执行顺序以下：

CouponDisplayView(context,attrs,defStyleAttr)
CouponDisplayView(context,attrs)
onSizeChanged()
onDraw()
复制代码

onSizeChanged(int w, int h, int oldw, int oldh) 当view的大小发生变化时触发 onDraw(Canvas canvas) 负责将View绘制在屏幕上 public CouponDisplayView(Context context) Java代码直接new一个CouponDisplayView实例的时候，会调用这个只有一个参数的构造函数 public CouponDisplayView(Context context, AttributeSet attrs) 在默认的XML布局文件中建立的时候调用这个有两个参数的构造函数。AttributeSet类型的参数负责把XML布局文件中所自定义的属性经过AttributeSet带入到View内； public CouponDisplayView(Context context,AttributeSet attrs, int defStyleAttr) 构造函数中第三个参数是默认的Style，这里的默认的Style是指它在当前Application或者Activity所用的Theme中的默认Style，且只有在明确调用的时候才会调用

###3.代码实现思路 从上面的效果图来看，这个自定义View和普通的Linearlayout，RelativeLayout同样，只是上下两边多了相似于半圆锯齿的形状，咱们须要在上下两条线上画一个个白色的小圆来实现这种效果。 假如咱们上下线的半圆以及半圆与半圆之间的间距是固定的，那么不一样尺寸的屏幕确定会画出不一样数量的半圆，那么咱们只须要根据控件的宽度来获取能画的半圆数。 咱们观察效果图会发现，圆的数量老是圆间距数量－1，

也就是说，假设圆的数量是circleNum,那么圆间距就是circleNum+1，因此咱们能够根据这个计算出circleNum： 这里gap就是圆间距，radius是圆半径，w是view的宽

circleNum = (int) ((w-gap)/(2*radius+gap));
复制代码

1 、重写onSizeChanged()方法，根据上面的圆的半径和圆间距来计算须要画的圆数量circleNum

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        if (remain == 0) {
            remain = (int) (w - gap) % (2 * radius + gap);
        }
        circleNum = (int) ((w - gap) / (2 * radius + gap));
    }
复制代码

2.接下来只须要重写onDraw()方法，简单的根据circleNum的数量将一个一个的圆绘制在屏幕上

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
       for (int i = 0; i < circleNum; i++) {
            float x = gap + radius + remain / 2 + ((gap + radius * 2) * i);
            canvas.drawCircle(x, 0, radius, mPaint);
        }
}
复制代码

3.画中间的黑色虚线

Paint paint = new Paint();
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.DKGRAY);
        Path path = new Path();
        path.moveTo(0, getHeight() / 2 + 60);
        path.lineTo(getWidth(), getHeight() / 2 + 60);
        PathEffect effects = new DashPathEffect(new float[]{15, 15, 15, 15}, 2);
        paint.setPathEffect(effects);
        canvas.drawPath(path, paint);
复制代码

4.画两边居中的半圆

mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint2.setDither(true);
        mPaint2.setColor(getResources().getColor(R.color.divider_color_car));
        mPaint2.setStyle(Paint.Style.FILL);
      canvas.drawCircle(0, getHeight() / 2 + 60, radius, mPaint2);
        canvas.drawCircle(getWidth(), getHeight() / 2 + 60, radius, mPaint2);
复制代码

代码分析完毕

###3.设置自定义样式属性

考虑到复用地方不是不少，因此上面的代码没有写自定义样式属性，而是用了public void setColor(int color) {this.color = color;}有须要设置自定义属性的我在这里写一下哈，嘻嘻

一、在res/values/ 下创建一个attr.xml ， 在里面定义咱们的须要用到的属性以及声明相对应属性的取值类型

<?xml version="1.0" encoding="utf-8"?>
<resources>
    //半圆颜色
    <attr name="radiusColor" format="color" />
    <declare-styleable name="CouponDisplayView">
        <attr name="radiusColor" />
    </declare-styleable>

</resources>
复制代码

上面定义的半圆颜色的属性，format属性的取值类型总共有10种,包括：string，color，demension，integer，enum，reference，float，boolean，fraction，flag。

二、而后在XML布局中声明咱们的自定义View

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<--注意：必定要引入xmlns:custom="http://schemas.android.com/apk/res-auto"
custom名字能够自定义-->
    <com.xxx.xxx.CouponDisplayView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FBB039"
        android:orientation="horizontal"
        android:padding="16dp"
        custom:radiusColor="@Color/red">
............
    </com.xxx.xxx.CouponDisplayView>
</LinearLayout>
复制代码

三、在View的构造方法中，得到咱们的xml布局文件中定义的颜色

public CouponDisplayView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        Log.d("mDebug", "CouponDisplayView context,attrs,defStyleAttr");
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CouponDisplayView, defStyleAttr, 0);
        for (int i = 0; i < a.getIndexCount(); i++) {
            int attr = a.getIndex(i);
            switch (attr) {
                case R.styleable.CouponDisplayView_radiusColor:
                    radius = a.getDimensionPixelSize(R.styleable.CouponDisplayView_radiusColor, 10);
                    break;
            }
        }
        a.recycle();
}
复制代码

OK，设置自定义样式属性到此就写完了。