An Android end circular progress bar dynamic display method and device and computer equipment

Abstract

This invention discloses a method, apparatus, and computer device for dynamically displaying a circular progress bar on an Android device, relating to the field of Android development and application technology. The method involves initializing the inner and outer circle styles of the circular progress bar, first drawing the inner and outer circle views of the progress bar, and then, when the user sets or updates the actual value of the progress bar, invoking an Android-side attribute animation method. Within a preset animation duration, the progress bar gradually returns to various interval values ​​within the animation execution parameter value range, starting from the minimum interval value and increasing upwards. After each interval value is returned, the outer circle's rotation endpoint angle is updated and calculated based on that interval value. Then, based on the updated calculation result of the outer circle's rotation endpoint angle, the outer circle view is redrawn using an Android-side continuous drawing method, resulting in a dynamically displayed circular progress bar on the Android device. This allows for dynamic display of progress bar text prompts based on the current progress, meeting the needs of dynamic visualization.

Description

Technical Field

[0001] This invention belongs to the field of Android development and application technology, specifically relating to a method, device, and computer equipment for dynamically displaying a circular progress bar on an Android device. Background Technology

[0002] In regular Android development applications, there are often business scenarios that require the use of progress bar effects. In general, the native progress bar effect of Android is used. However, the native progress bar effect cannot meet the needs of dynamic visualization. Therefore, how to dynamically implement circular progress bar text prompts based on the current progress is a topic that urgently needs to be studied by those skilled in the art. Summary of the Invention

[0003] The purpose of this invention is to provide a method, device, computer equipment, and computer-readable storage medium for dynamically displaying a circular progress bar on an Android device, in order to solve the problem that the existing Android native progress bar effect cannot meet the needs of dynamic visualization.

[0004] To achieve the above objectives, the present invention adopts the following technical solution:

[0005] Firstly, a method for dynamically displaying a circular progress bar on Android is provided, including:

[0006] Initialize the inner and outer circle styles of the circular progress bar;

[0007] Obtain the progress bar height and width set by the user, and determine the width and height of the circular progress bar with equal values ​​based on the progress bar height and width;

[0008] Based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the Android constructor RectF() is called to create a new first rectangle RectF class object required for drawing the inner circle. Based on the brush thickness attribute of the outer circle style and the width and height of the circular progress bar, the Android constructor RectF() is called to create a new second rectangle RectF class object required for drawing the outer circle.

[0009] Based on the first rectangle RectF object, the preset inner circle rotation start angle, the preset inner circle rotation end angle, and the inner circle style, the Android-side arc drawing function drawArc() is called to draw the inner circle view of the circular progress bar. Based on the second rectangle RectF object, the preset outer circle rotation start angle, the outer circle rotation end angle calculated based on the actual value of the progress bar, and the outer circle style, the arc drawing function drawArc() is called to draw the outer circle view of the circular progress bar.

[0010] When the user sets or updates the actual value of the progress bar, the Android-side property animation method ValueAnimator is invoked. Within a preset animation duration, it gradually returns to each interval value within the animation execution parameter value range, starting from the minimum interval value and increasing from small to large. After returning each interval value, the outer circle rotation endpoint angle is first updated and calculated based on that interval value. Then, based on the updated calculation result of the outer circle rotation endpoint angle, the Android-side continuous drawing method postInvalidate is invoked to redraw the outer circle view, resulting in a dynamically displayed Android-side circular progress bar. The animation execution parameter value range is [0, mCP] when set by the user. set During the update, it becomes [mCP] bf mCP af mCP set This represents the actual value of the progress bar set by the user, mCP bf This represents the actual value of the progress bar before the update, mCP. af This indicates the actual value of the updated progress bar.

[0011] Based on the above-described invention, a dynamic visualization scheme for a circular progress bar is provided. After initializing the inner and outer circle styles of the circular progress bar, the width and height of the circular progress bar are first determined based on the user-defined progress bar height and width, and these values ​​are equal. Then, based on the brush thickness attributes of the inner and outer circle styles and the width and height of the circular progress bar, the Android client's constructor `RectF()` is called to create a new `RectF` class object required for drawing the inner and outer circles. Finally, based on the `RectF` class object, the rotation start and end angles of the inner and outer circles, and the inner and outer circle styles, the Android client's arc drawing function `drawArc()` is called to draw the inner and outer circles of the circular progress bar. In the view, when the user sets or updates the actual value of the progress bar, the Android-side property animation method ValueAnimator is invoked. Within a preset animation duration, it gradually returns to various interval values ​​within the animation execution parameter value range, starting from the minimum interval value and increasing from small to large. After returning each interval value, the angle of the outer circle's rotation endpoint is first updated and calculated based on that interval value. Then, based on the updated calculation result of the outer circle's rotation endpoint angle, the Android-side continuous drawing method postInvalidate is invoked to redraw the outer circle view, resulting in a dynamically displayed circular progress bar on the Android side. This allows for dynamic implementation of circular progress bar text prompts based on the current progress, meeting the needs of dynamic visualization. Furthermore, dynamic style configuration allows developers to achieve the desired effect with a single click, solving the problem of progress bar diversity, improving development efficiency, and facilitating practical application and promotion.

[0012] In one possible design, the method further includes:

[0013] Initialize the text style of the circular progress bar;

[0014] Based on the actual value of the progress bar, the progress percentage value is also calculated;

[0015] Call the Android constructor Rect() to create a new Rect object.

