自定义View之王者荣耀等级进度条

Demo效果

这里用王者荣耀的等级做了一个demo

实现思路

由进度条想到ProgressBar，继承自ProgressBar，可以在onDraw（）中通过getProgress（）和getMax（）的比值来得到当前的进度
动画效果其实就是间歇性地增加进度，这里采用Handler的sendEmptyMessageDelayed（）方法每隔一定的时间对进度进行加1，直到指定的等级
根据当前进度和等级值来给文字设置不同的颜色，以实现高亮的效果
颜色渐变的效果通过给Paint设置LinearGradient来实现

实现步骤

自定义属性

自定义的属性包括两部分，一部分是在xml布局文件中实现的，一部分是在java代码中实现的。

XML中的属性

像一些和尺寸、颜色相关的属性，建议放在xml文件中实现。本demo中，我在xml里实现了如下属性：

levelTextSize 等级文本字体大小
levelTextChooseColor 等级文本选中时的字体颜色
levelTextUnChooseColor 等级文本非选中时的字体颜色
progressStartColor 在进度为0的位置，进度条的颜色
progressEndColor 在进度为Max的位置，进度条的颜色
progressBgColor 进度条的背景颜色
progressHeight 进度条的高度

有了这些XML属性，到时候UI想换个颜色或者改个大小啥的，直接在XML文件里改就行，处理起来很方便~

XML中的属性使用有三步：

在资源文件中定义（在values文件夹下新建一个attr.xml用于存放定义的属性）

<resources> <declare-styleable name="LevelProgressBar"> <attr name="levelTextSize" format="dimension"/> <attr name="levelTextChooseColor" format="color"/> <attr name="levelTextUnChooseColor" format="color"/> <attr name="progressStartColor" format="color"/> <attr name="progressEndColor" format="color"/> <attr name="progressBgColor" format="color"/> <attr name="progressHeight" format="dimension"/> </declare-styleable> </resources>

在XML中设置属性值

<com.example.lenovo.speedprogressbar.LevelProgressBar android:id="@+id/progress_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:paddingLeft="10dp" android:paddingRight="10dp" app:levelTextChooseColor="#000000" app:levelTextSize="15dp" app:levelTextUnChooseColor="#999999" app:progressBgColor="#CCCCCC" app:progressEndColor="#00FF00" app:progressHeight="10dp" app:progressStartColor="#CCFFCC" />

通过构造方法中的AttributeSet获取XML中设置的属性

public LevelProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); // 获取xml中设置的属性值 obtainStyledAttributes(attrs);
} private void obtainStyledAttributes(AttributeSet attrs) { TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.LevelProgressBar); levelTextUnChooseColor = a.getColor(R.styleable.LevelProgressBar_levelTextUnChooseColor, 0x000000); levelTextChooseColor = a.getColor(R.styleable.LevelProgressBar_levelTextChooseColor, 0x333333); levelTextSize = (int) a.getDimension(R.styleable.LevelProgressBar_levelTextSize, dpTopx(15)); progressStartColor = a.getColor(R.styleable.LevelProgressBar_progressStartColor, 0xCCFFCC); progressEndColor = a.getColor(R.styleable.LevelProgressBar_progressEndColor, 0x00FF00); progressBgColor = a.getColor(R.styleable.LevelProgressBar_progressBgColor, 0x000000); progressHeight = (int) a.getDimension(R.styleable.LevelProgressBar_progressHeight, dpTopx(20));
}

Java代码中的属性

另外一些与逻辑相关的属性，可以放在java代码中实现。本demo中，我在java代码里实现了如下属性：

levels 等级数
currentLevel 当前等级
levelTexts 等级文本（数组）
animInterval 动画时间间隔

这些属性值通过在LevelProgressBar中暴露方法来实现，需要在使用前设置值：

myProgressBar = (LevelProgressBar) findViewById(R.id.progress_bar);
myProgressBar.setLevels(4);
String[] texts = {"倔强青铜", "持续白银", "荣耀黄金", "尊贵铂金"};
myProgressBar.setLevelTexts(texts);
myProgressBar.setCurrentLevel(1);
myProgressBar.setAnimInterval(10);

setAnimInterval（）方法需要在最后调用，调用了它动画效果就开始了

确定宽高

