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();
 }
}

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

(0)

相关推荐

  • Android自定义控件实现带文本与数字的圆形进度条

    本文实例为大家分享了Android实现圆形进度条的具体代码,供大家参考,具体内容如下 实现的效果图如下所示: 第一步:绘制下方有缺口的空心圆,称为外围大弧吧 anvas.clipRect(0, 0, mWidth, mHeight / 2 + radius - textHeight * 3 / 4); 第二步:计算绘制圆弧进度条时的起始角度,设置为外围大弧的左端点为进度值得起点,扫过的角度所占外围大弧的百分比就是进度值 第三步:绘制数字.文字.百分号 第四步:使用Handler Runnable

  • Android自定义控件实现带数值和动画的圆形进度条

    本文实例实现一个如下图所示的Android自定义控件,可以直观地展示某个球队在某个赛季的积分数和胜场.负场.平局数 首先对画布进行区域划分,整个控件分上下两部分 上边是个大的圆环,圆环中间两行文字,没什么难度,选好圆心坐标和半径后直接绘制即可,绘制文字也是如此. 下部分是三个小的圆弧进度条,弧的末端绘制一个小的实心圆 首先选好坐标和半径,然后先绘制三个圆环作为弧形进度条的背景 之后从12点钟开始绘制进度弧,知道了圆环的圆心和半径,也知道了弧对应于12点钟和圆环圆心的偏移角度 通过三角函数可以计算

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

    本文实例为大家分享了Android实现球赛比分条效果的具体代码,供大家参考,具体内容如下 效果图如下所示: 该控件需要输入两个参数,左边的得分数和右边的的分数 然后根据两边的得分的比例绘制中间的比分条 首先将控件的宽度平均分配为10分,第一份和最后一份分别绘制左边的比分数字和右边的比分数字 中间的8分宽度绘制比分条 根据左右两个比分所占的比例,绘制两个两条首位相连的线段即可 完整代码如下: public class CustomScoreBar extends View { private Co

  • Android自定义控件eBook实现翻书效果实例详解

    本文实例讲述了Android自定义控件eBook实现翻书效果的方法.分享给大家供大家参考,具体如下: 效果图: Book.java文件: package com.book; import android.app.Activity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.ImageView; public class Book extend

  • Android自定义控件之三点循环缩放效果

    本文实例为大家分享了Android自定义控件之三点循环缩放的具体代码,供大家参考,具体内容如下 效果图如上,就是三点循环的变大.变小 package com.example.dotdemo; import java.util.ArrayList; import java.util.List; import android.animation.Animator; import android.animation.AnimatorListenerAdapter; import android.ani

  • 基于Android自定义控件实现刮刮乐效果

    只是简单的实现了效果,界面没怎么做优化,不过那都是次要的啦!!相信大家都迫不及待的想看效果图了吧, 其中主要的彩票视图类和橡皮擦类都是通过代码的方式构建视图,布局文件就一个主activity_main 上代码!! 主activity: package com.guaguale; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.View; imp

  • Android自定义控件实现下拉刷新效果

    app开发中下拉刷新是最常接触到的一个功能,也有很多开源的框架,封装的非常棒.前段时间了解了一下ViewDragHelper,遂用它实现了下拉刷新的功能. 大概和我之前的ViewDragHelper之拖动加载(类似淘宝)这篇代码类似.只是做了相关改动.具体的可以看一下那篇博文了解一下用到的ViewDragHelper的一些知识点.该界面主要是一个LinearLayout,上面的下拉刷新是一个textview(用TV代替),当然这个可以定制,在此只是用一个textview代替,实现简单的功能,下面

  • Android自定义控件简单实现侧滑菜单效果

    侧滑菜单在很多应用中都会见到,最近QQ5.0侧滑还玩了点花样~~对于侧滑菜单,一般大家都会自定义ViewGroup,然后隐藏菜单栏,当手指滑动时,通过Scroller或者不断的改变leftMargin等实现:多少都有点复杂,完成以后还需要对滑动冲突等进行处理~~今天给大家带来一个简单的实现,史上最简单有点夸张,但是的确是我目前遇到过的最简单的一种实现~~~ 1.原理分析 既然是侧滑,无非就是在巴掌大的屏幕,塞入大概两巴掌大的布局,需要滑动可以出现另一个,既然这样,大家为啥不考虑使用Android

  • Android自定义控件之广告条滚动效果

    在一些电子商务网站上经常能够看到一些滚动的广告条,许多软件在首次使用时也有类似的广告条,如图: 其实在github上有实现这种效果的控件,不过这东西做起来也是很简单,我们今天就来看看该怎么做. 先来看看布局文件: <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" and

  • Android自定义控件实现按钮滚动选择效果

    本文实例为大家分享了Android实现按钮滚动选择效果的具体代码,供大家参考,具体内容如下 效果图 代码实现 package com.demo.ui.view; import android.annotation.TargetApi; import android.content.Context; import android.os.Build; import android.os.Handler; import android.support.v4.content.ContextCompat;

  • Android自定义控件实现温度旋转按钮效果

    首先看下效果图 温度旋转按钮 实现思路 初始化一些参数 绘制刻度盘 绘制刻度盘下的圆弧 绘制标题与温度标识 绘制旋转按钮 绘制温度 处理滑动事件 提供一些接口方法 实现方法 初始化一些参数 public class TempControlView extends View { // 控件宽 private int width; // 控件高 private int height; // 刻度盘半径 private int dialRadius; // 圆弧半径 private int arcRa

  • Android自定义控件EditText使用详解

    本文实例为大家分享了Android自定义控件EditText的具体代码,供大家参考,具体内容如下 自定义控件分三种: 1. 自绘控件 2. 组合控件 3. 继承控件 代码已上传到 github 以后的自定义控件就都放这个仓库 需求 这里由于项目的需要实现一个自定义EditText,主要实现的为两点,一个是工具图标toolIcon,例如点击清除EditText内容.一个为EditText左边的提示图标hintIcon, 例如输入账号密码时前面的图标. 为了让这个控件的拓展性更高,设置了两个点击事件

随机推荐