android自定义seekBar

时间：2022-03-01 19:56:19

Android原生控件只有横向进度条一种，而且没法变换样式，比如原生rom的样子

android自定义seekBar

很丑是吧，当伟大的产品设计要求更换前背景，甚至纵向，甚至圆弧状的，咋办，比如

android自定义seekBar

ok，我们开始吧：

一）变换前背景

先来看看progressbar的属性：

  1. <ProgressBar
  2. android:id="@+id/progressBar"
  3. style="?android:attr/progressBarStyleHorizontal"
  4. android:layout_width="match_parent"
  5. android:layout_height="wrap_content"
  6. android:layout_margin="5dip"
  7. android:layout_toRightOf="@+id/progressBarV"
  8. android:indeterminate="false"
  9. android:padding="2dip"
  10. android:progress="50" />

根据style="?android:attr/progressBarStyleHorizontal"，我们找到源码中的style.xml

  1. <style name="Widget.ProgressBar.Horizontal">
  2. <item name="android:indeterminateOnly">false</item>
  3. <item name="android:progressDrawable">@android:drawable/progress_horizontal</item>
  4. <item name="android:indeterminateDrawable">@android:drawable/progress_indeterminate_horizontal</item>
  5. <item name="android:minHeight">20dip</item>
  6. <item name="android:maxHeight">20dip</item>
  7. </style>

看到

<item name="android:progressDrawable">@android:drawable/progress_horizontal</item>

木有，继续发掘源码，找到drawable下面的progress_horizontal.xml，这就是我们今天的主角了：

  1. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  2. <item android:id="@android:id/background">
  3. <shape>
  4. <corners android:radius="5dip" />
  5. <gradient
  6. android:startColor="#ff9d9e9d"
  7. android:centerColor="#ff5a5d5a"
  8. android:centerY="0.75"
  9. android:endColor="#ff747674"
  10. android:angle="270"
  11. />
  12. </shape>
  13. </item>
  14. <item android:id="@android:id/secondaryProgress">
  15. <clip>
  16. <shape>
  17. <corners android:radius="5dip" />
  18. <gradient
  19. android:startColor="#80ffd300"
  20. android:centerColor="#80ffb600"
  21. android:centerY="0.75"
  22. android:endColor="#a0ffcb00"
  23. android:angle="270"
  24. />
  25. </shape>
  26. </clip>
  27. </item>
  28. <item android:id="@android:id/progress">
  29. <clip>
  30. <shape>
  31. <corners android:radius="5dip" />
  32. <gradient
  33. android:startColor="#ffffd300"
  34. android:centerColor="#ffffb600"
  35. android:centerY="0.75"
  36. android:endColor="#ffffcb00"
  37. android:angle="270"
  38. />
  39. </shape>
  40. </clip>
  41. </item>
  42. </layer-list>

看到android:id="@android:id/progress"木有，看到android:id="@android:id/secondaryProgress"木有

把这个文件复制到自己工程下的drawable，就可以随心所欲的修改shape的属性，渐变，圆角等等

那么怎么放一个图片进去呢，ok，新建progress_horizontal1.xml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:id="@android:id/progress" android:drawable="@drawable/progressbar" />
  4. </layer-list>

在android:drawable中指定你处理好的图片

然后回到布局中

  1. <ProgressBar
  2. android:id="@+id/progressBar1"
  3. android:layout_width="match_parent"
  4. android:layout_height="wrap_content"
  5. android:layout_below="@+id/progressBar"
  6. android:layout_margin="5dip"
  7. android:layout_toRightOf="@+id/progressBarV"
  8. android:background="@drawable/progress_bg"
  9. android:indeterminate="false"
  10. android:indeterminateOnly="false"
  11. android:maxHeight="20dip"
  12. android:minHeight="20dip"
  13. android:padding="2dip"
  14. android:progress="50"
  15. android:progressDrawable="@drawable/progress_horizontal1" />

android:background="@drawable/progress_bg"指定背景

android:progressDrawable="@drawable/progress_horizontal1"前景使用上面的progress_horizontal1

ok，搞定

android自定义seekBar

注意看，四角还是有圆倒角的，貌似是系统自己加上去的，总之我的图片里面是没有做这个倒角处理的

二）纵向进度条

还是得从源码入手，看回progress_horizontal.xml

  1. <item android:id="@android:id/progress">
  2. <clip>
  3. <shape>
  4. <corners android:radius="5dip" />
  5. <gradient
  6. android:startColor="#ffffd300"
  7. android:centerColor="#ffffb600"
  8. android:centerY="0.75"
  9. android:endColor="#ffffcb00"
  10. android:angle="270"
  11. />
  12. </shape>
  13. </clip>
  14. </item>

为什么shape外面要包一层clip呢，官方文档解释是clipdrawable是可以自我复制的，来看看定义

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <clip
  3. xmlns:android="http://schemas.android.com/apk/res/android"
  4. android:drawable="@drawable/drawable_resource"
  5. android:clipOrientation=["horizontal" | "vertical"]
  6. android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
  7. "fill_vertical" | "center_horizontal" | "fill_horizontal" |
  8. "center" | "fill" | "clip_vertical" | "clip_horizontal"] />

android:clipOrientation有两个属性，默认为horizontal

android:gravity有两个属性，默认为left

