http://www.voidcn.com/blog/chudaijiang/article/p-6117445.html

README.md

Introduction

Make a lace edge layout as like a coupon ticket layout.

attrs.xml

We can have kind of attrbutes.

• reference
• string
• color
• boolean
• dimension
• float
• integer
• fraction
• enum
• flag

For example:

<declare-styleable name="PercentView">
    <attr name="percent_circle_gravity">
        <flag name="left" value="0" />
        <flag name="top" value="1" />
        <flag name="center" value="2" />
        <flag name="right" value="3" />
        <flag name="bottom" value="4" />
    </attr>
    <attr name="percent_circle_radius" format="dimension" />
    <attr name="percent_circle_progress" format="integer" />
    <attr name="percent_progress_color" format="color" />
    <attr name="percent_background_color" format="color" />
</declare-styleable>

attrs.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>
    <declare-styleable name="LaceEdgeLayout">
        <attr name="circleColor" format="color"/>
        <attr name="gap" format="float"/>
        <attr name="radius" format="float"/>
    </declare-styleable>
</resources>

laceEdgeLayout.java

public class LaceEdgeLayout extends LinearLayout {
    private Paint mPaint;
    // Paint's color.
    private int color = Color.WHITE;
    // The distance between a half circle and a half circle.
    private float gap = 8;
    // Circle's radius.
    private float radius = 10;
    // The total number of circles on edge.
    private int circleNum;
    private float circleRemain;

    // Normal custom attribute setting. Three constructors.
    public LaceEdgeLayout(Context context) {
        this(context, null, 0);
    }

    public LaceEdgeLayout(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LaceEdgeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        // Search the attrs from res/values/attrs.xml
        if (null != attrs) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LaceEdgeLayout);
            this.color = typedArray.getInt(R.styleable.LaceEdgeLayout_circleColor, Color.WHITE);
            this.gap = typedArray.getFloat(R.styleable.LaceEdgeLayout_gap, 0);
            this.radius = typedArray.getFloat(R.styleable.LaceEdgeLayout_radius, 0);
            typedArray.recycle();
        }

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setDither(true);
        mPaint.setColor(this.color);
        mPaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        
        // Counting how many circle we need on the edge.
        if (circleRemain == 0) {
            circleRemain = (int) (w - gap) % (2 * radius + gap);
        }
        circleNum = (int) ((w - gap) / (2 * radius + gap));
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        for (int i = 0 ; i < circleNum ; i++) {
            float x = gap + radius + circleRemain / 2 + ((gap + radius * 2) * i);
            canvas.drawCircle(x, 0, radius, mPaint);
            canvas.drawCircle(x, getHeight(), radius, mPaint);
        }
    }
}