android之卡卷效果背景

介紹

最近項目中剛好需要做優惠券效果,其他的都不難,關鍵在一個半圓鋸齒和虛線邊框的繪製,當然可以使用png圖片作爲背景來實現,這樣很簡單,但這樣做會拉低整個App的檔次,效果不好,修改也麻煩,之前看過網上有人用代碼實現了這個效果,看了下原理,但始終用起來問題比較多,使用不靈活,自己就稍微總結了下,整理一個可以簡單自定義效果的庫,可以先看看效果圖

Picture

我自己遇到的場景是第三種,上面是鋸齒,其他三側均爲虛線,當然,還有更多的可以自定義選項,稍後介紹。

項目導入

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

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

然後在當前模塊的build.gradle添加依賴

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

自定義屬性說明

自定義屬性|格式|說明

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_top_semicircle boolean 是否繪製頂部半圓鋸齒
cv_is_bottom_semicircle boolean 是否繪製底部半圓鋸齒
cv_is_left_semicircle boolean 是否繪製左側半圓鋸齒
cv_is_right_semicircle boolean 是否繪製右側半圓鋸齒
cv_is_top_dash_line boolean 是否繪製頂部虛線
cv_is_bottom_dash_line boolean 是否繪製底部虛線
cv_is_left_dash_line boolean 是否繪製左側虛線
cv_is_right_dash_line boolean 是否繪製右側虛線
cv_top_dash_line_margin dimension 頂部虛線距離View頂部的距離
cv_bottom_dash_line_margin dimension 底部虛線距離View底部的距離
cv_left_dash_line_margin dimension 左側虛線距離View左側的距離
cv_right_dash_line_margin dimension 右側虛線距離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然後添加以下代碼就可以,完整代碼參考https://github.com/dongjunkun/CouponView 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"/>

效果圖如下

Picture

更多自定義屬性可以通過我的Demo體驗

Picture

動態效果

Picture

Picture

Picture

Demo下載

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章