Vehicle-mounted broadcast playing progress bar control design method based on android system

Abstract

The invention discloses a vehicle-mounted broadcast playing progress bar control design method based on an android system. The method comprises the following steps: 1, defining a control design effect; and a second part, performing control creation according to a control design target: S1, initializing configuration parameters; s2, initializing a control drawing tool; s3, confirming the drawing position of the control; and S4, drawing the control. According to the invention, the designed space is added to the vehicle-mounted multimedia broadcast application of the android system, so that a user can intuitively feel the playing progress and playing state of the current broadcast program in a page, and the wave progress bar is continuously changed from a wave line to a straight line along with broadcast playing. And the progress bar sliding block displays the change of the playing time along with the continuous updating of the progress, and meanwhile, the design of the control has the characteristics of beautiful interface, visual progress and rich information.

Description

Technical Field

[0001] The invention belongs to the technical field of vehicle-mounted multimedia, and relates to a playback progress bar control of a vehicle-mounted multimedia player, and in particular to a design method for a vehicle-mounted radio playback progress bar control based on an Android system. Background Art

[0002] With the advent of the automobile era, the number of car users has grown rapidly, and car radio, as an almost irreplaceable in-car media, has also been constantly changing with the continuous development of technology. Most modern cars are equipped with touch screens, and users interact with the radio application in the car through the touch screen. Because radio is a live program, the progress cannot be adjusted. Therefore, unlike other audio media that display playback information and progress bars at the same time, the current mainstream technical solutions only display the radio channel and related information without displaying the live broadcast progress bar. Specifically, when playing a radio program, the user can only see what frequency band is currently playing on the page, but cannot intuitively see the current playback time period and playback status. In addition, it will also lead to problems such as the inability to use the mini player with other media or inconsistent performance in the mini player.

[0003] There are two main reasons for these problems: first, the playback progress bar control provided by the system has usage characteristics and expression forms that cannot be used for live programs; second, the existing technology lacks a live progress bar control that can intuitively display the progress of live programs and conform to user usage habits. Summary of the invention

[0004] In order to solve the problems in the prior art of unclear program progress, unclear perception of waiting time and possible anxiety among listeners when listening to in-car radio, the present invention provides a design method of in-car radio playback progress bar control based on the Android system, and adds the designed space to the in-car multimedia broadcasting application of the Android system, so that the user can intuitively feel the progress and playback status of the current radio program on the page. The wavy progress bar changes from a wavy line to a straight line as the broadcast is played, and the progress bar slider also displays the change of playback time as the progress is continuously updated. At the same time, the control design has the characteristics of beautiful interface, intuitive progress and rich information.

[0005] The objective of the present invention is achieved through the following technical solutions:

[0006] A design method for a car radio playback progress bar control based on the Android system includes the following two parts:

[0007] The first part, clarify the control design effect, including:

[0008] 1) How to display the progress of broadcasting;

[0009] 2) Clarify the configurable parameters of the control;

[0010] Part 2: Create controls according to control design goals:

[0011] S1. Initialize configuration parameters;

[0012] S2. Initialize the control drawing tool;

[0013] S3. Confirm the control drawing position;

[0014] S4. Draw controls.

[0015] Furthermore, in the first part, the broadcasting progress display method is: displaying the broadcasting progress that has been played through a straight line type, displaying the current playback time point through a slider, and displaying the unplayed broadcasting progress through a wavy line type;

[0016] The configurable parameters of the control include: configurable parameters of the straight line type; configurable parameters of the slider; configurable parameters of the wave line type; and maximum and minimum values ​​of the playback progress.

[0017] Furthermore, the step S1 comprises:

[0018] S11. Initialization configuration parameters of the straight line type: the color of the straight line type, the line width of the straight line type;

[0019] S12. Initialization configuration parameters of the slider: whether to display the current playback progress time in the slider; the text color and font of the time displayed in the slider; the width, height, and offset of the slider; the resource image of the slider;

[0020] S13. Initialization configuration parameters of the wave line: wavelength, peak height, line width, and line color of the wave line;

[0021] S14. Initialization configuration parameters of the playback progress: the maximum value and the minimum value of the playback progress.

