介绍

最近项目中刚好需要做优惠券效果，其他的都好说，关键在一个半圆锯齿和虚线边框的绘制，当然可以使用png图片作为背景来实现，这样很简单，但这样做会拉低整个App的档次，效果不好，修改也麻烦，之前看过网上有人用代码实现了这个效果，看了下原理，但始终用起来问题比较多，使用不灵活，自己就稍微总结了下，整理一个可以简单自定义效果的库，可以先看看效果图

我自己遇到的场景是第三种，上面是锯齿，其他三侧均为虚线，当然，还有更多的可以自定义选项，稍后介绍。

CouponView

项目导入

在android工程根目录的build.gradle添加

allprojects {
    repositories {
        ...
        maven { url "https://jitpack.io" }
    }
}

然后在当前模块的build.gradle添加依赖

dependencies {
	    compile 'com.github.dongjunkun:CouponView:1.0.4'
	}

自定义属性说明

自定义属性	格式	说明
cv_dash_line_color	color	虚线的颜色
cv_dash_line_gap	dimension	虚线的间隔
cv_dash_line_height	dimension	虚线的高度
cv_dash_line_length	dimension	虚线的长度
cv_semicircle_color	color	半圆的颜色，一般需要和背景色一致
cv_semicircle_gap	dimension	半圆之前的间隔
cv_semicircle_radius	dimension	半圆的半径
cv_is_semicircle_top	boolean	是否绘制顶部半圆锯齿
cv_is_semicircle_bottom	boolean	是否绘制底部半圆锯齿
cv_is_semicircle_left	boolean	是否绘制左侧半圆锯齿
cv_is_semicircle_right	boolean	是否绘制右侧半圆锯齿
cv_is_dash_line_top	boolean	是否绘制顶部虚线
cv_is_dash_line_bottom	boolean	是否绘制底部虚线
cv_is_dash_line_left	boolean	是否绘制左侧虚线
cv_is_dash_line_right	boolean	是否绘制右侧虚线
cv_dash_line_margin_top	dimension	顶部虚线距离View顶部的距离
cv_dash_line_margin_bottom	dimension	底部虚线距离View底部的距离
cv_dash_line_margin_left	dimension	左侧虚线距离View左侧的距离
cv_dash_line_margin_right	dimension	右侧虚线距离View右侧的距离

使用

添加到你的xml

<yyydjk.com.library.CouponView
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/couponView"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/colorAccent"
    android:orientation="vertical"
    android:padding="10dp"
    app:cv_dash_line_color="@android:color/white"
    app:cv_dash_line_gap="5dp"
    app:cv_dash_line_height="0.8dp"
    app:cv_dash_line_length="10dp"
    app:cv_dash_line_margin_bottom="5dp"
    app:cv_dash_line_margin_left="5dp"
    app:cv_dash_line_margin_right="5dp"
    app:cv_dash_line_margin_top="8dp"
    app:cv_is_dash_line_bottom="true"
    app:cv_is_dash_line_left="true"
    app:cv_is_dash_line_right="true"
    app:cv_is_dash_line_top="false"
    app:cv_is_semicircle_bottom="false"
    app:cv_is_semicircle_left="false"
    app:cv_is_semicircle_right="false"
    app:cv_is_semicircle_top="true"
    app:cv_semicircle_color="@android:color/white"
    app:cv_semicircle_gap="4dp"
    app:cv_semicircle_radius="4dp">
</yyydjk.com.library.CouponView>

或者使用代码动态设置

定制自己的View

可以通过CouponViewHelper这个代理类来给其他View（比如LinearLayout,ImageView,TextView）添加锯齿背景，只需要继承其他View然后添加以下代码就可以，完整代码参考CouponView

public class CustomView extends YourView{

    private CouponViewHelper helper;

    public CustomView(Context context) {
        this(context, null);
    }

    public CustomView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        helper = new CouponViewHelper(this, context, attrs, defStyle);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        helper.onSizeChanged(w, h);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        helper.onDraw(canvas);
    }

    public float getSemicircleGap() {
        return helper.getSemicircleGap();
    }

    public void setSemicircleGap(float semicircleGap) {
        helper.setSemicircleGap(semicircleGap);
    }

    public float getSemicircleRadius() {
        return helper.getSemicircleRadius();
    }

    public void setSemicircleRadius(float semicircleRadius) {
        helper.setSemicircleRadius(semicircleRadius);
    }

   ......
}

比如继承ImageView

 <yyydjk.com.couponview.widget.CouponImageView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/couponView"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:orientation="vertical"
        android:src="@mipmap/image"
        android:scaleType="centerCrop"
        app:cv_dash_line_color="@android:color/white"
        app:cv_dash_line_gap="5dp"
        app:cv_dash_line_height="2dp"
        app:cv_dash_line_length="10dp"
        app:cv_is_dash_line_bottom="false"
        app:cv_is_semicircle_bottom="true"
        app:cv_is_dash_line_left="true"
        app:cv_is_semicircle_left="false"
        app:cv_is_dash_line_right="true"
        app:cv_is_semicircle_right="false"
        app:cv_is_dash_line_top="false"
        app:cv_is_semicircle_top="true"
        app:cv_semicircle_color="@android:color/white"
        app:cv_semicircle_gap="8dp"
        app:cv_semicircle_radius="6dp"/>

效果图如下

更多自定义属性可以通过我的Demo体验

下载demo：CouponView

打赏鼓励

如果你觉得我的项目对你有帮助，请扫描下方的二维码随意打赏，您的支持是我最好的动力!

Licence

Copyright 2016 dongjunkun

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.