介紹

最近項(xiàng)目中剛好需要做優(yōu)惠券效果，其他的都不難，關(guān)鍵在一個(gè)半圓鋸齒和虛線邊框的繪制，當(dāng)然可以使用png圖片作為背景來(lái)實(shí)現(xiàn)，這樣很簡(jiǎn)單，但這樣做會(huì)拉低整個(gè)App的檔次，效果不好，修改也麻煩，之前看過(guò)網(wǎng)上有人用代碼實(shí)現(xiàn)了這個(gè)效果，看了下原理，但始終用起來(lái)問(wèn)題比較多，使用不靈活，自己就稍微總結(jié)了下，整理一個(gè)可以簡(jiǎn)單自定義效果的庫(kù)，可以先看看效果圖

preview.png

我自己遇到的場(chǎng)景是第三種，上面是鋸齒，其他三側(cè)均為虛線，當(dāng)然，還有更多的可以自定義選項(xiàng)，稍后介紹。

項(xiàng)目導(dǎo)入

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

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

然后在當(dāng)前模塊的build.gradle添加依賴

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

自定義屬性說(shuō)明

使用

<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沒(méi)有區(qū)別

可以通過(guò)CouponViewHelper這個(gè)代理類來(lái)給其他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

更多自定義屬性可以通過(guò)我的Demo體驗(yàn)

customCoupon.png

動(dòng)態(tài)效果

coupnView_gif1.gif

coupnView_gif2.gif

coupnView_gif3.gif

下載demo：CouponView
github地址：CouponView

如果覺(jué)得喜歡，給個(gè)star或者fork支持下
歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)保留原文出處

參考資料：

• Android 自定義優(yōu)惠券布局