A method and device for adjusting the size of a list element

A technology of element size and element, applied in the computer field, can solve problems such as unevenness, lower user experience, ease of use of IM client, and inability of IM client to adjust the size of list elements, so as to achieve the effect of improving ease of use

Active Publication Date: 2011-12-07
TENCENT TECH (SHENZHEN) CO LTD
4 Cites 17 Cited by

AI-Extracted Technical Summary

Problems solved by technology

[0006] In the prior art, the IM client applied to the touch device cannot adjust the size of the list elements. When the IM client of the non-touch device adjusts the...
the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Method used

The present invention provides a kind of technical solution that uses multi-touch technology to adjust the list element size in the contact list of IM client, according to the user's operating habits, utilizes multi-touch operation in the complicated list control that comprises multiple elements Dynamically adjust the list elements, and ensure that the multi-touch operation does not conflict with the drag operation, scroll operation, and click operation, and will not cause misuse. It is compatible with the existing operations of the touch device and does not affect the existing operations. Ease of use for IM clients. In addition, by adjusting the list elements according to the preset cycle, the avatars in the contact list can be smoothly and steplessly scaled, and while adjusting the size of the avatars, the display layout of each part of the content contained in the list elements can be smoothly adjusted, so that IM customers The user interface of the terminal remains beautiful and practical, which improves the user experience.
[0080] The present invention adjusts list elements through multi-touch events, and ensures that the multi-touch even...
the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Abstract

The present invention provides method and apparatus for adjusting size of a list item displayed on a touchscreen. The method may include obtaining, by a client application, a multi-touch event, adjusting the size of a head portrait control and the size of a contact panel control in the list item according to at least one event parameter in the multi-touch event. The apparatus for adjusting the size of the list item may include: an obtaining module for obtaining a multi-touch event; and an adjusting module for adjusting the size of a head portrait control and the size of a contact panel control in the list item according to at least one event parameter in the multi-touch event obtained by the obtaining module.

Application Domain

Technology Topic

Multi-touchTouchscreen +2

Image

  • A method and device for adjusting the size of a list element
  • A method and device for adjusting the size of a list element
  • A method and device for adjusting the size of a list element

Examples

  • Experimental program(1)

Example Embodiment