[0016] Based on the progress ratio value and the Rect object, call the Android text rectangle acquisition function getTextBounds() to obtain a text rectangle box used to display the progress ratio value.

[0017] Call the Android version's rectangle width function width() to get the width of the text rectangle, and call the Android version's rectangle height function height() to get the height of the text rectangle;

[0018] Based on the width and height of the text rectangle and the width and height of the circular progress bar, the text starting coordinates (TextX, TextY) required to describe the text are calculated using the following formula:

[0019]

[0020] In the formula, Width represents the width of the circular progress bar, Height represents the height of the circular progress bar, TextWidth represents the width of the text rectangle, and TextHeight represents the height of the text rectangle;

[0021] Based on the progress ratio value, the coordinates of the text starting point, and the text style, the Android client's drawText() function is called to draw the text view of the circular progress bar.

[0022] In one possible design, after each interval value is returned, the method further includes: first updating and calculating the progress ratio value and the text start coordinates based on the interval value; then, based on the updated calculation results of the progress ratio value and the text start coordinates, calling the Android continuous drawing method postInvalidate to redraw the text view.

[0023] In one possible design, initialize the inner and outer circle styles of the circular progress bar, including:

[0024] Determine whether the user has configured the attribute of the target circle style, wherein the target circle style refers to the inner circle style or outer circle style of the circular progress bar;

[0025] If so, the Android-side paint function Paint() is called to create a new paint as the paint for the target circular style. The Android-side paint color setting function Paint.setColor() is called to obtain the paint color attribute configured by the user for the target circular style, and the Android-side paint thickness setting function Paint.setStrokeWidth() is called to obtain the paint thickness attribute configured by the user for the target circular style.

[0026] In one possible design, obtaining the user-set progress bar height and width, and determining the width and height of the circular progress bar with equal numerical values ​​based on the progress bar height and width, includes:

[0027] The Android default size acquisition function getDefaultSize() and the Android suggested minimum height acquisition function getSuggestedMinimumHeight() are called to obtain the user-set progress bar height, and the Android default size acquisition function getDefaultSize() and the Android suggested minimum width acquisition function getSuggestedMinimumWidth() are called to obtain the user-set progress bar width.

[0028] The minimum value between the progress bar height and the progress bar width is obtained by calling the minimum value function Math.min() on the Android side.

[0029] The Android client calls the setMeasuredDimension() function to set the width and height of the circular progress bar to the minimum values.

[0030] In one possible design, based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the Android constructor `RectF()` is called to create a new `RectF` class object required for drawing the inner circle, including:

[0031] Based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the starting coordinates (left, top) and ending coordinates (right, bottom) of the rectangle are calculated using the following formula:

[0032]

[0033] In the formula, mSW represents the parameter value of the brush thickness attribute of the inner circle style, Width represents the width of the circular progress bar, and Height represents the height of the circular progress bar.

[0034] Based on the starting coordinates (left, top) and the ending coordinates (right, bottom), the Android constructor RectF() is called to create a new RectF class object required for drawing the inner circle.

[0035] In one possible design, the starting angle of the inner circle rotation is set to 270 degrees, the ending angle of the inner circle rotation is set to 360 degrees, the starting angle of the circle rotation is also set to 270 degrees, and the ending angle of the outer circle rotation is calculated according to the following formula:

[0036] oSA=(mCP / mTP)×360

[0037] In the formula, oSA represents the end angle of the outer circle rotation, mCP represents the actual value of the progress bar, and mTP represents the known total value of the progress bar.

[0038] Secondly, an Android-based circular progress bar dynamic display device is provided, including a progress bar initialization model, a progress bar size determination module, a rectangle object creation module, an inner and outer circle view drawing module, and an outer circle view redrawing module.

[0039] The progress bar initialization model is used to initialize the inner circle style and outer circle style of the circular progress bar;

[0040] The progress bar size determination module is used to obtain the progress bar height and progress bar width set by the user, and determine the width and height of the circular progress bar with equal values ​​based on the progress bar height and progress bar width;

[0041] The rectangle object creation module is communicatively connected to the progress bar initialization model and the progress bar size determination module. It is used to call the Android-side constructor RectF() based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar to create a first rectangle RectF class object required for drawing the inner circle, and to call the Android-side constructor RectF() based on the brush thickness attribute of the outer circle style and the width and height of the circular progress bar to create a second rectangle RectF class object required for drawing the outer circle.

[0042] The inner and outer circle view drawing modules are respectively connected to the progress bar initialization model and the rectangle object creation module. They are used to draw the inner circle view of the circular progress bar by calling the Android arc drawing function drawArc() based on the first rectangle RectF class object, the preset inner circle rotation start angle, the preset inner circle rotation end angle, and the inner circle style. They are also used to draw the outer circle view of the circular progress bar by calling the arc drawing function drawArc() based on the second rectangle RectF class object, the preset outer circle rotation start angle, the outer circle rotation end angle calculated based on the actual value of the progress bar, and the outer circle style.

[0043] The outer circle view redrawing module is communicatively connected to the inner and outer circle view drawing modules. When the user sets or updates the actual value of the progress bar, it calls the Android-side property animation method ValueAnimator to gradually return to each interval value within the animation execution parameter value range, starting from the minimum interval value and increasing it from small to large, within a preset animation duration. After returning each interval value, it first updates and calculates the outer circle rotation endpoint angle based on that interval value. Then, based on the updated calculation result of the outer circle rotation endpoint angle, it calls the Android-side continuous drawing method postInvalidate to redraw the outer circle view, resulting in a dynamically displayed Android-side circular progress bar. The animation execution parameter value range is [0, mCP] when set by the user. set During the update, it becomes [mCP] bf mCP af mCP set This represents the actual value of the progress bar set by the user, mCP bf This represents the actual value of the progress bar before the update, mCP. af This indicates the actual value of the updated progress bar.

