CN106484432A - A kind of progress bar method for customizing, device and progress bar - Google Patents
A kind of progress bar method for customizing, device and progress bar Download PDFInfo
- Publication number
- CN106484432A CN106484432A CN201610940002.8A CN201610940002A CN106484432A CN 106484432 A CN106484432 A CN 106484432A CN 201610940002 A CN201610940002 A CN 201610940002A CN 106484432 A CN106484432 A CN 106484432A
- Authority
- CN
- China
- Prior art keywords
- layer
- progress
- progress bar
- customized
- gradual change
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 238000000034 method Methods 0.000 title claims abstract description 58
- 230000008859 change Effects 0.000 claims description 132
- 230000000694 effects Effects 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 238000004891 communication Methods 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 3
- 230000006870 function Effects 0.000 description 3
- 230000008901 benefit Effects 0.000 description 2
- 230000008878 coupling Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 241000208340 Araliaceae Species 0.000 description 1
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 1
- 235000003140 Panax quinquefolius Nutrition 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 235000012489 doughnuts Nutrition 0.000 description 1
- 235000008434 ginseng Nutrition 0.000 description 1
- 238000004519 manufacturing process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000007704 transition Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02P—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN THE PRODUCTION OR PROCESSING OF GOODS
- Y02P90/00—Enabling technologies with a potential contribution to greenhouse gas [GHG] emissions mitigation
- Y02P90/30—Computing systems specially adapted for manufacturing
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
The invention provides a kind of progress bar method for customizing, device and progress bar, wherein, the method includes the customized parameter for determining progress bar to be customized, and the customized parameter includes the progress bar figure of progress bar to be customized, beginning and end；The rail layer of progress bar to be customized is created according to above-mentioned progress bar figure, and the figure of the rail layer is part or all of identical with progress bar figure；Upper strata according to the in-orbit channel layer of above-mentioned beginning and end creates the progress layer of progress bar to be customized, and the upright projection in the in-orbit channel layer of progress layer falls in the range of in-orbit channel layer；Above-mentioned rail layer and progress layer are assembled, obtains progress bar to be customized.In the present invention, it is achieved that carry out free customization to progress bar according to customized parameter, and it is various informative to customize the progress bar for obtaining.
Description
Technical field
The present invention relates to field of computer technology, in particular to a kind of progress bar method for customizing, device and progress
Bar.
Background technology
With the development of Internet technology, the application program that installs in terminal（Application, APP）In order to straight
That seen shows the currently progress of ongoing task and other information situation to user, general by showing in current interface
Show that progress bar shows the progress of current task to user, such as, when user is in foradownloaded video, audio frequency or other files
When, show current download progress using progress bar, or when user opens certain APP, show that user works as by progress bar
Front empirical value.
At present, although the APP in terminal all in the progress for showing current ongoing task using progress bar to user,
But in prior art, the form of expression of progress bar that most of APP are used on interface is single, stereotyped, and can determine
Processing procedure degree is relatively low, so that user feels dull, dull.
Content of the invention
In view of this, the purpose of the embodiment of the present invention is to provide a kind of progress bar method for customizing and progress bar, to solve
The form of expression of in the prior art progress bar used by most of APP on interface is single, a front piece same, and customizable degree
Relatively low, so that user feels dull, dull problem.
In a first aspect, embodiments providing a kind of progress bar method for customizing, wherein, methods described includes：
Determine the customized parameter of progress bar to be customized, the customized parameter includes the progress bar figure of the progress bar to be customized
Shape, beginning and end；
According to the progress bar figure create described in progress bar to be customized rail layer, the figure of the rail layer with described
Progress bar figure part or all of identical；
The progress layer of progress bar to be customized according to the starting point and the terminal are created on the upper strata of the rail layer,
Upright projection of the progress layer in the rail layer falls in the range of the rail layer；
The rail layer and the progress layer are assembled, obtains the progress bar to be customized.
In conjunction with a first aspect, embodiments provide the first possible implementation of above-mentioned first aspect, its
In, methods described also includes：
According to the progress layer create described in progress bar to be customized gradual change figure layer, the figure of the gradual change figure layer with described
The figure of progress layer is identical；
The gradual change figure layer is covered on the upper strata of the progress layer.
In conjunction with the first possible implementation of first aspect, the of above-mentioned first aspect is embodiments provided
Two kinds of possible implementations, wherein, the gradual change figure layer of the progress bar to be customized according to the progress layer is created, bag
Include：
Multiple gradual change subgraph layers are created according to the progress layer；
Multiple gradual change subgraph layers are spliced, is obtained the gradual change figure layer.
In conjunction with second possible implementation of first aspect, the of above-mentioned first aspect is embodiments provided
Three kinds of possible implementations, wherein, described multiple gradual change subgraph layers are created according to the progress layer, including：
The beginning and end of each gradual change subgraph layer is determined according to the progress layer；
Starting point color value and the terminal colour value of each gradual change subgraph layer are set；
According to starting point color value and the terminal colour value of the gradual change subgraph layer, the gradual change subgraph layer is created.
In conjunction with a first aspect, embodiments provide the 4th kind of possible implementation of above-mentioned first aspect, its
In, the rail layer of the progress bar to be customized according to the progress bar figure is created, including：
Drawn and the progress bar figure identical geometric figure according to the progress bar figure；
The geometric figure is defined as the rail layer of the progress bar to be customized.
In conjunction with a first aspect, embodiments provide the 5th kind of possible implementation of above-mentioned first aspect, its
In, when the progress bar figure includes geometric figure and control, the figure of the rail layer is several with the progress bar figure
What visuals is identical.
In conjunction with the 5th kind of possible implementation of first aspect, the of above-mentioned first aspect is embodiments provided
Six kinds of possible implementations, wherein, the control includes button and/or shows the supplementary text of current schedules percentage.
In conjunction with a first aspect, embodiments provide above-mentioned the 7th kind of possible implementation to first aspect,
Wherein, when the progress bar figure is annulus figure, the terminal of the annulus figure is overlapped with starting point, or the doughnut
The terminal of shape is misaligned with starting point.
Second aspect, embodiments provides a kind of progress bar customizing device, and wherein, described device includes：
Determining module, for determining the customized parameter of progress bar to be customized, the customized parameter include described wait to customize into
The progress bar figure of degree bar, beginning and end；
First creation module, for the rail layer of progress bar to be customized according to progress bar figure establishment, described
The figure of rail layer is part or all of identical with the progress bar figure；
Second creation module, described undetermined for being created on the upper strata of the rail layer according to the starting point and the terminal
The progress layer of progress bar processed, upright projection of the progress layer in the rail layer fall in the range of the rail layer；
Assembling module, for assembling to the rail layer and the progress layer, obtains the progress bar to be customized.
The third aspect, it is a kind of fixed using the progress bar method for customizing described in above-mentioned first aspect to embodiments provide
The progress bar of system, wherein, the progress bar at least includes rail layer and progress layer；
The progress layer is arranged on the upper strata of the rail layer.
Progress bar method for customizing provided in an embodiment of the present invention, device and progress bar, wherein, the method according to wait to customize into
The customized parameter of degree bar creates rail layer and the progress layer of progress bar to be customized, and rail layer and progress layer is assembled, is obtained
Progress bar to be customized, it is achieved that free customization is carried out according to customized parameter to progress bar, and it is many to customize the progress strips for obtaining
Sample.
For enabling the above objects, features and advantages of the present invention to become apparent, preferred embodiment cited below particularly, and coordinate
Appended accompanying drawing, is described in detail below.
Description of the drawings
In order to be illustrated more clearly that the technical scheme of the embodiment of the present invention, below by to be used attached needed for embodiment
Figure is briefly described, it will be appreciated that the following drawings illustrate only certain embodiments of the present invention, and it is right to be therefore not construed as
The restriction of scope, for those of ordinary skill in the art, on the premise of not paying creative work, can also be according to this
A little accompanying drawings obtain other related accompanying drawings.
The flow chart that Fig. 1 shows the progress bar method for customizing provided by the embodiment of the present invention 1；
Fig. 2 shows the flow chart for creating gradual change figure layer in the progress bar method for customizing provided by the embodiment of the present invention 1；
Fig. 3 shows the structural representation of the progress bar customizing device provided by the embodiment of the present invention 2；
Fig. 4 shows the structural representation of the progress bar provided by the embodiment of the present invention 3.
3 description of symbols of accompanying drawing：
310, determining module；320, the first creation module；330, the second creation module；340, assemble module；
4 description of symbols of accompanying drawing：
410, rail layer；420, progress layer.
Specific embodiment
Purpose, technical scheme and advantage for making the embodiment of the present invention is clearer, below in conjunction with the embodiment of the present invention
Middle accompanying drawing, is clearly and completely described to the technical scheme in the embodiment of the present invention, it is clear that described embodiment is only
It is a part of embodiment of the present invention, rather than whole embodiments.Reality of the present invention generally described and illustrated in accompanying drawing herein
The component for applying example can be arranged and be designed with a variety of configurations.Therefore, below to the present invention's that provides in the accompanying drawings
The detailed description of embodiment is not intended to limit the scope of claimed invention, but is merely representative of the selected reality of the present invention
Apply example.Based on the institute obtained on the premise of creative work is not made by embodiments of the invention, those skilled in the art
There is other embodiment, belong to the scope of protection of the invention.
In view of in prior art, when the APP in terminal is showing currently ongoing using progress bar to user
When the progress of business or other information situation, the form of expression of the progress bar used by most of APP on terminal interface be single,
Stereotyped, and customizable degree is relatively low, so that user feels dull, dull.Based on this, one is embodiments provided
Method progress bar method for customizing, device and progress bar is planted, is described below by embodiment.
Embodiment 1
A kind of progress bar method for customizing is embodiments provided, the method can be entered to progress bar according to customized parameter
Row is freely customized, and it is various informative to customize the progress bar for obtaining.
As shown in figure 1, progress bar method for customizing provided in an embodiment of the present invention, including step S110-S140, specifically such as
Under.
S110, determines the customized parameter of progress bar to be customized, and the customized parameter includes the progress bar figure of progress bar to be customized
Shape, beginning and end.
Wherein, the customized parameter of above-mentioned progress bar to be customized can be provided by developer, and above-mentioned progress bar figure refers to
It is the geometry of progress bar, such as, above-mentioned progress bar figure can be annulus, strip, square, ellipse and reality
Heart circular arc etc..
When above-mentioned progress bar figure is annulus, the Origin And Destination coincidence of annulus or the Origin And Destination of annulus are not weighed
Close.
When annulus beginning and end overlap when, above-mentioned annulus one is complete annulus, when above-mentioned annulus starting point and
When terminal is misaligned, above-mentioned annulus is a part for whole annulus, in embodiments of the present invention, the position of the beginning and end of annulus
Put and freely can configure.
When above-mentioned progress bar figure includes geometric figure and control, the geometric graph of the figure of rail layer and progress bar figure
Shape part is identical.
Above-mentioned control includes button and/or shows the supplementary text of current schedules percentage.
Above-mentioned control can only include button, it is also possible to only include the supplementary text for showing current schedules percentage, may be used also
With while including button and showing the supplementary text of current schedules percentage.
Above-mentioned button is used for controlling unlatching or the stopping of progress.
Above-mentioned progress bar figure is only made up of geometric figure, and rail layer is identical with progress bar figure.
S120, creates the rail layer of progress bar to be customized according to above-mentioned progress bar figure, the figure of the rail layer with above-mentioned
Progress bar figure part or all of identical.
Wherein, above-mentioned track is placed on the bottom of whole progress bar, as the background layer of progress bar, for representing as predecessor
The aggregate scheduling of business, by rail layer, user can intuitively know the number of current aggregate scheduling.
In embodiments of the present invention, create what the rail layer of progress bar to be customized was realized particular by following process：Root
Draw and progress bar figure identical geometric figure according to above-mentioned progress bar figure, the geometric figure is defined as progress bar to be customized
Rail layer.
Wherein, above-mentioned drawn and progress bar figure identical geometric figure according to progress bar figure, can be by calling
Layer method in CAShapeLayer is realized, and creates the object of rail layer first by layer method, is recycled
BezierPathWithArcCenter method in UIBezierPath draws and progress bar figure identical geometric figure, will
The path attribute of rail layer is set to the geometric figure, so that rail layer is described according to the above-mentioned geometric figure for drawing,
Obtain the rail layer of progress bar to be customized.
Afterwards, the color of above-mentioned rail layer and live width can also be configured, the color value of rail layer and the tool of live width
Body numerical value can be that the parameter provided according to developer is configured, it is also possible to which above-mentioned live width and color are set to acquiescence
Value, the occurrence of embodiment of the present invention live width not to above-mentioned rail layer and color are defined.
When above-mentioned progress bar figure is annulus, above-mentioned customized parameter also includes starting point angle and terminal angle, below will
With above-mentioned progress bar image as complete circle and rail layer live width be 4, color as white as a example by, introduce and a kind of create track
The concrete mode of layer：
CAShapeLayer*trackLayer=[CAShapeLayer layer];
trackLayer.lineWidth=4;
trackLayer.strokeColor=[UIColor whiteColor];
UIBezierPath*path=[UIBezierPath
bezierPathWithArcCenter:CGPointMake(width/2.0f,width/2.0f)
radius:width/2.0f
startAngle:degressToRadius(0)
endAngle:degressToRadius(360)
clockwise:YES];
trackLayer.path=path.CGPath;
Wherein, in above-mentioned code, CAShapeLayer is a kind of method of graphing, and trackLayer is track
Layer, lineWidth are live width, and for retouching side color, UIBezierPath is the class of drawing image in UIKit to strokeColor,
CGPointMake represents that, by the initialization of two-dimensional coordinate system midpoint, startAngle is start angle, and endAngle is end angle
Degree, degressToRadius represent the mode for angular transition being become PI, and clockwise represents clockwise.
The figure of above-mentioned rail layer and progress bar figure some or all of identical including：When above-mentioned progress bar figure
When be made up of geometric figure, the figure of rail layer is identical with progress bar figure, such as, when above-mentioned progress bar figure is only included
During the geometric figures such as annulus, circular arc, ellipse, the figure of rail layer is identical with progress bar figure；When above-mentioned progress bar figure includes
Geometric figure and some buttons or for represent current schedules percentage supplementary text when, the figure of rail layer and progress bar
Geometric figure part in figure is identical.
S130, the upper strata according to the in-orbit channel layer of above-mentioned beginning and end create the progress layer of progress bar to be customized, the progress
Upright projection in the in-orbit channel layer of layer falls in the range of in-orbit channel layer.
Above-mentioned starting point refers to the starting point of progress bar to be customized, and above-mentioned terminal refers to the terminal of progress bar to be customized, enters
Degree layer is used for showing the progress percentage of current task, when current task is completed, the terminal weight of the terminal of progress bar and rail layer
Close.
The figure of above-mentioned progress layer is identical with the figure of rail layer, but the live width of progress layer can be identical with rail layer,
Can also be different, such as, the live width of progress layer can be than track slice width or narrow, in order to make user see by progress layer
To the progress of current task, the color of progress layer and the color of rail layer are differed.
In embodiments of the present invention, the establishment of progress layer is realized by the layer method in CAShapeLayer.
As a example by will being 4 by the live width of progress layer below, the implementation of one of which progress layer is enumerated, implements code
For：
CAShapeLayer*progressLayer=[CAShapeLayer layer];
progressLayer.lineWidth=4;
Wherein, in above-mentioned code, progressLayer is progress layer, and trackLayer is rail layer.
S140, assembles to above-mentioned rail layer and progress layer, obtains treating customization progress layer.
In the embodiment of the present invention, rail layer and progress layer can be assembled by the father's figure layer being pre-created, obtain
Treat customization progress layer.
Progress layer in order to make the progress bar to be customized of establishment has the effect of color gradient, in the embodiment of the present invention
The progress bar method for customizing of offer also includes：
The gradual change figure layer of progress bar to be customized, the figure of the gradual change figure layer and progress layer is created according to above-mentioned beginning and end
Figure identical；Gradual change figure layer is covered on the upper strata of progress layer.
In embodiments of the present invention, progress layer is used as the shade of gradual change figure layer, after gradual change figure layer is covered on the progress layer,
Progress layer can produce color gradient effect.
Wherein, as one embodiment, as shown in Fig. 2 creating progress bar to be customized gradually according to above-mentioned beginning and end
Become figure layer, including step S210-S220, specific as follows：
S210, creates multiple gradual change subgraph layers according to above-mentioned progress layer；
S220, multiple above-mentioned gradual change subgraph layers is spliced, is obtained gradual change figure layer.
Each gradual change subgraph layer in above-mentioned multiple gradual change subgraph layers is all a part of identical with progress layer pattern, will be multiple
Gradual change subgraph layer is spliced, and can be obtained and progress layer pattern identical gradual change figure layer.
Multiple in above-mentioned multiple gradual change subgraph layers can be 2,3 or other numerical value, when above-mentioned gradual change subgraph layer
Number when being 2, the two gradual change figure sublayers in left and right, the figure of left gradual change subgraph layer and the left part split-phase of progress layer can be created
With right gradual change subgraph layer is identical with the right half of progress layer, the two gradual change subgraph layers in left and right is spliced, obtains gradual change figure
Layer.
In above-mentioned multiple gradual change subgraph layers, the starting point of the starting point of first gradual change subgraph layer and progress layer overlaps, last
The terminal of the terminal of gradual change subgraph layer and progress layer overlaps.
In embodiments of the present invention, the gradual change father's figure layer being pre-created can be passed through, above-mentioned multiple gradual change subgraph layers is entered
Row splicing, obtains gradual change figure layer.
Above-mentioned multiple gradual change subgraph layers are created according to above-mentioned progress layer, specifically include：Each gradual change is determined according to progress layer
The beginning and end of subgraph layer；Starting point color value and the terminal color value of each gradual change subgraph layer are set；According to gradual change subgraph layer
Starting point color value and terminal color value, create gradual change subgraph layer.
In embodiments of the present invention, above-mentioned progress layer can be divided into some, in above-mentioned multiple gradual change subgraph layers
Each gradual change subgraph layer all corresponds to a part of progress layer, in above-mentioned multiple gradual change subgraph layers the starting point of first gradual change subgraph layer with
The starting point of progress layer overlaps, and the terminal of first gradual change subgraph layer is overlapped with the starting point of second gradual change subgraph layer, above-mentioned multiple
The terminal of last the gradual change subgraph layer in gradual change subgraph layer is overlapped with the terminal of progress layer, by above-mentioned multiple gradual change subgraph layers
Sequential concatenation, the figure of the gradual change figure layer for obtaining are consistent with the figure of progress layer.
As a example by will being two by the number of above-mentioned gradual change subgraph layer below, the establishment of above-mentioned gradual change subgraph layer is discussed in detail
Journey, when the number of above-mentioned gradual change subgraph layer is two, is designated as left gradual change subgraph layer and right gradual change subgraph layer, left gradual change respectively
The starting point of figure layer is overlapped with the starting point of progress layer, and the terminal of left gradual change subgraph layer is overlapped with the midpoint of progress layer, and by left gradual change
Used as the starting point of right gradual change subgraph layer, the terminal of right gradual change subgraph layer is overlapped the terminal of subgraph layer with the terminal of progress layer, permissible
The starting point coordinate of left gradual change subgraph layer is designated as 0, terminal point coordinate is designated as 0.5, the starting point coordinate of right gradual change subgraph layer is designated as
0.5, terminal point coordinate is designated as 1, in embodiments of the present invention, using the method for setColors arrange left gradual change subgraph layer starting point,
The starting point of terminal and right gradual change subgraph layer, the color value of terminal, according to starting point and the color value of emphasis, obtain left gradual change subgraph
Layer and right gradual change subgraph layer.
The terminal of above-mentioned left gradual change subgraph layer can also be any point on progress layer in addition to beginning and end.
Below by with the starting point color of left gradual change subgraph layer as black, terminal colour as redness, right gradual change subgraph layer rise
As a example by point color is orange for red, terminal colour, the one kind for being specifically described left gradual change subgraph layer and right gradual change subgraph layer may
Implementation, specific code is：
Wherein, in above-mentioned code, leftGradientLayer represents left gradual change figure layer, rightGradientLayer
Represent right gradual change figure layer, locations represents position, and colors represents color.
After left gradual change subgraph layer and right gradual change subgraph layer being created that using said method, by the gradual change being pre-created out
Left gradual change subgraph layer and right gradual change subgraph layer are spliced by father's figure layer, obtain complete gradual change figure layer, in the embodiment of the present invention,
Gradual change father figure layer is added in left gradual change subgraph layer and right gradual change subgraph layer with certainly by the method for addSubview, realizes a left side gradually
Varitron figure layer and the splicing of right gradual change subgraph layer, it is as follows that one of which implements code：
CALayer*superGradientLayer=[CALayer layer]
[superGradientLayer addSubLayer:leftGradientLayer];
[superGradientLayer addSubLayer:rightGradientLayer];
Wherein, in above-mentioned code, superGradientLayer is father's gradual change figure layer, and addSubLayer represents interpolation
Figure layer, superGradientLayer addSubLayer:LeftGradientLayer represents and for left gradual change figure layer to be added on father
In gradual change figure layer, superGradientLayer addSubLayer:RightGradientLayer represents right gradual change figure layer
It is added in father's figure layer.
Wherein, during left gradual change subgraph layer and right gradual change subgraph layer is created, left gradual change subgraph layer can be using tiltedly
The mode of shape gradual change is realized, and right gradual change subgraph layer can be realized in the way of the vertical gradual change of employing, and above-mentioned oblique gradual change is referred to gradually
The color of varitron figure layer carries out gradual change along 45 ° of sloping shaft, can also be from lower-left from the upper left corner to lower right corner gradual change
Angle carries out gradual change to the upper right corner, and above-mentioned vertical gradual change refers to color and carries out gradual change along vertical axes, can enter from top to bottom
Row gradual change or carry out gradual change from top to bottom.
Certainly, during left gradual change subgraph layer and right gradual change subgraph layer is created, left gradual change subgraph layer and right gradual change are sub
Figure layer all can be realized in the way of using oblique gradual change or left gradual change subgraph layer and right gradual change subgraph layer are all using vertical gradual change
Mode realize.
If, when above-mentioned when customization progress layer includes rail layer, progress layer and gradual change figure layer, will be above-mentioned using father's figure layer
Rail layer, progress layer and gradual change figure layer are spliced, and specifically can realize by the following method, and a kind of possible code is：
superGradientLayer.mask=progressLayer
[self.layer addSubLayer:trackLayer];
[self.layer addSubLayer:progressLayer];
Wherein, in above-mentioned code, mask represents shade, superGradientLayer.mask=progressLayer
Represent the shade that progress layer is set to gradual change father's figure layer, self.layeraddSubLayer:TrackLayer represents interpolation rail
Channel layer, self.layeraddSubLayer:ProgressLayer represents interpolation progress layer.
When needing, using above-mentioned when progress bar is customized, to need to create schedule view, specific code is as follows：
MNProgressView*progressView=[[MNProgressView alloc]init];
Wherein, in above-mentioned code, MNProgressView represents the progress bar that customization is obtained, and progressView represents
Schedule view, alloc representative function, init represent a kind of process.
Afterwards, the attribute of progress bar to be customized is set, such as, size, if need gradual change etc., below to wait to customize
Default coordinate of the progress bar on schedule view be（0,0）, Width x Height is defaulted as 100, acquiescence need to carry out color gradient be
Example, introduces concrete methods of realizing, and specific code is as follows：
progressView.frame=CGRectMake(0,0,100,100);
[progressView setNeedGradient:YES];
Wherein, in above-mentioned code, frame represents a kind of control, and CGRectMake represents using the screen upper left corner as ginseng
Examination point, progressView setNeedGradient:YES represents that schedule view needs color gradient effect.
Then, above-mentioned progress bar to be customized is added in above-mentioned schedule view, implements code as follows：
[view addSubView:progressView];
Wherein, in above-mentioned code, progressView represents schedule view, and addSubView represents a kind of and adds view
Method.
Finally, progress bar current schedules percentage to be customized is set, in the embodiment of the present invention, by setProgress side
Method arranges progress bar current schedules percentage to be customized, and specific code is as follows：
[progressView setProgress:0.5animated:YES]
Wherein, in above-mentioned code, setProgress represents a kind of method of setting progress, progressView
setProgress:0.5animated:YES represents setting progress bar initial value.
Progress bar method for customizing provided in an embodiment of the present invention, it is achieved that progress bar is carried out freely determining according to customized parameter
System, and it is various informative to customize the progress bar for obtaining.
Embodiment 2
A kind of progress bar customizing device is embodiments provided, as shown in figure 3, the device includes：Determining module
310th, the first creation module 320, the second creation module 330 and assembling module 340；
Above-mentioned determining module 310, for determining the customized parameter of progress bar to be customized, the customized parameter include to wait to customize into
The progress bar figure of degree bar, beginning and end；
Above-mentioned first creation module 320, for creating the rail layer of progress bar to be customized according to above-mentioned progress bar figure, should
The figure of rail layer is part or all of identical with progress bar figure；
Above-mentioned second creation module 330, for created according to the upper strata of the in-orbit channel layer of above-mentioned beginning and end wait to customize into
The progress layer of degree bar, the upright projection in the in-orbit channel layer of progress layer fall in the range of in-orbit channel layer；
Above-mentioned assembling module 340, for assembling above-mentioned rail layer and progress layer, obtains above-mentioned treating customization progress
Bar.
Progress bar customizing device provided in an embodiment of the present invention, it is achieved that progress bar is carried out freely determining according to customized parameter
System, and it is various informative to customize the progress bar for obtaining
The progress bar customizing device provided by the embodiment of the present invention can be set for the specific hardware on equipment or be installed on
Standby upper software or firmware etc..The device provided by the embodiment of the present invention, its realize the technique effect of principle and generation and aforementioned
Embodiment of the method is identical, is brief description, and device embodiment part does not refer to part, refers to corresponding in preceding method embodiment
Content.Those skilled in the art can be understood that, for convenience and simplicity of description, system described above, dress
The specific work process with unit is put, the corresponding process in said method embodiment is all may be referred to, be will not be described here.
In embodiment provided by the present invention, it should be understood that disclosed apparatus and method, other sides can be passed through
Formula is realized.Device embodiment described above is only that schematically for example, the division of the unit, only one kind are patrolled
Volume function is divided, and can have other dividing mode when actually realizing, and for example, multiple units or component can in conjunction with or can
To be integrated into another system, or some features can be ignored, or not execute.Another, shown or discussed each other
Coupling direct-coupling or communication connection can be the INDIRECT COUPLING or communication link of device or unit by some communication interfaces
Connect, can be electrical, mechanical or other forms.
The unit that illustrates as separating component can be or may not be physically separate, aobvious as unit
The part for showing can be or may not be physical location, you can be located at a place, or can also be distributed to multiple
On NE.Some or all of unit therein can be selected according to the actual needs to realize the mesh of this embodiment scheme
's.
In addition, each functional unit in the embodiment that the present invention is provided can be integrated in a processing unit, also may be used
To be that unit is individually physically present, it is also possible to which two or more units are integrated in a unit.
If the function realized using in the form of SFU software functional unit and as independent production marketing or use when, permissible
It is stored in a computer read/write memory medium.Based on such understanding, technical scheme is substantially in other words
The part contributed by prior art or the part of the technical scheme can be embodied in the form of software product, the meter
Calculation machine software product is stored in a storage medium, is used so that a computer equipment including some instructions（Can be individual
People's computer, server, or network equipment etc.）Execute all or part of step of each embodiment methods described of the present invention.
And aforesaid storage medium includes：USB flash disk, portable hard drive, read-only storage（ROM, Read-Only Memory）, arbitrary access deposits
Reservoir（RAM, Random Access Memory）, magnetic disc or CD etc. are various can be with the medium of store program codes.
It should be noted that：Similar label and letter represent similar terms in following accompanying drawing, therefore, once a certain Xiang Yi
It is defined in individual accompanying drawing, then which need not be defined further and explain in subsequent accompanying drawing, additionally, term " the
One ", " second ", " the 3rd " etc. are only used for distinguishing description, and it is not intended that indicating or hint relative importance.
Embodiment 3
A kind of progress bar is embodiments provided, the progress bar is customized using the method in above-described embodiment 1, such as
Shown in Fig. 4, the progress bar at least includes rail layer 410 and progress layer 420；
Progress layer 420 is arranged on the upper strata of rail layer 410.
It is wide for the width ratio rail layer 410 of whole annulus and progress layer 420 that above-mentioned Fig. 4 simply depicts rail layer 410
Situation, not the width to progress layer 420 and rail layer 410 be defined, do not limit starting point and the end of rail layer 410 yet
The particular location of point.
In addition, above-mentioned progress bar can also be other shapes, and the beginning and end of rail layer can also be misaligned, enters
The width of degree layer 420 can be consistent with the width of rail layer 410, it is also possible to than the narrow width of rail layer 410 or compares rail layer
410 width width, above-mentioned Fig. 4 simply depict one of which possibility, and the concrete shape to progress bar is not defined.
Gradual change figure layer can also be set on above-mentioned progress layer 420, progress layer 420 as the shade of gradual change figure layer, so
When current schedules are shown using progress layer 420, progress layer 420 has the effect of color gradient.
Progress bar provided in an embodiment of the present invention, is customized using the method for above-described embodiment 1, various informative.
Finally it should be noted that：The specific embodiment of embodiment described above, the only present invention, in order to illustrate the present invention
Technical scheme, rather than a limitation, protection scope of the present invention is not limited thereto, although with reference to the foregoing embodiments to this
Bright be described in detail, it will be understood by those within the art that：Any those familiar with the art
The invention discloses technical scope in, which still can be modified to the technical scheme described in previous embodiment or can be light
Change is readily conceivable that, or equivalent is carried out to which part technical characteristic；And these modifications, change or replacement, do not make
The essence of appropriate technical solution departs from the spirit and scope of embodiment of the present invention technical scheme.The protection in the present invention should all be covered
Within the scope of.Therefore, protection scope of the present invention should be defined by the scope of the claims.
Claims (10)
1. a kind of progress bar method for customizing, it is characterised in that methods described includes：
Determine the customized parameter of progress bar to be customized, the customized parameter include the progress bar to be customized progress bar figure,
Beginning and end；
The rail layer of progress bar to be customized, the figure of the rail layer and the progress according to the progress bar figure is created
Bar figure part or all of identical；
According to the starting point and the terminal are created on the upper strata of the rail layer, the progress layer of progress bar to be customized, described
Upright projection of the progress layer in the rail layer falls in the range of the rail layer；
The rail layer and the progress layer are assembled, obtains the progress bar to be customized.
2. method according to claim 1, it is characterised in that methods described also includes：
The gradual change figure layer of progress bar to be customized, the figure of the gradual change figure layer and the progress according to the progress layer is created
The figure of layer is identical；
The gradual change figure layer is covered on the upper strata of the progress layer.
3. method according to claim 2, it is characterised in that described treat customization progress according to the progress layer is created
The gradual change figure layer of bar, including：
Multiple gradual change subgraph layers are created according to the progress layer；
Multiple gradual change subgraph layers are spliced, is obtained the gradual change figure layer.
4. method according to claim 3, it is characterised in that described multiple gradual change subgraphs are created according to the progress layer
Layer, including：
The beginning and end of each gradual change subgraph layer is determined according to the progress layer；
Starting point color value and the terminal colour value of each gradual change subgraph layer are set；
According to starting point color value and the terminal colour value of the gradual change subgraph layer, the gradual change subgraph layer is created.
5. method according to claim 1, it is characterised in that described wait to customize according to the progress bar figure is created
The rail layer of progress bar, including：
Drawn and the progress bar figure identical geometric figure according to the progress bar figure；
The geometric figure is defined as the rail layer of the progress bar to be customized.
6. method according to claim 1, it is characterised in that when the progress bar figure includes geometric figure and control
When, the figure of the rail layer is identical with the geometric figure part of the progress bar figure.
7. method according to claim 6, it is characterised in that the control includes button and/or shows current schedules hundred
Divide the supplementary text of ratio.
8. method according to claim 1, it is characterised in that when the progress bar figure is annulus figure, the circle
The terminal of ring figure is overlapped with starting point, or the terminal of the annulus figure is misaligned with starting point.
9. a kind of progress bar customizing device, it is characterised in that described device includes：
Determining module, for determining the customized parameter of progress bar to be customized, the customized parameter includes the progress bar to be customized
Progress bar figure, beginning and end；
First creation module, for the rail layer of progress bar to be customized according to progress bar figure establishment, the track
The figure of layer is part or all of identical with the progress bar figure；
Second creation module, for wait described in being created on the upper strata of the rail layer according to the starting point and the terminal to customize into
The progress layer of degree bar, upright projection of the progress layer in the rail layer fall in the range of the rail layer；
Assembling module, for assembling to the rail layer and the progress layer, obtains the progress bar to be customized.
10. the progress bar that the progress bar method for customizing described in a kind of any one of utilization claim 1-8 is customized, it is characterised in that
The progress bar at least includes rail layer and progress layer；
The progress layer is arranged on the upper strata of the rail layer.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610940002.8A CN106484432B (en) | 2016-11-01 | 2016-11-01 | Progress bar customization method and device and progress bar |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201610940002.8A CN106484432B (en) | 2016-11-01 | 2016-11-01 | Progress bar customization method and device and progress bar |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106484432A true CN106484432A (en) | 2017-03-08 |
| CN106484432B CN106484432B (en) | 2023-10-31 |
Family
ID=58272852
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201610940002.8A Active CN106484432B (en) | 2016-11-01 | 2016-11-01 | Progress bar customization method and device and progress bar |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106484432B (en) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107256164A (en) * | 2017-07-31 | 2017-10-17 | 北京酷我科技有限公司 | The optimization processing algorithm of self-defined shape progress bar under a kind of Mac |
| CN107273275A (en) * | 2017-05-09 | 2017-10-20 | 武汉斗鱼网络科技有限公司 | Progress bar dynamic refresh method and device in a kind of multiple data cells |
| CN107346250A (en) * | 2017-07-16 | 2017-11-14 | 北京酷我科技有限公司 | A kind of stacking display algorithm of the progress bar of breath light effect |
| CN107436766A (en) * | 2017-07-31 | 2017-12-05 | 北京酷我科技有限公司 | The Processing Algorithm of self-defined shape progress bar under a kind of Mac |
| CN107578460A (en) * | 2017-09-12 | 2018-01-12 | 苏州微清医疗器械有限公司 | A kind of image mosaic progress display method |
| CN109558129A (en) * | 2017-09-27 | 2019-04-02 | 北京国双科技有限公司 | Progress bar implementation method and device |
| CN109829956A (en) * | 2017-11-23 | 2019-05-31 | 腾讯科技（深圳）有限公司 | Data display method, device and electronic equipment |
| CN112330773A (en) * | 2020-11-30 | 2021-02-05 | 广州博冠信息科技有限公司 | Countdown image generation method and device, electronic equipment and computer medium |
| CN112435308A (en) * | 2020-11-30 | 2021-03-02 | 成都新潮传媒集团有限公司 | Drawing method and device of annular progress bar and storage medium |
| CN113628306A (en) * | 2021-08-11 | 2021-11-09 | 广州虎牙科技有限公司 | Text display method and device, electronic equipment and readable storage medium |
| CN116664734A (en) * | 2022-10-19 | 2023-08-29 | 荣耀终端有限公司 | Method for displaying ring chart, electronic device and readable storage medium |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101295244A (en) * | 2007-04-29 | 2008-10-29 | 鸿富锦精密工业（深圳）有限公司 | Progress bar design system and method |
| CN102156999A (en) * | 2010-02-11 | 2011-08-17 | 腾讯科技（深圳）有限公司 | Generation method and device thereof for user interface |
| CN102799678A (en) * | 2012-07-23 | 2012-11-28 | 深圳市同洲电子股份有限公司 | Method for customizing progress bar of browser and method for customizing error page of browser |
| US20130298021A1 (en) * | 2012-05-02 | 2013-11-07 | Samsung Electronics Co., Ltd. | Method of expansively searching multimedia and multimedia executing apparatus therefor |
| CN103761303A (en) * | 2014-01-22 | 2014-04-30 | 广东欧珀移动通信有限公司 | Method and device for picture arrangement display |
| US20140201633A1 (en) * | 2013-01-14 | 2014-07-17 | Lenovo (Beijing) Co., Ltd. | Progress adjustment method and electronic device |
| CN104063149A (en) * | 2014-06-13 | 2014-09-24 | 深圳市东信时代信息技术有限公司 | Adjustable progress bar system and method |
| CN104239053A (en) * | 2014-09-12 | 2014-12-24 | 广州华多网络科技有限公司 | Progress bar display method and system |
-
2016
- 2016-11-01 CN CN201610940002.8A patent/CN106484432B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101295244A (en) * | 2007-04-29 | 2008-10-29 | 鸿富锦精密工业（深圳）有限公司 | Progress bar design system and method |
| CN102156999A (en) * | 2010-02-11 | 2011-08-17 | 腾讯科技（深圳）有限公司 | Generation method and device thereof for user interface |
| US20130298021A1 (en) * | 2012-05-02 | 2013-11-07 | Samsung Electronics Co., Ltd. | Method of expansively searching multimedia and multimedia executing apparatus therefor |
| CN102799678A (en) * | 2012-07-23 | 2012-11-28 | 深圳市同洲电子股份有限公司 | Method for customizing progress bar of browser and method for customizing error page of browser |
| US20140201633A1 (en) * | 2013-01-14 | 2014-07-17 | Lenovo (Beijing) Co., Ltd. | Progress adjustment method and electronic device |
| CN103761303A (en) * | 2014-01-22 | 2014-04-30 | 广东欧珀移动通信有限公司 | Method and device for picture arrangement display |
| CN104063149A (en) * | 2014-06-13 | 2014-09-24 | 深圳市东信时代信息技术有限公司 | Adjustable progress bar system and method |
| CN104239053A (en) * | 2014-09-12 | 2014-12-24 | 广州华多网络科技有限公司 | Progress bar display method and system |
Non-Patent Citations (2)
| Title |
|---|
| 无名氏: "环形渐变进度条实现", 《HTTP://SAITJR.COM/IOS/IOS-IMPLEMENT-LOOP-PROGRESS.HTML》 * |
| 蔡胜波: ""CAShapeLayer和UIBezierPath制作一个圆形进度条"", 《HTTPS://WWW.JIANSHU.COM/P/F48A0EDE186D》 * |
Cited By (16)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107273275B (en) * | 2017-05-09 | 2020-04-10 | 武汉斗鱼网络科技有限公司 | Method and device for dynamically refreshing progress bar in multiple data units |
| CN107273275A (en) * | 2017-05-09 | 2017-10-20 | 武汉斗鱼网络科技有限公司 | Progress bar dynamic refresh method and device in a kind of multiple data cells |
| CN107346250A (en) * | 2017-07-16 | 2017-11-14 | 北京酷我科技有限公司 | A kind of stacking display algorithm of the progress bar of breath light effect |
| CN107346250B (en) * | 2017-07-16 | 2020-07-31 | 北京酷我科技有限公司 | Laminated display method of progress bar with breathing lamp effect |
| CN107436766A (en) * | 2017-07-31 | 2017-12-05 | 北京酷我科技有限公司 | The Processing Algorithm of self-defined shape progress bar under a kind of Mac |
| CN107256164A (en) * | 2017-07-31 | 2017-10-17 | 北京酷我科技有限公司 | The optimization processing algorithm of self-defined shape progress bar under a kind of Mac |
| CN107578460A (en) * | 2017-09-12 | 2018-01-12 | 苏州微清医疗器械有限公司 | A kind of image mosaic progress display method |
| CN107578460B (en) * | 2017-09-12 | 2021-06-04 | 苏州微清医疗器械有限公司 | Image splicing progress display method |
| CN109558129A (en) * | 2017-09-27 | 2019-04-02 | 北京国双科技有限公司 | Progress bar implementation method and device |
| CN109829956A (en) * | 2017-11-23 | 2019-05-31 | 腾讯科技（深圳）有限公司 | Data display method, device and electronic equipment |
| CN112330773A (en) * | 2020-11-30 | 2021-02-05 | 广州博冠信息科技有限公司 | Countdown image generation method and device, electronic equipment and computer medium |
| CN112435308A (en) * | 2020-11-30 | 2021-03-02 | 成都新潮传媒集团有限公司 | Drawing method and device of annular progress bar and storage medium |
| CN112435308B (en) * | 2020-11-30 | 2023-11-14 | 成都新潮传媒集团有限公司 | Drawing method and device of annular progress bar and storage medium |
| CN113628306A (en) * | 2021-08-11 | 2021-11-09 | 广州虎牙科技有限公司 | Text display method and device, electronic equipment and readable storage medium |
| CN116664734A (en) * | 2022-10-19 | 2023-08-29 | 荣耀终端有限公司 | Method for displaying ring chart, electronic device and readable storage medium |
| CN116664734B (en) * | 2022-10-19 | 2024-05-07 | 荣耀终端有限公司 | Method for displaying ring chart, electronic device and readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106484432B (en) | 2023-10-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106484432A (en) | A kind of progress bar method for customizing, device and progress bar | |
| CN109358851A (en) | Creation method, device and the computer readable storage medium of chart components | |
| US20170286068A1 (en) | Development support system | |
| CN107992304A (en) | A kind of method and apparatus for generating display interface | |
| CN107122175B (en) | Interface creating method and device | |
| US9342498B2 (en) | System and method for generating a design template based on graphical input | |
| CN108228288A (en) | A kind of component system and its call method and device | |
| CN101374213A (en) | Implementing method for self-defining television human-machine interface | |
| CN104699863A (en) | Webpage data display system | |
| CN104503769B (en) | A kind of character pattern liquid crystal interface implementation method based on XML configuration file | |
| CN112445564B (en) | Interface display method, electronic device and computer readable storage medium | |
| CN108765520A (en) | Rendering intent and device, storage medium, the electronic device of text message | |
| CN105242931A (en) | Method and system for editing and generating codes for game interface | |
| CN107092413A (en) | A kind of visible controls corners processing method and system | |
| CN107122398A (en) | A kind of data display chart generation method and system | |
| CN107291340B (en) | Method for realizing interface effect, computing equipment and storage medium | |
| CN104156200A (en) | Method and system for Declarative configuration and execution of card content management operations for trusted service manager | |
| Schroeder | AndEngine for Android game development cookbook | |
| CN114153442A (en) | Large-screen visualization page configuration method and system based on visualization component | |
| CN115562652B (en) | Component style processing method and system for low-code development platform | |
| CN110007919A (en) | A kind of dynamic density screen adaptation method and system for the automatic airport of unmanned plane | |
| CN108536434A (en) | A kind of method and device for realizing Hook Function based on high-level programming language | |
| CN105760147A (en) | Software page display construction method and system | |
| CN105241011A (en) | Air conditioner group control system development device and method | |
| CN109189537A (en) | The dynamic display method of page info calculates equipment and computer storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240115 Address after: 518000, 207, 2nd Floor, Aotexun Electric Power Building, No. 3 Songpingshan Road, North Zone, High tech Industrial Park, Xili Street, Nanshan District, Shenzhen, Guangdong Province Patentee after: Shenzhen Bangqi Technology Innovation Co.,Ltd. Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. |
|
| TR01 | Transfer of patent right |