如何在Android中制作圆形自定义进度条

我想要自定义进度栏像在谷歌玩商店下载外套应用程序一样的圆形状。我期望像下面的屏幕截图：

任何一个帮助我如何做到这一点？

Answer 1

我在网上find的最好的两个库在github上：

• https://github.com/Todd-Davies/ProgressWheel
• https://github.com/f2prateek/progressbutton?source=c

希望能帮到你

Answer 2

我遇到同样的问题，没有find适合我的案例的解决scheme，所以我决定换一种方式。 我创build了自定义绘图类。 在这个class级里，我已经为进度线和背景线创build了2个绘画（有一些更大的笔画）。 首先在构造函数中设置startAngle和sweepAngle：

mSweepAngle = 0; mStartAngle = 270; 

这里是这个类的onDraw方法：

 @Override public void draw(Canvas canvas) { // draw background line canvas.drawArc(mRectF, 0, 360, false, mPaintBackground); // draw progress line canvas.drawArc(mRectF, mStartAngle, mSweepAngle, false, mPaintProgress); } 

所以现在你所需要做的就是将这个可绘制的对象设置为视图的backgorund，在后台线程中更改sweepAngle：

 mSweepAngle += 360 / totalTimerTime // this is mStep 

并在具有此可绘制背景的视图上以某个间隔（例如，每隔1秒或更频繁地直接调用InvalidateSelf（））直接调用InvalidateSelf（）。 而已！

PS我知道，我知道…当然，你想要更多的代码。 所以这里是所有stream程：

1. 创buildXML视图：

     <View android:id="@+id/timer" android:layout_width="match_parent" android:layout_height="match_parent"/> 

2. 创build和configuration自定义可绘制类（如上所述）。 不要忘记为线条设置涂料。 这里画进度线：

    mPaintProgress = new Paint(); mPaintProgress.setAntiAlias(true); mPaintProgress.setStyle(Paint.Style.STROKE); mPaintProgress.setStrokeWidth(widthProgress); mPaintProgress.setStrokeCap(Paint.Cap.ROUND); mPaintProgress.setColor(colorThatYouWant); 

同样的backgroung油漆（设置宽度多一点，如果你想）

3. 在可绘制的类中创build更新的方法（上面描述的步骤计算）

    public void update() { mSweepAngle += mStep; invalidateSelf(); } 

4. 将这个可绘制的类设置为YourTimerView（我在运行时做到了这一点） – 从上面的xml查看@ + id / timer：

   OurSuperDrawableClass superDrawable = new OurSuperDrawableClass(); YourTimerView.setBackgroundDrawable(superDrawable);

5. 使用可运行和更新视图创build后台线程：

    YourTimerView.post(new Runnable() { @Override public void run() { // update progress view superDrawable.update(); } }); 

而已 ！ 享受你的酷进度栏。 这里的结果的屏幕截图，如果你厌倦了这个数量的文字。

Answer 3

有关如何创buildCircle Android自定义进度栏的更多信息，请查看此链接

步骤01您应该在可绘制文件上创build一个xml文件来configuration进度条的外观。 所以我创build我的XML文件circular_progress_bar.xml。

 <?xml version="1.0" encoding="UTF-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="120" android:pivotX="50%" android:pivotY="50%" android:toDegrees="140"> <item android:id="@android:id/background"> <shape android:innerRadiusRatio="3" android:shape="ring" android:useLevel="false" android:angle="0" android:type="sweep" android:thicknessRatio="50.0"> <solid android:color="#000000"/> </shape> </item> <item android:id="@android:id/progress"> <rotate android:fromDegrees="120" android:toDegrees="120"> <shape android:innerRadiusRatio="3" android:shape="ring" android:angle="0" android:type="sweep" android:thicknessRatio="50.0"> <solid android:color="#ffffff"/> </shape> </rotate> </item> </layer-list> 

步骤02然后在你的xml文件上创build进度条然后在你的可绘制文件夹中给出xml文件的名称作为android的parth：progressDrawable

  <ProgressBar android:id="@+id/progressBar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="150dp" android:layout_height="150dp" android:layout_marginLeft="0dp" android:layout_centerHorizontal="true" android:indeterminate="false" android:max="100" android:progressDrawable="@drawable/circular_progress_bar" /> 

步骤03使用线程可视化进度条

 package com.example.progress; import android.os.Bundle; import android.os.Handler; import android.app.Activity; import android.view.Menu; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import android.widget.ProgressBar; import android.widget.TextView; public class MainActivity extends Activity { private ProgressBar progBar; private TextView text; private Handler mHandler = new Handler(); private int mProgressStatus=0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); progBar= (ProgressBar)findViewById(R.id.progressBar); text = (TextView)findViewById(R.id.textView1); dosomething(); } public void dosomething() { new Thread(new Runnable() { public void run() { final int presentage=0; while (mProgressStatus < 63) { mProgressStatus += 1; // Update the progress bar mHandler.post(new Runnable() { public void run() { progBar.setProgress(mProgressStatus); text.setText(""+mProgressStatus+"%"); } }); try { Thread.sleep(50); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } } 

Answer 4

在android中自定义进度条非常有用的库 。

在你的布局文件中

 <com.lylc.widget.circularprogressbar.example.CircularProgressBar android:id="@+id/mycustom_progressbar" . . . /> 

和Java文件

 CircularProgressBar progressBar = (CircularProgressBar) findViewById(R.id.mycustom_progressbar); progressBar.setTitle("Circular Progress Bar"); 

Answer 5

试试这段代码来创build圆形进度条（饼图）。 通过它的整数值绘制多less百分比的填充面积。 🙂

 private void circularImageBar(ImageView iv2, int i) { Bitmap b = Bitmap.createBitmap(300, 300,Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(b); Paint paint = new Paint(); paint.setColor(Color.parseColor("#c4c4c4")); paint.setStrokeWidth(10); paint.setAntiAlias(true); paint.setStyle(Paint.Style.STROKE); canvas.drawCircle(150, 150, 140, paint); paint.setColor(Color.parseColor("#FFDB4C")); paint.setStrokeWidth(10); paint.setStyle(Paint.Style.FILL); final RectF oval = new RectF(); paint.setStyle(Paint.Style.STROKE); oval.set(10,10,290,290); canvas.drawArc(oval, 270, ((i*360)/100), false, paint); paint.setStrokeWidth(0); paint.setTextAlign(Align.CENTER); paint.setColor(Color.parseColor("#8E8E93")); paint.setTextSize(140); canvas.drawText(""+i, 150, 150+(paint.getTextSize()/3), paint); iv2.setImageBitmap(b); } 

Answer 6

我已经通过创build自定义视图解决了这个很酷的自定义进度条。 我已经覆盖了onDraw（）方法来绘制圆形，填充圆弧和文本在canvas上。

以下是自定义进度条

 import android.annotation.TargetApi; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.graphics.Rect; import android.graphics.RectF; import android.os.Build; import android.util.AttributeSet; import android.view.View; import com.investorfinder.utils.UiUtils; public class CustomProgressBar extends View { private int max = 100; private int progress; private Path path = new Path(); int color = 0xff44C8E5; private Paint paint; private Paint mPaintProgress; private RectF mRectF; private Paint textPaint; private String text = "0%"; private final Rect textBounds = new Rect(); private int centerY; private int centerX; private int swipeAndgle = 0; public CustomProgressBar(Context context) { super(context); initUI(); } public CustomProgressBar(Context context, AttributeSet attrs) { super(context, attrs); initUI(); } public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initUI(); } @TargetApi(Build.VERSION_CODES.LOLLIPOP) public CustomProgressBar(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) { super(context, attrs, defStyleAttr, defStyleRes); initUI(); } private void initUI() { paint = new Paint(); paint.setAntiAlias(true); paint.setStrokeWidth(UiUtils.dpToPx(getContext(), 1)); paint.setStyle(Paint.Style.STROKE); paint.setColor(color); mPaintProgress = new Paint(); mPaintProgress.setAntiAlias(true); mPaintProgress.setStyle(Paint.Style.STROKE); mPaintProgress.setStrokeWidth(UiUtils.dpToPx(getContext(), 9)); mPaintProgress.setColor(color); textPaint = new Paint(); textPaint.setAntiAlias(true); textPaint.setStyle(Paint.Style.FILL); textPaint.setColor(color); textPaint.setStrokeWidth(2); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int viewWidth = MeasureSpec.getSize(widthMeasureSpec); int viewHeight = MeasureSpec.getSize(heightMeasureSpec); int radius = (Math.min(viewWidth, viewHeight) - UiUtils.dpToPx(getContext(), 2)) / 2; path.reset(); centerX = viewWidth / 2; centerY = viewHeight / 2; path.addCircle(centerX, centerY, radius, Path.Direction.CW); int smallCirclRadius = radius - UiUtils.dpToPx(getContext(), 7); path.addCircle(centerX, centerY, smallCirclRadius, Path.Direction.CW); smallCirclRadius += UiUtils.dpToPx(getContext(), 4); mRectF = new RectF(centerX - smallCirclRadius, centerY - smallCirclRadius, centerX + smallCirclRadius, centerY + smallCirclRadius); textPaint.setTextSize(radius * 0.5f); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawPath(path, paint); canvas.drawArc(mRectF, 270, swipeAndgle, false, mPaintProgress); drawTextCentred(canvas); } public void drawTextCentred(Canvas canvas) { textPaint.getTextBounds(text, 0, text.length(), textBounds); canvas.drawText(text, centerX - textBounds.exactCenterX(), centerY - textBounds.exactCenterY(), textPaint); } public void setMax(int max) { this.max = max; } public void setProgress(int progress) { this.progress = progress; int percentage = progress * 100 / max; swipeAndgle = percentage * 360 / 100; text = percentage + "%"; invalidate(); } public void setColor(int color) { this.color = color; } } 

在布局XML中

 <com.your.package.name.CustomProgressBar android:id="@+id/progress_bar" android:layout_width="70dp" android:layout_height="70dp" android:layout_alignParentRight="true" android:layout_below="@+id/txt_title" android:layout_marginRight="15dp" /> 

在活动中

 CustomProgressBar progressBar = (CustomProgressBar)findViewById(R.id.progress_bar); progressBar.setMax(9); progressBar.setProgress(5); 

Answer 7

我会做一个新的视图类，并从现有的ProgressBar派生。 然后重写onDraw函数。 你将需要直接对canvas进行绘制，因为它的自定义 – drawText，drawArc和drawOval的组合应该做到这一点 – 椭圆形的外圈和空白部分，有颜色的部分。 您可能最终需要重写onMeasure和onLayout。 然后在你的xml中，当你想使用它的时候，通过类名来引用这个视图。