CN106775227A - A kind of method and system of page layout switch - Google Patents
A kind of method and system of page layout switch Download PDFInfo
- Publication number
- CN106775227A CN106775227A CN201611107989.1A CN201611107989A CN106775227A CN 106775227 A CN106775227 A CN 106775227A CN 201611107989 A CN201611107989 A CN 201611107989A CN 106775227 A CN106775227 A CN 106775227A
- Authority
- CN
- China
- Prior art keywords
- convex
- value
- abscissa value
- page
- abscissa
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
- G06F3/04812—Interaction techniques based on cursor appearance or behaviour, e.g. being affected by the presence of displayed objects
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F2203/00—Indexing scheme relating to G06F3/00 - G06F3/048
- G06F2203/048—Indexing scheme relating to G06F3/048
- G06F2203/04801—Cursor retrieval aid, i.e. visual aspect modification, blinking, colour changes, enlargement or other visual cues, for helping user do find the cursor in graphical user interfaces
Abstract
The present invention relates to page presentation field, more particularly to a kind of method and system of page layout switch.Abscissa value by obtaining the central point of current page indicating label of the invention, obtains the first abscissa value；The abscissa value of the central point of target pages indicating label is obtained, the second abscissa value is obtained；Draw the corresponding abscissa value of convex figure peak from first abscissa value transform to second abscissa value during convex figure corresponding with the real-time sliding distance of the page.The indicating label of prominent current page is realized, the conspicuousness and ease for use of indicator is improve.
Description
Technical field
The present invention relates to page presentation field, more particularly to a kind of method and system of page layout switch.
Background technology
In the numerous app of current Android, the use of ViewPager controls is ubiquitous, but its page indicator
(TabPageIndicator) it is more dull.Relatively common be the third party control ViewPagerIndicator that increases income and
TabLayout controls in the Android Support Design storehouses issued in Google conferences in 2015.Because can reach
To the effect of ViewPagerIndicator, and be official's issue, can compatible 2.2 and above version, TabLayout's
Using growing day by day.But the two control forms are single, only can be using a line (rectangle in other words) by different
Color reaches the purpose of instruction, and its indicating effect is obvious.
The content of the invention
The technical problems to be solved by the invention are：A kind of method and system of page layout switch are provided, are improved the page and is indicated
The conspicuousness of device.
In order to solve the above-mentioned technical problem, the technical solution adopted by the present invention is：
The present invention provides a kind of method of page layout switch, including：
The abscissa value of S1, the central point of acquisition current page indicating label, obtains the first abscissa value；
The abscissa value of S2, the central point of acquisition target pages indicating label, obtains the second abscissa value；
S3, the corresponding abscissa value of drafting convex figure peak transform to the described second horizontal seat from first abscissa value
Convex figure corresponding with the real-time sliding distance of the page during scale value.
The present invention also provides a kind of system of page layout switch, including：
First acquisition module, the abscissa value of the central point for obtaining current page indicating label obtains the first horizontal seat
Scale value；
Second acquisition module, the abscissa value of the central point for obtaining target pages indicating label obtains the second horizontal seat
Scale value；
Drafting module, institute is transformed to for drawing the corresponding abscissa value of convex figure peak from first abscissa value
State convex figure corresponding with the real-time sliding distance of the page during the second abscissa value.
The beneficial effects of the present invention are：By real-time rendering convex figure, the jut of the convex figure is pointed to currently
The corresponding indicating label of the page, the indicating label of prominent current page, meets the individual demand of user, improves indicator
Conspicuousness and ease for use.
Brief description of the drawings
Fig. 1 is a kind of FB(flow block) of the specific embodiment of the method for page layout switch of the invention；
Fig. 2 is a kind of structured flowchart of the specific embodiment of the system of page layout switch of the invention；
Fig. 3 is the design sketch of zigzag indicator；
Fig. 4 is the design sketch of waveform indicator；
Label declaration：
1st, the first acquisition module；2nd, the second acquisition module；3rd, drafting module.
Specific embodiment
It is to describe technology contents of the invention, the objects and the effects in detail, below in conjunction with implementation method and coordinates attached
Figure is explained.
The design of most critical of the present invention is：By real-time rendering convex figure, the indicating label of prominent current page is improved
The conspicuousness and ease for use of indicator.
Fig. 1 to Fig. 4 is refer to,
As shown in figure 1, the present invention provides a kind of method of page layout switch, including：
The abscissa value of S1, the central point of acquisition current page indicating label, obtains the first abscissa value；
The abscissa value of S2, the central point of acquisition target pages indicating label, obtains the second abscissa value；
S3, the corresponding abscissa value of drafting convex figure peak transform to the described second horizontal seat from first abscissa value
Convex figure corresponding with the real-time sliding distance of the page during scale value.
Further, the S3 is specially：
The maximum height value of S31, the width value that convex figure is set and convex figure；
S32, the width value according to the convex figure, the maximum height value of the convex figure, the sliding distance and described
Second abscissa value is calculated the ordinate value set of convex figure, specially：
According toIt is calculated convex
The ordinate value set of figure；Wherein, mGussionHeightOffset be the sliding distance, Hmax be the convex figure most
Big height value, μ is second abscissa value, and w is the width value of the convex figure, and x is from first abscissa value to institute
State the abscissa value in the interval of the second abscissa value；
S33, according to the ordinate value set draw convex figure.
Seen from the above description, needed in real time in the computing formula of the ordinate value set of the calculating convex figure that the present invention is provided
The parameter of acquisition only has the corresponding abscissa value of ordinate value of the convex figure of current calculating, and calculating process is simple, can effectively prevent
The Caton phenomenon that only page sliding process camber figure shows.
Further, also include：
The number of the ordinate value for obtaining convex figure is set.
Seen from the above description, the number difference for obtaining ordinate value is set, and the convex figure drawn out is different.
Further, the S2 is specially：
Obtain the glide direction of the page；
According to the glide direction and current page indicating label, target pages indicating label is obtained；
The abscissa value of the central point of the target pages indicating label is calculated, the second abscissa value is obtained.
Seen from the above description, the glide direction according to the page obtains the indicating label of target pages so that the page
The method of switching supports that sliding screen to the left will show that page layout switch, to the left page of current page, slides to the right screen simultaneously
The right side page of the page layout switch to current page will be shown.
Further, also include：
It is the inverse of the color of page indicator to set the color of convex figure.
Seen from the above description, the color of convex figure is worked as the inverse of the color of page indicator can further protrude sensing
The indicating label of the preceding page.
As shown in Fig. 2 the present invention also provides a kind of system of page layout switch, including：
First acquisition module 1, the abscissa value of the central point for obtaining current page indicating label obtains the first horizontal seat
Scale value；
Second acquisition module 2, the abscissa value of the central point for obtaining target pages indicating label obtains the second horizontal seat
Scale value；
Drafting module 3, transforms to for drawing the corresponding abscissa value of convex figure peak from first abscissa value
Convex figure corresponding with the real-time sliding distance of the page during second abscissa value.
Further, the drafting module includes：
Setting unit, for setting the width value of convex figure and the maximum height value of convex figure；
First computing unit, for the width value according to the convex figure, the maximum height value of the convex figure, the cunning
Dynamic distance and second abscissa value are calculated the ordinate value set of convex figure, specially：
According toIt is calculated convex
The ordinate value set of figure；Wherein, mGussionHeightOffset be the sliding distance, Hmax be the convex figure most
Big height value, μ is second abscissa value, and w is the width value of the convex figure, and x is from first abscissa value to institute
State the abscissa value in the interval of the second abscissa value；
Drawing unit, for drawing convex figure according to the ordinate value set.
Further, also include：
First setup module, the number for setting the ordinate value for obtaining convex figure.
Further, second acquisition module includes：
First acquisition unit, the glide direction for obtaining the page；
Second acquisition unit, indicates for according to the glide direction and current page indicating label, obtaining target pages
Label；
Second computing unit, the abscissa value of the central point for calculating the target pages indicating label, obtains second
Abscissa value.
Further, also include：
Second setup module, the color for setting convex figure is the inverse of the color of page indicator.
Seen from the above description, by the system of the page layout switch, it is capable of achieving the indicating label of prominent current page
Function, improves the conspicuousness and ease for use of indicator.
Embodiments of the invention are：
TabLayout controls in Android Support Design storehouses are official's issues, using simple, with finger
Show the effect of device, but the style sheet one of the control, indicator can only be made by rectangle, its indicating effect is not obvious.With
The method and step that the indicator with convex figure is made based on TabLayout is as described below：
The abscissa value of S1, the central point of acquisition current page indicating label, obtains the first abscissa value；
Wherein, the coordinate value of the left margin and right margin of page indicating label in indicator is obtained respectively
MIndicatorLeft and mIndicatorRight, calculates according to (mIndicatorRight+mIndicatorLeft)/2
To the abscissa of the central point of page indicating label.
S2, the glide direction for obtaining the page；According to the glide direction and current page indicating label, target pages are obtained
Indicating label；The abscissa value of the central point of the target pages indicating label is calculated, the second abscissa value is obtained；
S3, the corresponding abscissa value of drafting convex figure peak transform to the described second horizontal seat from first abscissa value
Convex figure corresponding with the real-time sliding distance of the page during scale value, specially：
The maximum height value of S31, the width value that convex figure is set and convex figure；
Wherein, the realization of TabLayout classes is extracted from Android design support storehouses the inside, class name is changed
It is RippleTabLayout, and increases the interface of the maximum height value of width and convex figure that convex figure is set wherein.
The realization of TabStrip classes in RippleTabLayout classes is extracted, the entitled SlidingTabStrip of its class is changed,
Increase a side-play amount mGussionHeightOffset for being used to record the change of convex figure abscissa, be initialized as 0, its value
Scope is [0,1].
Class related in other all design support storehouses in rewriting RippleTabLayout.Defined using oneself
The class of said function replace it, so we need not import design support storehouses, it becomes possible to directly use
RippleTabLayout reaches the special efficacy of display convex figure.
S32, the number that the ordinate value for obtaining convex figure is set；
S33, the width value according to the convex figure, the maximum height value of the convex figure, the sliding distance and described
Second abscissa value is calculated the ordinate value set of convex figure, specially：
According toIt is calculated convex
The ordinate value set of figure；Wherein, mGussionHeightOffset be the sliding distance, Hmax be the convex figure most
Big height value, μ is second abscissa value, and w is the width value of the convex figure, and x is from first abscissa value to institute
State the abscissa value in the interval of the second abscissa value；
S34, according to the ordinate value set draw convex figure；
Wherein, Path objects are created, the corresponding abscissa value of point of the convex figure of Path object acquisition certain numbers and vertical
Coordinate value, calls painting canvas function, draws each point in Path objects.Wherein, the number of the point of Path objects camber figure
It is identical with the number that the ordinate value for obtaining convex figure is set in step S32.The number at Path objects midpoint is different, and it is drawn out
Convex figure it is different, convex figure of the present invention is symmetrical convex.Such as, it is when the number at Path objects midpoint is 3 including convex
The coordinate of the peak of shape figure and two coordinates of minimum point, the convex figure drawn out is zigzag, and design sketch is as shown in Figure 3.
When the number at Path objects midpoint is 20, the convex figure drawn out is waveform, and design sketch is as shown in Figure 4.
S4, the color of setting convex figure are the inverse of the color of page indicator.
For example, the color for setting page indicator is light blue, then convex figure is set to inverse peony azury,
So as to prominent convex figure, the conspicuousness that indicator indicates current page label is further improved.
In sum, the method for a kind of page layout switch that the present invention is provided, by real-time rendering convex figure, the convex figure
Jut point to the corresponding indicating label of current page, the indicating label of prominent current page meets the personalization of user
Demand, improves the conspicuousness and ease for use of indicator.Further, can effectively prevent the page sliding process camber figure from showing
Caton phenomenon.Further, the number difference for obtaining ordinate value is set, and the convex figure drawn out is different.Further, root
The indicating label of target pages is obtained according to the glide direction of the page so that the method for the page layout switch is supported to slide to the left simultaneously
Screen will show left page of the page layout switch to current page, and screen is slided to the right will show page layout switch to current page
The right side page.Further, the color of convex figure points to current page for the inverse of the color of page indicator can be protruded further
The indicating label in face.The present invention also provides a kind of system of page layout switch, is capable of achieving the work(of the indicating label of prominent current page
Can, improve the conspicuousness and ease for use of indicator.
Embodiments of the invention are the foregoing is only, the scope of the claims of the invention is not thereby limited, it is every to utilize this hair
The equivalents that bright specification and accompanying drawing content are made, or the technical field of correlation is directly or indirectly used in, similarly include
In scope of patent protection of the invention.
Claims (10)
1. a kind of method of page layout switch, it is characterised in that including：
The abscissa value of S1, the central point of acquisition current page indicating label, obtains the first abscissa value；
The abscissa value of S2, the central point of acquisition target pages indicating label, obtains the second abscissa value；
S3, the corresponding abscissa value of drafting convex figure peak transform to second abscissa value from first abscissa value
During convex figure corresponding with the real-time sliding distance of the page.
2. the method for page layout switch according to claim 1, it is characterised in that the S3 is specially：
The maximum height value of S31, the width value that convex figure is set and convex figure；
S32, the width value according to the convex figure, the maximum height value of the convex figure, the sliding distance and described second
Abscissa value is calculated the ordinate value set of convex figure, specially：
According toIt is calculated the vertical of convex figure
Set of coordinate values；Wherein, mGussionHeightOffset is the sliding distance, and Hmax is the maximum height of the convex figure
Value, μ is second abscissa value, and w is the width value of the convex figure, and x is from first abscissa value to described second
Abscissa value in the interval of abscissa value；
S33, according to the ordinate value set draw convex figure.
3. the method for page layout switch according to claim 2, it is characterised in that also include：
The number of the ordinate value for obtaining convex figure is set.
4. the method for page layout switch according to claim 1, it is characterised in that the S2 is specially：
Obtain the glide direction of the page；
According to the glide direction and current page indicating label, target pages indicating label is obtained；
The abscissa value of the central point of the target pages indicating label is calculated, the second abscissa value is obtained.
5. the method for page layout switch according to claim 1, it is characterised in that also include：
It is the inverse of the color of page indicator to set the color of convex figure.
6. a kind of system of page layout switch, it is characterised in that including：
First acquisition module, the abscissa value of the central point for obtaining current page indicating label, obtains the first abscissa value；
Second acquisition module, the abscissa value of the central point for obtaining target pages indicating label, obtains the second abscissa value；
Drafting module, described is transformed to for drawing the corresponding abscissa value of convex figure peak from first abscissa value
Convex figure corresponding with the real-time sliding distance of the page during two abscissa values.
7. the system of page layout switch according to claim 6, it is characterised in that the drafting module includes：
Setting unit, for setting the width value of convex figure and the maximum height value of convex figure；
First computing unit, for the width value according to the convex figure, the maximum height value of the convex figure, the slip away from
From the ordinate value set that convex figure is calculated with second abscissa value, specially：
According toIt is calculated the vertical of convex figure
Set of coordinate values；Wherein, mGussionHeightOffset is the sliding distance, and Hmax is the maximum height of the convex figure
Value, μ is second abscissa value, and w is the width value of the convex figure, and x is from first abscissa value to described second
Abscissa value in the interval of abscissa value；
Drawing unit, for drawing convex figure according to the ordinate value set.
8. the system of page layout switch according to claim 7, it is characterised in that also include：
First setup module, the number for setting the ordinate value for obtaining convex figure.
9. the system of page layout switch according to claim 6, it is characterised in that second acquisition module includes：
First acquisition unit, the glide direction for obtaining the page；
Second acquisition unit, for according to the glide direction and current page indicating label, obtaining target pages indicating label；
Second computing unit, the abscissa value of the central point for calculating the target pages indicating label, obtains the second horizontal seat
Scale value.
10. the system of page layout switch according to claim 6, it is characterised in that also include：
Second setup module, the color for setting convex figure is the inverse of the color of page indicator.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611107989.1A CN106775227B (en) | 2016-12-06 | 2016-12-06 | A kind of method and system of page switching |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201611107989.1A CN106775227B (en) | 2016-12-06 | 2016-12-06 | A kind of method and system of page switching |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106775227A true CN106775227A (en) | 2017-05-31 |
| CN106775227B CN106775227B (en) | 2019-08-06 |
Family
ID=58874354
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201611107989.1A Active CN106775227B (en) | 2016-12-06 | 2016-12-06 | A kind of method and system of page switching |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106775227B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109254823A (en) * | 2018-09-21 | 2019-01-22 | 武汉华中时讯科技有限责任公司 | A kind of method, memory and the terminal of the paging view elements of changing multi-stage nesting |
| CN109739593A (en) * | 2018-11-21 | 2019-05-10 | 惠州Tcl移动通信有限公司 | Multiple web pages switch browsing method, mobile terminal and computer readable storage medium |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103500057A (en) * | 2013-10-08 | 2014-01-08 | 百度在线网络技术（北京）有限公司 | Mobile terminal and control method and device thereof |
| JP2015005045A (en) * | 2013-06-19 | 2015-01-08 | コニカミノルタ株式会社 | Electronic display terminal, program for electronic display terminal, recording medium having program for electronic display terminal recorded therein, and display method |
| CN104932790A (en) * | 2015-06-26 | 2015-09-23 | 联想(北京)有限公司 | Information processing method and electronic equipment |
| CN105068734A (en) * | 2015-08-20 | 2015-11-18 | 广东欧珀移动通信有限公司 | Sliding control method and device for terminal |
| EP2953018A1 (en) * | 2010-03-02 | 2015-12-09 | Sony Mobile Communications AB | Mobile terminal and input device |
| CN105426538A (en) * | 2015-12-21 | 2016-03-23 | 北京奇虎科技有限公司 | Page switching method and device |
| CN105589650A (en) * | 2014-11-14 | 2016-05-18 | 阿里巴巴集团控股有限公司 | Page navigation method and device |
-
2016
- 2016-12-06 CN CN201611107989.1A patent/CN106775227B/en active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP2953018A1 (en) * | 2010-03-02 | 2015-12-09 | Sony Mobile Communications AB | Mobile terminal and input device |
| JP2015005045A (en) * | 2013-06-19 | 2015-01-08 | コニカミノルタ株式会社 | Electronic display terminal, program for electronic display terminal, recording medium having program for electronic display terminal recorded therein, and display method |
| CN103500057A (en) * | 2013-10-08 | 2014-01-08 | 百度在线网络技术（北京）有限公司 | Mobile terminal and control method and device thereof |
| CN105589650A (en) * | 2014-11-14 | 2016-05-18 | 阿里巴巴集团控股有限公司 | Page navigation method and device |
| CN104932790A (en) * | 2015-06-26 | 2015-09-23 | 联想(北京)有限公司 | Information processing method and electronic equipment |
| CN105068734A (en) * | 2015-08-20 | 2015-11-18 | 广东欧珀移动通信有限公司 | Sliding control method and device for terminal |
| CN105426538A (en) * | 2015-12-21 | 2016-03-23 | 北京奇虎科技有限公司 | Page switching method and device |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109254823A (en) * | 2018-09-21 | 2019-01-22 | 武汉华中时讯科技有限责任公司 | A kind of method, memory and the terminal of the paging view elements of changing multi-stage nesting |
| CN109254823B (en) * | 2018-09-21 | 2022-02-22 | 武汉华中时讯科技有限责任公司 | Method for switching multi-level nested paging view elements, memory and terminal |
| CN109739593A (en) * | 2018-11-21 | 2019-05-10 | 惠州Tcl移动通信有限公司 | Multiple web pages switch browsing method, mobile terminal and computer readable storage medium |
| CN109739593B (en) * | 2018-11-21 | 2022-06-10 | 惠州Tcl移动通信有限公司 | Multi-webpage switching browsing method, mobile terminal and computer readable storage medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106775227B (en) | 2019-08-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR102107887B1 (en) | Method and apparatus for generating a composite image | |
| US11687233B2 (en) | Handwriting processing method, touch display device, computer device and storage medium | |
| CN102937849B (en) | The beautification method of real-time handwriting and electronic equipment | |
| CN103310474B (en) | A kind of implementation method of original handwriting and system | |
| US5889523A (en) | Method and apparatus for dynamically grouping a plurality of graphic objects | |
| US7310780B2 (en) | Methods, systems and computer program products for visually tethering related graphical objects | |
| CN105321147B (en) | The method and device of image procossing | |
| JP4916548B2 (en) | Establish and use dominant lines of images | |
| CN106201172A (en) | The painting canvas display packing of a kind of touch screen terminal and device | |
| CN103777852A (en) | Image obtaining method and device | |
| CN106648509A (en) | Jointed wall signal window display control method | |
| CN106775227A (en) | A kind of method and system of page layout switch | |
| CN104199547A (en) | Man-machine interactive type virtual touch device, system and method | |
| CN110187314A (en) | Radar primary information display methods and system | |
| CN102830800B (en) | Method and system for controlling digital signage by utilizing gesture recognition | |
| CN113448486A (en) | Method and device for realizing pen point of electronic whiteboard, storage medium and electronic whiteboard | |
| CN104199548B (en) | A kind of three-dimensional man-machine interactive operation device, system and method | |
| CN109189314A (en) | Writing bootstrap technique, device, equipment and the medium of handwriting equipment | |
| CN104376038A (en) | Position associated text information visualization method based on label cloud | |
| CN102999930A (en) | Method and device for drawing electronic writing lines | |
| CN113590000B (en) | Handwriting processing method, handwriting processing device and storage medium | |
| CN109299310A (en) | A kind of screen picture takes color and searching method and system | |
| CN107085859B (en) | A kind of color lead painting style lattice method for drafting based on image | |
| CN104199549A (en) | Man-machine interactive type virtual touch device, system and method | |
| CN107154072A (en) | The image processing method and device of monitoring unmanned equipment |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | 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 |