[0022] Furthermore, the step S2 comprises:

[0023] Create a brush for drawing wavy lines;

[0024] Create a brush to draw the slider;

[0025] Create the original matrix of the slider;

[0026] Create the slider's target matrix;

[0027] Create a matrix with wavy lines to be erased;

[0028] Create a matrix of linear schedules;

[0029] Set the color and width of the wavy line brush;

[0030] Sets the range of the slider's raw matrix.

[0031] Furthermore, the step S3 comprises:

[0032] Rewrite the onLayout method of View, and use the getMeasuredWidth() method to get the width of the control in the onLayout method, and use the getMeasuredHeight() method to get the height of the control;

[0033] Calculate the baseline of the Bezier curve, the baseline height = control height ÷ 2;

[0034] Calculate the number of peaks and troughs, the number of peaks and troughs = (control width ÷ wavelength) × 2;

[0035] Gets the offset of the wavy line style.

[0036] Furthermore, the step S4 comprises:

[0037] S41. Generate a wavy line path;

[0038] S42. Draw a wavy line path;

[0039] S43. Calculate the left position of the slider;

[0040] S44. Erase the wavy line of the completed progress part;

[0041] S45. Draw a straight line progress bar;

[0042] S46. Draw a slider.

[0043] Furthermore, the step S41 includes:

[0044] Initialize the path Path and set the starting point coordinates to:

[0045] The X coordinate of the starting point = -3 × half wavelength; the Y coordinate of the starting point = the height of the baseline of the Bezier curve;

[0046] Use a for loop to construct a wave path. The start value of the for loop range is -3, and the end value is the number of peaks and troughs.

[0047] In the loop, first calculate the X coordinate of the starting point, which is the number of the loop × half wavelength;

[0048] Then add a quadratic Bezier curve to the path through the Path.quadTo method, where the coordinates of the control points of the curve are:

[0049] The X coordinate of the control point of the curve = the X coordinate of the starting point + (half wavelength ÷ 2) + the offset of the wave line;

[0050] The Y coordinates of the control points of the curve need to be calculated differently depending on whether the number currently looped through is an odd or even number:

[0051] If the current number in the loop is an even number,

[0052] Then the Y coordinate of the curve control point = the height of the baseline of the Bezier curve + the height of the peak of the wave line;

[0053] If the current number in the loop is an odd number,

[0054] Then the Y coordinate of the curve control point = the height of the baseline of the Bezier curve - the height of the peak of the wave line;

[0055] The coordinates of the end point of the curve are:

[0056] The X coordinate of the end point of the curve = the X coordinate of the starting point + half the wavelength + the offset of the wave line;

[0057] The Y coordinate of the end point of the curve = the height of the baseline of the Bezier curve.

[0058] Furthermore, the step S43 includes:

[0059] If the current progress is the minimum progress,

[0060] Then the position on the left side of the slider = -1 × the offset of the slider;

[0061] If the current progress is the maximum progress,

[0062] Then the position on the left side of the slider = control width - slider width + slider offset;

[0063] In other cases, first calculate the percentage of the current progress in the total progress.

[0064] The percentage of current progress = (current progress - minimum progress) ÷ (maximum progress - minimum progress), and then calculate the position on the left side of the slider.

[0065] The position of the left side of the slider = (width of the control + offset of the slider × 2 - width of the slider) × percentage of current progress - offset of the slider.

[0066] Furthermore, the step S46 includes:

[0067] Set the target matrix range of the slider. In this embodiment, the target matrix range is:

[0068] Top = (control height - slider height) ÷ 2,

[0069] Bottom = top + height of slider,

[0070] Left side = the position of the left side of the slider calculated in step S43,

[0071] Right side = left side + width of slider;

[0072] Save the canvas, and use the slider's brush to draw the slider's resource image in the canvas according to the slider's original matrix and the slider's target matrix;

[0073] Restore the canvas state and display the drawn slider in the control.

[0074] Furthermore, in step S46, if the current progress time needs to be displayed in the slider, then after drawing the resource image of the slider, first set the brush color of the slider to the text color of the time displayed in the slider, and the brush drawing text size to the text size of the time displayed in the slider;

