Android自定義控件實(shí)現(xiàn)球賽比分條效果
本文實(shí)例為大家分享了Android實(shí)現(xiàn)球賽比分條效果的具體代碼,供大家參考,具體內(nèi)容如下
效果圖如下所示:
該控件需要輸入兩個(gè)參數(shù),左邊的得分?jǐn)?shù)和右邊的的分?jǐn)?shù)
然后根據(jù)兩邊的得分的比例繪制中間的比分條
首先將控件的寬度平均分配為10分,第一份和最后一份分別繪制左邊的比分?jǐn)?shù)字和右邊的比分?jǐn)?shù)字
中間的8分寬度繪制比分條
根據(jù)左右兩個(gè)比分所占的比例,繪制兩個(gè)兩條首位相連的線段即可
完整代碼如下:
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ù),默認(rèn)屬性 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); //測(cè)量字體 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)*/ //按照比例繪制左邊比分對(duì)應(yīng)長(zhǎng)度的比分條 canvas.drawLine(width / DEGREE, height / 2, width / DEGREE + width * (DEGREE - 2) / DEGREE * mScoreLeft / (mScoreLeft + mScoreRight), height / 2, paintBar); //測(cè)量右邊的比分文字 fontMetrics = paintText.getFontMetrics(); textBaseLineOffset = (fontMetrics.bottom - fontMetrics.top) / 2 - fontMetrics.bottom; //在控件寬度的最后十分之一繪制右邊的比分?jǐn)?shù)字 canvas.drawText("" + mScoreRight, width-width / DEGREE / 2, height / 2 + textBaseLineOffset,paintText); paintBar.setColor(mColorRight); //繪制右邊的比分對(duì)應(yīng)長(zhǎ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(); } }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android Webview上的ssl warning的處理方式詳解及實(shí)例
這篇文章主要介紹了Android Webview上的ssl warning的處理方式詳解及實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-02-02Android EditText實(shí)現(xiàn)關(guān)鍵詞批量搜索示例
本篇文章主要介紹了Android EditText實(shí)現(xiàn)關(guān)鍵詞批量搜索示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02Android使用http實(shí)現(xiàn)注冊(cè)登錄功能
這篇文章主要為大家詳細(xì)介紹了Android使用http實(shí)現(xiàn)注冊(cè)登錄功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04Android開(kāi)發(fā)實(shí)現(xiàn)圖片圓角的方法
這篇文章主要介紹了Android開(kāi)發(fā)實(shí)現(xiàn)圖片圓角的方法,涉及Android針對(duì)圖形圖像的相關(guān)操作技巧,需要的朋友可以參考下2016-10-10淺談Android IPC機(jī)制之Binder的工作機(jī)制
IPC機(jī)制即為跨進(jìn)程通信,是inter-Process Communication的縮寫。是指兩個(gè)進(jìn)程之間進(jìn)行通信。在說(shuō)進(jìn)程通信之前,我們的弄明白什么是線程,什么是進(jìn)程。進(jìn)程和線程是兩個(gè)截然不同的概念。本文將介紹Android IPC機(jī)制之Binder的工作機(jī)制。2021-06-06自定義ListView實(shí)現(xiàn)拖拽ListItem項(xiàng)交換位置(附源碼)
本文要實(shí)現(xiàn)的是拖拽ListView的Item項(xiàng),在布局方面還是用基于布局泵LayoutInflater來(lái)從不同的Layout模板拿到不同的布局然后將view返回,感興趣的朋友可以了解下哈2013-06-06Android程序啟動(dòng)時(shí)出現(xiàn)黑屏問(wèn)題的解決方法
這篇文章主要介紹了Android程序啟動(dòng)時(shí)出現(xiàn)黑屏問(wèn)題的解決方法,分析了黑屏出現(xiàn)的原因及相應(yīng)的解決方法,需要的朋友可以參考下2016-08-08