android自定义横向进度,Android自定义水平渐变进度条

先看进度条的效果:

952283258a48ba81c7cbcd4d7644bbbc.png

具体实现:

新建类,继承自View,在onDraw中进行绘制:

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.LinearGradient;

import android.graphics.Paint;

import android.graphics.RectF;

import android.graphics.Shader;

import android.util.AttributeSet;

import android.util.Log;

import android.view.View;

/**

*

* 自定义 进度条

* Created by wenjing.tang on 2017/8/7.

*/

public class CustomizedProgressBar extends View {

private float maxCount = 100; //进度条最大值

private float currentCount; //进度条当前值

// private Paint mPaint ;

private int mWidth,mHeight;

private Context mContext;

public CustomizedProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

initView(context);

}

public CustomizedProgressBar(Context context, AttributeSet attrs) {

super(context, attrs);

initView(context);

}

public CustomizedProgressBar(Context context) {

super(context);

initView(context);

}

private void initView(Context context) {

mContext=context;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

Paint mPaint = new Paint();

mPaint.setAntiAlias(true);

int round = mHeight/2; //半径

mPaint.setColor(getResources().getColor(R.color.white_alpha)); //设置边框背景颜色

RectF rectBg = new RectF(0, 0, mWidth, mHeight);

canvas.drawRoundRect(rectBg, round, round, mPaint);//绘制 最外面的大 圆角矩形,背景为白色

float section = currentCount/maxCount; //进度条的比例

RectF rectProgressBg = new RectF(0, 0, mWidth*section, mHeight);

Log.e("CustomizedProgressBar", currentCount+"");

Log.e("CustomizedProgressBar", section+"");

//Paint设置setColor(白色无透明)和setShader,只让setShader生效;不然前面setColor设置了透明度,透明度会生效,和setShader效果叠加

mPaint.setColor(getResources().getColor(R.color.white));

mPaint.setShader(getLinearGradient());

canvas.drawRoundRect(rectProgressBg, round, round, mPaint); //最左边的圆角矩形

if (maxCount != currentCount){ //如果不是100%,绘制第三段矩形

RectF rectProgressBg2 = new RectF(mWidth*section-round, 0, mWidth*section, mHeight);

mPaint.setShader(getLinearGradient());

canvas.drawRect(rectProgressBg2, mPaint);

}

}

private LinearGradient linearGradient;

private LinearGradient getLinearGradient(){

if(linearGradient==null){

linearGradient = new LinearGradient(0, 0, getWidth(), mHeight, new int[]{mContext.getResources().getColor(R.color.progress_color_1),

mContext.getResources().getColor(R.color.progress_color_2)}, null, Shader.TileMode.CLAMP); //根据R文件中的id获取到color

}

return linearGradient;

}

private int dipToPx(int dip) {

float scale = getContext().getResources().getDisplayMetrics().density;

return (int) (dip * scale + 0.5f * (dip >= 0 ? 1 : -1));

}

/***

* 设置最大的进度值

* @param maxCount 最大的进度值

*/

public void setMaxCount(float maxCount) {

this.maxCount = maxCount;

}

/***

* 设置当前的进度值

* @param currentCount 当前进度值

*/

public void setCurrentCount(float currentCount) {

this.currentCount = currentCount > maxCount ? maxCount : currentCount;

invalidate();

}

public float getMaxCount() {

return maxCount;

}

public float getCurrentCount() {

return currentCount;

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);

int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);

int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);

int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);

if (widthSpecMode == MeasureSpec.EXACTLY || widthSpecMode == MeasureSpec.AT_MOST) {

mWidth = widthSpecSize;

} else {

mWidth = 0;

}

if (heightSpecMode == MeasureSpec.AT_MOST || heightSpecMode == MeasureSpec.UNSPECIFIED) {

mHeight = dipToPx(18);

} else {

mHeight = heightSpecSize;

}

setMeasuredDimension(mWidth, mHeight);

}

}

其中用到的一些资源文件如下:

#0c000000

#ff916b

#ffa94c

要注意的是,在上面Java代码中,mPaint.setColor(getResources().getColor(R.color.white));这行很重要,因为进度条总共有三层,第一层是最外面的背景,第二层是进度,第三层如果不是100%才绘制,由于第一层背景有透明度,所以setColor设置了透明度,但虽然setShader,透明度还是会生效,两者效果叠加,效果是这样:

26dd6338bc42b12a5c9153bc27d654d0.png

加上之后,Paint 第二次设置 setColor (白色无透明)和 setShader,只让 setShader 生效,进度条才会达到满意的效果;

用法:

Java代码中:

customizedProgressBar.setMaxCount(100);

integrity = dataCount/TOTAL_COUNT *100; //根据自己情况来初始化完整度

customizedProgressBar.setCurrentCount((int) integrity);

mTvtDataIntegrity.setText("完整度" + (int) integrity +"%");

xml文件中(不需要文字显示也可以):

android:layout_width="match_parent"

android:layout_height="18dp"

android:layout_marginStart="66dp"

android:layout_marginEnd="66dp"

android:layout_centerVertical="true">

android:id="@+id/progress"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_centerInParent="true"/>

android:id="@+id/tv_data_integrity"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center"

tools:text="完整度35%"

android:textSize="10sp"

android:layout_centerInParent="true"/>

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值