确定宽高的部分由onMeasure（）方法来处理。若自定义的View中宽高不使用wrap_content模式，则不需重写onMeasure（）方法，若要使用wrap_content模式，则需要重写onMeasure（）方法，并在其中对wrap_content模式做特殊的处理。因为wrap_content时，默认大小为父View允许的最大空间，这时需要设置View需要的具体大小，否则最后的效果会和match_parent一样（不理解的朋友可以看看任玉刚《Android开发艺术探索》中自定义View的那章中的解释）。

@Override protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int height = MeasureSpec.getSize(heightMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); // layout_height为wrap_content时计算View的高度 if (heightMode != MeasureSpec.EXACTLY) { textHeight = (int) (mPaint.descent() - mPaint.ascent()); // 10dp为等级文字和进度条之间的间隔 height = getPaddingTop() + getPaddingBottom() + textHeight + progressHeight +dpTopx(10); } setMeasuredDimension(width, height); mTotalWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
}

对于LevelProgressBar，我想把它的高度设为wrap_content，因此，这里我对高度为wrap_content的模式进行了处理，算出LevelProgressBar的具体宽度，然后调用setMeasuredDimension（）方法对算出的高度进行设置，而宽度就使用widthMeasureSpec中的默认值。

这里高度为顶部padding+底部padding+文本高度+进度条高度+10dp（文本和进度条之间的距离，这个属性也可以做成可在XML中自定义的）

其中，textHeight的获取方式为：

textHeight = (int) (mPaint.descent() - mPaint.ascent())

其中mPaint.descent() - mPaint.ascent()得到的是基于当前文本类型和文本大小，文本区域可能的最大高度

绘制内容

绘制内容主要通过重写View的onDraw（）方法来实现。

首先绘制等级文字

// 绘制等级文字 for (int i = 0; i < levels; i++) { int textWidth = (int) mPaint.measureText(levelTexts[i]); mPaint.setColor(levelTextUnChooseColor); mPaint.setTextSize(levelTextSize); // 到达指定等级时，设置相应的等级文字颜色为深色 if (getProgress() == targetProgress && currentLevel >=1 && currentLevel <= levels && i == currentLevel-1) { mPaint.setColor(levelTextChooseColor); } canvas.drawText(levelTexts[i], mTotalWidth / levels * (i + 1) - textWidth, textHeight, mPaint);
}

这里用到的关键方法是Canvas的drawText（）方法，这个方法的参数如下

public void drawText(@NonNull String text, float x, float y,@NonNull Paint paint)

其中需要特别关注的是x和y，它表示文字的绘制区域的起点，它是框住文本区域的矩形的左下角的点（开始以为是左上角的点，发现文字怎么也画不到指定位置orz）

接着绘制进度条背景

// 绘制进度条底部 mPaint.setColor(progressBgColor);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(progressHeight);
canvas.drawLine(0 + progressHeight / 2, lineY, mTotalWidth - progressHeight / 2, lineY, mPaint);

这里用到的关键方法是Canvas的drawLine（）方法，这个方法的参数如下

public void drawLine(float startX, float startY, float stopX, float stopY,@NonNull Paint paint)

这里需要特别注意的是，由于设置了StrokeCap为Round，因此，startX和stopX要考虑半圆的宽度，不然开始和结尾处的笔尖圆形会画到区域之外

最后绘制进度条

// 绘制进度条 int reachedPartEnd = (int) (getProgress() * 1.0f / getMax() * mTotalWidth);
if (reachedPartEnd > 0) { mPaint.setStrokeCap(Paint.Cap.ROUND); // 设置进度条的渐变色 Shader shader = new LinearGradient(0, lineY, getWidth(), lineY, progressStartColor, progressEndColor, Shader.TileMode.REPEAT); mPaint.setShader(shader); canvas.drawLine(0 + progressHeight / 2, lineY, reachedPartEnd - progressHeight / 2, lineY, mPaint); mPaint.setShader(null);
}

进度通过getProgress（）和getMax（）的比值得到，通过为Paint设置LinearGradient来设置渐变，LinearGradient继承自Shader，它的构造函数如下：

public LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1,TileMode tile)

