自定義view————卡券

madreain發表於2017-08-15
View

最近修改公司商城專案，需要加入優惠券／卡券，今天就給大家帶來自定義view————卡券，效果圖如下

效果圖
效果圖

分析一下過程：因為除了背景以外，裡面還要放其他的控制元件，這裡採取繼承RelativeLayout去畫鋸齒背景，雖然也可以繼承LinearLayout，但是考慮到佈局的巢狀問題還是最終選取了RelativeLayout，然後根據寬度計算出能放多少個圓，然後剩餘多少寬度，然後兩邊對半分

計算圓數量

view的寬度=圓+間距+多餘寬度，因此我們先寫固定的圓半徑、圓與圓之間的間距、然後計算出能放多少個圓

        //圓半徑
        int radius = 10;
        //圓間距
        int gap = 8;
        //圓數量
        int circleNum;


        @Override
        protected void onSizeChanged(int w, int h, int oldw, int oldh) {
            super.onSizeChanged(w, h, oldw, oldh);
            //計算圓的數量
            circleNum = (w - gap) / (radius * 2 + gap);
        }複製程式碼

但是又考慮到平分的時候寬度還有剩餘的，為了視覺更佳，將剩餘寬度一分為二放首尾

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        remain = ((w - gap) % (radius * 2 + gap)) / 2;
        circleNum = (w - gap) / (radius * 2 + gap);
        mheight = h;
    }複製程式碼

畫鋸齒背景

計算出view的寬度和高度，根據計算的圓數量進行迴圈畫圓，y軸分別為0，mheight

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0; i < circleNum; i++) {
            float x = gap + radius + remain + ((gap + radius * 2) * i);
            canvas.drawCircle(x, 0, radius, mPaint);
            canvas.drawCircle(x, mheight, radius, mPaint);
        }
    }複製程式碼

大致效果已經出來了，現在將自定義屬性寫成xml中可自定義的

屬性設定

attrs.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CardView">
        <attr name="cirlceColor" format="color"/>
        <attr name="radius" format="integer"/>
        <attr name="gap" format="integer"/>
    </declare-styleable>
</resources>複製程式碼

自定義view中獲取屬性進行設定

    private void initTypeArray(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CardView);
        cirlceColor = typedArray.getColor(R.styleable.CardView_cirlceColor, Color.WHITE);
        radius = typedArray.getInteger(R.styleable.CardView_radius, 10);
        gap = typedArray.getInteger(R.styleable.CardView_gap, 8);
        typedArray.recycle();
    }複製程式碼

xml中應用

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white"
    tools:context="com.cardview.MainActivity">

    <com.cardview.CardView
        android:layout_width="320dp"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:background="@color/colorAccent"
        app:cirlceColor="@android:color/white"
        app:gap="10"
        app:radius="20">

        <ImageView
            android:id="@+id/img"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_centerVertical="true"
            android:layout_marginLeft="20dp"
            android:layout_marginStart="20dp"
            android:background="@mipmap/ic_launcher_round"
            android:contentDescription="@null" />

        <TextView
            android:id="@+id/txt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toEndOf="@+id/img"
            android:layout_toRightOf="@+id/img"
            android:padding="20dp"
            android:text="優惠券"
            android:textSize="36sp" />

        <TextView
            android:id="@+id/txt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txt1"
            android:layout_toEndOf="@+id/img"
            android:layout_toRightOf="@+id/img"
            android:padding="10dp"
            android:text="編號：1234567890"
            android:textSize="16sp" />

        <TextView
            android:id="@+id/txt3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/txt2"
            android:layout_toEndOf="@+id/img"
            android:layout_toRightOf="@+id/img"
            android:padding="10dp"
            android:text="日期：2017年8月25日"
            android:textSize="16sp" />


    </com.cardview.CardView>

</RelativeLayout>複製程式碼

然後效果圖就是上面的了

CardView github demo

相關文章