[0044] Thirdly, the present invention provides a computer device, comprising a memory, a processor, and a transceiver connected in sequence for communication, wherein the memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the Android-side circular progress bar dynamic display method as described in the first aspect or any possible design in the first aspect.

[0045] Fourthly, the present invention provides a computer-readable storage medium storing instructions that, when executed on a computer, perform the Android-side circular progress bar dynamic display method as described in the first aspect or any possible design within the first aspect.

[0046] Fifthly, the present invention provides a computer program product containing instructions that, when the instructions are executed on a computer, cause the computer to perform the Android-based circular progress bar dynamic display method as described in the first aspect or any possible design in the first aspect.

[0047] The beneficial effects of the above scheme are:

[0048] (1) This invention creatively provides a dynamic visualization scheme for a circular progress bar. After initializing the inner and outer circle styles of the circular progress bar, the width and height of the circular progress bar are determined to be equal in value based on the user-set progress bar height and width. Then, based on the brush thickness attributes of the inner and outer circle styles and the width and height of the circular progress bar, the Android client constructor RectF() is called to create a new RectF class object required for drawing the inner and outer circles. Finally, based on the RectF class object, the rotation start and end angles of the inner and outer circles, and the inner and outer circle styles, the Android client arc drawing function drawArc() is called to draw the inner and outer circles of the circular progress bar. In the view, when the user sets or updates the actual value of the progress bar, the Android-side property animation method ValueAnimator is called. Within the preset animation duration, it gradually returns to each interval value within the range of animation execution parameter values, starting from the minimum interval value and increasing from small to large. After returning each interval value, the angle of the outer circle's rotation endpoint is updated and calculated based on that interval value. Then, based on the updated calculation result of the outer circle's rotation endpoint angle, the Android-side continuous drawing method postInvalidate is called to redraw the outer circle view, resulting in a dynamically displayed circular progress bar on the Android side. In this way, the circular progress bar text prompts can be dynamically implemented according to the current progress, meeting the needs of dynamic visualization.

[0049] (2) It can achieve the purpose of dynamically displaying the progress ratio value in text, enriching the dynamic visualization content and effect, and further improving its practicality;

[0050] (3) It can also achieve the desired effect by dynamically configuring styles, allowing developers to configure the required styles with just one click. This not only solves the problem of diversifying progress bars, but also improves development efficiency and facilitates practical application and promotion. Attached Figure Description

[0051] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0052] Figure 1This is a flowchart illustrating the method for dynamically displaying a circular progress bar on Android, as provided in an embodiment of this application.

[0053] Figure 2 An example diagram of a circular progress bar provided in an embodiment of this application.

[0054] Figure 3 This is a schematic diagram of the structure of the Android-based circular progress bar dynamic display device provided in this application embodiment.

[0055] Figure 4 A schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0056] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the present invention will be briefly introduced below in conjunction with the accompanying drawings and descriptions of the embodiments or the prior art. Obviously, the following description of the structure of the accompanying drawings is only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort. It should be noted that the description of these embodiments is for the purpose of helping to understand the present invention, but does not constitute a limitation of the present invention.

[0057] It should be understood that although the terms "first" and "second", etc., may be used herein to describe various objects, these objects should not be limited by these terms. These terms are only used to distinguish one object from another. For example, the first object may be referred to as the second object, and similarly, the second object may be referred to as the first object, without departing from the scope of the exemplary embodiments of the invention.

[0058] It should be understood that the term "and / or" that may appear in this document is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can mean: A exists alone, B exists alone, or A and B exist simultaneously. Another example is A, B and / or C, which can mean that any one of A, B, and C or any combination thereof exists. The term " / and" that may appear in this document describes another relationship between related objects, indicating that two relationships can exist. For example, A / and B can mean: A exists alone or A and B exist simultaneously. In addition, the character " / " that may appear in this document generally indicates that the related objects before and after it are in an "or" relationship.

[0059] Example:

[0060] like Figure 1As shown, the method for dynamically displaying a circular progress bar on Android provided in the first aspect of this embodiment can be executed, but is not limited to, by a computer device with certain computing resources that runs on the Android system. For example, it can be executed by electronic devices such as personal computers (PCs, which are multi-purpose computers of a size, price, and performance suitable for personal use; desktops, laptops, mini-laptops, tablets, and ultrabooks all belong to personal computers), smartphones, personal digital assistants (PDAs), or wearable devices. Figure 1 As shown, the method for dynamically displaying a circular progress bar on an Android device may include, but is not limited to, the following steps S1 to S5.

[0061] S1. Initialize the inner and outer circle styles of the circular progress bar.

