自己造轮子--Android一个锯齿背景优惠券效果库-CouponView

先看看效果图

preview.png

 

项目导入

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

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

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

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

自定义属性说明

自定义属性格式说明
cv_dash_line_colorcolor虚线的颜色
cv_dash_line_gapdimension虚线的间隔
cv_dash_line_heightdimension虚线的高度
cv_dash_line_lengthdimension虚线的长度
cv_semicircle_colorcolor半圆的颜色,一般需要和背景色一致
cv_semicircle_gapdimension半圆之前的间隔
cv_semicircle_radiusdimension半圆的半径
cv_is_top_semicircleboolean是否绘制顶部半圆锯齿
cv_is_bottom_semicircleboolean是否绘制底部半圆锯齿
cv_is_left_semicircleboolean是否绘制左侧半圆锯齿
cv_is_right_semicircleboolean是否绘制右侧半圆锯齿
cv_is_top_dash_lineboolean是否绘制顶部虚线
cv_is_bottom_dash_lineboolean是否绘制底部虚线
cv_is_left_dash_lineboolean是否绘制左侧虚线
cv_is_right_dash_lineboolean是否绘制右侧虚线
cv_top_dash_line_margindimension顶部虚线距离View顶部的距离
cv_bottom_dash_line_margindimension底部虚线距离View底部的距离
cv_left_dash_line_margindimension左侧虚线距离View左侧的距离
cv_right_dash_line_margindimension右侧虚线距离View右侧的距离

使用

<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="2dp"
    app:cv_dash_line_length="10dp"
    app:cv_is_bottom_dash_line="true"
    app:cv_is_bottom_semicircle="false"
    app:cv_is_left_dash_line="true"
    app:cv_is_left_semicircle="false"
    app:cv_is_right_dash_line="true"
    app:cv_is_right_semicircle="false"
    app:cv_is_top_dash_line="true"
    app:cv_is_top_semicircle="false"
    app:cv_semicircle_color="@android:color/white"
    app:cv_semicircle_gap="8dp"
    app:cv_semicircle_radius="4dp">
</yyydjk.com.library.CouponView>

定制自己的View

CouponView是继承于FrameLayout,除了边缘锯齿和虚线边框外,和普通的FrameLayout没有区别

可以通过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_bottom_dash_line="false"
        app:cv_is_bottom_semicircle="true"
        app:cv_is_left_dash_line="true"
        app:cv_is_left_semicircle="false"
        app:cv_is_right_dash_line="true"
        app:cv_is_right_semicircle="false"
        app:cv_is_top_dash_line="false"
        app:cv_is_top_semicircle="true"
        app:cv_semicircle_color="@android:color/white"
        app:cv_semicircle_gap="8dp"
        app:cv_semicircle_radius="6dp"/>

效果图如下

Paste_Image.png

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

 customCoupon.png

动态效果

 coupnView_gif1.gif  coupnView_gif2.gif coupnView_gif3.gif

下载demo:CouponView
github地址:CouponView

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值