Android自定义控件实现球赛比分条效果

 更新时间:2018年12月25日 10:26:45   作者:王世晖  
这篇文章主要为大家详细介绍了Android自定义控件实现球赛比分条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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();
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • MVVMLight项目Model View结构及全局视图模型注入器

    MVVMLight项目Model View结构及全局视图模型注入器

    这篇文章主要为大家介绍了MVVMLight项目中Model及View的结构及全局视图模型注入器的使用说明,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2022-01-01
  • Android PickerView底部选择框实现流程详解

    Android PickerView底部选择框实现流程详解

    本次主要介绍Android中底部弹出框的使用,使用两个案例来说明,首先是时间选择器,然后是自定义底部弹出框的选择器,以下来一一说明他们的使用方法
    2022-09-09
  • Android编程实现分页加载ListView功能示例

    Android编程实现分页加载ListView功能示例

    这篇文章主要介绍了Android编程实现分页加载ListView功能,结合实例形式分析了listview分页加载的原理、实现技巧与相关注意事项,需要的朋友可以参考下
    2017-02-02
  • Android app启动图适配方法实例

    Android app启动图适配方法实例

    大家在浏览app启动页的时候,一定遇到过在部分机型中图片变形、页面不协调、文案被裁剪的问题,下面这篇文章主要给大家介绍了关于Android app启动图适配的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-01-01
  • Android端“被挤下线”功能的单点登录实现

    Android端“被挤下线”功能的单点登录实现

    本篇文章主要介绍了Android端“被挤下线”功能的单点登录实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • Android app应用多语言切换功能实现

    Android app应用多语言切换功能实现

    这篇文章主要为大家详细介绍了Android app应用多语言切换功能实现代码,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • Android仿QQ空间动态界面分享功能

    Android仿QQ空间动态界面分享功能

    这篇文章主要介绍了Android仿QQ空间动态界面分享功能,本文图文并茂给大家介绍的非常详细,需要的朋友可以参考下
    2017-04-04
  • Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    Android自定义view仿QQ的Tab按钮动画效果(示例代码)

    这篇文章主要介绍了Android自定义view仿QQ的Tab按钮动画效果(示例代码),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考价值,需要的朋友可以参考下
    2021-01-01
  • android 6.0 权限授权方法

    android 6.0 权限授权方法

    今天小编就为大家分享一篇android 6.0 权限授权方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-07-07
  • Android动画实现原理和代码

    Android动画实现原理和代码

    这篇文章主要介绍了Android动画实现原理和代码分析,如果你对此感兴趣,跟着小编学习下吧。
    2017-12-12

最新评论