[0062] In step S1, as Figure 2 As shown, the circular progress bar includes, but is not limited to, an inner circle graphic at the bottom that reflects the total value of the progress bar and an outer circle graphic at the top that reflects the actual value of the progress bar. To facilitate the subsequent drawing of these inner and outer circles, their circular styles must be initialized first. Considering that the style attributes of the inner and outer circles include, but are not limited to, parameters such as brush, brush color, and brush thickness, and to achieve user configurability, preferably, initializing the inner and outer circle styles of the circular progress bar includes, but is not limited to: first determining whether the user has configured the attributes of a target circular style, where the target circular style refers to the inner or outer circle style of the circular progress bar; if so, then calling the Android-side brush function Paint() to create a new brush as the brush for the target circular style, and calling the Android-side brush color setting function Paint.setColor() to obtain the brush color attribute configured by the user for the target circular style, and calling the Android-side brush thickness setting function Paint.setStrokeWidth() to obtain the brush thickness attribute configured by the user for the target circular style. The aforementioned judgment method can be based on the conventional detection results of the human-computer interaction configuration interface. The Android pen function Paint(), the Android pen color setting function Paint.setColor(), and the Android pen thickness setting function Paint.setStrokeWidth() are all native APIs (Application Programming Interfaces) that come with the existing Android system. These APIs are predefined functions that provide applications and developers with the ability to access a set of routines based on certain software or hardware without having to access the source code or understand the details of the internal working mechanism.

[0063] For example, the attribute names of the inner circle style include, but are not limited to, mInnerPaint (inner circle brush), mInnerColor (inner circle brush color), and mStrokeWidth (brush thickness, default is 10dp). First, it can be determined whether the user has configured the inner circle style attributes. If the user has configured them, the default inner circle style is replaced as follows: Initialize mInnerPaint (inner circle brush), and call mInnerPaint.setColor() to set the inner circle brush color, and call mInnerPaint.setStrokeWidth() to set the brush thickness. The specific code is shown below:

[0064]

[0065] For example, the attribute names of the outer circle style include, but are not limited to, mOuterPaint (outer circle brush), mOuterColor (outer circle brush color), and mStrokeWidth (brush thickness, default is 10dp). First, it can be determined whether the user has configured the outer circle style attributes. If the user has configured them, the default outer circle style is replaced as follows: Initialize mOuterPaint (outer circle brush), and call mOuterPaint.setColor() to set the outer circle brush color, and call mOuterPaint.setStrokeWidth() to set the brush thickness. The specific code is shown below:

[0066]

[0067] In addition, if it is determined that the user has not configured the attribute of the target circle style, the inner circle style or outer circle style of the circular progress bar can be initialized using the default configured circle style.

[0068] S2. Obtain the progress bar height and progress bar width set by the user, and determine the width and height of the circular progress bar with equal values ​​based on the progress bar height and progress bar width.

[0069] In step S2, since the purpose is to display a circular progress bar, equal width and height need to be set. Specifically, the user-set progress bar height and width are obtained, and the width and height of the circular progress bar, which are equal in value, are determined based on the progress bar height and width. This includes, but is not limited to: first, calling the Android default size acquisition function getDefaultSize() and the Android suggested minimum height acquisition function getSuggestedMinimumHeight() to obtain the user-set progress bar height, and calling the Android default size acquisition function getDefaultSize() and the Android suggested minimum width acquisition function getSuggestedMinimumWidth() to obtain the user-set progress bar width; then, calling the Android minimum value acquisition function Math.min() to obtain the minimum value between the progress bar height and the progress bar width; finally, calling the Android measurement dimension setting function setMeasuredDimension() to set the width and height of the circular progress bar to the minimum value respectively. The aforementioned functions for obtaining the default size (getDefaultSize()), the suggested minimum height (getSuggestedMinimumHeight()), the suggested minimum width (getSuggestedMinimumWidth()), the minimum value (Math.min()), and the dimension setting (setMeasuredDimension()) on Android are all native APIs built into the existing Android system. The specific code is shown below:

[0070]

[0071] S3. Based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, call the Android client constructor RectF() to create a new first rectangle RectF class object required for drawing the inner circle. Based on the brush thickness attribute of the outer circle style and the width and height of the circular progress bar, call the Android client constructor RectF() to create a new second rectangle RectF class object required for drawing the outer circle.

[0072] In step S3, the Android-side constructor RectF() is also a native API built into the existing Android system, specifically in the form RectF(float left, float top, float right, float bottom), where left and top represent the starting coordinates of the rectangle, and right and bottom represent the ending coordinates of the rectangle. Specifically, based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the Android-side constructor RectF() is called to create a new first rectangle RectF class object required for drawing the inner circle, including but not limited to: first, based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the starting coordinates (left, top) and ending coordinates (right, bottom) of the rectangle are calculated according to the following formula:

[0073]

[0074] In the formula, mSW represents the parameter value of the brush thickness attribute of the inner circle style, Width represents the width of the circular progress bar, and Height represents the height of the circular progress bar; then, based on the starting coordinates (left, top) and the ending coordinates (right, bottom), the Android constructor RectF() is called to create the first rectangle RectF class object required for drawing the inner circle. Similarly, the process of creating the second rectangle RectF class object can be derived, which will not be elaborated here. Furthermore, as... Figure 2 As shown, since the rectangular ranges of the inner and outer circles should be the same, the brush thickness attribute of the inner circle style can be required to be the same as that of the outer circle style, thereby obtaining the same first rectangle RectF class object and the second rectangle RectF class object; for example, it can be uniformly represented by RectFmRect = new RectF(left, top, right, bottom).

[0075] S4. Based on the first rectangle RectF object, the preset inner circle rotation start angle, the preset inner circle rotation end angle, and the inner circle style, call the Android-side arc drawing function drawArc() to draw the inner circle view of the circular progress bar. Also, based on the second rectangle RectF object, the preset outer circle rotation start angle, the outer circle rotation end angle calculated based on the actual value of the progress bar, and the outer circle style, call the arc drawing function drawArc() to draw the outer circle view of the circular progress bar.

