CN106775227B - A kind of method and system of page switching - Google Patents
A kind of method and system of page switching Download PDFInfo
- Publication number
- CN106775227B CN106775227B CN201611107989.1A CN201611107989A CN106775227B CN 106775227 B CN106775227 B CN 106775227B CN 201611107989 A CN201611107989 A CN 201611107989A CN 106775227 B CN106775227 B CN 106775227B
- Authority
- CN
- China
- Prior art keywords
- value
- convex
- 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.)
- Active
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
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present invention relates to page presentation field more particularly to a kind of method and system of page switching.The present invention obtains the first abscissa value by the abscissa value of the central point of acquisition current page indicating label；The abscissa value for obtaining the central point of target pages indicating label, obtains the second abscissa value；Draw the corresponding abscissa value in convex figure highest point 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 for realizing prominent current page, improves the conspicuousness and ease for use of indicator.
Description
Technical field
The present invention relates to page presentation field more particularly to a kind of method and system of page switching.
Background technique
At present in the numerous app of Android, ViewPager control using ubiquitous, however its page indicator
(TabPageIndicator) more dull.Relatively common be open source third party control ViewPagerIndicator and
The TabLayout control in the library Android Support Design issued in Google conference in 2015.Because can reach
To the effect of ViewPagerIndicator, and it is that official issues, 2.2 and the above version can be compatible with, TabLayout's
Using growing day by day.However the two controls are in the form of a single, and a line (rectangle in other words) only can be used by different
Color achievees the purpose that instruction, and indicating effect is unobvious.
Summary of the invention
The technical problems to be solved by the present invention are: providing a kind of method and system of page switching, page instruction is improved
The conspicuousness of device.
In order to solve the above-mentioned technical problem, the technical solution adopted by the present invention are as follows:
The present invention provides a kind of method of page switching, comprising:
S1, obtain current page indicating label central point abscissa value, obtain the first abscissa value；
S2, obtain target pages indicating label central point abscissa value, obtain the second abscissa value；
S3, the corresponding abscissa value in drafting convex figure highest point 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 systems of page switching, comprising:
First obtains module, and the abscissa value of the central point for obtaining current page indicating label obtains the first horizontal seat
Scale value；
Second obtains module, and the abscissa value of the central point for obtaining target pages indicating label obtains the second horizontal seat
Scale value；
Drafting module transforms to institute from first abscissa value for drawing the corresponding abscissa value in convex figure highest point
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 protrusion of the convex figure is directed toward current
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.
Detailed description of the invention
Fig. 1 is a kind of flow diagram of the specific embodiment of the method for page switching of the present invention；
Fig. 2 is a kind of structural block diagram of the specific embodiment of the system of page switching of the present invention；
Fig. 3 is the effect picture of zigzag indicator；
Fig. 4 is the effect picture of waveform indicator；
Label declaration:
1, first module is obtained；2, second module is obtained；3, drafting module.
Specific embodiment
To explain the technical content, the achieved purpose and the effect of the present invention in detail, below in conjunction with embodiment and cooperate attached
Figure is explained.
The most critical design 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 please referred to,
As shown in Figure 1, the present invention provides a kind of method of page switching, comprising:
S1, obtain current page indicating label central point abscissa value, obtain the first abscissa value；
S2, obtain target pages indicating label central point abscissa value, obtain the second abscissa value；
S3, the corresponding abscissa value in drafting convex figure highest point 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 specifically:
The maximum height value of S31, the width value that convex figure is set and convex figure；
S32, according to the width value of the convex figure, the maximum height value of the convex figure, the sliding distance and described
The ordinate value set of convex figure is calculated in second abscissa value, specifically:
According toConvex is calculated
The ordinate value set of figure；Wherein, mGussionHeightOffset be the sliding distance, Hmax be the convex figure most
Big height value, μ are 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 section of the second abscissa value；
S33, convex figure is drawn according to the ordinate value set.
Seen from the above description, it is needed in real time in the calculation formula of the ordinate value set provided by the invention for calculating convex figure
The corresponding abscissa value of ordinate value for the convex figure that the parameter of acquisition only currently calculates, calculating process is simple, can effectively prevent
The only Caton phenomenon that page sliding process camber figure is shown.
Further, further includes:
The number for obtaining the ordinate value of convex figure is set.
Seen from the above description, setting obtains the number difference of ordinate value, and the convex figure drawn out is different.
Further, the S2 specifically:
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 for calculating the central point of the target pages indicating label, obtains the second abscissa value.
Seen from the above description, the indicating label that target pages are obtained according to the glide direction of the page, so that the page
The method of switching supports that sliding screen will show that page switching to the left page of current page, slides to the right screen to the left simultaneously
It will show the right side page of the page switching to current page.
Further, further includes:
The color of convex figure is set for the inverse of the color of page indicator.
Seen from the above description, the color of convex figure can further protrude direction for the inverse of the color of page indicator and work as
The indicating label of the preceding page.
As shown in Fig. 2, the present invention also provides a kind of systems of page switching, comprising:
First obtains module 1, and the abscissa value of the central point for obtaining current page indicating label obtains the first horizontal seat
Scale value；
Second obtains module 2, and the abscissa value of the central point for obtaining target pages indicating label obtains the second horizontal seat
Scale value；
Drafting module 3 is transformed to for drawing the corresponding abscissa value in convex figure highest point 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 the width value of convex figure and the maximum height value of convex figure to be arranged；
First computing unit, for according to the width value of the convex figure, the maximum height value of the convex figure, the cunning
The ordinate value set of convex figure is calculated in dynamic distance and second abscissa value, specifically:
According toConvex is calculated
The ordinate value set of figure；Wherein, mGussionHeightOffset be the sliding distance, Hmax be the convex figure most
Big height value, μ are 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 section of the second abscissa value；
Drawing unit, for drawing convex figure according to the ordinate value set.
Further, further includes:
First setup module, for the number for obtaining the ordinate value of convex figure to be arranged.
Further, the second acquisition module includes:
First acquisition unit, for obtaining the glide direction of the page；
Second acquisition unit, for obtaining target pages instruction according to the glide direction and current page indicating label
Label；
Second computing unit, the abscissa value of the central point for calculating the target pages indicating label, obtains second
Abscissa value.
Further, further includes:
Second setup module, the color for convex figure to be arranged are the inverse of the color of page indicator.
Seen from the above description, by the system of the page switching, it can be achieved that protruding the indicating label of current page
Function improves the conspicuousness and ease for use of indicator.
The embodiment of the present invention are as follows:
TabLayout control in the library Android Support Design is official's publication, using simple, have and refers to
Show the effect of device, but the style sheet one of the control, indicator can only be made by rectangle, indicating effect is unobvious.With
The method and step of indicator of the production with convex figure is as described below based on TabLayout:
S1, obtain current page indicating label central point abscissa value, obtain 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 is calculated 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 for calculating the central point of the target pages indicating label, obtains the second abscissa value；
S3, the corresponding abscissa value in drafting convex figure highest point 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, specifically:
The maximum height value of S31, the width value that convex figure is set and convex figure；
Wherein, the realization that TabLayout class is extracted inside the library Android design support, class name is modified
For RippleTabLayout, and the interface of the maximum height value in the width and convex figure for wherein increasing setting convex figure.
The realization for extracting TabStrip class in RippleTabLayout class, modifies the entitled SlidingTabStrip of its class,
Increase by one for recording the offset mGussionHeightOffset of convex figure abscissa variation, is initialized as 0, value
Range is [0,1].
Relevant class in other libraries all design support in rewriting RippleTabLayout.It is defined using oneself
Said function class replace it, in this way we do not need import the library design support, it will be able to directly use
RippleTabLayout reaches the special efficacy of display convex figure.
S32, setting obtain the number of the ordinate value of convex figure；
S33, according to the width value of the convex figure, the maximum height value of the convex figure, the sliding distance and described
The ordinate value set of convex figure is calculated in second abscissa value, specifically:
According toConvex is calculated
The ordinate value set of figure；Wherein, mGussionHeightOffset be the sliding distance, Hmax be the convex figure most
Big height value, μ are 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 section of the second abscissa value；
S34, convex figure is drawn according to the ordinate value set；
Wherein, Path object is created, the corresponding abscissa value of point of the convex figure of Path object acquisition certain number and vertical
Coordinate value calls painting canvas function, draws each of Path object point.Wherein, the number of the point of Path object camber figure
It is identical that the number of ordinate value of convex figure is obtained with setting in step S32.The number at Path object midpoint is different, draws out
Convex figure it is different, convex figure of the present invention is symmetrical convex.Such as, when the number at Path object midpoint is 3, including it is convex
The coordinate of the coordinate of the highest point of shape figure and two minimum points, the convex figure drawn out is zigzag, and effect picture is as shown in Figure 3.
When the number at Path object midpoint is 20, the convex figure drawn out is waveform, and effect picture is as shown in Figure 4.
The inverse of S4, the color that the color that convex figure is arranged is page indicator.
For example, setting page indicator color be it is light blue, then set inverse peony azury for convex figure,
To prominent convex figure, the conspicuousness of indicator instruction current page label is further increased.
In conclusion a kind of method of page switching provided by the invention, by real-time rendering convex figure, the convex figure
Protrusion be directed toward 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, page sliding process camber figure can be effectively prevent to show
Caton phenomenon.Further, setting obtains the number difference of ordinate value, 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 switching is supported to slide to the left simultaneously
Screen will show left page of the page switching to current page, and sliding screen to the right will show page switching to current page
The right side page.Further, the color of convex figure is that the inverse of the color of page indicator can further protrude direction current page
The indicating label in face.The present invention also provides a kind of system of page switching, it can be achieved that the function of the indicating label of prominent current page
Can, improve the conspicuousness and ease for use of indicator.
The above description is only an embodiment of the present invention, is not intended to limit the scope of the invention, all to utilize this hair
Equivalents made by bright specification and accompanying drawing content are applied directly or indirectly in relevant technical field, similarly include
In scope of patent protection of the invention.
Claims (10)
1. a kind of method of page switching characterized by comprising
S1, obtain current page indicating label central point abscissa value, obtain the first abscissa value；
S2, obtain target pages indicating label central point abscissa value, obtain the second abscissa value；
S3, the process that the corresponding abscissa value in highest point transforms to second abscissa value from first abscissa value is drawn
In convex figure corresponding with the real-time sliding distance of the page.
2. the method for page switching according to claim 1, which is characterized in that the S3 specifically:
The maximum height value of S31, the width value that convex figure is set and convex figure；
S32, according to the width value of the convex figure, the maximum height value of the convex figure, the sliding distance and described second
The ordinate value set of convex figure is calculated in abscissa value, specifically:
According toThe vertical of convex figure is calculated
Set of coordinate values；Wherein, mGussionHeightOffset is the sliding distance, and Hmax is the maximum height of the convex figure
Value, μ are 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 section of abscissa value；
S33, convex figure is drawn according to the ordinate value set.
3. the method for page switching according to claim 2, which is characterized in that further include:
The number for obtaining the ordinate value of convex figure is set.
4. the method for page switching according to claim 1, which is characterized in that the S2 specifically:
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 for calculating the central point of the target pages indicating label, obtains the second abscissa value.
5. the method for page switching according to claim 1, which is characterized in that further include:
The color of convex figure is set for the inverse of the color of page indicator.
6. a kind of system of page switching characterized by comprising
First obtains module, and the abscissa value of the central point for obtaining current page indicating label obtains the first abscissa value；
Second obtains module, and the abscissa value of the central point for obtaining target pages indicating label obtains the second abscissa value；
Drafting module transforms to the described second horizontal seat from first abscissa value for drawing the corresponding abscissa value in highest point
Convex figure corresponding with the real-time sliding distance of the page during scale value.
7. the system of page switching according to claim 6, which is characterized in that the drafting module includes:
Setting unit, for the width value of convex figure and the maximum height value of convex figure to be arranged；
First computing unit, for according to the maximum height value of the width value of the convex figure, the convex figure, the sliding away from
From the ordinate value set that convex figure is calculated with second abscissa value, specifically:
According toThe vertical of convex figure is calculated
Set of coordinate values；Wherein, mGussionHeightOffset is the sliding distance, and Hmax is the maximum height of the convex figure
Value, μ are 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 section of abscissa value；
Drawing unit, for drawing convex figure according to the ordinate value set.
8. the system of page switching according to claim 7, which is characterized in that further include:
First setup module, for the number for obtaining the ordinate value of convex figure to be arranged.
9. the system of page switching according to claim 6, which is characterized in that described second, which obtains module, includes:
First acquisition unit, for obtaining the glide direction of the page；
Second acquisition unit, for obtaining target pages indicating label according to the glide direction and current page 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 switching according to claim 6, which is characterized in that further include:
Second setup module, the color for convex figure to be arranged are 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 CN106775227A (en) | 2017-05-31 |
| CN106775227B true 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) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109254823B (en) * | 2018-09-21 | 2022-02-22 | 武汉华中时讯科技有限责任公司 | Method for switching multi-level nested paging view elements, memory and terminal |
| CN109739593B (en) * | 2018-11-21 | 2022-06-10 | 惠州Tcl移动通信有限公司 | Multi-webpage switching 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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106775227A (en) | 2017-05-31 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| KR102107887B1 (en) | Method and apparatus for generating a composite image | |
| US9916676B2 (en) | 3D model rendering method and apparatus and terminal device | |
| CN106775227B (en) | A kind of method and system of page switching | |
| EP3144899A1 (en) | Apparatus and method for adjusting brightness of image | |
| CN105869579B (en) | Backlight brightness regulation method, device and display terminal | |
| CN105005970A (en) | Augmented reality implementation method and apparatus | |
| CN105988566B (en) | A kind of information processing method and electronic equipment | |
| CN111414114A (en) | Display adjustment method and device, electronic equipment and storage medium | |
| CN109426767A (en) | Informer describes guidance device and its method | |
| JP2009545813A (en) | Establish and use dominant lines of images | |
| CN105956523A (en) | Pen holding posture correction method and device | |
| CN110049306A (en) | A kind of 3 d display device and application method | |
| WO2021218445A1 (en) | Handwriting processing method, handwriting processing apparatus, and storage medium | |
| CN110246204A (en) | Waveform drawing method, apparatus, computer equipment and readable storage medium storing program for executing | |
| Ahn et al. | Real-time adjustment of contrast saliency for improved information visibility in mobile augmented reality | |
| CN103065344A (en) | Drawing method of two dimensional graph | |
| CN110335194A (en) | A kind of face ageing image processing method | |
| CN107133347B (en) | Method and device for displaying visual analysis chart, readable storage medium and terminal | |
| US20170148177A1 (en) | Image processing apparatus, image processing method, and program | |
| JP2020014075A (en) | Image projection system, image projection method, and program | |
| CN109934058A (en) | Face image processing process, device, electronic equipment, storage medium and program | |
| CN208433199U (en) | A kind of device that sensing triggering is interacted with large-size screen monitors | |
| CN110286759A (en) | The adaptive amplification display method of terminal, system and terminal based on eye tracking | |
| CN107479821B (en) | Interface drawing method and device | |
| 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 |