[0075] Then convert the current progress into text in the hour, minute, and second format through the system SimpleDateFormat class, measure the width of the time text through the measureText method of the slider brush, obtain the height of the base point of the bottom character through the Paint.FontMetrics.bottom method of the slider brush, and calculate the starting coordinates of drawing the text:

[0076] X coordinate = the position of the left side of the slider calculated in step S43 + ((slider width - text width) ÷ 2),

[0077] Y coordinate = (the bottom of the slider's target matrix ÷ 2) + the height of the bottom character's reference point;

[0078] Then use the brush of the slider to draw the current progress time to be displayed according to the starting coordinates of the text and the text content;

[0079] Finally, restore the canvas state and display the drawn slider in the control.

[0080] The present invention has the following advantages:

[0081] Improve program progress transparency: During the broadcast of traditional live broadcast programs, listeners often lack intuitive perception of the program progress and cannot accurately understand the position of the current broadcast link in the overall program. The introduction of the wave progress bar provides listeners with a clear visual clue to help them better grasp the program progress.

[0082] Relieve the audience's waiting anxiety: In live broadcast programs, such as news broadcasts and program transitions, the audience may need to wait for a long time. In traditional ways, this waiting may cause anxiety in the audience. The wave progress bar can attract the audience's attention through its dynamic changing characteristics, thus alleviating their waiting anxiety to a certain extent.

[0083] Improve user experience: Unify the presentation format of audio media to avoid problems such as abrupt user interface display due to inconsistent presentation formats. BRIEF DESCRIPTION OF THE DRAWINGS

[0084] In order to more clearly illustrate the specific implementation of the present invention or the technical solution in the prior art, the drawings required for use in the specific implementation or the description of the prior art are briefly introduced below.

[0085] Figure 1 This is a flow chart of a method for designing a progress bar control for an in-vehicle broadcast playback based on an Android system as described in Example 1 of the present invention. DETAILED DESCRIPTION

[0086] The technical solution of the present invention will be described clearly and completely below in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of them. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0087] Example 1

[0088] This embodiment is a method for designing a progress bar control for a car radio player based on an Android system. Figure 1 As shown, it includes the following two parts:

[0089] Part 1: Clarify the control design effect:

[0090] 1) How to display the progress of broadcasting:

[0091] The progress of broadcasts that have been played is displayed through a straight line, the current playback time point is displayed through a slider, and the progress of broadcasts that have not been played is displayed through a wavy line.

[0092] 2) Clarify the configurable parameters of the control:

[0093] 2.1) Configurable parameters of the line type: color and line width of the line type;

[0094] 2.2) Configurable parameters of the slider: whether to display the current playback progress time in the slider; the text color and font of the time displayed in the slider; the width, height, and offset of the slider; the resource image of the slider;

[0095] 2.3) Configurable parameters of the wave line: wavelength, peak height, line width, and line color of the wave line;

[0096] 2.4) Maximum and minimum values ​​of the playback progress.

[0097] Part 2: Create controls according to control design goals:

[0098] S1. Initialize configuration parameters:

[0099] S11. Initialization configuration parameters of the straight line type: the color of the straight line type, the line width of the straight line type;

[0100] S12. Initialization configuration parameters of the slider: whether to display the current playback progress time in the slider; the text color and font of the time displayed in the slider; the width, height, and offset of the slider; the resource image of the slider;

[0101] S13. Initialization configuration parameters of the wave line: wavelength, peak height, line width, and line color of the wave line;

[0102] S14. Initialization configuration parameters of the playback progress: the maximum value and the minimum value of the playback progress.

[0103] S2. Initialize the control drawing tool: create a brush for drawing wavy lines; create a brush for drawing the slider; create the original matrix of the slider; create the target matrix of the slider; create a matrix for erasing wavy lines; create a matrix for straight line progress; set the color and width of the wavy line brush; set the range of the original matrix of the slider (in this embodiment, the range of the original matrix of the slider is top = 0, bottom = height of the slider, left = 0, right = width of the slider).

[0104] S3. Confirm the control drawing position: rewrite the onLayout method of View, and use the system's control width measurement method getMeasuredWidth() to obtain the control width in the onLayout method, and use the system's control height measurement method getMeasuredHeight() to obtain the control height;