[0076] In step S4, the Android-side function drawArc() for drawing arcs is also a native API built into the existing Android system, specifically in the form drawArc(RectFrectF, float startAngel, float...). The function `sweepAngle(boolean useCenter, Paint)` defines the shape of an ellipse. `rectF` is a `RectF` object of type `rectangle`, defining the shape of the ellipse. `startAngle` refers to the starting angle of the drawing; 0 degrees corresponds to the 3 o'clock position on a clock face. If `startAngle` is less than 0 or greater than or equal to 360, then the angle is the modulo of 360. `sweepAngle` refers to the angle swept clockwise from `startAngle`. If `sweepAngle` is greater than or equal to 360, a complete elliptical arc will be drawn. If `sweepAngle` is less than 0, then the angle is the modulo of 360. `useCenter` is a boolean value. If `true`, the arc is closed by connecting the start and end points of the arc with the center point of the ellipse. If `false`, the arc is directly connected without passing through the center point of the ellipse. `Paint` represents the brush style. Since the rotation angle of the inner circle is constant, the starting angle of the inner circle rotation can be preset to 270 degrees, and the ending angle of the inner circle rotation can be preset to 360 degrees. Similarly, since the starting angle of the outer circle rotation is also constant, the starting angle of the outer circle rotation can also be preset to 270 degrees. As for the ending angle of the outer circle rotation, although it is variable, it can be calculated using the following formula:

[0077] oSA=(mCP / mTP)×360

[0078] In the formula, oSA represents the final rotation angle of the outer circle, mCP represents the actual value of the progress bar, and mTP represents the known total value of the progress bar. Furthermore, the specific execution command for drawing the inner circle view of the circular progress bar can be exemplified as: canvas.drawArc(mRect,innerStartAngel,innerSweepAngel,false,mInnerPaint); and the specific execution command for drawing the outer circle view of the circular progress bar can be exemplified as:

[0079] The code for `canvas.drawArc(mRect, outerStartAngel, outerSweepAngle, false, mOuterPaint)` is shown below:

[0080]

[0081] S5. When the user sets or updates the actual value of the progress bar, the Android-side property animation method ValueAnimator is invoked. Within a preset animation duration, the value gradually returns from the minimum interval value to the interval values ​​within the animation execution parameter value range. After each interval value is returned, the outer circle rotation endpoint angle is updated and calculated based on that interval value. Then, based on the updated calculation result of the outer circle rotation endpoint angle, the Android-side continuous drawing method postInvalidate is invoked to redraw the outer circle view, resulting in a dynamically displayed Android-side circular progress bar. The animation execution parameter value range is [0, mCP] when set by the user. set During the update, it becomes [mCP] bf mCP af mCP set This represents the actual value of the progress bar set by the user, mCP bf This represents the actual value of the progress bar before the update, mCP. af This indicates the actual value of the updated progress bar.

[0082] In step S5, the Android-side property animation method ValueAnimator is also a native API built into the existing Android system, used to set the circular progress bar animation effect. The animation duration can be configured by the user or use a default duration (e.g., 2 seconds). When set by the user, the animation execution parameter value range can be, for example, [0,1], thus gradually returning to intervals of 0, 0.1, 0.2, 0.3, ..., 1 from 0. The aforementioned calculation of the outer circle's rotation endpoint angle based on interval values ​​can be referenced using the formula oSA = (mCP / mTP) × 360 (where mCP is the interval value). Furthermore, the Android-side continuous drawing method postInvalidate is also a native API built into the existing Android system, and the specific code is shown below:

[0083]

[0084] Therefore, based on the Android-side circular progress bar dynamic display method described in steps S1 to S5 above, a dynamic visualization scheme for circular progress bars is provided. Specifically, after initializing the inner and outer circle styles of the circular progress bar, the width and height of the circular progress bar are first determined based on the user-set progress bar height and width, and these values ​​are equal. Then, based on the brush thickness attributes of the inner and outer circle styles and the width and height of the circular progress bar, the Android-side constructor `RectF()` is called to create a new `RectF` class object required for drawing the inner and outer circles. Finally, based on the `RectF` class object, the rotation start and end angles of the inner and outer circles, and the inner and outer circle styles, the Android-side arc drawing function `drawArc()` is called to draw the progress bar. The circular progress bar's inner and outer circular views, when the user sets or updates the actual progress bar value, invoke the Android-side property animation method ValueAnimator. Within a preset animation duration, it gradually returns to various interval values ​​within the animation execution parameter value range, starting from the minimum interval value and increasing upwards. After returning to each interval value, it first updates and calculates the outer circle's rotation endpoint angle based on that interval value. Then, based on the updated calculation result of the outer circle's rotation endpoint angle, it invokes the Android-side continuous drawing method postInvalidate to redraw the outer circle view, resulting in a dynamically displayed Android-side circular progress bar. This allows for dynamic implementation of circular progress bar text prompts based on the current progress, meeting the needs of dynamic visualization. Furthermore, dynamic style configuration allows developers to achieve the desired effect with a single click, solving the problem of progress bar diversity, improving development efficiency, and facilitating practical application and promotion.

[0085] Based on the technical solution of the first aspect mentioned above, this embodiment also provides a possible design for dynamically displaying the progress ratio value in text, that is, the method also includes, but is not limited to, the following steps S21 to S28.

[0086] S21. Initialize the text style of the circular progress bar.

