Circular control panel using Fresco

Question

I need to implement a circular progress bar that will be displayed and updated, and Fresco loads the image. The class should extend from Drawable, as required by the Fresco setProgressBarImage () method.

My class uses Fresco to load an image, as shown below:

SimpleDraweeView simpleDraweeView = (SimpleDraweeView) view.findViewById(R.id.image);
simpleDraweeView.getHierarchy().setProgressBarImage(new ProgressBarDrawable());
simpleDraweeView.setImageURI(message.getMessageImage().getImageFileUriForList());

And the XML for the "image" SimpleDraweeView is as follows:

<com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/image"
    android:layout_width="192dp"
    android:layout_height="200dp"
    android:layout_margin="7dp"
    android:layout_gravity="center"
    fresco:actualImageScaleType="fitCenter"
    tools:background="@drawable/gallery_attach_dialog" />

The problem is that I need to replace this standard horizontal progress panel with a circular one. And Fresco does not provide a circular progress bar.

Anyone have an implementation idea for this?

Answer 1

Drawable, ProgressBarDrawable . , .

public class ImageLoadProgressBar extends ProgressBarDrawable {


float level;

Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

int color = whatevercolorresource;

final RectF oval = new RectF();

int radius = whateverradius;

public ImageLoadProgressBar(){
    paint.setStrokeWidth(whateveintyouputhere);
    paint.setStyle(Paint.Style.STROKE);
}

@Override
protected boolean onLevelChange(int level) {
    this.level = level;
    invalidateSelf();
    return true;
}

@Override
public void draw(Canvas canvas) {
    oval.set(canvas.getWidth() / 2 - radius, canvas.getHeight() / 2 - radius,
            canvas.getWidth() / 2 + radius, canvas.getHeight() / 2 + radius);

    drawCircle(canvas, level, color);
}


private void drawCircle(Canvas canvas, float level, int color) {
    paint.setColor(color);
    float angle;
    angle = 360 / 1f;
    angle = level * angle;
    canvas.drawArc(oval, 0, Math.round(angle), false, paint);
}

}

Answer 2

, Fresco CircularProgressDrawable. https://github.com/facebook/fresco/blob/master/samples/contrib/com/facebook/drawee/drawable/CircleProgressBarDrawable.java

, , , .

https://gist.github.com/sheerazam/ef701a564624d5f6d6c632e0d254cd15