[0105] Calculate the baseline of the Bezier curve. The baseline is located in the middle of the entire view height. The baseline height = control height ÷ 2;

[0106] Calculate the total number of peaks and troughs, the number of peaks and troughs = (control width ÷ wavelength) × 2;

[0107] The offset of the wave line is obtained by moving an animation with a duration of 3 seconds and an infinite repetition with a displacement of one wavelength.

[0108] S4. Draw controls: Rewrite the onDraw method of View and draw controls in the onDraw method, which includes the following process:

[0109] S41. Generate a wavy line path:

[0110] Initialize the path Path and set the starting point coordinates to:

[0111] The X coordinate of the starting point = -3 × half wavelength; the Y coordinate of the starting point = the height of the baseline of the Bezier curve;

[0112] Use a for loop to construct a wave path. The start value of the for loop range is -3, and the end value is the number of peaks and troughs.

[0113] In the loop, first calculate the X coordinate of the starting point, which is the number of the loop × half wavelength;

[0114] Then add a quadratic Bezier curve to the path through the Path.quadTo method, where the coordinates of the control points of the curve are:

[0115] The X coordinate of the control point of the curve = the X coordinate of the starting point + (half wavelength ÷ 2) + the offset of the wave line;

[0116] The Y coordinates of the control points of the curve need to be calculated differently depending on whether the number currently looped through is an odd or even number:

[0117] If the current number in the loop is an even number,

[0118] Then the Y coordinate of the curve control point = the height of the baseline of the Bezier curve + the height of the peak of the wave line;

[0119] If the current number in the loop is an odd number,

[0120] Then the Y coordinate of the curve control point = the baseline height of the Bezier curve - the peak height of the wave line.

[0121] The coordinates of the end point of the curve are:

[0122] The X coordinate of the end point of the curve = the X coordinate of the starting point + half the wavelength + the offset of the wave line;

[0123] The Y coordinate of the end point of the curve = the height of the baseline of the Bezier curve.

[0124] S42. Draw a wavy line path: Use a wavy line brush to draw a Bezier curve according to the calculated wavy line path.

[0125] S43. Calculate the left position of the slider:

[0126] If the current progress is the minimum progress,

[0127] The position of the left side of the slider = -1 × the offset of the slider;

[0128] If the current progress is the maximum progress,

[0129] The position of the left side of the slider = the width of the control - the width of the slider + the offset of the slider;

[0130] In other cases, first calculate the percentage of the current progress in the total progress.

[0131] The percentage of current progress = (current progress - minimum progress) ÷ (maximum progress - minimum progress), and then calculate the position on the left side of the slider.

[0132] The position of the left side of the slider = (width of the control + offset of the slider × 2 - width of the slider) × percentage of current progress - offset of the slider.

[0133] S44. Erase the wavy line of the completed progress part:

[0134] Set the matrix range that needs to erase the wavy line. In this embodiment, the matrix range is:

[0135] top=0,

[0136] Bottom = height of the control,

[0137] Left side = 0,

[0138] Right side = the left position of the slider calculated in step S43 + the width of the slider - the offset of the slider;

[0139] Save the canvas, cut the matrix part of the canvas that needs to erase the wavy line, set the cut canvas to transparent and restore the canvas state to update the control display effect.

[0140] S45. Draw a straight line progress bar:

[0141] Set the matrix range of the linear progress. In this embodiment, the matrix range is:

[0142] Top = (control height - line width of straight line type) ÷ 2,

[0143] Bottom = top + line width of the straight line type,

[0144] Left side = 0,

[0145] Right side = the left position of the slider calculated in step S43 + (the width of the slider ÷ 2);

[0146] Save the canvas, cut the matrix part of the canvas of the set linear progress bar, and then draw the cut canvas in the color of the straight line. Then restore the canvas state to display the linear progress bar in the control.

[0147] S46. Draw the slider:

[0148] Set the target matrix range of the slider. In this embodiment, the target matrix range is:

[0149] Top = (control height - slider height) ÷ 2,

[0150] Bottom = top + height of slider,