[0087] In step S21, specifically, similar to the inner circle style and the outer circle style, the attribute names of the text style include, but are not limited to, mTextPaint (text brush), mTextColor (text brush color), and mTextSize (text size, default is 15sp), etc. Similarly, it can be first determined whether the user has configured the text style attributes. If the user has configured them, the default text style is replaced as follows: initialize mTextPaint (text brush), call mTextPaint.setColor() to set the text brush color, and call the Android native function mTextPaint.setTextSize() to set the text size. The specific code is shown below:

[0088]

[0089] In addition, if it is determined that the user has not configured the text style attribute, the default configured text style can be used to initialize the text style of the circular progress bar.

[0090] S22. Based on the actual value of the progress bar, the progress percentage value is also calculated.

[0091] In step S22, specifically, the percentage of the actual value of the progress bar to the total value of the progress bar can be rounded to two decimal places to obtain the progress ratio value mProgressString.

[0092] S23. Call the Android constructor Rect() to create a new Rect object.

[0093] In step S23, the Android-side constructor Rect() is similar to the Android-side constructor RectF(), and is also a native API built into the existing Android system. Furthermore, the execution command for creating a new Rect class object can be specifically: RectmBounds = new Rect().

[0094] S24. Based on the progress ratio value and the Rect object, call the Android text rectangle acquisition function getTextBounds() to obtain a text rectangle box used to display the progress ratio value.

[0095] In step S24, the Android-side text rectangle acquisition function getTextBounds() is also a native API built into the existing Android system. The execution command to obtain the text rectangle can be specifically: mTextPaint.getTextBounds(mProgressString,0,mProgressString.lenth,mBounds).

[0096] S25. Call the Android client's rectangle width acquisition function width() to get the width of the text rectangle, and call the Android client's rectangle height acquisition function height() to get the height of the text rectangle.

[0097] In step S25, the Android rectangle width acquisition function width() and the Android rectangle height acquisition function height() are both native APIs that come with the existing Android system.

[0098] S26. Based on the width and height of the text rectangle and the width and height of the circular progress bar, calculate the text starting point coordinates (TextX, TextY) required to describe the text using the following formula:

[0099]

[0100] In the formula, Width represents the width of the circular progress bar, Height represents the height of the circular progress bar, TextWidth represents the width of the text rectangle, and TextHeight represents the height of the text rectangle.

[0101] S27. Based on the progress ratio value, the text starting point coordinates, and the text style, call the Android client's drawText() function to draw the text view of the circular progress bar.

[0102] In step S27, the Android-side text-drawing function `drawText()` is also a native API built into the existing Android system. The execution command to draw the text view of the circular progress bar can be specifically: `canvas.drawText(mProgressString, textX, textY, mTextPaint)`. Furthermore, the specific code for the aforementioned steps is as follows:

[0103]

[0104] S28. After each interval value is returned, the method further includes: first updating and calculating the progress ratio value and the text start coordinates based on the interval value; then, based on the updated calculation results of the progress ratio value and the text start coordinates, calling the Android client's continuous drawing method postInvalidate to redraw the text view.

[0105] Therefore, based on the aforementioned possible design one, it is possible to achieve the purpose of dynamically displaying the progress percentage value in text, enriching the dynamic visualization content and effects, and further improving practicality.

[0106] like Figure 3 As shown, the second aspect of this embodiment provides a virtual device for implementing the Android-side circular progress bar dynamic display method described in the first aspect or possible design, including a progress bar initialization model, a progress bar size determination module, a rectangle object creation module, an inner and outer circle view drawing module, and an outer circle view redrawing module;

[0107] The progress bar initialization model is used to initialize the inner circle style and outer circle style of the circular progress bar;

[0108] The progress bar size determination module is used to obtain the progress bar height and progress bar width set by the user, and determine the width and height of the circular progress bar with equal values ​​based on the progress bar height and progress bar width;

[0109] The rectangle object creation module is communicatively connected to the progress bar initialization model and the progress bar size determination module. It is used to call the Android-side constructor RectF() based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar to create a first rectangle RectF class object required for drawing the inner circle, and to call the Android-side constructor RectF() based on the brush thickness attribute of the outer circle style and the width and height of the circular progress bar to create a second rectangle RectF class object required for drawing the outer circle.

[0110] The inner and outer circle view drawing modules are respectively connected to the progress bar initialization model and the rectangle object creation module. They are used to draw the inner circle view of the circular progress bar by calling the Android arc drawing function drawArc() based on the first rectangle RectF class object, the preset inner circle rotation start angle, the preset inner circle rotation end angle, and the inner circle style. They are also used to draw the outer circle view of the circular progress bar by calling the arc drawing function drawArc() based on the second rectangle RectF class object, the preset outer circle rotation start angle, the outer circle rotation end angle calculated based on the actual value of the progress bar, and the outer circle style.

[0111] The outer circle view redrawing module is communicatively connected to the inner and outer circle view drawing modules. When the user sets or updates the actual value of the progress bar, it calls the Android-side property animation method ValueAnimator to gradually return to each interval value within the animation execution parameter value range, starting from the minimum interval value and increasing it from small to large, within a preset animation duration. After returning each interval value, it first updates and calculates the outer circle rotation endpoint angle based on that interval value. Then, based on the updated calculation result of the outer circle rotation endpoint angle, it calls the Android-side continuous drawing method postInvalidate to redraw the outer circle view, resulting in a dynamically displayed Android-side circular progress bar. The animation execution parameter value range is [0, mCP] when set by the user. set During the update, it becomes [mCP] bf mCP af mCP set This represents the actual value of the progress bar set by the user, mCP bf This represents the actual value of the progress bar before the update, mCP. af This indicates the actual value of the updated progress bar.

