Android自定義控制元件之實現一個球賽比分條

效果圖如下所示：

該控制元件需要輸入兩個引數，左邊的得分數和右邊的的分數

然後根據兩邊的得分的比例繪製中間的比分條

首先將控制元件的寬度平均分配為10分，第一份和最後一份分別繪製左邊的比分數字和右邊的比分數字

中間的8分寬度繪製比分條

根據左右兩個比分所佔的比例，繪製兩個兩條首位相連的線段即可

完整程式碼如下：

public class CustomScoreBar extends View {
    private Context context;
    private TypedValue typedValue;
    private static final int DEGREE =10;
    private int mColorLeft, mColorRight;
    private int mScoreLeft, mScoreRight;
    //各種畫筆
    private Paint paintBar =new Paint();
    private Paint paintText=new Paint();
    public CustomScoreBar(Context context) {
        super(context);
        this.context=context;
        init();
    }

    public CustomScoreBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context=context;
        init();
    }

    public CustomScoreBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context=context;
        init();
    }

    private void init() {
        /*初始化資料，預設屬性*/
        mColorLeft = Color.rgb(95, 112, 72);
        mColorRight = Color.rgb(69, 91, 136);
        mScoreLeft =5;
        mScoreRight =8;
        typedValue=new TypedValue();
        context.getTheme().resolveAttribute(R.attr.maintextclor,typedValue,true);
    }



    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float width=getWidth();
        float height=getHeight();
        /*文字畫筆設定*/
        paintText.reset();
        paintText.setAntiAlias(true);
        /*文字的大小取控制元件寬度的十分之一和高度的二分之一的最小值*/
        paintText.setTextSize(Math.min(width / DEGREE, height) / 2);
        paintText.setColor(getResources().getColor(typedValue.resourceId));
        /*Paint.Align.CENTER：The text is drawn centered horizontally on the x,y origin*/
        paintText.setTextAlign(Paint.Align.CENTER);
        /*繪製中間的橫線的畫筆*/
        paintBar.reset();
        paintBar.setAntiAlias(true);
        paintBar.setStyle(Paint.Style.STROKE);
        /*畫筆的高度為控制元件高度的十分之一*/
        paintBar.setStrokeWidth(height/10);
        /*測量字型*/
        Paint.FontMetrics fontMetrics = paintText.getFontMetrics();
        float textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        /*繪製左邊的比分文字*/
        /*把控制元件寬度分為10份，第一份和第十份分別繪製左邊和右邊的文字*/
        /*中間的8份寬度繪製比分條*/
        canvas.drawText("" + mScoreLeft, width / DEGREE / 2, height / 2 + textBaseLineOffset, paintText);
        paintBar.setColor(mColorLeft);
        /* drawLine(float startX, float startY, float stopX, float stopY,Paint paint)*/
        /*按照比例繪製左邊比分對應長度的比分條*/
        canvas.drawLine(width / DEGREE, height / 2, width / DEGREE + width * (DEGREE - 2) / DEGREE * mScoreLeft / (mScoreLeft + mScoreRight), height / 2, paintBar);
        /*測量右邊的比分文字*/
        fontMetrics = paintText.getFontMetrics();
        textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom;
        /*在控制元件寬度的最後十分之一繪製右邊的比分數字*/
        canvas.drawText("" + mScoreRight, width-width / DEGREE / 2, height / 2 + textBaseLineOffset,paintText);
        paintBar.setColor(mColorRight);
        /*繪製右邊的比分對應長度的比分條*/
        canvas.drawLine(width/ DEGREE +width*(DEGREE -2)/ DEGREE * mScoreLeft /(mScoreLeft + mScoreRight),height/2,width*(DEGREE -1)/ DEGREE,height/2, paintBar);
    }

    public void setScores(int score1, int score2) {
        this.mScoreLeft =score1;
        this.mScoreRight =score2;
        invalidate();
    }
}