Introduction to the

This article introduces the use and implementation of CircleProgressDialog open source library, the main implementation of the following functions: – customize a nice round progress bar, can be directly used in the layout file, can set the ring width, ring color, ring shadow size and other attributes; – Realize a custom dialog for the user to wait for the display, through a simple code can directly call the display, while providing API for color, text and other Settings

Through this article can understand the relevant knowledge of custom view and custom dialog method github link as follows, feel can also please help click under the star~ github link

Use effect

First look at the use effect:



There are two ways to use it

Used in layout files

Loading_color, loading_width, and shadow_offset can be set

Copy the code

Use in the code, dialog box form pop-up

Call the following code directly with the default Settings

CircleProgressDialog circleProgressDialog;
circleProgressDialog = new CircleProgressDialog(this);
circleProgressDialog.showDialog(); Copy the code

Of course, related attributes can also be set, while in the process of waiting, the content and color of the prompt text can be dynamically changed according to the running situation of the program

CircleProgressDialog circleProgressDialog; circleProgressDialog = new CircleProgressDialog(this); circleProgressDialog.setDialogSize(15); circleProgressDialog.setProgressColor(Color.parseColor("#FFFFFF")); circleProgressDialog.setTextColor(Color.parseColor("#FFFFFF")); . circleProgressDialog.showDialog(); circleProgressDialog.changeText("erro:..." ); circleProgressDialog.changeTextColor(Color.parseColor("##EB0000")); circleProgressDialog.dismiss();Copy the code

Add two lines of code to build. Gradle:

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
    }Copy the code

Add dependencies to build.gradle in module:

Dependencies {the compile 'com. Making. Autume: CircleProgressDialog: 1.0.0'} ` `Copy the code

Concrete implementation process

The custom view

The relevant knowledge

Draw arc – DrawArc (RectF OVAL, float startAngle, Float sweepAngle, Booleusecenter, Paint Paint) – Oval is an object of type RecF, It defines the shape of the ellipse – startAngle refers to the initial Angle of drawing. The 3 points of the clock correspond to 0 degrees. If the startAngle passed in is less than 0 or greater than or equal to 360, then use startAngle to mold 360 as the initial drawing Angle. – sweepAngle Indicates the Angle swept clockwise from startAngle along the clock. If the sweepAngle is greater than or equal to 360, the full elliptic ring is drawn. If sweepAngle is less than 0, then sweepAngle will be used as the swept Angle after taking the model of 360. -usecenter is a Boolean value that, if true, closes the ring by connecting the beginning and end of the ring with the center of the ellipse after the ring has been drawn. If the value is false, it means that after the ring is drawn, the beginning and end of the ring are connected directly, without passing through the center of the ellipse.

RectF RectF = new RectF(100, 100, 300, 300); -left: the x-coordinate on the left of the rectangle. -top: the y-coordinate on the top of the rectangle. -right: The x-coordinate on the left of the rectangle. – bottom: The Y coordinate at the bottom of the rectangle is actually the coordinates of the upper left and lower right corners of the rectangle

First add the properties of the custom view

We define properties such as color, width, shadow offset, display or not. Format is the value of this property: A total of: string, color, demension, integer, enum, reference, float, Boolean, fraction, flag;




    
        
        
        
        
    

Copy the code

Write custom view – RotateLoading

Default related properties

    private final int DEFAULT_COLOR = Color.WHITE; 
    private final int DEFAULT_WIDTH = 6;
    private final int DEFAULT_SHADOW_POSITION = 2;
    private final boolean DEFAULT_VISIBLE = true;

    private int color = DEFAULT_COLOR;
    private int width = dpToPx(DEFAULT_WIDTH);
    private int shadowOffset = dpToPx(DEFAULT_SHADOW_POSITION);
    private boolean isStart = DEFAULT_VISIBLE;

    private Paint mPaint = new Paint();
    private RectF loadingRectF;
    private RectF shadowRectF;

    
    private int topDegree = 10;
    private int bottomDegree = 190;Copy the code

Gets custom attributes

    private void obtainStyleAttrs(AttributeSet attrs) {
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.RotateLoading);
        color = typedArray.getColor(R.styleable.RotateLoading_loading_color, color);
        width = (int) typedArray.getDimension(R.styleable.RotateLoading_loading_width, width);
        shadowOffset = (int) typedArray.getDimension(R.styleable.RotateLoading_shadow_offset, shadowOffset);
        isStart = typedArray.getBoolean(R.styleable.RotateLoading_loading_visible, isStart);
        typedArray.recycle();
    }Copy the code