那我们试试改成vertical和bottom会有什么效果，新建一个progress_vertical.xml，把源码progress_horizontal.xml的内容复制过来，这里去掉了secondaryProgress，修改了clip，shape的渐变中心centerY改为centerX

  1. <item android:id="@android:id/progress">
  2. <clip
  3. android:clipOrientation="vertical"
  4. android:gravity = "bottom">
  5. <shape>
  6. <corners android:radius="5dip" />
  7. <gradient
  8. android:startColor="#ffffd300"
  9. android:centerColor="#ffffb600"
  10. android:centerX="0.75"
  11. android:endColor="#ffffcb00"
  12. android:angle="90"
  13. />
  14. </shape>
  15. </clip>
  16. </item>

布局中android:progressDrawable="@drawable/progress_vertical"

ok，搞定，就是这么简单：

android自定义seekBar

三）弧形bar

这个也许算不上是进度条，用的也不多，最多也就仪表盘用用，不然谁会把进度条整成圆弧的呢。好吧这个可不是改改源码就能搞定的，看代码

  1. public class Arcs extends View {
  2. private Paint mArcPaint;
  3. private Paint mArcBGPaint;
  4. private RectF mOval;
  5. private float mSweep = 0;
  6. private int mSpeedMax = 200;
  7. private int mThreshold = 100;
  8. private int mIncSpeedValue = 0;
  9. private int mCurrentSpeedValue = 0;
  10. private float mCenterX;
  11. private float mCenterY;
  12. private float mSpeedArcWidth;
  13. private final float SPEED_VALUE_INC = 2;
  14. ..........
  15. }

首先是一堆成员变量，两个Paint用来画圆弧一个前景一个背景，一个RectF圆弧就画在上面，然后是一些控制参数比如sweep圆弧扫过的角度，xy坐标等等

  1. mArcPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  2. mArcPaint.setStyle(Paint.Style.STROKE);
  3. mArcPaint.setStrokeWidth(mSpeedArcWidth);
  4. //        mPaint.setStrokeCap(Paint.Cap.ROUND);
  5. mArcPaint.setColor(0xff81ccd6);
  6. BlurMaskFilter mBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
  7. mArcPaint.setMaskFilter(mBlur);
  8. mArcBGPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
  9. mArcBGPaint.setStyle(Paint.Style.STROKE);
  10. mArcBGPaint.setStrokeWidth(mSpeedArcWidth+8);
  11. mArcBGPaint.setColor(0xff171717);
  12. BlurMaskFilter mBGBlur = new BlurMaskFilter(8, BlurMaskFilter.Blur.INNER);
  13. mArcBGPaint.setMaskFilter(mBGBlur);

设置两个画笔，颜色，宽度，样式等等，BlurMaskFilter笔是边缘模糊效果，有几种，可以自己尝试

  1. @Override
  2. protected void onSizeChanged(int w, int h, int ow, int oh) {
  3. super.onSizeChanged(w, h, ow, oh);
  4. Log.i("onSizeChanged w", w+"");
  5. Log.i("onSizeChanged h", h+"");
  6. mCenterX = w * 0.5f;  // remember the center of the screen
  7. mCenterY = h - mSpeedArcWidth;
  8. mOval = new RectF(mCenterX - mCenterY, mSpeedArcWidth, mCenterX + mCenterY, mCenterY * 2);
  9. }

重写父类View的onSizeChanged，为的是自己根据布局中的大小做居中处理

  1. @Override
  2. protected void onDraw(Canvas canvas) {
  3. drawSpeed(canvas);
  4. calcSpeed();
  5. }
  6. private void drawSpeed(Canvas canvas) {
  7. canvas.drawArc(mOval, 179, 181, false, mArcBGPaint);
  8. mSweep = (float) mIncSpeedValue / mSpeedMax * 180;
  9. if (mIncSpeedValue > mThreshold) {
  10. mArcPaint.setColor(0xFFFF0000);
  11. }
  12. else {
  13. mArcPaint.setColor(0xFF00B0F0);
  14. }
  15. canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);
  16. }
  17. private void calcSpeed() {
  18. if (mIncSpeedValue < mCurrentSpeedValue) {
  19. mIncSpeedValue += SPEED_VALUE_INC;
  20. if (mIncSpeedValue > mCurrentSpeedValue) {
  21. mIncSpeedValue = mCurrentSpeedValue;
  22. }
  23. invalidate();
  24. }
  25. else if (mIncSpeedValue > mCurrentSpeedValue) {
  26. mIncSpeedValue -= SPEED_VALUE_INC;
  27. if (mIncSpeedValue < mCurrentSpeedValue) {
  28. mIncSpeedValue = mCurrentSpeedValue;
  29. }
  30. invalidate();
  31. }
  32. }

重写onDraw以便重绘canvas

drawSpeed里面

通过计算mSweep = (float) mIncSpeedValue / mSpeedMax * 180;

然后canvas.drawArc(mOval, 180, mSweep, false, mArcPaint);

会根据mSweep的变化，画出相应长度的弧度来

根据与阈值的对比，还可以设定不同的 颜色：

if (mIncSpeedValue > mThreshold) {

mArcPaint.setColor(0xFFFF0000);

}

else {

mArcPaint.setColor(0xFF00B0F0);

}

calcSpeed通过一个步进来控制增量或减量，以使弧度自然过渡，减少跳跃

ok，大功告成

android自定义seekBar

相关文章