Android 带文字的进度条,文字颜色随进度条的增加而渐变的效果

Android自带的ProgressBar是不带文字的,加文字的话可以参考这篇博客:http://blog.csdn.net/lixiaodaoaaa/article/details/9852327

本篇博客主要讲有了文字之后的ProgressBar文字的颜色随着进度条增加,看起来有一种进度条覆盖了文字的颜色,模仿点击下载和暂停等效果,效果如下:

在这里插入图片描述

代码中通过不断的重载setProgress方法,不停的执行onDraw方法,采用图像混合模式,对进度条和文字进行进度条重绘。主要代码如下:


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mWidth = getWidth() * mProgress / 100;//进度作一下处理,解决不同分辨率的适配问题
        mPaint.getTextBounds(mPercentText, 0, mPercentText.length(), mPercentRect);//为了获取文字的宽高以及坐标位置,get之后,rect.centerX才有值
        mPaint.getTextBounds(mPauseText, 0, mPauseText.length(), mPauseRect);
        int textX = (getWidth() / 2) - mPauseRect.centerX();//获取“暂停”文字的中心横坐标
        int textY = (getHeight() / 2) - mPauseRect.centerY();
        int percentX = (getWidth() / 2) - mPercentRect.centerX();//获取百分比文字的中心横坐标
        int percentY = (getHeight() / 2) - mPercentRect.centerY();
        Bitmap srcBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
        Canvas srcCanvas = new Canvas(srcBitmap);
        switch (mStateType) {
            case Constant.DEFAULT://默认初始化状态
                drawTextUI(canvas, textX, textY, mDefaultText, srcBitmap, srcCanvas);
                break;
            case Constant.PAUSE:
                drawTextUI(canvas, textX, textY, mPauseText, srcBitmap, srcCanvas);
                break;
            case Constant.DOWNLOAD:
                drawTextUI(canvas, percentX, percentY, mPercentText, srcBitmap, srcCanvas);
                break;
            case Constant.FINISH:
                mPaint.setColor(Color.WHITE);
                canvas.drawText(mFinishText, textX, textY, mPaint);
                break;
            default:
                drawTextUI(canvas, textX, textY, mDefaultText, srcBitmap, srcCanvas);
                break;

其中的drawTextUI方法主要控制图像混合模式,从而实现渐变,核心代码如下:

    mPaint.setXfermode(mPorterDuffXfermode);// 设置混合模式
    mPaint.setColor(Color.WHITE);
    RectF rectF = new RectF(0, 0, mWidth, getHeight());//mWidth是不断变化的
    // 绘制源图形
    srcCanvas.drawRect(rectF, mPaint);
    // 绘制目标图
    canvas.drawBitmap(srcBitmap, 0, 0, null);
    // 清除混合模式
    mPaint.setXfermode(null);
    // 恢复画笔颜色
    mPaint.setColor(Color.parseColor("#00b38a"));

MainActivity主要控制下载和暂停的部分逻辑:

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private TextProgressBar mProgressView;
    private final int FOR_SCROLL = 1;
    private final int DELAY = 500;
    private float mProgress;
    private int mStateType = Constant.DOWNLOAD;

    private Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what) {
                case FOR_SCROLL:
                    if(mProgress < 100) {
                        mProgress += 4.0;
                        mProgressView.setProgress(mProgress);
                        mProgressView.setStateType(Constant.DOWNLOAD);
                        mHandler.sendEmptyMessageDelayed(FOR_SCROLL, DELAY);
                    } else {
                        mStateType = Constant.FINISH;
                        mProgressView.setProgress(100);
                        mProgressView.setStateType(mStateType);
                    }
                    break;
            }
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mProgressView = (TextProgressBar) findViewById(R.id.textProgress);
        mProgressView.setOnClickListener(this);
        mProgressView.setStateType(Constant.DEFAULT);
        String text = String.format("%.1f%%", 53.6897);
        Toast.makeText(this, text, Toast.LENGTH_SHORT).show();
    }

    @Override
    public void onClick(View v) {
        if(v == null) {
            return;
        }
        if(v.getId() == R.id.textProgress) {
            switch (mStateType) {
                case Constant.DOWNLOAD:
                    mStateType = Constant.PAUSE;
                    mHandler.sendEmptyMessageDelayed(FOR_SCROLL, DELAY);
                    break;
                case Constant.PAUSE:
                    mStateType = Constant.DOWNLOAD;
                    mProgressView.setStateType(Constant.PAUSE);
                    mHandler.removeMessages(FOR_SCROLL);
                    break;
                case Constant.FINISH:
                    Toast.makeText(MainActivity.this, getResources().getString(R.string.ok), Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mHandler.removeMessages(FOR_SCROLL);
    }
}

代码未作优化,大体上实现大概功能,有问题一起交流
项目源码,点击下载

2019-1-15更新
因为之前的源码链接积分被系统改的过高,特地重新上传了一份。
点击下载

2020-3-2更新
也是因为积分无缘无故被改高了,又重新手动传了一份
点击下载

2020年9月27日14:55:10更新
同上,积分问题,又被改成了50积分,再次上传一份
点击下载

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要制作一个Android音乐播放器进度条,可以使用ProgressBar控件。首先,在XML布局文件中添加一个ProgressBar控件,并设置其样式为水平条形。例如: ``` <ProgressBar android:id="@+id/progress_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp" android:indeterminate="false" android:max="100" android:progress="0" style="@android:style/Widget.ProgressBar.Horizontal" /> ``` 这里设置了ProgressBar控件的一些基本属性,如宽度、高度、边距、最大值、当前进度等。同时,设置了控件样式为水平条形。 接着,在Java代码中,可以通过以下方式设置进度条的进度值: ``` ProgressBar progressBar = findViewById(R.id.progress_bar); progressBar.setProgress(50); // 设置进度条的当前进度为50% ``` 至于进度条的细小和颜色渐变,可以通过修改ProgressBar的样式来实现。具体来说,可以创建一个新的样式文件,如下所示: ``` <style name="MyProgressBar" parent="@android:style/Widget.ProgressBar.Horizontal"> <item name="android:indeterminate">false</item> <item name="android:minHeight">4dp</item> <item name="android:maxHeight">8dp</item> <item name="android:progressDrawable">@drawable/my_progress_drawable</item> </style> ``` 这里自定义了一个名为MyProgressBar的样式,并设置了一些属性,如最小高度、最大高度等。同时,设置了进度条的样式为my_progress_drawable,这个可以在drawable文件夹下创建一个XML文件来实现。例如: ``` <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@android:id/background"> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <solid android:color="#CCCCCC" /> </shape> </item> <item android:id="@android:id/progress"> <clip> <shape android:shape="rectangle"> <corners android:radius="4dp" /> <gradient android:startColor="#FF5722" android:centerColor="#FF9800" android:endColor="#FFC107" android:angle="0" /> </shape> </clip> </item> </layer-list> ``` 这里使用了layer-list来实现渐变色的效果,同时设置了圆角等属性。在上述代码中,可以看到设置了渐变色的起始颜色、中间颜色、结束颜色,以及渐变方向。 最后,将自定义样式应用到ProgressBar控件中,就可以实现细小且颜色渐变进度条了。例如: ``` <ProgressBar android:id="@+id/progress_bar" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="16dp" android:indeterminate="false" android:max="100" android:progress="0" style="@style/MyProgressBar" /> ``` 以上就是制作Android音乐播放器进度条的基本方法,希望对你有帮助!
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值