Paint the initialization

 private void initView() {
        mPaint.setColor(color);
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(width);
        mPaint.setStrokeCap(Paint.Cap.ROUND);
    }Copy the code

Initialize the RectF required to draw the arc

@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        arc = 10;
        
        loadingRectF = new RectF(2 * width, 2 * width, w - 2 * width, h - 2 * width);
        shadowRectF = new RectF(2 * width + shadowOffset, 2 * width + shadowOffset, w - 2 * width + shadowOffset, h - 2 * width + shadowOffset);
    }Copy the code

Rewrite onDraw to draw the graph

@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (! isStart) { return; } mPaint.setColor(Color.parseColor("#1a000000")); canvas.drawArc(shadowRectF, topDegree, arc, false, mPaint); canvas.drawArc(shadowRectF, bottomDegree, arc, false, mPaint); mPaint.setColor(color); canvas.drawArc(loadingRectF, topDegree, arc, false, mPaint); canvas.drawArc(loadingRectF, bottomDegree, arc, false, mPaint); try { Thread.sleep(2); } catch (InterruptedException e) { e.printStackTrace(); } topDegree += 10; bottomDegree += 10; if (topDegree > 360) { topDegree = topDegree - 360; } if (bottomDegree > 360) { bottomDegree = bottomDegree - 360; } if (changeBigger) {if (arc < 160) {arc += 2.5; invalidate(); } } else { if (arc > 10) { arc -= 5; invalidate(); } } if (arc == 160 || arc == 10) { changeBigger = ! changeBigger; invalidate(); }}Copy the code

At this point, the circular progress bar is complete, and the full code can be viewed on Github

Write custom dialog

Writing layout files

You put in the RotateLoading that you just customized, and you put a text underneath




    

        

    

    

Copy the code

Default related properties

public class CircleProgressDialog { private Context mContext; private Dialog mDialog; private int dialogSize = 65; private int progressColor = Color.WHITE; private int progressWidth = 6; private int shadowOffset = 2; private int textColor = Color.parseColor("#c0000000"); private String text = "loading..." ; private TextView progressTextView; private boolean isShowing = false; . }Copy the code

Initial Configuration

     public CircleProgressDialog(Context context) {
            this.mContext = context;
            init();
        }

    private void init() {
        
        float scale = mContext.getResources().getDisplayMetrics().density;
        dialogSize = (int) (dialogSize * scale + 0.5f);

        mDialog = new AlertDialog.Builder(mContext).create();
        mDialog.getWindow().setBackgroundDrawableResource(android.R.color.transparent);
    }Copy the code

Call the display dialog box

Load the layout file and call the display of the custom view

 public void showDialog() {
        mDialog.show();
        mDialog.setContentView(R.layout.dialog_circle_progress);

        
        progressTextView = (TextView) mDialog.findViewById(R.id.progreeTextView);
        RotateLoading mRotateLoading = (RotateLoading) mDialog.findViewById(R.id.rotateloading);
        LinearLayout layout = (LinearLayout) mDialog.findViewById(R.id.llProgress);

        
        layout.setLayoutParams(new LinearLayout.LayoutParams(dialogSize, dialogSize));
        mRotateLoading.setWidth(progressWidth);
        mRotateLoading.setColor(progressColor);
        mRotateLoading.setShadowOffset(shadowOffset);
        progressTextView.setTextColor(textColor);
        progressTextView.setText(text);

        mRotateLoading.start();
        isShowing = true;
    }Copy the code

Apis provided to users

Includes the set method of related attributes and the distribution of two changed text attributes

public void changeText(String str) { if (progressTextView ! = null) { progressTextView.setText(str); } } public void changeTextColor(int color) { if (progressTextView ! = null) { progressTextView.setTextColor(color); }}... public void setCancelable(boolean isCancelable) { if (mDialog ! = null) { mDialog.setCancelable(isCancelable); }}...Copy the code

Ok, now the custom dialog is complete.

conclusion

This article introduces the CircleProgressDialog open source library and its implementation method, and also introduces the custom view and custom dialog method. Github Link CSDN download link

This article starting address link: www.codeceo.com/article/and…