Круглый фронт индикатор прогресса в Android

Question

Я новичок в android, и я пытаюсь сделать круговой индикатор прогресса с приятным стилем.

Поэтому я нашел очень простое решение, как сделать круговой индикатор, используя shape="ring"

Мой код

mainpage_layout.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ProgressBar 
     android:id="@+id/progressBar" 
     style="?android:attr/progressBarStyleHorizontal" 
     android:layout_width="250dp" 
     android:layout_height="250dp" 
     android:max="100" 
     android:progress="80" 
     android:rotation="-90" 
     android:layout_centerInParent="true" 
     android:progressDrawable="@drawable/circular_progress" /> 

</RelativeLayout> 

circular_progress.xml :

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
    android:useLevel="true" 
    android:innerRadiusRatio="2.3" 
    android:shape="ring" 
    android:thickness="7dp" > 
    <solid android:color="@color/colorPrimary" /> 
</shape> 

и ее внешний вид как этот

---

Я хочу, чтобы стиль его, как этот удивительный прогресс бар:

Edit Это мягкий фон для индикатора выполнения, который я хочу сделать

добавить некоторый фон в прогресс-бар и сделать его ребра округляется вместо квадрата.

Есть ли простое решение для этого, или я должен отказаться от использования этой вещи shape="ring".

спасибо,

Asaf.

Answer 1

Вы можете использовать https://github.com/korre/android-circular-progress-bar

Там у вас есть метод useRoundedCorners вам нужно передать ложные сделать это не круглый по-умолчанию она круглая на краю

Существует специальный класс, который вы можете фактически взять из этой библиотеки (этого более чем достаточно),

import android.animation.ValueAnimator; 
import android.content.Context; 
import android.graphics.Canvas; 
import android.graphics.Color; 
import android.graphics.Paint; 
import android.graphics.RectF; 
import android.util.AttributeSet; 
import android.view.View; 
import android.view.animation.DecelerateInterpolator; 

public class CircularProgressBar extends View { 

    private int mViewWidth; 
    private int mViewHeight; 

    private final float mStartAngle = -90;  // Always start from top (default is: "3 o'clock on a watch.") 
    private float mSweepAngle = 0;    // How long to sweep from mStartAngle 
    private float mMaxSweepAngle = 360;   // Max degrees to sweep = full circle 
    private int mStrokeWidth = 20;    // Width of outline 
    private int mAnimationDuration = 400;  // Animation duration for progress change 
    private int mMaxProgress = 100;    // Max progress to use 
    private boolean mDrawText = true;   // Set to true if progress text should be drawn 
    private boolean mRoundedCorners = true;  // Set to true if rounded corners should be applied to outline ends 
    private int mProgressColor = Color.BLACK; // Outline color 
    private int mTextColor = Color.BLACK;  // Progress text color 

    private final Paint mPaint;     // Allocate paint outside onDraw to avoid unnecessary object creation 

    public CircularProgressBar(Context context) { 
     this(context, null); 
    } 

    public CircularProgressBar(Context context, AttributeSet attrs) { 
     this(context, attrs, 0); 
    } 

    public CircularProgressBar(Context context, AttributeSet attrs, int defStyleAttr) { 
     super(context, attrs, defStyleAttr); 
     mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
    } 

    @Override 
    protected void onDraw(Canvas canvas) { 
     super.onDraw(canvas); 
     initMeasurments(); 
     drawOutlineArc(canvas); 

     if (mDrawText) { 
      drawText(canvas); 
     } 
    } 

    private void initMeasurments() { 
     mViewWidth = getWidth(); 
     mViewHeight = getHeight(); 
    } 

    private void drawOutlineArc(Canvas canvas) { 

     final int diameter = Math.min(mViewWidth, mViewHeight) - (mStrokeWidth * 2); 

     final RectF outerOval = new RectF(mStrokeWidth, mStrokeWidth, diameter, diameter); 

     mPaint.setColor(mProgressColor); 
     mPaint.setStrokeWidth(mStrokeWidth); 
     mPaint.setAntiAlias(true); 
     mPaint.setStrokeCap(mRoundedCorners ? Paint.Cap.ROUND : Paint.Cap.BUTT); 
     mPaint.setStyle(Paint.Style.STROKE); 
     canvas.drawArc(outerOval, mStartAngle, mSweepAngle, false, mPaint); 
    } 

    private void drawText(Canvas canvas) { 
     mPaint.setTextSize(Math.min(mViewWidth, mViewHeight)/5f); 
     mPaint.setTextAlign(Paint.Align.CENTER); 
     mPaint.setStrokeWidth(0); 
     mPaint.setColor(mTextColor); 

     // Center text 
     int xPos = (canvas.getWidth()/2); 
     int yPos = (int) ((canvas.getHeight()/2) - ((mPaint.descent() + mPaint.ascent())/2)) ; 

     canvas.drawText(calcProgressFromSweepAngle(mSweepAngle) + "%", xPos, yPos, mPaint); 
    } 

    private float calcSweepAngleFromProgress(int progress) { 
     return (mMaxSweepAngle/mMaxProgress) * progress; 
    } 

    private int calcProgressFromSweepAngle(float sweepAngle) { 
     return (int) ((sweepAngle * mMaxProgress)/mMaxSweepAngle); 
    } 

    /** 
    * Set progress of the circular progress bar. 
    * @param progress progress between 0 and 100. 
    */ 
    public void setProgress(int progress) { 
     ValueAnimator animator = ValueAnimator.ofFloat(mSweepAngle, calcSweepAngleFromProgress(progress)); 
     animator.setInterpolator(new DecelerateInterpolator()); 
     animator.setDuration(mAnimationDuration); 
     animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { 
      @Override 
      public void onAnimationUpdate(ValueAnimator valueAnimator) { 
       mSweepAngle = (float) valueAnimator.getAnimatedValue(); 
       invalidate(); 
      } 
     }); 
     animator.start(); 
    } 

    public void setProgressColor(int color) { 
     mProgressColor = color; 
     invalidate(); 
    } 

    public void setProgressWidth(int width) { 
     mStrokeWidth = width; 
     invalidate(); 
    } 

    public void setTextColor(int color) { 
     mTextColor = color; 
     invalidate(); 
    } 

    public void showProgressText(boolean show) { 
     mDrawText = show; 
     invalidate(); 
    } 

    /** 
    * Toggle this if you don't want rounded corners on progress bar. 
    * Default is true. 
    * @param roundedCorners true if you want rounded corners of false otherwise. 
    */ 
    public void useRoundedCorners(boolean roundedCorners) { 
     mRoundedCorners = roundedCorners; 
     invalidate(); 
    } 
} 

Затем вы можете установить вид в вашем XML, как

<yourPackageName.CircularProgressBar 
     android:id="@+id/circularProgress" 
     android:layout_width="180dp" 
     android:layout_height="180dp"/> 

И в своем классе вы можете назвать это, как это,

CircularProgressBar circularProgressBar = (CircularProgressBar) findViewById(R.id.circularProgress); 
circularProgressBar.setProgress(50); 
circularProgressBar.setProgressColor(Color.BLUE);