[0112] The working process, working details and technical effects of the aforementioned device provided in the second aspect of this embodiment can be found in the Android circular progress bar dynamic display method described in the first aspect or possible design, and will not be repeated here.

[0113] like Figure 4 As shown, the third aspect of this embodiment provides a computer device for executing the Android-side circular progress bar dynamic display method as described in the first aspect or possible design one. It includes a memory, a processor, and a transceiver connected in sequence. The memory stores a computer program, the transceiver sends and receives messages, and the processor reads the computer program to execute the Android-side circular progress bar dynamic display method as described in the first aspect or possible design one. Specifically, the memory may include, but is not limited to, random-access memory (RAM), read-only memory (ROM), flash memory, first-in-first-out (FIFO) memory, and / or first-in-last-out (FILO) memory, etc.; the processor may include, but is not limited to, a microprocessor of the STM32F105 series. Furthermore, the computer device may also include, but is not limited to, a power module, a display screen, and other necessary components.

[0114] The working process, working details and technical effects of the aforementioned computer device provided in the third aspect of this embodiment can be found in the Android-side circular progress bar dynamic display method described in the first aspect or possible design, and will not be repeated here.

[0115] This fourth aspect of the embodiment provides a computer-readable storage medium storing instructions comprising the Android-side circular progress bar dynamic display method as described in the first aspect or possible design one. Specifically, the computer-readable storage medium stores instructions that, when executed on a computer, perform the Android-side circular progress bar dynamic display method as described in the first aspect or possible design one. The computer-readable storage medium refers to a data storage medium, which may include, but is not limited to, floppy disks, optical disks, hard disks, flash memory, USB flash drives, and / or Memory Sticks. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable devices.

[0116] The working process, working details and technical effects of the aforementioned computer-readable storage medium provided in the fourth aspect of this embodiment can be found in the Android circular progress bar dynamic display method as described in the first aspect or possible design, and will not be repeated here.

[0117] This fifth aspect of the embodiment provides a computer program product containing instructions that, when executed on a computer, cause the computer to perform the Android-based circular progress bar dynamic display method as described in the first aspect or a possible design. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device.

[0118] Finally, it should be noted that the above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the scope of protection of the present invention.

Claims

1. A method for dynamically displaying a circular progress bar on an Android device, characterized in that, include: Initialize the inner and outer circle styles of the circular progress bar; Obtain the progress bar height and width set by the user, and determine the width and height of the circular progress bar with equal values ​​based on the progress bar height and width; Based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the Android constructor RectF() is called to create a new first rectangle RectF class object required for drawing the inner circle. Based on the brush thickness attribute of the outer circle style and the width and height of the circular progress bar, the Android constructor RectF() is called to create a new second rectangle RectF class object required for drawing the outer circle. Based on the first rectangle RectF object, the preset inner circle rotation start angle, the preset inner circle rotation end angle, and the inner circle style, the Android-side arc drawing function drawArc() is called to draw the inner circle view of the circular progress bar. Based on the second rectangle RectF object, the preset outer circle rotation start angle, the outer circle rotation end angle calculated based on the actual value of the progress bar, and the outer circle style, the arc drawing function drawArc() is called to draw the outer circle view of the circular progress bar. When the user sets or updates the actual value of the progress bar, the Android-side property animation method ValueAnimator is invoked. Within a preset animation duration, it gradually returns to each interval value within the animation execution parameter value range, starting from the minimum interval value and increasing from small to large. After returning each interval value, the outer circle rotation endpoint angle is first updated and calculated based on that interval value. Then, based on the updated calculation result of the outer circle rotation endpoint angle, the Android-side continuous drawing method postInvalidate is invoked to redraw the outer circle view, resulting in a dynamically displayed Android-side circular progress bar. The animation execution parameter value range is [0, mCP] when set by the user. set During the update, it becomes [mCP] bf mCP af mCP set This represents the actual value of the progress bar set by the user, mCP bf This represents the actual value of the progress bar before the update, mCP. af This indicates the actual value of the updated progress bar.

2. The method for dynamically displaying a circular progress bar on Android as described in claim 1, characterized in that, The method further includes: Initialize the text style of the circular progress bar; Based on the actual value of the progress bar, the progress percentage value is also calculated; Call the Android constructor Rect() to create a new Rect object. Based on the progress ratio value and the Rect object, call the Android text rectangle acquisition function getTextBounds() to obtain a text rectangle box used to display the progress ratio value. Call the Android version's rectangle width function width() to get the width of the text rectangle, and call the Android version's rectangle height function height() to get the height of the text rectangle; Based on the width and height of the text rectangle and the width and height of the circular progress bar, the text starting coordinates (TextX, TextY) required to describe the text are calculated using the following formula: In the formula, Width represents the width of the circular progress bar, Height represents the height of the circular progress bar, TextWidth represents the width of the text rectangle, and TextHeight represents the height of the text rectangle; Based on the progress ratio value, the coordinates of the text starting point, and the text style, the Android client's drawText() function is called to draw the text view of the circular progress bar.

3. The method for dynamically displaying a circular progress bar on Android according to claim 2, characterized in that, After each interval value is returned, the method further includes: first updating and calculating the progress ratio value and the text start coordinates based on the interval value; then, based on the updated calculation results of the progress ratio value and the text start coordinates, calling the Android continuous drawing method postInvalidate to redraw the text view.