（x0，y0）和color0，表示渐变起始点的坐标和颜色；（x1，y1）和color1表示渐变终点的坐标和颜色。TileMode表示图像超出原始边界时的呈现方式，这里由于起始和终止点为0和getWidth（）（内容的宽度），因此内容始终不会超出原始边界，所以设置成什么方式都没关系。

调用

在MainActivity里面调用自定义的LevelProgressBar：

@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); myProgressBar = (LevelProgressBar) findViewById(R.id.progress_bar); myProgressBar.setLevels(4); String[] texts = {"倔强青铜", "持续白银", "荣耀黄金", "尊贵铂金"}; myProgressBar.setLevelTexts(texts); Button button1 = (Button) findViewById(R.id.level1); button1.setOnClickListener(this); Button button2 = (Button) findViewById(R.id.level2); button2.setOnClickListener(this); Button button3 = (Button) findViewById(R.id.level3); button3.setOnClickListener(this); Button button4 = (Button) findViewById(R.id.level4); button4.setOnClickListener(this);
} @Override public void onClick(View v) { int id = v.getId(); switch (id) { case R.id.level1: myProgressBar.setCurrentLevel(1); myProgressBar.setAnimInterval(10); break; case R.id.level2: myProgressBar.setCurrentLevel(2); myProgressBar.setAnimInterval(10); break; case R.id.level3: myProgressBar.setCurrentLevel(3); myProgressBar.setAnimInterval(10); break; case R.id.level4: myProgressBar.setCurrentLevel(4); myProgressBar.setAnimInterval(10); break; }
}

自定义View之王者荣耀等级进度条相关推荐

精通Android自定义View(十二)绘制圆形进度条
1 绘图基础简析 1 精通Android自定义View(一)View的绘制流程简述 2 精通Android自定义View(二)View绘制三部曲 3 精通Android自定义View(三)View绘制 ...
Android 自定义View实现环形带刻度的进度条
本篇文章讲的是自定义View实现环形带刻度的进度条.和往常一样,主要还是想总结一下自定义View实现环形带刻度的进度条的开发过程以及一些需要注意的地方. 按照惯例,我们先来看看效果图一.我们如何来实 ...
服务器正在维护中王者荣耀s24,王者荣耀s24赛季更新到几点王者荣耀更新进度条不动了是怎么回事...
就在近日王者荣耀正式服进行停机更新,不少网友们对于此次更新还是蛮期待的,不过有些网友反馈到,王者荣耀更新进度条有些慢,有时很长时间都不动一下的.那么这是怎么回事呢?此外王者荣耀s24赛季要更新到什么时 ...
android 自定义音乐圆形进度条,Android自定义View实现音频播放圆形进度条
本篇文章介绍自定义View配合属性动画来实现如下的效果实现思路如下: 根据播放按钮的图片大小计算出圆形进度条的大小根据音频的时间长度计算出圆形进度条绘制的弧度通过Handler刷新界面来更新圆形 ...
android+属性动画+高度,android 自定义view+属性动画实现充电进度条
近期项目中需要使用到一种类似手机电池充电进度的动画效果,以前没学属性动画的时候,是用图片+定时器的方式来完成的,最近一直在学习动画这一块,再加上复习一下自定义view的相关知识点,所以打算用属性动画和 ...
h5实现手机端等级进度条
h5实现等级进度条需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...
自定义View | 仿QQ运动步数进度效果
项目GitHub地址思路固定不动的蓝色大圆弧动画变动的红色小圆弧中间的步数文字显示相关的自定义属性比如固定不动的大圆弧, 我们不能写死他的蓝色颜色属性, 要提供一个颜色的自定义属性给用户自 ...
JavaScript防抖(王者荣耀回城)、节流（王者荣耀技能读条）
防抖(王者荣耀回城) 回城按一次读条八秒钟,回到一半,在按一次回城开始重新读条八秒,多次猛按回城,不回家,开启嘲讽,重复开始读条 <button id="btn"> 回 ...
Android 高手进阶之自定义View，自定义属性（带进度的圆形进度条）
转载请注明地址:http://blog.csdn.net/xiaanming/article/details/10298163 很多的时候,系统自带的View满足不了我们功能的需求,那么我们就需要自己 ...

自定义View之王者荣耀等级进度条

Demo效果

自定义View之王者荣耀等级进度条相关推荐

最新文章

热门文章