[0151] Left side = the position of the left side of the slider calculated in step S43,

[0152] Right side = left side + width of slider;

[0153] Save the canvas, and use the slider's brush to draw the slider's resource image in the canvas according to the slider's original matrix and the slider's target matrix.

[0154] If the current progress time needs to be displayed in the slider, you need to first set the slider's brush color to the text color of the time displayed in the slider, and the brush drawing text size to the text size of the time displayed in the slider;

[0155] Then convert the current progress into text in the hour, minute, and second format through the system SimpleDateFormat class, measure the width of the time text through the measureText method of the slider brush, obtain the height of the base point of the bottom character through the Paint.FontMetrics.bottom method of the slider brush, and calculate the starting coordinates of drawing the text:

[0156] X coordinate = the position of the left side of the slider calculated in step S43 + ((slider width - text width) ÷ 2),

[0157] Y coordinate = (the bottom of the slider's target matrix ÷ 2) + the height of the bottom character's reference point;

[0158] Then use the brush of the slider to draw the current progress time to be displayed according to the starting coordinates of the text and the text content;

[0159] Finally, restore the canvas state and display the drawn slider in the control.

[0160] If the current progress time does not need to be displayed in the slider, directly restore the canvas state and display the drawn slider in the control.

[0161] The preferred embodiments of the present invention are described in detail above in conjunction with the accompanying drawings. However, the present invention is not limited to the specific details in the above embodiments. Within the technical concept of the present invention, a variety of simple modifications can be made to the technical solution of the present invention, and these simple modifications all belong to the protection scope of the present invention.

[0162] It should also be noted that the various specific technical features described in the above specific embodiments can be combined in any suitable manner without contradiction. In order to avoid unnecessary repetition, the present invention will not further describe various possible combinations.

[0163] In addition, various embodiments of the present invention may be arbitrarily combined, and as long as they do not violate the concept of the present invention, they should also be regarded as the contents disclosed by the present invention.

Claims

1. A design method for a vehicle-mounted radio playback progress bar control based on the Android system, characterized in that: It includes the following two parts: The first part, clarify the control design effect, including: 1) How to display the progress of broadcasting; 2) Clarify the configurable parameters of the control; Part 2: Create controls according to control design goals: S1. Initialize configuration parameters; S2. Initialize the control drawing tool; S3. Confirm the control drawing position; S4. Draw the control.

2. A method for designing a progress bar control for in-vehicle broadcasting based on an Android system as claimed in claim 1, characterized in that: In the first part, the broadcast progress display method is: display the progress of the broadcast that has been played through a straight line type, display the current playback time point through a slider, and display the progress of the broadcast that has not been played through a wavy line type; The configurable parameters of the control include: configurable parameters of the straight line type; configurable parameters of the slider; configurable parameters of the wave line type; and maximum and minimum values ​​of the playback progress.

3. The method for designing a progress bar control for in-vehicle broadcasting based on Android system as claimed in claim 1, characterized in that: The step S1 comprises: S11. Initialization configuration parameters of the straight line type: the color of the straight line type, the line width of the straight line type; S12. Initialization configuration parameters of the slider: whether to display the current playback progress time in the slider; the text color and font of the time displayed in the slider; the width, height, and offset of the slider; the resource image of the slider; S13. Initialization configuration parameters of the wave line: wavelength, peak height, line width, and line color of the wave line; S14. Initialization configuration parameters of the playback progress: the maximum value and the minimum value of the playback progress.

4. The method for designing a progress bar control for in-vehicle broadcasting based on Android system as claimed in claim 1, characterized in that: The step S2 comprises: Create a brush for drawing wavy lines; Create a brush to draw the slider; Create the original matrix of the slider; Create the slider's target matrix; Create a matrix with wavy lines to be erased; Create a matrix of linear schedules; Set the color and width of the wavy line brush; Sets the extents of the slider's raw matrix.

5. The method for designing a progress bar control for in-vehicle broadcasting based on Android system as claimed in claim 1, characterized in that: The step S3 comprises: Rewrite the onLayout method of View, and use the getMeasuredWidth() method to get the width of the control in the onLayout method, and use the getMeasuredHeight() method to get the height of the control; Calculate the baseline of the Bezier curve, the baseline height = control height ÷ 2; Calculate the number of peaks and troughs, the number of peaks and troughs = (control width ÷ wavelength) × 2; Gets the offset of the wavy line style.