4. The method for dynamically displaying a circular progress bar on an Android device according to claim 1, characterized in that, Initialize the inner and outer circle styles of the circular progress bar, including: Determine whether the user has configured the attribute of the target circle style, wherein the target circle style refers to the inner circle style or outer circle style of the circular progress bar; If so, the Android-side paint function Paint() is called to create a new paint as the paint for the target circular style. The Android-side paint color setting function Paint.setColor() is called to obtain the paint color attribute configured by the user for the target circular style, and the Android-side paint thickness setting function Paint.setStrokeWidth() is called to obtain the paint thickness attribute configured by the user for the target circular style.

5. The method for dynamically displaying a circular progress bar on an Android device according to claim 1, characterized in that, Obtain the user-set progress bar height and width, and determine the width and height of the circular progress bar with equal values ​​based on the progress bar height and width, including: The Android default size acquisition function getDefaultSize() and the Android suggested minimum height acquisition function getSuggestedMinimumHeight() are called to obtain the user-set progress bar height, and the Android default size acquisition function getDefaultSize() and the Android suggested minimum width acquisition function getSuggestedMinimumWidth() are called to obtain the user-set progress bar width. The minimum value between the progress bar height and the progress bar width is obtained by calling the minimum value function Math.min() on the Android side. The Android client calls the setMeasuredDimension() function to set the width and height of the circular progress bar to the minimum values.

6. The method for dynamically displaying a circular progress bar on an Android device according to claim 1, characterized in that, Based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the Android constructor `RectF()` is called to create a new `RectF` class object required for drawing the inner circle, including: Based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar, the starting coordinates (left, top) and ending coordinates (right, bottom) of the rectangle are calculated using the following formula: In the formula, mSW represents the parameter value of the brush thickness attribute of the inner circle style, Width represents the width of the circular progress bar, and Height represents the height of the circular progress bar. Based on the starting coordinates (left, top) and the ending coordinates (right, bottom), the Android constructor RectF() is called to create a new RectF class object required for drawing the inner circle.

7. The method for dynamically displaying a circular progress bar on an Android device according to claim 1, characterized in that, The starting angle of the inner circle rotation is set to 270 degrees, the ending angle of the inner circle rotation is set to 360 degrees, and the starting angle of the outer circle rotation is also set to 270 degrees. The ending angle of the outer circle rotation is calculated according to the following formula: oSA=(mCP / mTP)×360 In the formula, oSA represents the end angle of the outer circle rotation, mCP represents the actual value of the progress bar, and mTP represents the known total value of the progress bar.

8. A dynamic display device for a circular progress bar on an Android device, characterized in that, It includes a progress bar initialization model module, a progress bar size determination module, a rectangle object creation module, an inner and outer circle view drawing module, and an outer circle view redrawing module; The progress bar initialization model is used to initialize the inner circle style and outer circle style of the circular progress bar; The progress bar size determination module is used to obtain the progress bar height and progress bar width set by the user, and determine the width and height of the circular progress bar with equal values ​​based on the progress bar height and progress bar width; The rectangle object creation module is communicatively connected to the progress bar initialization model and the progress bar size determination module. It is used to call the Android-side constructor RectF() based on the brush thickness attribute of the inner circle style and the width and height of the circular progress bar to create a first rectangle RectF class object required for drawing the inner circle, and to call the Android-side constructor RectF() based on the brush thickness attribute of the outer circle style and the width and height of the circular progress bar to create a second rectangle RectF class object required for drawing the outer circle. The inner and outer circle view drawing modules are respectively connected to the progress bar initialization model and the rectangle object creation module. They are used to draw the inner circle view of the circular progress bar by calling the Android arc drawing function drawArc() based on the first rectangle RectF class object, the preset inner circle rotation start angle, the preset inner circle rotation end angle, and the inner circle style. They are also used to draw the outer circle view of the circular progress bar by calling the arc drawing function drawArc() based on the second rectangle RectF class object, the preset outer circle rotation start angle, the outer circle rotation end angle calculated based on the actual value of the progress bar, and the outer circle style. The outer circle view redrawing module is communicatively connected to the inner and outer circle view drawing modules. When the user sets or updates the actual value of the progress bar, it calls the Android-side property animation method ValueAnimator to gradually return to each interval value within the animation execution parameter value range, starting from the minimum interval value and increasing it from small to large, within a preset animation duration. After returning each interval value, it first updates and calculates the outer circle rotation endpoint angle based on that interval value. Then, based on the updated calculation result of the outer circle rotation endpoint angle, it calls the Android-side continuous drawing method postInvalidate to redraw the outer circle view, resulting in a dynamically displayed Android-side circular progress bar. The animation execution parameter value range is [0, mCP] when set by the user. set During the update, it becomes [mCP] bf mCP af mCP set This represents the actual value of the progress bar set by the user, mCP bf This represents the actual value of the progress bar before the update, mCP. af This indicates the actual value of the updated progress bar.

9. A computer device, characterized in that, The device includes a memory, a processor, and a transceiver that are sequentially connected in communication. The memory is used to store a computer program, the transceiver is used to send and receive messages, and the processor is used to read the computer program and execute the Android-based circular progress bar dynamic display method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that... The computer-readable storage medium stores instructions that, when executed on a computer, perform the Android-based circular progress bar dynamic display method as described in any one of claims 1 to 7.

Images