[0045] The present invention provides a technical solution for using multi-touch technology to adjust the size of the list elements in the contact list of the IM client. According to the user's operating habits, the multi-touch operation is used to dynamically adjust the list in the complex list control containing multiple elements. Elements, and ensure that the multi-touch operation does not conflict with the drag operation, scroll operation and click operation, will not cause misoperation, is compatible with the existing operations of the touch device, does not affect the existing operations, and improves the IM client. ease of use. In addition, by adjusting the list elements according to the preset cycle, the avatars in the contact list can be smoothly and steplessly scaled, and while adjusting the size of the avatars, the display layout of each part of the content contained in the list elements can be smoothly adjusted, so that IM customers The user interface of the terminal remains beautiful and practical, which improves the user experience.
[0046]The technical solutions of the present invention will be clearly and completely described below in conjunction with the accompanying drawings in the present invention. Obviously, the described embodiments are some of the embodiments of the present invention, but not all of them. Based on the embodiments of the present invention, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the protection scope of the present invention.
[0047] The method for adjusting the size of list elements in the present invention can be applied to touch device clients. The zoom operation corresponding to a multi-touch event can be to use two fingers or a touch pen to touch the screen, and make the two fingers or touch pens move away from each other or Close operations such as Figure 1a and Figure 1b As shown, when the two fingers or the touch pen are close to each other, it is a zoom-out operation; when the two fingers or the touch pen are far away from each other, it is a zoom-in operation. However, in a touch device client, when a finger or a touch pen touches the screen, the client application program will receive mouse events (for example, events such as mouse button press, mouse movement, and mouse button lift) by default. If various operations of the touch device are processed based on mouse events, the zoom operation corresponding to the multi-touch event will be confused with the existing drag operation, scroll operation and click operation, resulting in operation conflicts and misoperations. Therefore, the scaling operation corresponding to the multi-touch event can be isolated from other operations by judging whether the acquired touch event is a multi-touch event. In the Windows system, all events are implemented based on the message mechanism of Windows. Therefore, the acquired touch events can be analyzed at the message level. For multi-touch events, they can be intercepted and analyzed separately instead of being applied to the client. The program sends mouse event messages; for non-multi-touch messages, it is processed by the system default method, that is, to send mouse event messages to the client application.
[0048] like figure 2 As shown, it is a flow chart of the method for adjusting the size of list elements in the present invention, which specifically includes the following steps:
[0049] In step 201, the client acquires touch events.
[0050] Wherein, the touch event may be obtained by the client system, and may be a message pressed by a finger, or a message pressed by a touch pen.
[0051] In step 202, the client terminal determines whether the acquired touch event is a multi-touch event, and if it is a multi-touch event, execute step 204; otherwise, execute step 203.
[0052] Specifically, the client system can acquire the number of touch points corresponding to the touch event. If the number of touch points is one, it is judged that the touch event is not a multi-touch event; if the number of touch points is greater than one, it is judged that the touch event for multi-touch events.
[0053] Step 203, the client system sends a mouse event message to the client application.
[0054] Step 204, the client records the location information of the multi-touch event, and acquires event parameters of the multi-touch event according to the location information.
[0055] Specifically, when the client system determines that the touch event is a multi-touch event, it may obtain the location information recording the multi-touch event according to the preset period T, that is, the message of the movement of the finger or the stylus until the finger or the stylus is lifted. The client system can obtain event parameters of the multi-touch event according to the recorded position information in each cycle.
[0056] Wherein, the multi-point touch event is a two-point touch event, and the event parameters of the multi-point touch event may include a center point and a zoom scale of a zoom operation corresponding to the multi-point touch event. The client system can obtain the initial position information of the two touch points on the screen before moving and the final position information after the movement, and use the midpoint position corresponding to the initial position information as the center point of the zoom operation, and use the two points after the movement and before the movement The ratio of the distances between the touch points acts as the scaling factor for zooming operations.
[0057] like image 3 As shown, it is a schematic diagram of the position information of the multi-touch event corresponding to the zoom operation, where the initial position information is the contact position 1 and the contact position 2 that constitute the initial length L1, and the end position information is the contact position that constitutes the end length L2 3 and contact position 4, then the center point Center of the zoom-in operation is the midpoint position between contact position 1 and contact position 2, and the scaling ratio Scale=L2/L1.
[0058] Step 205, the client system sends a multi-touch event including event parameters to the client application program.
[0059] Step 206, the client acquires the multi-touch event.
[0060] Step 207, the client adjusts the size of the avatar control of the list element according to the event parameters in the multi-touch event.
[0061] Specifically, the client may adjust the size of the avatar control according to the scaling ratio, and determine the adjusted position of the avatar control according to the center point. Since the client application can receive multi-touch events from the client system according to the preset cycle, the client application can dynamically modify the size of the avatar control ImageControl of the list element according to the event parameters of the multi-touch event according to the preset cycle , the specific formula is as follows:
[0062] ImageControl.Height = ImageControl.Height*Scale;
[0063] ImageControl.Width = ImageControl.Width*Scale;
[0064] Among them, ImageControl.Height is the height of the avatar, and ImageControl.Width is the width of the avatar. When the preset period T is small, the Scale value used for adjusting the size of the avatar control each time is also small. Therefore, when the application program is running, the avatar control is scaled steplessly.
[0065] Step 208, the client adjusts the size of the contact surface control of the list element.
[0066] Specifically, in addition to the avatar control ImageControl, Item also contains other elements, such as contact ID, nickname and signature. Therefore, the list element may also include a contact surface control ContactPanel, which is a control for displaying other elements in the list element except the avatar control, and the elements displayed by the ContactPanel may include contact ID, nickname and signature. Among them, elements such as contact ID, nickname and signature are logically sub-elements of ContactPanel, and the arrangement of sub-elements of ContactPanel is stored in a predefined template. According to the different sizes of the avatar control, multiple templates can be used to store different arrangements of the sub-elements of the ContactPanel. like Figure 4a As shown, when the avatar control is displayed with a large avatar, the sub-elements of the ContactPanel are arranged in two rows; when the avatar control is displayed with a small avatar, the sub-elements of the ContactPanel are arranged in one row, as shown in Figure 4b shown.
[0067] Therefore, the list element Item can contain two controls, ImageControl and ContactPanel. Since the size of the list element is determined by the size of the avatar control, when the size of the avatar control changes, the size of each list element will also be adjusted accordingly. The terminal application can adjust the size of the contact surface control according to the adjusted size of the avatar control, and the adjusted height and width of the ContactPanel can be availableHeight and availableWidth respectively.
[0068] Step 209, the client adjusts the layout of the touch surface control according to the adjusted size of the touch surface control.
[0069] Specifically, the client can obtain a predefined template, and according to the size and position of each sub-element of the contact surface control defined by the module, obtain the overall size of the contact surface control displayed through the template; when the overall size is not greater than the adjusted When the size of the contact surface control is adjusted, the client uses the above template to display the contact surface control; when the overall size is larger than the adjusted size of the contact surface control, the client obtains other templates, and obtains when the contact surface control is displayed through the other template until the overall size is not larger than the adjusted size of the contact surface control.
[0070] Among them, the client application needs to rearrange sub-elements such as contact ID, nickname and signature in the ContactPanel. For example, the client application can obtain a predefined template, obtain the required size and position of each sub-element displayed in the template according to the settings of the template, and combine the required size and position of all sub-elements to obtain a ContactPanel that can display The minimum height desiredHeight and minimum width desiredWidth required by the child elements.
[0071] If desiredHeight>availableHeight
[0072] or
[0073] desiredWidth > availableWidth,
[0074] It means that the entire content of the ContactPanel cannot be displayed using this template. You need to try other templates and recalculate desiredHeight and desiredWidth. If desiredHeight and desiredWidth meet the following conditions:
[0075] desiredHeight
[0076] and
[0077] desiredWidth
[0078] Arrange and display all child elements of ContactPanel according to the template.
[0079] In addition, during program design, multiple templates can be defined to ensure smooth switching between different templates, such as Figure 5 and Image 6 As shown, they are schematic diagrams of template layouts for QQ contact avatars in 40x40 and 16x16 cases respectively. In addition, the client application can also define the final template. When the adjusted size of the contact panel control is the preset minimum size, the client can use the template corresponding to the minimum size to display the contact panel control, so that the ContactPanel can be displayed at the minimum size. All child elements are displayed correctly when resized.
[0080] The present invention adjusts list elements through multi-point touch events, and ensures that the multi-point touch events are compatible with existing operations, thereby improving the usability of the IM client. In addition, by adjusting the list elements according to the preset cycle, the avatars in the contact list can be smoothly and steplessly scaled, and while adjusting the size of the avatars, the display layout of each part of the content contained in the list elements can be smoothly adjusted, so that IM customers The user interface of the terminal remains beautiful and practical, which improves the user experience.
[0081] The present invention provides a method and an application scenario for adjusting the size of a list element in the above-mentioned embodiment, and accordingly, the present invention also provides a device for applying the above-mentioned method for adjusting the size of a list element.
[0082] like Figure 7 As shown, it is a schematic structural diagram of a device for adjusting the size of list elements in the present invention, including:
[0083] An acquisition module 710, configured to acquire multi-touch events.
[0084]The adjustment module 720 is configured to adjust the size of the avatar control and the contact surface control of the list element according to the event parameters in the multi-touch event acquired by the acquisition module 710 .
[0085] Wherein, the multi-point touch event may be a two-point touch event, and the event parameters of the multi-point touch event may include a center point and a zoom scale of a zoom operation corresponding to the multi-point touch event.
[0086] The above acquisition module 710 is also used to acquire the initial position information of the two touch points on the screen before moving and the final position information after the movement, and use the midpoint position corresponding to the initial position information as the center point of the zoom operation, and move and The ratio of the distance between the two touch points before the movement is used as the scaling factor for the scaling operation.
[0087] Correspondingly, the adjustment module 720 is specifically configured to adjust the size of the avatar control according to the scaling ratio, and determine the adjusted position of the avatar control according to the center point.
[0088] The adjustment module 720 is further configured to adjust the layout of the touch screen control according to the adjusted size of the touch screen control.
[0089] Wherein, the contact surface control includes multiple sub-elements. The above adjustment module 720 is specifically used to obtain a predefined template, and according to the size and position of each sub-element of the contact surface control defined by the module, obtain the overall size of the contact surface control when displayed through the template; when the overall size is not When it is larger than the adjusted size of the contact surface control, use this template to display the contact surface control; when the overall size is larger than the adjusted size of the contact surface control, obtain other templates, and obtain the whole when the contact surface control is displayed through this other template size until the overall size is no larger than the size of the adjusted contact surface control.
[0090] The adjustment module 720 is further configured to use a template corresponding to the minimum size to display the contact surface control when the adjusted size of the contact surface control is a preset minimum size.
[0091] The invention adjusts list elements through multi-point touch events, and ensures that the multi-point touch events are compatible with existing operation events, thereby improving the usability of the IM client. In addition, by adjusting the list elements according to the preset cycle, the avatars in the contact list can be smoothly and steplessly scaled, and while adjusting the size of the avatars, the display layout of each part of the content contained in the list elements can be smoothly adjusted, so that IM customers The user interface of the terminal remains beautiful and practical, which improves the user experience.
[0092] Through the description of the above embodiments, those skilled in the art can clearly understand that the present invention can be implemented by means of software plus a necessary general-purpose hardware platform, and of course also by hardware, but in many cases the former is a better implementation Way. Based on this understanding, the essence of the technical solution of the present invention or the part that contributes to the prior art can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions to make a A terminal device (which may be a mobile phone, a personal computer, a server, or a network device, etc.) executes the methods described in various embodiments of the present invention.
[0093] The above is only a preferred embodiment of the present invention, it should be pointed out that, for those of ordinary skill in the art, without departing from the principle of the present invention, some improvements and modifications can also be made, and these improvements and modifications can also be made. It should be regarded as the protection scope of the present invention.
[0094] Those skilled in the art can understand that the modules in the device in the embodiment can be distributed in the device in the embodiment according to the description in the embodiment, or can be located in one or more devices different from the embodiment according to corresponding changes. The modules in the above embodiments can be integrated or deployed separately; they can be combined into one module, or further split into multiple sub-modules.
[0095] The serial numbers of the above embodiments of the present invention are for description only, and do not represent the advantages and disadvantages of the embodiments.
[0096] The above disclosures are only a few specific embodiments of the present invention, however, the present invention is not limited thereto, and any changes conceivable by those skilled in the art shall fall within the protection scope of the present invention.
the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

no PUM

Description & Claims & Application Information

We can also present the details of the Description, Claims and Application information to help users get a comprehensive understanding of the technical details of the patent, such as background art, summary of invention, brief description of drawings, description of embodiments, and other original content. On the other hand, users can also determine the specific scope of protection of the technology through the list of claims; as well as understand the changes in the life cycle of the technology with the presentation of the patent timeline. Login to view more.
the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Similar technology patents

Transaction-redo-based multi-copy consistency maintaining method for heterogeneous clusters

InactiveCN103198159AFast consistency maintenanceImprove usabilityHardware monitoringSpecial data processing applicationsDatabase administratorMultiple copy
Owner:NAT COMP NETWORK & INFORMATION SECURITY MANAGEMENT CENT +1

Commissioning a network system

Owner:KONINKLIJKE PHILIPS ELECTRONICS NV

Isometric joystick usability

InactiveUS6975302B1Improve usabilityImproves pointing performance and selectionCathode-ray tube indicatorsInput/output processes for data processingStrain gaugeBallistics
Owner:SYNAPTICS INC

Classification and recommendation of technical efficacy words

Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products