安卓自定義控件卡券CouponView

package com.example.couponview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.widget.RelativeLayout;
/**
 * 卡券控件
 * @author wbl
 *
 */
public class CouponView extends RelativeLayout{

	private Paint mPaint;
	//邊緣小半圓的半徑
	private float radius = 20;
	//小半圓之間的間距
	private float spacing = 20;
	//左右邊距
	private float paddingLeft;
	private float paddingRight;
	//半圓的個數
	private int numCircle;
	//控件的高寬度
	private int height;
	private int width;

	private float remain;

	public CouponView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
//		initView(context);
	}

	public CouponView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView(context,attrs);
	}

	public CouponView(Context context) {
		super(context);
//		initView(context);
	}

	private void initView(Context context,AttributeSet attrs) {
		mPaint = new Paint();
		mPaint.setAntiAlias(true);
		mPaint.setColor(Color.WHITE);
		
		TypedArray ta = context.obtainStyledAttributes(attrs,R.styleable.CouponView);
		float radius = ta.getDimension(R.styleable.CouponView_radius,20);
		float spacing = ta.getDimension(R.styleable.CouponView_spacing, 20);
		setRadius(radius);
		setSpacing(spacing);
		
		ta.recycle();
		
		paddingLeft = paddingRight = spacing;
	}

	
	private void setSpacing(float spacing) {
		this.spacing = spacing;
	}

	private void setRadius(float radius) {
		this.radius = radius;
	}


	
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		System.out.println("這裡");
		// getWidth在OnCreat的時候得到的是0. 當一個view對象建立時，android并不知道其大小，是以getWidth()和   getHeight()傳回的結果是0，真正大小是在計算布局時才會計算.
		width = this.getWidth();
		height = this.getHeight();
		//圓的數量始終比邊距數量少一個，是以總長度減去左邊距除以2*radius+spacing的值就是圓的數量
		numCircle = (int) ((width-paddingLeft)/(2*radius+spacing));
		//除以所有圓和邊距的所餘下的長度
		remain = ((width-paddingLeft)%(2*radius+spacing));
		System.out.println("圓的個數=="+numCircle);
		System.out.println("remain=="+remain);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
        //remain/2保證左右兩邊邊距一樣
		float cx = (paddingLeft+radius+remain/2);
		for(int i=0;i<numCircle;i++){
			canvas.drawCircle(cx, 0, radius, mPaint);
			canvas.drawCircle(cx, height, radius, mPaint);
			cx = (int) (cx+(2*radius+spacing));
		}
	}



}
           

在values目錄下建立attrs.xml檔案

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CouponView">
        <attr name="radius" format="dimension"/>
        <attr name="spacing" format="dimension"/>      
    </declare-styleable>
</resources>
           

下面是布局檔案

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:wbl="http://schemas.android.com/apk/res/com.example.couponview"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:background="@color/white"
    android:paddingTop="20dp"
     >

    <com.example.couponview.CouponView
        android:layout_width="280dp"
        android:layout_height="100dp"
        android:background="@color/blue"
        wbl:radius="10dp"
        wbl:spacing="10dp"
        android:gravity="center" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="卡劵"
            android:textColor="@color/white"
            android:textSize="30dp" />
    </com.example.couponview.CouponView>

</RelativeLayout>
           

以下是運作結果