6. The method for designing a progress bar control for in-vehicle broadcasting based on an Android system as claimed in claim 1, characterized in that: The step S4 comprises: S41. Generate a wavy line path; S42. Draw a wavy line path; S43. Calculate the left position of the slider; S44. Erase the wavy line of the completed progress part; S45. Draw a straight line progress bar; S46. Draw a slider.

7. A method for designing a progress bar control for in-vehicle broadcasting based on an Android system as claimed in claim 6, characterized in that: The step S41 comprises: Initialize the path Path and set the starting point coordinates to: The X coordinate of the starting point = -3 × half wavelength; the Y coordinate of the starting point = the height of the baseline of the Bezier curve; Use a for loop to construct a wave path. The start value of the for loop range is -3, and the end value is the number of peaks and troughs. In the loop, first calculate the X coordinate of the starting point, which is the number of the loop × half wavelength; Then add a quadratic Bezier curve to the path through the Path.quadTo method, where the coordinates of the control points of the curve are: The X coordinate of the control point of the curve = the X coordinate of the starting point + (half wavelength ÷ 2) + the offset of the wave line; The Y coordinates of the control points of the curve need to be calculated differently depending on whether the number currently looped through is an odd or even number: If the current number in the loop is an even number, Then the Y coordinate of the curve control point = the height of the baseline of the Bezier curve + the height of the peak of the wave line; If the current number in the loop is an odd number, Then the Y coordinate of the curve control point = the height of the baseline of the Bezier curve - the height of the peak of the wave line; The coordinates of the end point of the curve are: The X coordinate of the end point of the curve = the X coordinate of the starting point + half the wavelength + the offset of the wave line; The Y coordinate of the end point of the curve = the height of the baseline of the Bezier curve.

8. The method for designing a progress bar control for in-vehicle broadcasting based on the Android system as claimed in claim 6 is characterized in that: The step S43 comprises: If the current progress is the minimum progress, Then the position on the left side of the slider = -1 × the offset of the slider; If the current progress is the maximum progress, Then the position on the left side of the slider = control width - slider width + slider offset; In other cases, first calculate the percentage of the current progress in the total progress. The percentage of current progress = (current progress - minimum progress) ÷ (maximum progress - minimum progress), and then calculate the position on the left side of the slider. The position of the left side of the slider = (width of the control + offset of the slider × 2 - width of the slider) × percentage of current progress - offset of the slider.

9. The method for designing a progress bar control for in-vehicle broadcasting based on Android system as claimed in claim 7, characterized in that: The step S46 comprises: Set the target matrix range of the slider. In this embodiment, the target matrix range is: Top = (control height - slider height) ÷ 2, Bottom = top + height of slider, Left side = the position of the left side of the slider calculated in step S43, Right side = left side + width of slider; Save the canvas, and use the slider's brush to draw the slider's resource image in the canvas according to the slider's original matrix and the slider's target matrix; Restore the canvas state and display the drawn slider in the control.

10. The method for designing a progress bar control for in-vehicle broadcasting based on Android system as claimed in claim 9, characterized in that: In step S46, if the current progress time needs to be displayed in the slider, then after drawing the resource image of the slider, first set the brush color of the slider to the text color of the time displayed in the slider, and the brush drawing text size to the text size of the time displayed in the slider; Then convert the current progress into text in the hour, minute, and second format through the system SimpleDateFormat class, measure the width of the time text through the measureText method of the slider brush, obtain the height of the base point of the bottom character through the Paint.FontMetrics.bottom method of the slider brush, and calculate the starting coordinates of drawing the text: X coordinate = the position of the left side of the slider calculated in step S43 + ((slider width - text width) ÷ 2), Y coordinate = (the bottom of the slider's target matrix ÷ 2) + the height of the bottom character's reference point; Then use the brush of the slider to draw the current progress time to be displayed according to the starting coordinates of the text and the text content; Finally, restore the canvas state and display the drawn slider in the control.

Images