介绍
最近项目中刚好需要做优惠券效果，其他的都好说，关键在一个半圆锯齿和虚线边框的绘制，当然可以使用png图片作为背景来实现，这样很简单，但这样做会拉低整个App的档次，效果不好，修改也麻烦，之前看过网上有人用代码实现了这个效果，看了下原理，但始终用起来问题比较多，使用不灵活，自己就稍微总结了下，整理一个可以简单自定义效果的库，可以先看看效果图
我自己遇到的场景是第三种，上面是锯齿，其他三侧均为虚线，当然，还有更多的可以自定义选项，稍后介绍。
CouponView
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.