Android自定義控件實現(xiàn)球賽比分條效果
本文實例為大家分享了Android實現(xiàn)球賽比分條效果的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下所示:


該控件需要輸入兩個參數(shù),左邊的得分數(shù)和右邊的的分數(shù)
然后根據(jù)兩邊的得分的比例繪制中間的比分條
首先將控件的寬度平均分配為10分,第一份和最后一份分別繪制左邊的比分數(shù)字和右邊的比分數(shù)字
中間的8分寬度繪制比分條
根據(jù)左右兩個比分所占的比例,繪制兩個兩條首位相連的線段即可
完整代碼如下:
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() {
//初始化數(shù)據(jù),默認屬性
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();
//文字畫筆設(shè)置
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)*/
//按照比例繪制左邊比分對應(yīng)長度的比分條
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;
//在控件寬度的最后十分之一繪制右邊的比分數(shù)字
canvas.drawText("" + mScoreRight, width-width / DEGREE / 2, height / 2 + textBaseLineOffset,paintText);
paintBar.setColor(mColorRight);
//繪制右邊的比分對應(yīng)長度的比分條
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();
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
MVVMLight項目Model?View結(jié)構(gòu)及全局視圖模型注入器
這篇文章主要為大家介紹了MVVMLight項目中Model及View的結(jié)構(gòu)及全局視圖模型注入器的使用說明,有需要的朋友可以借鑒參考下,希望能夠有所幫助2022-01-01
Android PickerView底部選擇框?qū)崿F(xiàn)流程詳解
本次主要介紹Android中底部彈出框的使用,使用兩個案例來說明,首先是時間選擇器,然后是自定義底部彈出框的選擇器,以下來一一說明他們的使用方法2022-09-09
Android編程實現(xiàn)分頁加載ListView功能示例
這篇文章主要介紹了Android編程實現(xiàn)分頁加載ListView功能,結(jié)合實例形式分析了listview分頁加載的原理、實現(xiàn)技巧與相關(guān)注意事項,需要的朋友可以參考下2017-02-02
Android app應(yīng)用多語言切換功能實現(xiàn)
這篇文章主要為大家詳細介紹了Android app應(yīng)用多語言切換功能實現(xiàn)代碼,感興趣的小伙伴們可以參考一下2016-08-08
Android自定義view仿QQ的Tab按鈕動畫效果(示例代碼)
這篇文章主要介紹了Android自定義view仿QQ的Tab按鈕動畫效果(示例代碼),本文給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考價值,需要的朋友可以參考下2021-01-01
android 6.0 權(quán)限授權(quán)方法
今天小編就為大家分享一篇android 6.0 權(quán)限授權(quán)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-07-07

