WO2015131787A1 - 一种屏幕适配的方法和装置 - Google Patents

一种屏幕适配的方法和装置 Download PDF

Info

Publication number
WO2015131787A1
WO2015131787A1 PCT/CN2015/073471 CN2015073471W WO2015131787A1 WO 2015131787 A1 WO2015131787 A1 WO 2015131787A1 CN 2015073471 W CN2015073471 W CN 2015073471W WO 2015131787 A1 WO2015131787 A1 WO 2015131787A1
Authority
WO
WIPO (PCT)
Prior art keywords
display
current
module
component
client
Prior art date
Application number
PCT/CN2015/073471
Other languages
English (en)
French (fr)
Inventor
于华章
陆舟
Original Assignee
飞天诚信科技股份有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 飞天诚信科技股份有限公司 filed Critical 飞天诚信科技股份有限公司
Priority to US15/122,647 priority Critical patent/US10089963B2/en
Publication of WO2015131787A1 publication Critical patent/WO2015131787A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/22—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of characters or indicia using display control signals derived from coded signals representing the characters or indicia, e.g. with a character-code memory
    • G09G5/32—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators characterised by the display of characters or indicia using display control signals derived from coded signals representing the characters or indicia, e.g. with a character-code memory with means for controlling the display position
    • 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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1454—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
    • 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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1454—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
    • G06F3/1462—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay with means for detecting differences between the image stored in the host and the images displayed on the remote displays
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/0407—Resolution change, inclusive of the use of different resolutions for different screen areas
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/0464—Positioning
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/0492—Change of orientation of the displayed image, e.g. upside-down, mirrored
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2354/00—Aspects of interface with display user
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2370/00—Aspects of data communication
    • G09G2370/02—Networking aspects
    • G09G2370/022—Centralised management of display operation, e.g. in a server instead of locally
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2370/00—Aspects of data communication
    • G09G2370/10—Use of a protocol of communication by packets in interfaces along the display data pipeline

Definitions

  • the invention relates to a method and a device for adapting a screen, and belongs to the technical field of terminal display.
  • the prior art has at least the following drawbacks: since the screen sizes of different types of mobile devices are usually different, developers still need to make different UIs according to different screen sizes, and perform high-fidelity rendering reset, slicing, encoding, and Testing can make the client adapt to a variety of mobile devices, resulting in a large screen adaptation workload and low screen adaptation efficiency.
  • An object of the present invention is to provide a method and apparatus for screen adaptation, which has a small screen adaptation workload and high screen adaptation efficiency.
  • a method of screen adaptation comprising the steps of:
  • the client obtains a user interface data packet from the server, parses the user interface data packet, and obtains drawing information of each module and drawing information of each component.
  • the modules in the user interface are arranged in a vertical direction, and each of the modules is arranged in a vertical direction.
  • a module contains one or more components;
  • the client determines the screen orientation of the device in which it is located, if the screen orientation is a vertical screen, step A3 is performed; if the screen orientation is a landscape screen, step A4 is performed;
  • the client sets the display width of each module to the screen width of the device, and obtains according to the display width of each module, the drawing information of each module, and the drawing information of each component. Describe the display width, display height, and display coordinates of each component; draw the components according to the display width, display height, and display coordinates of the respective components, and resource files that need to be filled into the respective components, and perform steps A5;
  • the client sets the display width of each module to the screen height of the device, and obtains according to the display width of each module, the drawing information of each module, and the drawing information of each component. Describe the display width, display height, and display coordinates of each component; draw the components according to the display width, display height, and display coordinates of the respective components, and resource files that need to be filled into the respective components, and perform steps A5;
  • the client monitors the screen orientation of the device, and returns to step A2 when the screen orientation of the device is monitored.
  • the client obtains a user interface data packet from the server, parses the user interface data packet, and obtains drawing information of the global module and drawing information of each component, where the global module includes all components in the user interface;
  • the client determines the screen orientation of the device in which it is located, if the screen orientation is a vertical screen, step E3 is performed; if the screen orientation is a landscape screen, step E4 is performed;
  • the client sets the display width of the global module to the screen width of the device, and obtains the display height of the global module according to the display width of the global module and the drawing information of the global module, and Perform step E5;
  • the client sets the display height of the global module to the screen width of the device, and obtains the display width of the global module according to the display height of the global module and the drawing information of the global module, and Perform step E5;
  • the client acquires a display width, a display height, and a display coordinate of each component according to a display width of the global module, a display height of the global module, and drawing information of each component; Display width, display height and display coordinates of the component, and resource files that need to be filled into the respective components, draw the respective components, and perform step E6;
  • the client monitors a screen orientation of the device, and returns to step E2 when monitoring a screen orientation of the device changes.
  • the client obtains a user interface data packet from the server, parses the user interface data packet, and obtains drawing information of each module and drawing information of each component;
  • the client obtains and saves the vertical screen display information and the horizontal screen display information of each component according to the screen size of the device in which the device is located, the drawing information of each module, and the drawing information of the respective components;
  • the client determines the screen orientation of the device where the device is located, and if the screen orientation is a vertical screen, step H4 is performed; If the screen orientation is a horizontal screen, step H5 is performed;
  • the client draws the respective components according to the vertical screen display information of the respective components, and performs step H6;
  • the client draws the respective components according to the horizontal screen display information of the respective components, and performs step H6;
  • step H6 the client monitors the screen orientation of the device, and when the screen orientation of the device is monitored, step H7 is performed;
  • the client determines the screen orientation of the device in which it is located, if the screen orientation is a vertical screen, step H8 is performed; if the screen orientation is a landscape screen, step H9 is performed;
  • the client draws the respective components according to the vertical screen display information of the respective components, and performs step H6;
  • the client draws the components according to the horizontal screen display information of the respective components, and performs step H6.
  • the beneficial effects achieved by the present invention include at least: drawing a UI according to the screen size and screen orientation of the device, drawing information of each component in the UI, and being able to perform screen adaptation and horizontal and vertical screen switching on devices having different screen sizes, thereby improving the screen.
  • the fluency of the adaptation and the horizontal and vertical screen switching reduces the workload of the screen adaptation and improves the screen adaptation efficiency.
  • Embodiment 1 is a flow chart of a method for screen adaptation according to Embodiment 1 of the present invention
  • FIG. 2 is a flow chart of another method for screen adaptation according to Embodiment 2 of the present invention.
  • FIG. 3 is a flowchart of a client displaying and saving vertical screen display information of each component in a UI according to an embodiment of the present invention
  • FIG. 4 is a flowchart of acquiring, by a client, horizontal screen display information of each component in a UI according to an embodiment of the present invention
  • FIG. 5 is a flow chart of still another method for screen adaptation according to Embodiment 3 of the present invention.
  • the present invention is applied to a system including a server end and a client.
  • the client is installed on the device for drawing a UI on the device.
  • the UI can be divided into multiple modules, and each module is arranged in a vertical direction, and each module can be Contains one or more components.
  • the server side generates and saves a UI data package, which contains drawing information of each module in the UI, and drawing information of each component in the module.
  • the client acquires the UI data packet, parses the UI data packet, obtains the drawing information of each module in the UI, and the drawing information of each component, and draws the UI according to the above drawing information.
  • the drawing information of the module may be the aspect ratio or the aspect ratio of the module, and the drawing information of the component includes the relative coordinates of the component, the relative width of the component, and the relative height of the component, and the relative coordinates of the component include the relative abscissa and the component of the component. Relative ordinate.
  • the format of the drawing information of the component is (relative abscissa of the component, relative ordinate of the component, relative width of the component, relative height of the component), and the content in the above drawing information can be expressed in the form of a percentage.
  • the aspect ratio of the module is the ratio of the width of the module in the UI rendering to the height of the module in the UI rendering.
  • the aspect ratio of the module is the height of the module in the UI rendering.
  • the relative abscissa of the component is the ratio of the horizontal coordinate of the component in the module to the width of the module in the UI rendering.
  • the relative ordinate of the component is the ordinate of the component in the module and the UI rendering of the module.
  • the ratio of the height in the component, the relative width of the component is the ratio of the width of the component in the UI rendering to the width of the component in the UI rendering.
  • the relative height of the component is the height of the component in the UI rendering.
  • the width of each module in the UI rendering is the total width of the UI rendering
  • the horizontal coordinate of the component in the module is the coordinate origin of the upper left corner of the module, the horizontal coordinate of the upper left corner of the component
  • the ordinate in the module is the coordinate of the upper left corner of the module, and the ordinate of the upper left corner of the component.
  • a flow chart of a method for screen adaptation according to the present invention includes the following steps:
  • Step 101 The client starts, obtains a UI data packet from the server, parses the UI data packet, and obtains drawing information of each module in the UI and drawing information of each component.
  • the UI is divided into module 1, module 2, and module 3, wherein module 1 includes component 1 and component 2, module 2 includes component 3, and module 3 includes component 4, component 5, and component 6, and client pair
  • the UI data packet is parsed, and the drawing information (aspect ratio) of module 1, module 2, and module 3 is 40%, 30%, and 30%, respectively, and the drawing information of component 1 (20%, 10%, 70%, 30%), drawing information of component 2 (20%, 50%, 70%, 40%), drawing information of component 3 (20%, 10%, 70%, 80%), drawing information of component 4 (10%) , 10%, 40%, 90%), drawing information of component 5 (60%, 10%, 30%, 30%) and drawing information of component 6 (60%, 60%, 30%, 40%).
  • Step 102 The client acquires attribute information of the device.
  • the attribute information of the device may include information such as type information of the device, screen size, screen orientation, and screen resolution, and the screen size includes a screen width and a screen height.
  • the client may call the UI_USER_INTERFACE_IDIOM function to obtain the type information of the device; the value of the size attribute in [UIScreen mainScreen] bounds is taken as the screen size of the device; in order to obtain the screen orientation of the device, the UIInterfaceOrientationIsPortrait function is called. ; Use the value of the size attribute in [UIScreen mainScreen] currentMode as the screen resolution of the device.
  • the device type information is "iPhone4"
  • the screen size is 251pt*141pt
  • the screen orientation is landscape
  • the screen resolution is 1136px*640px.
  • Step 103 The client determines whether the device is a preset type device. If yes, step 104 is performed; if not, step 121 is performed.
  • the client may determine, according to the type information of the device, whether the device is a preset type device, where the preset type device may be a mobile phone.
  • the client can determine that the device is a mobile phone.
  • Step 104 The client selects a module located at the top of the UI as the current module, sets the display width of the current module to the screen width of the device, and sets the display coordinate of the current module to the upper left corner of the device screen.
  • the client selects the module 1 located at the top of the UI as the current module, sets the display width of the current module to 141pt, and displays the display coordinates of the current module. Set to (0,0).
  • Step 105 The client acquires the display height of the current module according to the drawing information and the display width of the current module.
  • the client may obtain a result obtained by dividing the display width of the current module by the aspect ratio of the current module, and using the result as the display height of the current module; the drawing information of the current module.
  • the client can obtain the result of multiplying the display width of the current module by the aspect ratio of the current module, and use the result as the display height of the current module.
  • the drawing information of the current module is an aspect ratio
  • the aspect ratio is 40%
  • the display width of the current module is 141 pt
  • Step 106 The client selects an unpainted component from the current module as the current component, and obtains a display width, a display height, and a display coordinate of the current component according to the display width of the current module, the display height, and the drawing information of the current component.
  • the display coordinate of the current component is the coordinate origin of the current module, and the coordinates of the upper left corner of the current component, including the display vertical coordinate of the current component and the display horizontal coordinate.
  • the client can obtain the product of the display width of the current module and the relative width of the current component, and use the product as the display width of the current component; obtain the product of the display height of the current module and the relative height of the current component, and use the product as the product.
  • the display height of the current component obtain the product of the display width of the current module and the relative abscissa of the current component, and use the product as the display abscissa of the current component; obtain the product of the display height of the current module and the relative ordinate of the current component, This product is used as the display ordinate of the current component.
  • the client selects component 1 in the current module as the current component.
  • the current module has a display width of 141 pt, a display height of 352.5 pt, a display coordinate of (0, 0), and the current component drawing information is (20%, 10%).
  • step 107 the client determines whether it is necessary to fill the current component with a picture. If yes, step 109 is performed; otherwise, step 108 is performed.
  • the client may determine whether the content of the current component includes picture information, and if so, determine that the current component needs to be filled with the picture; otherwise, it is determined that the current component does not need to be filled with the picture.
  • the name of the current component is Label
  • the client determines that the content of the current component contains the image information "demo.png”, and determines that it needs to The current component is filled with a picture with the name demo and the format png.
  • Step 108 The client obtains the resource file that needs to be filled into the current component according to the content of the current component, and draws the current component according to the obtained resource file and the display width, display height, and display coordinates of the current component, and performs step 118.
  • the client may use the upper left corner of the current module as the coordinate origin, locate the current component according to the display width, display height, and display coordinates of the current component, and fill the obtained resource file into the current component, for the current The component is displayed to enable drawing of the current component.
  • the resource file can be a file such as a video or a text.
  • Step 109 The client determines whether the screen density of the device is greater than a preset density value. If yes, step 110 is performed; otherwise, step 114 is performed.
  • the client can directly obtain the screen density of the device, and determine whether the screen density of the device is greater than a preset density value;
  • To obtain the screen resolution and screen size of the device obtain the screen density of the device according to the screen resolution and screen size of the device, and determine whether the screen density of the device is greater than the preset density value.
  • the client can calculate the screen density PPI of the device according to the following formula:
  • dp is the resolution of the screen diagonal of the device
  • wp is the horizontal resolution of the screen of the device
  • hp is the vertical resolution of the screen of the device
  • di is the length of the diagonal of the screen of the device.
  • the client calculates the screen density of the device to 326ppi according to the screen resolution and screen size of the device, and Make sure the screen density of the device is greater than the preset density value.
  • Step 110 The client acquires a corresponding high resolution picture according to the content of the current component.
  • the client may obtain a high-resolution image corresponding to the image information from the locally stored material package according to the picture information included in the content of the current component, or obtain a high resolution corresponding to the image information through the network asynchronously.
  • the rate image can also dynamically generate a high resolution image corresponding to the image information.
  • a high-resolution picture and a low-resolution picture corresponding to the same picture information may be stored in the locally stored material package.
  • the content of the current component includes the picture information "demo.png”
  • the locally stored material package contains a high-resolution image "demo@2x.png” corresponding to "demo.png” and a low-resolution picture “demo.” Png”
  • the client gets the high resolution image "demo@2x.png” from the locally stored material package.
  • step 111 the client determines whether it needs to fill the current component with other resource files except the picture. If yes, step 113 is performed; otherwise, step 112 is performed.
  • the client may determine whether the content of the current component includes information other than the image information, and if yes, determine that the resource component other than the image needs to be filled into the current component; otherwise, it is determined not to You need to populate the current component with other resource files than the image.
  • Step 112 The client draws the current component according to the obtained high resolution picture, the display width of the current component, the display height, and the display coordinates, and performs step 118.
  • the client may use the upper left corner of the current module as a coordinate origin, locate the current component according to the display width, display height, and display coordinates of the current component, and fill the obtained high-resolution image into the current component. Display the current component to achieve the drawing of the current component.
  • the display coordinates of the current component are (28.2, 35.25), the display width is 98.7pt, and the display height is 105.75pt.
  • the client obtains the high-resolution image "demo@2x.png" that needs to be filled into the current component.
  • a component of size (98.7, 105.75) is generated, and a high-resolution image "demo@2x.png" is filled into the component.
  • Step 113 The client obtains other resource files other than the image according to the content of the current component, according to the display width, display height, and display coordinates of the current component, and the acquired high-resolution image and other resources except the image. File, draw the current component, and go to step 118.
  • the client can use the upper left corner of the current module as the coordinate origin, locate the current component according to the display width, display height, and display coordinates of the current component, and fill the acquired high-resolution image and other resource files to In the current component, the current component is displayed to achieve the drawing of the current component.
  • Step 114 The client acquires a corresponding low resolution picture according to the content of the current component.
  • the client may obtain a low-resolution image corresponding to the image information from the locally stored material package according to the picture information included in the content of the current component, or obtain a low resolution corresponding to the image information through the network asynchronously.
  • the rate picture can also dynamically generate a low resolution picture corresponding to the picture information.
  • a high-resolution picture and a low-resolution picture corresponding to the same picture information may be stored in the locally stored material package.
  • the content of the current component includes the picture information "demo.png”, and the locally stored material package contains a high-resolution image "demo@2x.png” corresponding to "demo.png” and a low-resolution picture “demo.” Png", the client gets the low resolution image "demo.png” from the locally stored material package.
  • step 115 the client determines whether it needs to fill the current component with other resource files except the picture. If yes, step 117 is performed; otherwise, step 116 is performed.
  • Step 116 The client draws the current component according to the obtained low resolution image, the display width of the current component, the display height, and the display coordinates, and performs step 118.
  • the client can use the upper left corner of the current module as the coordinate origin, locate the current component according to the display width, display height, and display coordinates of the current component, and fill the obtained low-resolution image into the current component. Display the current component, Thereby achieving the drawing of the current component.
  • Step 117 The client obtains other resource files other than the image according to the content of the current component, according to the display width, display height, and display coordinates of the current component, and the acquired low-resolution image and other resources except the image. File, draw the current component, and go to step 118.
  • the client can use the upper left corner of the current module as the coordinate origin, locate the current component according to the display width, display height, and display coordinates of the current component, and fill the acquired low resolution image and other resource files to In the current component, the current component is displayed to achieve the drawing of the current component.
  • step 118 the client determines whether the current module contains components that are not drawn, and if yes, returns to step 106; otherwise, step 119 is performed.
  • step 119 the client determines whether the UI contains an unprocessed module. If yes, step 120 is performed; otherwise, step 139 is performed.
  • Step 120 The client obtains an operation result obtained by adding the display vertical coordinate of the current module to the display height of the current module, and selects a module in the UI that is adjacent to the current module and located below the current module as the updated current module, and is updated.
  • the display ordinate of the current module is set to the above operation result, the display horizontal coordinate of the updated current module is set to zero, the display width of the updated current module is set to the screen width of the device, and the process returns to step 105.
  • the client obtains the display ordinate and display of the current module.
  • step 121 the client determines the screen orientation of the device. If the screen orientation is a vertical screen, the process returns to step 104. If the screen orientation is a landscape screen, step 122 is performed.
  • Step 122 The client selects a module located at the top of the UI as the current module, sets the display width of the current module to the screen height of the device, and sets the display coordinate of the current module to the upper left corner of the device screen.
  • the client selects the module 1 located at the top of the UI as the current module, sets the display width of the current module to 251pt, and displays the display coordinates of the current module. Set to (0,0).
  • Step 123 The client acquires the display height of the current module according to the drawing information and the display width of the current module.
  • Step 124 The client selects an unpainted component from the current module as the current component, and obtains a display width, a display height, and a display coordinate of the current component according to the display width of the current module, the display height, and the drawing information of the current component.
  • step 125 the client determines whether it is necessary to fill the current component with a picture. If yes, step 127 is performed; otherwise, step 126 is performed.
  • Step 126 The client obtains the resource file that needs to be filled into the current component according to the content of the current component, and draws the current component according to the obtained resource file and the display width, display height, and display coordinates of the current component, and performs step 136.
  • Step 127 The client determines whether the screen density of the device is greater than a preset density value. If yes, step 128 is performed; otherwise, step 132 is performed.
  • step 1208 the client obtains a corresponding high resolution picture according to the content of the current component.
  • step 129 the client determines whether it needs to fill the current component with other resource files except the picture. If yes, step 131 is performed; otherwise, step 130 is performed.
  • step 130 the client will draw the current component according to the acquired high resolution picture, the display width of the current component, the display height, and the display coordinates, and step 136 is performed.
  • Step 131 The client obtains other resource files other than the image according to the content of the current component, according to the display width, display height, and display coordinates of the current component, and the obtained high-resolution image and other resources except the image. File, draw the current component, and go to step 136.
  • Step 132 The client acquires a corresponding low resolution picture according to the content of the current component.
  • step 133 the client determines whether it needs to fill the current component with other resource files except the picture. If yes, step 135 is performed; otherwise, step 134 is performed.
  • step 134 the client will draw the current component according to the obtained low resolution picture, the display width of the current component, the display height, and the display coordinates, and step 136 is performed.
  • Step 135 The client obtains other resource files other than the image according to the content of the current component, according to the display width, display height, and display coordinates of the current component, and the acquired low-resolution image and other resources except the image. File, draw the current component, and go to step 136.
  • Step 136 the client determines whether the current module contains components that are not drawn, and if so, returns to step 124; otherwise, step 137 is performed.
  • step 137 the client determines whether the UI contains unprocessed modules. If yes, step 138 is performed; otherwise, step 139 is performed.
  • Step 138 The client obtains an operation result obtained by adding the display vertical coordinate of the current module to the display height of the current module, and selects a module in the UI that is adjacent to the current module and located below the current module as the updated current module, and is updated.
  • the display ordinate of the current module is set to the above operation result, the display horizontal coordinate of the updated current module is set to zero, the display width of the updated current module is set to the screen height of the device, and the process returns to step 123.
  • step 139 the client monitors the screen orientation of the device.
  • step 140 the client determines whether the screen orientation of the device changes. If yes, returns to step 121; otherwise, returns to step 139.
  • the client in Embodiment 1 of the present invention draws a UI according to the screen size of the device, the screen orientation, and the drawing information of each component in the UI, and can perform screen adaptation and horizontal and vertical screen switching on devices having different screen sizes, thereby improving the screen.
  • the smoothness of the matching and horizontal and vertical screen switching reduces the workload of the screen adaptation and improves the screen adaptation efficiency.
  • the client may also acquire and save the vertical screen display information and the horizontal screen display information of each component in the background, select corresponding display information according to the screen orientation of the device, and draw according to the selected display information.
  • the various components in the UI may also acquire and save the vertical screen display information and the horizontal screen display information of each component in the background, select corresponding display information according to the screen orientation of the device, and draw according to the selected display information.
  • a flow chart of another method for screen adaptation according to the present invention includes the following steps:
  • Step 201 The client starts, acquires a UI data packet from the server, parses the UI data packet, and obtains drawing information of each module in the UI and drawing information of each component.
  • the drawing information of the module may be the aspect ratio or the aspect ratio of the module, and the drawing information of the component includes the relative coordinates of the component, the relative width of the component, and the relative height of the component, and the relative coordinates of the component include the relative abscissa and the component of the component. Relative ordinate.
  • step 202 the client acquires the screen size and screen orientation of the device.
  • the screen size includes the screen width and the screen height.
  • Step 203 The client acquires and saves the vertical screen display coordinates and the horizontal screen display coordinates of each module according to the screen size of the device, the drawing information of each module in the UI, and the drawing information of each component, and the vertical screen display information of each component. And the horizontal screen displays information.
  • the vertical screen display information of the component includes the vertical screen display coordinates of the component, the vertical screen display width of the component, and the vertical screen display height of the component, and the vertical screen display coordinates of the component include the vertical screen display horizontal coordinate of the component and the vertical screen display of the component.
  • the ordinate; the horizontal display information of the component includes the horizontal display coordinates of the component, the horizontal display width of the component, and the horizontal display height of the component.
  • the horizontal display coordinates of the component include the horizontal display of the component, the horizontal coordinate, and the horizontal screen of the component. Display the ordinate.
  • Step 204 The client determines the screen orientation of the device. If the screen orientation is a vertical screen, step 205 is performed. If the screen orientation is a landscape screen, step 206 is performed.
  • Step 205 The client draws the UI according to the vertical screen display coordinates of each module and the vertical screen display information of each component, and performs step 207.
  • the client may respectively use the upper left corner of the module to which each component belongs as the coordinate origin, and respectively locate each component according to the vertical screen display width, the vertical screen display height, and the vertical screen display coordinates of each component, and the corresponding resources are respectively allocated.
  • the file is populated into each component, and each component is displayed to realize the drawing of the UI.
  • Step 206 The client draws the UI according to the horizontal screen display coordinates of each module and the horizontal screen display information of each component, and performs step 207.
  • the client may respectively use the upper left corner of the module to which each component belongs as the coordinate origin, and respectively locate each component according to the horizontal display width, the horizontal display height, and the horizontal display coordinate of each component, and the corresponding resources are respectively allocated.
  • the file is populated into each component, and each component is displayed to realize the drawing of the UI.
  • Step 207 The client monitors the screen orientation of the device and the component attribute information of each component.
  • step 208 is performed; when the screen orientation of the device changes, step 209 is performed.
  • Step 208 the client saves the changed component attribute information, and returns to step 207.
  • the client monitors that the content attribute of the input box component changes, and saves the content attribute "123".
  • step 209 the client determines the screen orientation of the device. If the screen orientation is a vertical screen, step 210 is performed. If the screen orientation is a landscape screen, step 213 is performed.
  • Step 210 The client draws the UI according to the vertical screen display coordinates of each module and the vertical screen display information of each component.
  • step 211 the client determines whether the component attribute information is saved by itself. If yes, step 212 is performed; otherwise, the process returns to step 207.
  • Step 212 The client modifies the attributes of the corresponding component according to the component attribute information saved by itself, and returns to step 207.
  • the client modifies the content attribute of the corresponding input box component to "123".
  • step 213 the client draws the UI according to the horizontal screen display coordinates of each module and the horizontal screen display information of each component, and returns to 211.
  • the user interface may include a plurality of modules, and each module in the user interface is arranged in a vertical direction, each module includes one or more components, and the vertical screen display information of each component includes a vertical screen display of each component. Width, vertical display height and vertical display coordinates, the horizontal display information of each component includes the horizontal display width, horizontal display height and horizontal display coordinates of each component.
  • the operation of the client to acquire and save the vertical screen display information of each component in the UI may be refined into a flowchart as shown in FIG. 3, including the following steps:
  • Step 301 The client selects a module located at the top of the UI as the current module, sets the vertical screen display width of the current module to the screen width of the device, sets the vertical screen display coordinate of the current module to the upper left corner of the device screen, and saves the current module.
  • the vertical screen displays the coordinates.
  • Step 302 The client obtains the vertical display height of the current module according to the drawing information of the current module and the vertical display width.
  • the client may obtain a result obtained by dividing the vertical display width of the current module by the aspect ratio of the current module, and using the result as the vertical display height of the current module;
  • the client can obtain the result of the vertical display width of the current module multiplied by the aspect ratio of the current module, and the result is used as the vertical display height of the current module.
  • Step 303 The client obtains and saves the vertical screen display width and the vertical screen display height of each component in the current module according to the vertical screen display width of the current module, the vertical screen display height, and the drawing information of each component in the current module.
  • the vertical screen displays the coordinates.
  • the client may separately obtain the product of the vertical screen display width of the current module and the relative width of each component in the current module, and respectively obtain the obtained product as the vertical screen display width of each component; respectively acquire the vertical screen of the current module.
  • Display the product of the height and the relative height of each component in the current module and take the obtained product as the vertical display height of each component in the current module; respectively obtain the vertical display width of the current module and each component in the current module.
  • the product of the relative abscissa the acquired product is displayed as the horizontal coordinate of each component as the vertical axis; respectively, the product of the vertical display height of the current module and the relative ordinate of each component in the current module is obtained, which will be obtained.
  • the product displays the ordinate as the vertical screen of each component.
  • Step 304 The client determines whether the UI includes an unprocessed module. If yes, step 305 is performed; otherwise, it is determined that the vertical screen display information is obtained.
  • Step 305 The client obtains an operation result obtained by adding a vertical display vertical coordinate of the current module and a vertical display height of the current module, and selects a module in the UI adjacent to the current module and located below the current module as the updated current module.
  • the vertical screen display vertical coordinate of the updated current module is set to the above operation result, the vertical screen display horizontal coordinate of the updated current module is set to zero, and the updated vertical display width of the current module is set to the device The screen width is returned to step 302.
  • the operation of the client to acquire and save the horizontal display information of each component in the UI can be refined into a flowchart as shown in FIG. 4, including the following steps:
  • Step 401 The client selects a module located at the top of the UI as the current module, sets the horizontal display width of the current module to the screen height of the device, and sets the horizontal screen display coordinate of the current module to the upper left corner of the device screen.
  • Step 402 The client acquires the horizontal display height of the current module according to the drawing information of the current module and the horizontal display width.
  • the client may obtain the result of dividing the horizontal display width of the current module by the aspect ratio of the current module, and using the result as the horizontal display height of the current module;
  • the client can obtain the result of the horizontal display width of the current module multiplied by the aspect ratio of the current module, and the result is used as the horizontal display height of the current module.
  • Step 403 The client acquires and saves the horizontal display width and the horizontal display height of each component in the current module according to the horizontal display width of the current module, the horizontal display height, and the drawing information of each component in the current module.
  • the horizontal screen displays the coordinates.
  • the client can respectively obtain the product of the horizontal display width of the current module and the relative width of each component in the current module, and respectively obtain the obtained product as the horizontal display width of each component; respectively acquire the horizontal screen of the current module.
  • the product of the display height and the relative height of each component in the current module respectively, the obtained product as the horizontal display height of each component in the current module; respectively obtain the horizontal display width of the current module and each component in the current module.
  • the product of the relative abscissa the acquired product is used as the horizontal screen of each component to display the abscissa; respectively, the product of the horizontal display height of the current module and the relative ordinate of each component in the current module is obtained, which will be obtained.
  • the product displays the ordinate as a horizontal screen of each component.
  • Step 404 The client determines whether the UI includes an unprocessed module. If yes, step 405 is performed; otherwise, it is determined that the horizontal display information is obtained.
  • Step 405 The client obtains an operation result obtained by adding a horizontal display vertical coordinate of the current module and a horizontal display height of the current module, and selects a module in the UI adjacent to the current module and located below the current module as the updated current module.
  • the horizontal coordinate display ordinate of the updated current module is set to the above operation result, the horizontal axis display horizontal coordinate of the updated current module is set to zero, and the updated horizontal display width of the current module is set to the device
  • the screen height is returned to step 402.
  • the client in the embodiment of the present invention acquires and saves the vertical screen display information and the horizontal screen display information of each component according to the screen size of the device and the drawing information of each component in the UI, and displays the information by using the vertical screen according to the screen orientation of the device. Or horizontally display information to draw each
  • the components can perform screen adaptation and horizontal and vertical screen switching on devices with different screen sizes, improve the smoothness of screen adaptation and horizontal and vertical screen switching, reduce the workload of screen adaptation, and improve the screen adaptation efficiency.
  • the UI may also include only one global module, which includes all components in the UI.
  • the UI packet generated and saved by the server includes the drawing information of the above global module and the drawing information of each component in the global module.
  • the drawing information of the global module may be the aspect ratio or the aspect ratio of the global module, and the drawing information of the component includes the relative coordinates of the component, the relative width of the component, and the relative height of the component, and the relative coordinates of the component include the relative abscissa of the component. And the relative ordinate of the component.
  • the aspect ratio of the global module is the ratio of the width of the global module in the UI rendering to the height of the global module in the UI rendering.
  • the aspect ratio of the global module is the UI rendering of the global module.
  • the relative abscissa of the component is the ratio of the abscissa of the component in the global module to the width of the global module in the UI rendering.
  • the relative ordinate of the component is the ordinate of the component in the global module and the global module in the UI
  • the relative width of the component is the ratio of the width of the component in the UI rendering to the width of the global module in the UI rendering.
  • the relative height of the component is the height of the component in the UI rendering.
  • the width of the global module in the UI rendering is the total width of the UI rendering
  • the height of the global module in the UI rendering is the total height of the UI rendering
  • the horizontal coordinate of the component in the global module is the upper left of the global module.
  • the angle is the coordinate origin, the abscissa of the upper left corner of the component
  • the ordinate of the component in the global module is the coordinate origin of the global module's upper left corner
  • the ordinate of the upper left corner of the component is the coordinate origin of the global module's upper left corner.
  • the embodiment of the present invention further provides a method for screen adaptation, as shown in FIG. 5, including the following steps:
  • Step 501 The client starts, acquires a UI data packet from the server, parses the UI data packet, and obtains drawing information of the global module in the UI and drawing information of each component.
  • step 502 the client sets the center point of the global module to be the same as the center point of the interface view, and sets the background of the interface view to black.
  • the client can set the center point of the global module to be the same as the center point of the interface view by setting the center attribute of the global module to be the same as the center attribute of the interface view; by setting the Background property of the interface view to By default, the background of the interface view is set to black, and the above preset value can be "Black Color”.
  • Step 503 The client acquires attribute information of the device.
  • the attribute information of the device may include information such as type information of the device, screen size, screen orientation, and screen resolution, and the screen size includes a screen width and a screen height.
  • step 504 the client determines the screen orientation of the device. If the screen orientation is a vertical screen, step 505 is performed. If the screen orientation is a landscape screen, step 509 is performed.
  • Step 505 The client determines the aspect ratio of the global module according to the drawing information of the global module. If the aspect ratio of the global module is smaller than the aspect ratio of the device, step 506 is performed; if the aspect ratio of the global module is equal to Step 507 is performed if the aspect ratio of the device is greater than the screen aspect ratio of the device.
  • Step 506 The client sets the display height of the global module to the screen height of the device, obtains the display width of the global module according to the display height and the drawing information of the global module, and performs step 513.
  • step 507 the client sets the display height of the global module to the screen height of the device, sets the display width of the global module to the screen width of the device, and performs step 513.
  • Step 508 The client sets the display width of the global module to the screen width of the device, obtains the display height of the global module according to the display width and the drawing information of the global module, and performs step 513.
  • Step 509 The client determines the aspect ratio of the global module according to the drawing information of the global module. If the aspect ratio of the global module is smaller than the aspect ratio of the device, step 510 is performed; if the aspect ratio of the global module is equal to Step 511 is performed if the aspect ratio of the device is greater than the aspect ratio of the device, and step 512 is performed.
  • step 510 the client sets the display height of the global module to the screen width of the device, obtains the display width of the global module according to the display height and the drawing information of the global module, and executes step 513.
  • step 511 the client sets the display height of the global module to the screen width of the device, sets the display width of the global module to the screen height of the device, and performs step 513.
  • step 512 the client sets the display width of the global module to the screen height of the device, and obtains the display height of the global module according to the display width and the drawing information of the global module, and executes step 513.
  • Step 513 The client selects an unpainted component from the global module as the current component, and obtains a display width, a display height, and a display coordinate of the current component according to the display width of the global module, the display height, and the drawing information of the current component.
  • step 514 the client determines whether it is necessary to fill the current component with a picture. If yes, step 516 is performed; otherwise, step 515 is performed.
  • Step 515 The client obtains a resource file that needs to be filled into the current component according to the content of the current component, according to the obtained resource.
  • the source file and the display width, display height, and display coordinates of the current component are drawn, and the current component is drawn, and step 525 is performed.
  • step 516 the client determines whether the screen density of the device is greater than a preset density value. If yes, step 517 is performed; otherwise, step 521 is performed.
  • step 517 the client obtains a corresponding high resolution picture according to the content of the current component.
  • step 518 the client determines whether it needs to fill the current component with other resource files except the picture. If yes, step 520 is performed; otherwise, step 519 is performed.
  • step 519 the client will draw the current component according to the acquired high resolution picture, the display width of the current component, the display height, and the display coordinates, and step 525 is performed.
  • Step 520 The client acquires other resource files other than the image according to the content of the current component, according to the display width, display height, and display coordinates of the current component, and the obtained high-resolution image and other resources except the image. File, draw the current component, and perform step 525.
  • Step 521 The client acquires a corresponding low resolution picture according to the content of the current component.
  • step 522 the client determines whether it needs to fill the current component with other resource files except the picture. If yes, step 524 is performed; otherwise, step 523 is performed.
  • step 523 the client will draw the current component according to the acquired low resolution picture, the display width of the current component, the display height, and the display coordinates, and step 525 is performed.
  • Step 524 The client obtains other resource files other than the image according to the content of the current component, according to the display width, display height, and display coordinates of the current component, and the acquired low-resolution image and other resources except the image. File, draw the current component, and perform step 525.
  • step 525 the client determines whether the global module contains components that are not drawn, and if so, returns to step 513; otherwise, step 526 is performed.
  • step 526 the client monitors the screen orientation of the device.
  • step 527 the client determines whether the screen orientation of the device changes, and if yes, returns to step 504; otherwise, returns to step 526.
  • the client in Embodiment 3 draws a UI according to the screen size and screen orientation of the device, the drawing information of the modules and components in the UI, and can perform screen adaptation and horizontal and vertical screen switching on devices having different screen sizes, and according to the screen of the device.
  • the density shows the picture of the corresponding resolution, which improves the smoothness of screen adaptation and horizontal and vertical screen switching, reduces the workload of screen adaptation, and improves the screen adaptation efficiency and user experience.
  • the steps in the methods described in connection with the various embodiments disclosed herein can be implemented directly in hardware, a software module executed by a processor, or a combination of both.
  • the software module can be placed in random access memory (RAM), memory, read only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or technical field. Any other form of storage medium known.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Hardware Design (AREA)
  • Controls And Circuits For Display Device (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

一种屏幕适配的方法和装置，客户端从服务器端获取用户界面数据包，对用户界面数据包进行解析，得到各个模块和组件的绘制信息，该用户界面中的模块按照垂直方向排列，每个模块包含一个或多个组件。客户端根据对自身所在设备的屏幕方向获取各个组件的显示属性，根据各个组件的显示属性，以及需要填充到各个组件中的资源文件，绘制用户界面中的各个组件。

Description

一种屏幕适配的方法和装置 技术领域
本发明涉及一种屏幕适配的方法和装置，属于终端显示技术领域。
背景技术
随着移动通信技术的发展，移动设备的类型也日益增多，不同类型的移动设备通常具有不同的操作系统和屏幕尺寸。
现有技术中，使用移动中间件技术屏蔽不同操作系统之间的底层差异，实现跨操作系统的快速开发，开发者只需要为客户端开发一套UI(User Interface，用户界面)，便可保证客户端能在不同的操作系统中运行。
现有技术至少存在以下缺陷：由于不同类型的移动设备的屏幕尺寸通常也不相同，开发者仍需要根据不同的屏幕尺寸制作不同的UI，并经过高保真效果图重设、切片处理、编码和测试，才能使客户端适配多种移动设备，导致屏幕适配工作量大、屏幕适配效率低。
发明内容
本发明的目的提供一种屏幕适配的方法和装置，其屏幕适配工作量小、屏幕适配效率高。
为此，根据本发明的一个方面，提供了一种屏幕适配的方法，包括以下步骤：
A1、客户端从服务器端获取用户界面数据包，对所述用户界面数据包进行解析，得到各个模块的绘制信息和各个组件的绘制信息，所述用户界面中的模块按照垂直方向排列，每个模块包含一个或多个组件；
A2、所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤A3；如果所述屏幕方向为横屏，则执行步骤A4；
A3、所述客户端将所述各个模块的显示宽度设置为所述设备的屏幕宽度，根据所述各个模块的显示宽度、所述各个模块的绘制信息、所述各个组件的绘制信息，获取所述各个组件的显示宽度、显示高度和显示坐标；根据所述各个组件的显示宽度、显示高度和显示坐标，以及需要填充到所述各个组件中的资源文件，绘制所述各个组件，并执行步骤A5；
A4、所述客户端将所述各个模块的显示宽度设置为所述设备的屏幕高度，根据所述各个模块的显示宽度、所述各个模块的绘制信息、所述各个组件的绘制信息，获取所述各个组件的显示宽度、显示高度和显示坐标；根据所述各个组件的显示宽度、显示高度和显示坐标，以及需要填充到所述各个组件中的资源文件，绘制所述各个组件，并执行步骤A5；
A5、客户端监控所述设备的屏幕方向，并在监控到所述设备的屏幕方向发生变化时，返回步骤A2。
根据本发明的另外一个方面，还提供了一种屏幕适配的方法，包括以下步骤：
E1、客户端从服务器端获取用户界面数据包，对所述用户界面数据包进行解析，得到全局模块的绘制信息和各个组件的绘制信息，所述全局模块包含所述用户界面中的所有组件；
E2、所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤E3；如果所述屏幕方向为横屏，则执行步骤E4；
E3、所述客户端将所述全局模块的显示宽度设置为所述设备的屏幕宽度，根据所述全局模块的显示宽度和所述全局模块的绘制信息，获取所述全局模块的显示高度，并执行步骤E5；
E4、所述客户端将所述全局模块的显示高度设置为所述设备的屏幕宽度，根据所述全局模块的显示高度和所述全局模块的绘制信息，获取所述全局模块的显示宽度，并执行步骤E5；
E5、所述客户端根据所述全局模块的显示宽度、所述全局模块的显示高度、所述各个组件的绘制信息，获取所述各个组件的显示宽度、显示高度和显示坐标；根据所述各个组件的显示宽度、显示高度和显示坐标，以及需要填充到所述各个组件中的资源文件，绘制所述各个组件，并执行步骤E6；
E6、所述客户端监控所述设备的屏幕方向，并在监控到所述设备的屏幕方向发生变化时，返回步骤E2。
根据本发明的另外一个方面，还提供了一种屏幕适配的方法，包括以下步骤：
H1、客户端从服务器端获取用户界面数据包，对所述用户界面数据包进行解析，得到各个模块的绘制信息和各个组件的绘制信息；
H2、所述客户端根据自身所在设备的屏幕尺寸、所述各个模块的绘制信息和所述各个组件的绘制信息，获取并保存所述各个组件的竖屏显示信息和横屏显示信息；
H3、所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤H4； 如果所述屏幕方向为横屏，则执行步骤H5；
H4、所述客户端根据所述各个组件的竖屏显示信息绘制所述各个组件，并执行步骤H6；
H5、所述客户端根据所述各个组件的横屏显示信息绘制所述各个组件，并执行步骤H6；
H6、所述客户端监控所述设备的屏幕方向，并在监控到所述设备的屏幕方向发生变化时，执行步骤H7；
H7、所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤H8；如果所述屏幕方向为横屏，则执行步骤H9；
H8、所述客户端根据所述各个组件的竖屏显示信息绘制所述各个组件，并执行步骤H6；
H9、所述客户端根据所述各个组件的横屏显示信息绘制所述各个组件，并执行步骤H6。
本发明达到的有益效果至少包括：根据设备的屏幕尺寸和屏幕方向、UI中的各个组件的绘制信息绘制UI，能够对具有不同屏幕尺寸的设备进行屏幕适配和横竖屏切换，从而提高了屏幕适配和横竖屏切换的流畅度，减少了屏幕适配的工作量，提高了屏幕适配效率。
附图说明
图1为根据本发明实施例1的一种屏幕适配的方法流程图；
图2为根据本发明实施例2的另一种屏幕适配的方法流程图；
图3为本发明实施例中的客户端获取并保存UI中的各个组件的竖屏显示信息的流程图；
图4为本发明实施例中的客户端获取并保存UI中的各个组件的横屏显示信息的流程图；
图5为根据本发明实施例3的又一种屏幕适配的方法流程图。
具体实施方式
下面将结合附图，对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域的技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明应用于包括服务器端和客户端的系统中，该客户端安装在设备上，用于在该设备上绘制UI，UI可被划分为多个模块，各个模块按照垂直方向排列，每个模块可以包含一个或多个组件。服务器端生成并保存UI数据包，该UI数据包中包含UI中的各个模块的绘制信息，以及模块中的各个组件的绘制信息。
相应地，客户端获取UI数据包，对UI数据包进行解析，得到UI中的各个模块的绘制信息和各个组件的绘制信息，并根据上述绘制信息绘制UI。
其中，模块的绘制信息可以为模块的宽高比或高宽比，组件的绘制信息包括组件的相对坐标、组件的相对宽度和组件的相对高度，组件的相对坐标包括组件的相对横坐标和组件的相对纵坐标。
相应地，组件的绘制信息的格式为(组件的相对横坐标，组件的相对纵坐标，组件的相对宽度，组件的相对高度)，上述绘制信息中的内容可通过百分比的形式表示。
各实施例中，模块的宽高比是该模块在UI效果图中的宽度与该模块在UI效果图中的高度的比值，模块的高宽比是该模块在UI效果图中的高度与该模块在UI效果图中的宽度的比值。组件的相对横坐标是该组件在所属模块中的横坐标与该模块在UI效果图中的宽度的比值，组件的相对纵坐标是该组件在所属模块中的纵坐标与该模块在UI效果图中的高度的比值，组件的相对宽度是该组件在UI效果图中的宽度与该组件所属模块在UI效果图中的宽度的比值，组件的相对高度是该组件在UI效果图中的高度与该组件所属的模块在UI效果图中的高度的比值。
其中，各个模块在UI效果图中的宽度均为UI效果图的总宽度，组件在所属模块中的横坐标是以该模块的左上角为坐标原点，该组件的左上角的横坐标；组件在所属模块中的纵坐标是以该模块的左上角为坐标原点，该组件的左上角的纵坐标。
如图1所示，为根据本发明的一种屏幕适配的方法流程图，包括以下步骤：
步骤101，客户端启动，从服务器端获取UI数据包，对UI数据包进行解析，得到UI中的各个模块的绘制信息和各个组件的绘制信息。
例如，UI被划分为模块1、模块2和模块3，其中，模块1中包含组件1和组件2，模块2中包含组件3，模块3中包含组件4、组件5和组件6，客户端对UI数据包进行解析，得到模块1、模块2和模块3的绘制信息(宽高比)分别为40％、30％和30％，以及组件1的绘制信息(20％，10％，70％，30％)、组件2的绘制信息(20％，50％，70％，40％)、组件3的绘制信息(20％，10％，70％，80％)、组件4的绘制信息(10％，10％，40％，90％)、组件5的绘制信息(60％，10％，30％，30％)和组件6的绘制信息(60％，60％，30％，40％)。
步骤102，客户端获取设备的属性信息。
其中，设备的属性信息可以包括设备的类型信息、屏幕尺寸、屏幕方向和屏幕分辨率等信息，屏幕尺寸包括屏幕宽度和屏幕高度。
在本实施例1中，客户端可以调用UI_USER_INTERFACE_IDIOM函数，以获取设备的类型信息；将[UIScreen mainScreen]bounds中的size属性的取值作为设备的屏幕尺寸；为了获取设备的屏幕方向，调用UIInterfaceOrientationIsPortrait函数；将[UIScreen mainScreen]currentMode中的size属性的取值作为设备的屏幕分辨率。
例如，设备的类型信息为“iPhone4”，屏幕尺寸为251pt*141pt，屏幕方向为横向，屏幕分辨率为1136px*640px。
步骤103，客户端判断设备是否为预设类型设备，如果是，则执行步骤104；如果不是，则执行步骤121。
具体地，客户端可以根据设备的类型信息，判断设备是否为预设类型设备，其中，预设类型设备可以为手机。
例如，设备的类型信息为“iPhone4”时，客户端可以判断出该设备为手机。
步骤104，客户端选取位于UI顶部的模块作为当前模块，将当前模块的显示宽度设置为设备的屏幕宽度，将当前模块的显示坐标设置为设备屏幕的左上角。
例如，设备的屏幕尺寸为251pt*141pt，设备屏幕的左上角为坐标原点时，客户端选取位于UI顶部的模块1作为当前模块，将当前模块的显示宽度设置为141pt，将当前模块的显示坐标设置为(0，0)。
步骤105，客户端根据当前模块的绘制信息和显示宽度，获取当前模块的显示高度。
具体地，当前模块的绘制信息为宽高比时，客户端可以获取当前模块的显示宽度除以当前模块的宽高比得到的结果，将该结果作为当前模块的显示高度；当前模块的绘制信息为高宽比时，客户端可以获取当前模块的显示宽度乘以当前模块的高宽比得到的结果，将该结果作为当前模块的显示高度。
例如，当前模块的绘制信息为宽高比，该宽高比为40％，当前模块的显示宽度为141pt，客户端计算出当前模块的显示高度＝141pt/40％＝352.5pt。
步骤106，客户端从当前模块中选取一个未被绘制的组件作为当前组件，根据当前模块的显示宽度、显示高度，以及当前组件的绘制信息，获取当前组件的显示宽度、显示高度和显示坐标。
其中，当前组件的显示坐标是以当前模块的左上角为坐标原点，当前组件的左上角的坐标，包括当前组件的显示纵坐标和显示横坐标。
相应地，客户端可以获取当前模块的显示宽度与当前组件的相对宽度的乘积，将该乘积作为当前组件的显示宽度；获取当前模块的显示高度与当前组件的相对高度的乘积，将该乘积作为当前组件的显示高度；获取当前模块的显示宽度与当前组件的相对横坐标的乘积，将该乘积作为当前组件的显示横坐标；获取当前模块的显示高度与当前组件的相对纵坐标的乘积，将该乘积作为当前组件的显示纵坐标。
例如，客户端选取当前模块中的组件1作为当前组件，当前模块的显示宽度为141pt，显示高度为352.5pt，显示坐标为(0，0)，当前组件的绘制信息为(20％，10％，70％，30％)，客户端计算出当前组件的显示宽度＝70％*141pt＝98.7pt，计算出当前组件的显示高度＝30％*352.5pt＝105.75pt，计算出当前组件的显示横坐标＝20％*141pt＝28.2pt，计算出当前组件的显示纵坐标＝10％*352.5pt＝35.25pt。
步骤107，客户端判断是否需要向当前组件中填充图片，如果是，则执行步骤109；否则，执行步骤108。
具体地，客户端可以判断当前组件的内容中是否包含图片信息，如果是，则确定需要向当前组件中填充图片；否则，确定不需要向当前组件中填充图片。
例如，当前组件的名称为Label，该组件的内容中包括以下信息：Label.Pic＝@“demo.png”，客户端判断出当前组件的内容中包含图片信息“demo.png”，确定需要向当前组件中填充名称为demo、格式为png的图片。
步骤108，客户端根据当前组件的内容，获取需要填充到当前组件中的资源文件，根据获取到的资源文件以及当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤118。
具体地，客户端可以将当前模块的左上角作为坐标原点，根据当前组件的显示宽度、显示高度和显示坐标，对当前组件进行定位，并将获取到的资源文件填充到当前组件中，对当前组件进行显示，从而实现对当前组件的绘制。
其中，资源文件可以为视频、文字等文件。
步骤109，客户端判断设备的屏幕密度是否大于预设密度值，如果是，则执行步骤110；否则，执行步骤114。
具体地，客户端可以直接获取设备的屏幕密度，并判断设备的屏幕密度是否大于预设密度值；也可 以获取设备的屏幕分辨率和屏幕尺寸，根据设备的屏幕分辨率和屏幕尺寸获取设备的屏幕密度，并判断设备的屏幕密度是否大于预设密度值。
本实施例1中，客户端可以根据以下公式计算设备的屏幕密度PPI：
Figure PCTCN2015073471-appb-000001
其中，dp为设备的屏幕对角线的分辨率，wp为设备的屏幕横向分辨率，hp为设备的屏幕纵向分辨率，di为设备的屏幕对角线的长度。
例如，设备的屏幕分辨率为1136px*640px，设备的屏幕尺寸为251pt*141pt，预设密度值为300ppi时，客户端根据设备的屏幕分辨率和屏幕尺寸计算出设备的屏幕密度为326ppi，并确定设备的屏幕密度大于预设密度值。
步骤110，客户端根据当前组件的内容，获取对应的高分辨率图片。
具体他，客户端可以根据当前组件的内容中包含的图片信息，从本地存储的素材包中获取与该图片信息对应的高分辨率图片，也可以通过网络异步获取与该图片信息对应的高分辨率图片，还可以动态生成与该图片信息对应的高分辨率图片。
本实施例1中，本地存储的素材包中可以保存有与同一图片信息对应的高分辨率图片和低分辨图片。
例如，当前组件的内容中包含图片信息“demo.png”，本地存储的素材包中保存有与“demo.png”对应的高分辨率图片“demo@2x.png”和低分辨图片“demo.png”，客户端从本地存储的素材包中获取高分辨率图片“demo@2x.png”。
步骤111，客户端判断是否需要向当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤113；否则，执行步骤112。
具体地，客户端可以判断当前组件的内容中是否包含除图片信息之外的其他资源文件的信息，如果是，则确定需要向当前组件中填充除图片之外的其他资源文件；否则，确定不需要向当前组件中填充除图片之外的其他资源文件。
步骤112，客户端根据获取到的高分辨率图片、当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤118。
具体地，客户端可以将当前模块的左上角作为坐标原点，根据当前组件的显示宽度、显示高度和显示坐标，对当前组件进行定位，并将获取到的高分辨率图片填充到当前组件中，对当前组件进行显示，从而实现对当前组件的绘制。
例如，当前组件的显示坐标为(28.2，35.25)，显示宽度为98.7pt，显示高度为105.75pt，客户端获取需要填充到当前组件中的高分辨率图片“demo@2x.png”，在坐标为(28.2，35.25)的位置，生成大小为(98.7，105.75)的组件，并将高分辨率图片“demo@2x.png”填充到该组件中。
步骤113，客户端根据当前组件的内容，获取除图片之外的其他资源文件，根据当前组件的显示宽度、显示高度和显示坐标，以及获取到的高分辨率图片和除图片之外的其他资源文件，绘制当前组件，并执行步骤118。
具体地，客户端可以将当前模块的左上角作为坐标原点，根据当前组件的显示宽度、显示高度和显示坐标，对当前组件进行定位，并将获取到的高分辨率图片以及其他资源文件填充到当前组件中，对当前组件进行显示，从而实现对当前组件的绘制。
步骤114，客户端根据当前组件的内容，获取对应的低分辨率图片。
具体他，客户端可以根据当前组件的内容中包含的图片信息，从本地存储的素材包中获取与该图片信息对应的低分辨率图片，也可以通过网络异步获取与该图片信息对应的低分辨率图片，还可以动态生成与该图片信息对应的低分辨率图片。
本实施例1中，本地存储的素材包中可以保存有与同一图片信息对应的高分辨率图片和低分辨图片。
例如，当前组件的内容中包含图片信息“demo.png”，本地存储的素材包中保存有与“demo.png”对应的高分辨率图片“demo@2x.png”和低分辨图片“demo.png”，客户端从本地存储的素材包中获取低分辨率图片“demo.png”。
步骤115，客户端判断是否需要向当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤117；否则，执行步骤116。
步骤116，客户端根据获取到的低分辨率图片、当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤118。
具体地，客户端可以将当前模块的左上角作为坐标原点，根据当前组件的显示宽度、显示高度和显示坐标，对当前组件进行定位，并将获取到的低分辨率图片填充到当前组件中，对当前组件进行显示， 从而实现对当前组件的绘制。
步骤117，客户端根据当前组件的内容，获取除图片之外的其他资源文件，根据当前组件的显示宽度、显示高度和显示坐标，以及获取到的低分辨率图片和除图片之外的其他资源文件，绘制当前组件，并执行步骤118。
具体地，客户端可以将当前模块的左上角作为坐标原点，根据当前组件的显示宽度、显示高度和显示坐标，对当前组件进行定位，并将获取到的低分辨率图片以及其他资源文件填充到当前组件中，对当前组件进行显示，从而实现对当前组件的绘制。
步骤118，客户端判断当前模块中是否包含未被绘制的组件，如果是，则返回步骤106；否则，执行步骤119。
步骤119，客户端判断UI中是否包含未被处理过的模块，如果是，则执行步骤120；否则，执行步骤139。
步骤120，客户端获取当前模块的显示纵坐标与当前模块的显示高度相加得到的运算结果，选取UI中与当前模块相邻且位于当前模块下方的模块作为更新后的当前模块，将更新后的当前模块的显示纵坐标设置为上述运算结果，将更新后的当前模块的显示横坐标设置为零，将更新后的当前模块的显示宽度设置为设备的屏幕宽度，并返回步骤105。
例如，设备的屏幕尺寸为251pt*141pt，当前模块为模块1，当前模块的显示坐标为(0，0)，当前模块的显示高度为352.5pt时，客户端获取当前模块的显示纵坐标与显示高度相加得到的结果，即，0+352.5pt＝352.5pt，选取UI中与模块1相邻且位于模块1下方的模块2作为更新后的当前模块，将更新后的当前模块的显示坐标设置为(0，352.5pt)，将更新后的当前模块的显示宽度设置为141pt。
步骤121，客户端对设备的屏幕方向进行判断，如果屏幕方向为竖屏，则返回步骤104；如果屏幕方向为横屏，则执行步骤122。
步骤122，客户端选取位于UI顶部的模块作为当前模块，将当前模块的显示宽度设置为设备的屏幕高度，将当前模块的显示坐标设置为设备屏幕的左上角。
例如，设备的屏幕尺寸为251pt*141pt，设备屏幕的左上角为坐标原点时，客户端选取位于UI顶部的模块1作为当前模块，将当前模块的显示宽度设置为251pt，将当前模块的显示坐标设置为(0，0)。
步骤123，客户端根据当前模块的绘制信息和显示宽度，获取当前模块的显示高度。
步骤124，客户端从当前模块中选取一个未被绘制的组件作为当前组件，根据当前模块的显示宽度、显示高度，以及当前组件的绘制信息，获取当前组件的显示宽度、显示高度和显示坐标。
步骤125，客户端判断是否需要向当前组件中填充图片，如果是，则执行步骤127；否则，执行步骤126。
步骤126，客户端根据当前组件的内容，获取需要填充到当前组件中的资源文件，根据获取到的资源文件以及当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤136。
步骤127，客户端判断设备的屏幕密度是否大于预设密度值，如果是，则执行步骤128；否则，执行步骤132。
步骤128，客户端根据当前组件的内容，获取对应的高分辨率图片。
步骤129，客户端判断是否需要向当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤131；否则，执行步骤130。
步骤130，客户端将根据获取到的高分辨率图片、当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤136。
步骤131，客户端根据当前组件的内容，获取除图片之外的其他资源文件，根据当前组件的显示宽度、显示高度和显示坐标，以及获取到的高分辨率图片和除图片之外的其他资源文件，绘制当前组件，并执行步骤136。
步骤132，客户端根据当前组件的内容，获取对应的低分辨率图片。
步骤133，客户端判断是否需要向当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤135；否则，执行步骤134。
步骤134，客户端将根据获取到的低分辨率图片、当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤136。
步骤135，客户端根据当前组件的内容，获取除图片之外的其他资源文件，根据当前组件的显示宽度、显示高度和显示坐标，以及获取到的低分辨率图片和除图片之外的其他资源文件，绘制当前组件，并执行步骤136。
步骤136，客户端判断当前模块中是否包含未被绘制的组件，如果是，则返回步骤124；否则，执行步骤137。
步骤137，客户端判断UI中是否包含未被处理过的模块，如果是，则执行步骤138；否则，执行步骤139。
步骤138，客户端获取当前模块的显示纵坐标与当前模块的显示高度相加得到的运算结果，选取UI中与当前模块相邻且位于当前模块下方的模块作为更新后的当前模块，将更新后的当前模块的显示纵坐标设置为上述运算结果，将更新后的当前模块的显示横坐标设置为零，将更新后的当前模块的显示宽度设置为设备的屏幕高度，并返回步骤123。
步骤139，客户端监控设备的屏幕方向。
步骤140，客户端判断设备的屏幕方向是否发生变化，如果是，则返回步骤121；否则，返回步骤139。
本发明实施例1中的客户端根据设备的屏幕尺寸和屏幕方向、UI中的各个组件的绘制信息绘制UI，能够对具有不同屏幕尺寸的设备进行屏幕适配和横竖屏切换，提高了屏幕适配和横竖屏切换的流畅度，减少了屏幕适配的工作量，提高了屏幕适配效率。
本发明的其他实施方式中，客户端也可以在后台预先获取并保存各个组件的竖屏显示信息和横屏显示信息，根据设备的屏幕方向选择相应的显示信息，并根据选择出的显示信息绘制UI中的各个组件。
如图2所示，为根据本发明的另一种屏幕适配的方法流程图，包括以下步骤：
步骤201，客户端启动，从服务器端获取UI数据包，对UI数据包进行解析，得到UI中的各个模块的绘制信息和各个组件的绘制信息。
其中，模块的绘制信息可以为模块的宽高比或高宽比，组件的绘制信息包括组件的相对坐标、组件的相对宽度和组件的相对高度，组件的相对坐标包括组件的相对横坐标和组件的相对纵坐标。
步骤202，客户端获取设备的屏幕尺寸和屏幕方向。
其中，屏幕尺寸包括屏幕宽度和屏幕高度。
步骤203，客户端根据设备的屏幕尺寸、UI中的各个模块的绘制信息和各个组件的绘制信息，获取并保存各个模块的竖屏显示坐标和横屏显示坐标，以及各个组件的竖屏显示信息和横屏显示信息。
其中，组件的竖屏显示信息包括组件的竖屏显示坐标、组件的竖屏显示宽度和组件的竖屏显示高度，组件的竖屏显示坐标包括组件的竖屏显示横坐标和组件的竖屏显示纵坐标；组件的横屏显示信息包括组件的横屏显示坐标、组件的横屏显示宽度和组件的横屏显示高度，组件的横屏显示坐标包括组件的横屏显示横坐标和组件的横屏显示纵坐标。
步骤204，客户端对设备的屏幕方向进行判断，如果屏幕方向为竖屏，则执行步骤205；如果屏幕方向为横屏，则执行步骤206。
步骤205，客户端根据各个模块的竖屏显示坐标和各个组件的竖屏显示信息绘制UI，并执行步骤207。
具体地，客户端可以分别将各个组件所属模块的左上角作为坐标原点，根据各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，分别对各个组件进行定位，并将对应的资源文件填充到各个组件中，对各个组件进行显示，从而实现对UI的绘制。
步骤206，客户端根据各个模块的横屏显示坐标和各个组件的横屏显示信息绘制UI，并执行步骤207。
具体地，客户端可以分别将各个组件所属模块的左上角作为坐标原点，根据各个组件的横屏显示宽度、横屏显示高度和横屏显示坐标，分别对各个组件进行定位，并将对应的资源文件填充到各个组件中，对各个组件进行显示，从而实现对UI的绘制。
步骤207，客户端监控设备的屏幕方向和各个组件的组件属性信息，当组件属性信息发生改变时，执行步骤208；当设备的屏幕方向发生改变时，执行步骤209。
步骤208，客户端对改变后的组件属性信息进行保存，并返回步骤207。
例如，当用户在UI中的输入框中输入“123”时，客户端监控到输入框组件的内容属性发生改变，对内容属性“123”进行保存。
步骤209，客户端对设备的屏幕方向进行判断，如果屏幕方向为竖屏，则执行步骤210；如果屏幕方向为横屏，则执行步骤213。
步骤210，客户端根据各个模块的竖屏显示坐标和各个组件的竖屏显示信息绘制UI。
步骤211，客户端判断自身是否保存有组件属性信息，如果是，则执行步骤212；否则，返回步骤207。
步骤212，客户端根据自身保存的组件属性信息，修改对应组件的属性，并返回步骤207。
例如，当客户端保存有输入框组件的内容属性“123”，客户端将对应的输入框组件的内容属性修改为“123”。
步骤213，客户端根据各个模块的横屏显示坐标和各个组件的横屏显示信息绘制UI，并返回211。
本实施例2中，用户界面可以包括多个模块，且用户界面中的各个模块按照垂直方向排列，每个模块包含一个或多个组件，各个组件的竖屏显示信息包括各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，各个组件的横屏显示信息包括各个组件的横屏显示宽度、横屏显示高度和横屏显示坐标。
相应地，上述流程中，客户端获取并保存UI中的各个组件的竖屏显示信息的操作，可细化为如图3所示的流程图，包括以下步骤：
步骤301，客户端选取位于UI顶部的模块作为当前模块，将当前模块的竖屏显示宽度设置为设备的屏幕宽度，将当前模块的竖屏显示坐标设置为设备屏幕的左上角，并保存当前模块的竖屏显示坐标。
步骤302，客户端根据当前模块的绘制信息和竖屏显示宽度，获取当前模块的竖屏显示高度。
具体地，当前模块的绘制信息为宽高比时，客户端可以获取当前模块的竖屏显示宽度除以当前模块的宽高比得到的结果，将该结果作为当前模块的竖屏显示高度；当前模块的绘制信息为高宽比时，客户端可以获取当前模块的竖屏显示宽度乘以当前模块的高宽比得到的结果，将该结果作为当前模块的竖屏显示高度。
步骤303，客户端根据当前模块的竖屏显示宽度、竖屏显示高度，以及当前模块中的各个组件的绘制信息，获取并保存当前模块中的各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标。
具体地，客户端可以分别获取当前模块的竖屏显示宽度与当前模块中的各个组件的相对宽度的乘积，将获取到的乘积分别作为各个组件的竖屏显示宽度；分别获取当前模块的竖屏显示高度与当前模块中的各个组件的相对高度的乘积，将获取到的乘积分别作为当前模块中的各个组件的竖屏显示高度；分别获取当前模块的竖屏显示宽度与当前模块中的各个组件的相对横坐标的乘积，将获取到的乘积分别作为各个组件的竖屏显示横坐标；分别获取当前模块的竖屏显示高度与当前模块中的各个组件的相对纵坐标的乘积，将获取到的乘积分别作为各个组件的竖屏显示纵坐标。
步骤304，客户端判断UI中是否包含未被处理过的模块，如果是，则执行步骤305；否则，确定获取竖屏显示信息完毕。
步骤305，客户端获取当前模块的竖屏显示纵坐标与当前模块的竖屏显示高度相加得到的运算结果，选取UI中与当前模块相邻且位于当前模块下方的模块作为更新后的当前模块，将更新后的当前模块的竖屏显示纵坐标设置为上述运算结果，将更新后的当前模块的竖屏显示横坐标设置为零，将更新后的当前模块的竖屏显示宽度设置为设备的屏幕宽度，并返回步骤302。
相应地，客户端获取并保存UI中的各个组件的横屏显示信息的操作，可细化为如图4所示的流程图，包括以下步骤：
步骤401，客户端选取位于UI顶部的模块作为当前模块，将当前模块的横屏显示宽度设置为设备的屏幕高度，将当前模块的横屏显示坐标设置为设备屏幕的左上角。
步骤402，客户端根据当前模块的绘制信息和横屏显示宽度，获取当前模块的横屏显示高度。
具体地，当前模块的绘制信息为宽高比时，客户端可以获取当前模块的横屏显示宽度除以当前模块的宽高比得到的结果，将该结果作为当前模块的横屏显示高度；当前模块的绘制信息为高宽比时，客户端可以获取当前模块的横屏显示宽度乘以当前模块的高宽比得到的结果，将该结果作为当前模块的横屏显示高度。
步骤403，客户端根据当前模块的横屏显示宽度、横屏显示高度，以及当前模块中的各个组件的绘制信息，获取并保存当前模块中的各个组件的横屏显示宽度、横屏显示高度和横屏显示坐标。
具体地，客户端可以分别获取当前模块的横屏显示宽度与当前模块中的各个组件的相对宽度的乘积，将获取到的乘积分别作为各个组件的横屏显示宽度；分别获取当前模块的横屏显示高度与当前模块中的各个组件的相对高度的乘积，将获取到的乘积分别作为当前模块中的各个组件的横屏显示高度；分别获取当前模块的横屏显示宽度与当前模块中的各个组件的相对横坐标的乘积，将获取到的乘积分别作为各个组件的横屏显示横坐标；分别获取当前模块的横屏显示高度与当前模块中的各个组件的相对纵坐标的乘积，将获取到的乘积分别作为各个组件的横屏显示纵坐标。
步骤404，客户端判断UI中是否包含未被处理过的模块，如果是，则执行步骤405；否则，确定获取横屏显示信息完毕。
步骤405，客户端获取当前模块的横屏显示纵坐标与当前模块的横屏显示高度相加得到的运算结果，选取UI中与当前模块相邻且位于当前模块下方的模块作为更新后的当前模块，将更新后的当前模块的横屏显示纵坐标设置为上述运算结果，将更新后的当前模块的横屏显示横坐标设置为零，将更新后的当前模块的横屏显示宽度设置为设备的屏幕高度，并返回步骤402。
本发明实施例中的客户端预先根据设备的屏幕尺寸和UI中的各个组件的绘制信息获取并保存各个组件的竖屏显示信息和横屏显示信息，并根据设备的屏幕方向使用竖屏显示信息或横屏显示信息绘制各 个组件，能够对具有不同屏幕尺寸的设备进行屏幕适配和横竖屏切换，提高了屏幕适配和横竖屏切换的流畅度，减少了屏幕适配的工作量，提高了屏幕适配效率。
需要说明的是，本发明的其他实施方式中，UI还可以只包括一个全局模块，该全局模块中包含UI中的所有组件。服务器端生成并保存的UI数据包中包含上述全局模块的绘制信息和该全局模块中的各个组件的绘制信息。
其中，全局模块的绘制信息可以为全局模块的宽高比或高宽比，组件的绘制信息包括组件的相对坐标、组件的相对宽度和组件的相对高度，组件的相对坐标包括组件的相对横坐标和组件的相对纵坐标。
本实施例中，全局模块的宽高比是该全局模块在UI效果图中的宽度与该全局模块在UI效果图中的高度的比值，全局模块的高宽比是该全局模块在UI效果图中的高度与该全局模块在UI效果图中的宽度的比值。组件的相对横坐标是该组件在全局模块中的横坐标与该全局模块在UI效果图中的宽度的比值，组件的相对纵坐标是该组件在全局模块中的纵坐标与该全局模块在UI效果图中的高度的比值，组件的相对宽度是该组件在UI效果图中的宽度与全局模块在UI效果图中的宽度的比值，组件的相对高度是该组件在UI效果图中的高度与全局模块在UI效果图中的高度的比值。
其中，全局模块在UI效果图中的宽度为UI效果图的总宽度，全局模块在UI效果图中的高度为UI效果图的总高度，组件在全局模块中的横坐标是以全局模块的左上角为坐标原点，该组件的左上角的横坐标；组件在全局模块中的纵坐标是以全局模块的左上角为坐标原点，该组件的左上角的纵坐标。
相应地，本发明实施例还提供了又一种屏幕适配的方法，如图5所示，包括以下步骤：
步骤501，客户端启动，从服务器端获取UI数据包，对UI数据包进行解析，得到UI中的全局模块的绘制信息和各个组件的绘制信息。
步骤502，客户端将全局模块的中心点设置为与界面视图的中心点相同，将界面视图的背景设置为黑色。
具体地，客户端可以通过将全局模块的center属性设置为与界面视图的center属性相同的方式，将全局模块的中心点设置为与界面视图的中心点相同；通过将界面视图的Background属性设置为预设值的方式，将界面视图的背景设置为黑色，其中，上述预设值可以为“Black Color”。
步骤503，客户端获取设备的属性信息。
其中，设备的属性信息可以包括设备的类型信息、屏幕尺寸、屏幕方向和屏幕分辨率等信息，屏幕尺寸包括屏幕宽度和屏幕高度。
步骤504，客户端对设备的屏幕方向进行判断，如果屏幕方向为竖屏，则执行步骤505；如果屏幕方向为横屏，则执行步骤509。
步骤505，客户端根据全局模块的绘制信息，对全局模块的宽高比进行判断，如果全局模块的宽高比小于设备的屏幕宽高比，则执行步骤506；如果全局模块的宽高比等于设备的屏幕宽高比，则执行步骤507；如果全局模块的宽高比大于设备的屏幕宽高比，则执行步骤508。
步骤506，客户端将全局模块的显示高度设置为设备的屏幕高度，根据全局模块的显示高度和绘制信息，获取全局模块的显示宽度，并执行步骤513。
步骤507，客户端将全局模块的显示高度设置为设备的屏幕高度，将全局模块的显示宽度设置为设备的屏幕宽度，并执行步骤513。
步骤508，客户端将全局模块的显示宽度设置为设备的屏幕宽度，根据全局模块的显示宽度和绘制信息，获取全局模块的显示高度，并执行步骤513。
步骤509，客户端根据全局模块的绘制信息，对全局模块的宽高比进行判断，如果全局模块的宽高比小于设备的屏幕高宽比，则执行步骤510；如果全局模块的宽高比等于设备的屏幕高宽比，则执行步骤511；如果全局模块的宽高比大于设备的屏幕高宽比，则执行步骤512。
步骤510，客户端将全局模块的显示高度设置为设备的屏幕宽度，根据全局模块的显示高度和绘制信息，获取全局模块的显示宽度，并执行步骤513。
步骤511，客户端将全局模块的显示高度设置为设备的屏幕宽度，将全局模块的显示宽度设置为设备的屏幕高度，并执行步骤513。
步骤512，客户端将全局模块的显示宽度设置为设备的屏幕高度，根据全局模块的显示宽度和绘制信息，获取全局模块的显示高度，并执行步骤513。
步骤513，客户端从全局模块中选取一个未被绘制的组件作为当前组件，根据全局模块的显示宽度、显示高度，以及当前组件的绘制信息，获取当前组件的显示宽度、显示高度和显示坐标。
步骤514，客户端判断是否需要向当前组件中填充图片，如果是，则执行步骤516；否则，执行步骤515。
步骤515，客户端根据当前组件的内容，获取需要填充到当前组件中的资源文件，根据获取到的资 源文件以及当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤525。
步骤516，客户端判断设备的屏幕密度是否大于预设密度值，如果是，则执行步骤517；否则，执行步骤521。
步骤517，客户端根据当前组件的内容，获取对应的高分辨率图片。
步骤518，客户端判断是否需要向当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤520；否则，执行步骤519。
步骤519，客户端将根据获取到的高分辨率图片、当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤525。
步骤520，客户端根据当前组件的内容，获取除图片之外的其他资源文件，根据当前组件的显示宽度、显示高度和显示坐标，以及获取到的高分辨率图片和除图片之外的其他资源文件，绘制当前组件，并执行步骤525。
步骤521，客户端根据当前组件的内容，获取对应的低分辨率图片。
步骤522，客户端判断是否需要向当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤524；否则，执行步骤523。
步骤523，客户端将根据获取到的低分辨率图片、当前组件的显示宽度、显示高度和显示坐标，绘制当前组件，并执行步骤525。
步骤524，客户端根据当前组件的内容，获取除图片之外的其他资源文件，根据当前组件的显示宽度、显示高度和显示坐标，以及获取到的低分辨率图片和除图片之外的其他资源文件，绘制当前组件，并执行步骤525。
步骤525，客户端判断全局模块中是否包含未被绘制的组件，如果是，则返回步骤513；否则，执行步骤526。
步骤526，客户端监控设备的屏幕方向。
步骤527，客户端判断设备的屏幕方向是否发生变化，如果是，则返回步骤504；否则，返回步骤526。
实施例3中的客户端根据设备的屏幕尺寸和屏幕方向、UI中的模块和组件的绘制信息绘制UI，能够对具有不同屏幕尺寸的设备进行屏幕适配和横竖屏切换，并根据设备的屏幕密度显示相应分辨率的图片，提高了屏幕适配和横竖屏切换的流畅度，减少了屏幕适配的工作量，提高了屏幕适配效率和用户体验。
结合本文中所公开的各实施例描述的方法中的步骤可以直接用硬件、处理器执行的软件模块，或者二者的结合来实施。软件模块可以置于随机存储器(RAM)、内存、只读存储器(ROM)、电可编程ROM、电可擦除可编程ROM、寄存器、硬盘、可移动磁盘、CD-ROM、或技术领域内所公知的任意其它形式的存储介质中。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，本领域的技术人员根据本发明的构思，可轻易想到各种可能的变化或替换，但都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以所附权利要求书的保护范围为准。

Claims (21)

  1. 一种屏幕适配的方法，其特征在于，包括以下步骤：
    A1)客户端从服务器端获取用户界面数据包，对所述用户界面数据包进行解析，得到各个模块的绘制信息和各个组件的绘制信息，所述用户界面中的模块按照垂直方向排列，每个模块包含一个或多个组件；
    A2)所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤A3；如果所述屏幕方向为横屏，则执行步骤A4；
    A3)所述客户端将所述各个模块的显示宽度设置为所述设备的屏幕宽度，根据所述各个模块的显示宽度、所述各个模块的绘制信息、所述各个组件的绘制信息，获取所述各个组件的显示宽度、显示高度和显示坐标；根据所述各个组件的显示宽度、显示高度和显示坐标，以及需要填充到所述各个组件中的资源文件，绘制所述各个组件，并执行步骤A5；
    A4)所述客户端将所述各个模块的显示宽度设置为所述设备的屏幕高度，根据所述各个模块的显示宽度、所述各个模块的绘制信息、所述各个组件的绘制信息，获取所述各个组件的显示宽度、显示高度和显示坐标；根据所述各个组件的显示宽度、显示高度和显示坐标，以及需要填充到所述各个组件中的资源文件，绘制所述各个组件，并执行步骤A5；以及
    A5)客户端监控所述设备的屏幕方向，并在监控到所述设备的屏幕方向发生变化时，返回步骤A2。
  2. 如权利要求1所述的方法，其特征在于，所述步骤A1之后，还包括：所述客户端判断所述设备是否为预设类型设备，如果是，则执行步骤A3；如果不是，则执行步骤A2。
  3. 如权利要求1所述的方法，其特征在于，所述步骤A3，具体包括：
    B1)所述客户端选取位于所述用户界面顶部的模块作为当前模块，将所述当前模块的显示坐标设置为设备屏幕的左上角，将所述当前模块的显示宽度设置为所述设备的屏幕宽度，根据所述当前模块的绘制信息和显示宽度，获取所述当前模块的显示高度；
    B2)所述客户端从所述当前模块中选取一个未被绘制的组件作为当前组件，根据所述当前模块的显示宽度、显示高度，以及所述当前组件的绘制信息，获取所述当前组件的显示宽度、显示高度和显示坐标；
    B3)所述客户端根据所述当前组件的显示宽度、显示高度和显示坐标，以及需要填充到所述当前组件中的资源文件，绘制所述当前组件；
    B4)所述客户端判断所述当前模块中是否包含未被绘制的组件，如果是，则返回步骤B2；否则，执行步骤B5；
    B5)所述客户端判断所述用户界面中是否包含未被处理过的模块，如果是，则执行步骤B6；否则，执行步骤A5；
    B6)所述客户端获取所述当前模块的显示纵坐标与所述当前模块的显示高度相加得到的运算结果，选取所述用户界面中与所述当前模块相邻且位于所述当前模块下方的模块作为更新后的当前模块；以及
    B7)所述客户端将所述当前模块的显示纵坐标设置为所述运算结果，将所述当前模块的显示横坐标设置为零，将所述当前模块的显示宽度设置为设备的屏幕宽度，根据所述当前模块的绘制信息和显示宽度，获取所述当前模块的显示高度，并返回步骤B2。
  4. 如权利要求1所述的方法，其特征在于，所述步骤A4，具体包括：
    C1)所述客户端选取位于所述用户界面顶部的模块作为当前模块，将所述当前模块的显示坐标设置为设备屏幕的左上角，将所述当前模块的显示宽度设置为所述设备的屏幕高度，根据所述当前模块的绘制信息和显示宽度，获取所述当前模块的显示高度；
    C2)所述客户端从所述当前模块中选取一个未被绘制的组件作为当前组件，根据所述当前模块的显示宽度、显示高度，以及所述当前组件的绘制信息，获取所述当前组件的显示宽度、显示高度和显示坐标；
    C3)所述客户端根据所述当前组件的显示宽度、显示高度和显示坐标，以及需要填充到所述当前组件中的资源文件，绘制所述当前组件；
    C4)所述客户端判断所述当前模块中是否包含未被绘制的组件，如果是，则返回步骤C2；否则，执行步骤C5；
    C5)所述客户端判断所述用户界面中是否包含未被处理过的模块，如果是，则执行步骤C6；否则，执行步骤A5；
    C6)所述客户端获取所述当前模块的显示纵坐标与所述当前模块的显示高度相加得到的运算结果，选取所述用户界面中与所述当前模块相邻且位于所述当前模块下方的模块作为更新后的当前模块；以及
    C7)所述客户端将所述当前模块的显示纵坐标设置为所述运算结果，将所述当前模块的显示横坐标设置为零，将所述当前模块的显示宽度设置为设备的屏幕高度，根据所述当前模块的绘制信息和显示宽度，获取所述当前模块的显示高度，并返回步骤C2。
  5. 如权利要求3所述的方法，其特征在于，所述当前模块的绘制信息为所述当前模块的宽高比或高宽比；
    所述客户端根据所述当前模块的绘制信息和显示宽度，获取所述当前模块的显示高度，具体为：
    所述客户端将所述当前模块的显示宽度除以所述当前模块的宽高比，得到所述当前模块的显示高度；或者，
    所述客户端将所述当前模块的显示宽度乘以所述当前模块的高宽比，得到所述当前模块的显示高度。
  6. 如权利要求3所述的方法，其特征在于，所述当前组件的绘制信息包括所述当前组件的相对坐标、相对宽度和相对高度，所述当前组件的相对坐标包括所述当前组件的相对横坐标和相对纵坐标；所述当前组件的显示坐标是以所述当前模块的左上角为坐标原点，所述当前组件的左上角的坐标；所述当前组件的显示坐标包括所述当前组件的显示纵坐标和显示横坐标；
    所述客户端根据所述当前模块的显示宽度、显示高度，以及所述当前组件的绘制信息，获取所述当前组件的显示宽度、显示高度和显示坐标，具体为：
    所述客户端将所述当前模块的显示宽度与所述当前组件的相对宽度相乘，得到所述当前组件的显示宽度；将所述当前模块的显示高度与所述当前组件的相对高度相乘，得到所述当前组件的显示高度；将所述当前模块的显示宽度与所述当前组件的相对横坐标相乘，得到所述当前组件的显示横坐标；将所述当前模块的显示高度与所述当前组件的相对纵坐标相乘，得到所述当前组件的显示纵坐标。
  7. 如权利要求3所述的方法，其特征在于，所述客户端根据所述当前组件的显示宽度、显示高度和显示坐标，以及需要填充到所述当前组件中的资源文件，绘制所述当前组件，具体包括：
    D1)所述客户端判断是否需要向所述当前组件中填充图片，如果是，则执行步骤D3；否则，执行步骤D2；
    D2)所述客户端根据所述当前组件的内容，获取需要填充到所述当前组件中的资源文件，根据所述资源文件以及所述当前组件的显示宽度、显示高度和显示坐标，绘制所述当前组件；
    D3)所述客户端判断所述设备的屏幕密度是否大于预设密度值，如果是，则执行步骤D4；否则，执行步骤D7；
    D4)所述客户端根据所述当前组件的内容，获取对应的高分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤D6；否则，执行步骤D5；
    D5)所述客户端根据所述高分辨率图片、所述当前组件的显示宽度、显示高度和显示坐标，绘制所述当前组件；
    D6)所述客户端根据所述当前组件的内容，获取所述其他资源文件，根据所述当前组件的显示宽度、显示高度和显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件；
    D7)所述客户端根据当前组件的内容，获取对应的低分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤D9；否则，执行步骤D8；
    D8)所述客户端根据所述低分辨率图片、所述当前组件的显示宽度、显示高度和显示坐标，绘制所述当前组件；以及
    D9)所述客户端根据所述当前组件的内容，获取除图片之外的其他资源文件，根据所述当前组件的显示宽度、显示高度和显示坐标，以及所述低分辨率图片和所述其他资源文件，绘制所述当前组件。
  8. 如权利要求7所述的方法，其特征在于，所述客户端根据所述资源文件以及所述当前组件的显示宽度、显示高度和显示坐标，绘制所述当前组件，具体为：
    所述客户端将所述当前模块的左上角作为坐标原点，根据所述当前组件的显示宽度、显示高度和显示坐标，对所述当前组件进行定位，并将所述资源文件填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述高分辨率图片、所述当前组件的显示宽度、显示高度和显示坐标，绘制所述当前组件，具体为：
    所述客户端将所述当前模块的左上角作为坐标原点，根据所述当前组件的显示宽度、显示高度和显示坐标，对所述当前组件进行定位，并将所述高分辨率图片填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述当前组件的显示宽度、显示高度和显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件，具体为：
    所述客户端将所述当前模块的左上角作为坐标原点，根据所述当前组件的显示宽度、显示高度和显示坐标，对所述当前组件进行定位，并将所述高分辨率图片以及所述其他资源文件填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述低分辨率图片、所述当前组件的显示宽度、显示高度和显示坐标，绘制所述当前组件，具体为：
    所述客户端将所述当前模块的左上角作为坐标原点，根据所述当前组件的显示宽度、显示高度和显示坐标，对所述当前组件进行定位，并将所述低分辨率图片填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述当前组件的显示宽度、显示高度和显示坐标，以及所述低分辨率图片和所述其他资源文件，所述绘制当前组件，具体为：
    所述客户端将所述当前模块的左上角作为坐标原点，根据所述当前组件的显示宽度、显示高度和显示坐标，对所述当前组件进行定位，并将所述低分辨率图片以及所述其他资源文件填充到所述当前组件中，对所述当前组件进行显示。
  9. 一种屏幕适配的方法，其特征在于，包括以下步骤：
    E1)客户端从服务器端获取用户界面数据包，对所述用户界面数据包进行解析，得到全局模块的绘制信息和各个组件的绘制信息，所述全局模块包含所述用户界面中的所有组件；
    E2)所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤E3；如果所述屏幕方向为横屏，则执行步骤E4；
    E3)所述客户端将所述全局模块的显示宽度设置为所述设备的屏幕宽度，根据所述全局模块的显示宽度和所述全局模块的绘制信息，获取所述全局模块的显示高度，并执行步骤E5；
    E4)所述客户端将所述全局模块的显示高度设置为所述设备的屏幕宽度，根据所述全局模块的显示高度和所述全局模块的绘制信息，获取所述全局模块的显示宽度，并执行步骤E5；
    E5)所述客户端根据所述全局模块的显示宽度、所述全局模块的显示高度、所述各个组件的绘制信息，获取所述各个组件的显示宽度、显示高度和显示坐标；根据所述各个组件的显示宽度、显示高度和显示坐标，以及需要填充到所述各个组件中的资源文件，绘制所述各个组件，并执行步骤E6；以及
    E6)所述客户端监控所述设备的屏幕方向，并在监控到所述设备的屏幕方向发生变化时，返回步骤E2。
  10. 如权利要求9所述的方法，其特征在于，所述客户端判断出所述屏幕方向为竖屏之后，还包括：
    所述客户端根据所述全局模块的绘制信息，对所述全局模块的宽高比进行判断；
    如果所述全局模块的宽高比小于设备的屏幕宽高比，所述客户端将所述全局模块的显示高度设置为所述设备的屏幕高度，根据所述全局模块的显示高度和所述全局模块的绘制信息，获取所述全局模块的显示宽度，并执行步骤E5；
    如果所述全局模块的宽高比等于所述设备的屏幕宽高比，所述客户端将所述全局模块的显示高度设置为所述设备的屏幕高度，将所述全局模块的显示宽度设置为所述设备的屏幕宽度，并执行步骤E5；
    如果所述全局模块的宽高比大于所述设备的屏幕宽高比，则执行步骤E3。
  11. 如权利要求9所述的方法，其特征在于，所述客户端判断出所述屏幕方向为横屏之后，还包括：
    所述客户端根据所述全局模块的绘制信息，对所述全局模块的宽高比进行判断，如果所述全局模块的宽高比小于所述设备的屏幕高宽比，则执行步骤E4；
    如果所述全局模块的宽高比等于所述设备的屏幕高宽比，客户端将全局模块的显示高度设置为设备的屏幕宽度，将全局模块的显示宽度设置为设备的屏幕高度，并执行步骤E5；
    如果所述全局模块的宽高比大于所述设备的屏幕高宽比，所述客户端将所述全局模块的显示宽度设置为所述设备的屏幕高度，根据所述全局模块的显示宽度和所述全局模块的绘制信息，获取所述全局模块的显示高度，并执行步骤E5。
  12. 如权利要求9所述的方法，其特征在于，所述步骤E5，具体包括：
    F1)所述客户端从所述全局模块中选取一个未被绘制的组件作为当前组件，根据所述全局模块的显示宽度、显示高度，以及所述当前组件的绘制信息，获取所述当前组件的显示宽度、显示高度和显示坐标；
    F2)所述客户端根据所述当前组件的显示宽度、显示高度和显示坐标，以及需要填充到所述当前组件中的资源文件，绘制所述当前组件；以及
    F3)所述客户端判断所述全局模块中是否包含未被绘制的组件，如果是，则返回步骤F1；否则，执行步骤E6。
  13. 一种屏幕适配的方法，其特征在于，包括以下步骤：
    H1)客户端从服务器端获取用户界面数据包，对所述用户界面数据包进行解析，得到各个模块的绘制信息和各个组件的绘制信息；
    H2)所述客户端根据自身所在设备的屏幕尺寸、所述各个模块的绘制信息和所述各个组件的绘制信息，获取并保存所述各个组件的竖屏显示信息和横屏显示信息；
    H3)所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤H4；如果所述屏幕方向为横屏，则执行步骤H5；
    H4)所述客户端根据所述各个组件的竖屏显示信息绘制所述各个组件，并执行步骤H6；
    H5)所述客户端根据所述各个组件的横屏显示信息绘制所述各个组件，并执行步骤H6；
    H6)所述客户端监控所述设备的屏幕方向，并在监控到所述设备的屏幕方向发生变化时，执行步骤H7；
    H7)所述客户端对自身所在设备的屏幕方向进行判断，如果所述屏幕方向为竖屏，则执行步骤H8；如果所述屏幕方向为横屏，则执行步骤H9；
    H8)所述客户端根据所述各个组件的竖屏显示信息绘制所述各个组件，并执行步骤H6；以及
    H9)所述客户端根据所述各个组件的横屏显示信息绘制所述各个组件，并执行步骤H6。
  14. 如权利要求13所述的方法，其特征在于，所述步骤H6，还包括：
    所述客户端监控所述各个组件的组件属性信息，并在监控到所述组件属性信息发生改变时，对改变后的组件属性信息进行保存；
    所述步骤H8，具体为：所述客户端根据所述各个组件的竖屏显示信息绘制所述各个组件，判断自身是否保存有组件属性信息，如果是，则根据所述组件属性信息修改对应组件的属性，删除所述组件属性信息，并返回步骤H6；否则，返回步骤H6；
    所述步骤H9，具体为：所述客户端根据所述各个组件的横屏显示信息绘制所述各个组件，判断自身是否保存有组件属性信息，如果是，则根据所述组件属性信息修改对应组件的属性，删除所述组件属性信息，并返回步骤H6；否则，返回步骤H6。
  15. 如权利要求13所述的方法，其特征在于，所述用户界面包括多个模块，所述用户界面中的各个模块按照垂直方向排列，每个模块包含一个或多个组件；所述各个组件的竖屏显示信息包括所述各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，所述各个组件的横屏显示信息包括所述各个组件的横屏显示宽度、横屏显示高度和横屏显示坐标；
    所述客户端根据自身所在设备的屏幕尺寸、所述各个模块的绘制信息和所述各个组件的绘制信息，获取并保存所述各个组件的竖屏显示信息，具体包括：
    K1)所述客户端选取位于所述用户界面顶部的模块作为当前模块，将所述当前模块的竖屏显示坐标设置为设备屏幕的左上角，保存所述当前模块的竖屏显示坐标，将所述当前模块的竖屏显示宽度设置为所述设备的屏幕宽度，根据所述当前模块的绘制信息和竖屏显示宽度，获取所述当前模块的竖屏显示高度；
    K2)所述客户端根据所述当前模块的竖屏显示宽度、竖屏显示高度，以及所述当前模块中的各个组件的绘制信息，获取并保存所述当前模块中的各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标；
    K3)所述客户端判断所述用户界面中是否包含未被处理过的模块，如果是，则执行步骤K4；否则，确定获取竖屏显示信息完毕；
    K4)所述客户端获取所述当前模块的竖屏显示纵坐标与所述当前模块的竖屏显示高度相加得到的运算结果，选取所述用户界面中与所述当前模块相邻且位于所述当前模块下方的模块作为更新后的当前模块；以及
    K5)所述客户端将所述当前模块的竖屏显示纵坐标设置为所述运算结果，将所述当前模块的竖屏显示横坐标设置为零，将所述当前模块的竖屏显示宽度设置为所述设备的屏幕宽度，根据所述当前模块的绘制信息和竖屏显示宽度，获取所述当前模块的竖屏显示高度，并返回步骤K2；
    所述客户端根据自身所在设备的屏幕尺寸、所述各个模块的绘制信息和所述各个组件的绘制信息，获取并保存所述各个组件的横屏显示信息，具体包括：
    L1)所述客户端选取位于所述用户界面顶部的模块作为当前模块，将所述当前模块的横屏显示坐标设置为设备屏幕的左上角，保存所述当前模块的横屏显示坐标，将所述当前模块的横屏显示宽度设置为所述设备的屏幕高度，根据所述当前模块的绘制信息和横屏显示宽度，获取所述当前模块的横屏显示高度；
    L2)所述客户端根据所述当前模块的横屏显示宽度、横屏显示高度，以及所述当前模块中的各个组件的绘制信息，获取并保存所述当前模块中的各个组件的横屏显示宽度、横屏显示高度和横屏显示坐标；
    L3)所述客户端判断所述用户界面中是否包含未被处理过的模块，如果是，则执行步骤L4；否则， 确定获取横屏显示信息完毕；
    L4)所述客户端获取所述当前模块的显示纵坐标与所述当前模块的横屏显示高度相加得到的运算结果，选取所述用户界面中与所述当前模块相邻且位于所述当前模块下方的模块作为更新后的当前模块；以及
    L5)所述客户端将所述当前模块的横屏显示纵坐标设置为所述运算结果，将所述当前模块的横屏显示横坐标设置为零，将所述当前模块的横屏显示宽度设置为所述设备的屏幕高度，根据所述当前模块的绘制信息和横屏显示宽度，获取所述当前模块的横屏显示高度，并返回步骤L2。
  16. 如权利要求15所述的方法，其特征在于，所述当前模块的绘制信息为所述当前模块的宽高比或高宽比；
    所述客户端根据所述当前模块的绘制信息和竖屏显示宽度，获取所述当前模块的竖屏显示高度，具体为：
    所述客户端将所述当前模块的竖屏显示宽度除以所述当前模块的宽高比，得到所述当前模块的竖屏显示高度；或者，
    所述客户端将所述当前模块的竖屏显示宽度乘以所述当前模块的高宽比，得到所述当前模块的竖屏显示高度；
    所述客户端根据所述当前模块的绘制信息和横屏显示宽度，获取所述当前模块的横屏显示高度，具体为：
    所述客户端将所述当前模块的横屏显示宽度除以所述当前模块的宽高比，得到所述当前模块的横屏显示高度；或者，
    所述客户端将所述当前模块的横屏显示宽度乘以所述当前模块的高宽比，得到所述当前模块的横屏显示高度。
  17. 如权利要求15所述的方法，其特征在于，所述各个组件的绘制信息包括所述各个组件的相对坐标、相对宽度和相对高度，所述各个组件的相对坐标包括所述各个组件的相对横坐标和相对纵坐标；所述各个组件的竖屏显示坐标和横屏显示坐标均是以所述当前模块的左上角为坐标原点，所述各个组件的左上角的坐标；所述各个组件的竖屏显示坐标包括所述各个组件的竖屏显示纵坐标和竖屏显示横坐标；所述各个组件的横屏显示坐标包括所述各个组件的横屏显示纵坐标和横屏显示横坐标；
    所述客户端根据所述当前模块的竖屏显示宽度、竖屏显示高度，以及所述当前模块中的各个组件的绘制信息，获取所述当前模块中的各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，具体为：
    所述客户端将所述当前模块的竖屏显示宽度分别与所述当前模块中的各个组件的相对宽度相乘，得到所述当前模块中的各个组件的竖屏显示宽度；将所述当前模块的竖屏显示高度与所述当前模块中的各个组件的相对高度相乘，得到所述当前模块中的各个组件的竖屏显示高度；将所述当前模块的竖屏显示宽度分别与所述当前模块中的各个组件的相对横坐标相乘，得到所述当前模块中的各个组件的竖屏显示横坐标；将所述当前模块的竖屏显示高度分别与所述当前模块中的各个组件的相对纵坐标相乘，得到所述各个组件的竖屏显示纵坐标；
    所述客户端根据所述当前模块的横屏显示宽度、横屏显示高度，以及所述当前模块中的各个组件的绘制信息，获取所述当前模块中的各个组件的横屏显示宽度、横屏显示高度和横屏显示坐标，具体为：
    所述客户端将所述当前模块的横屏显示宽度分别与所述当前模块中的各个组件的相对宽度相乘，得到所述当前模块中的各个组件的横屏显示宽度；将所述当前模块的横屏显示高度与所述当前模块中的各个组件的相对高度相乘，得到所述当前模块中的各个组件的横屏显示高度；将所述当前模块的横屏显示宽度分别与所述当前模块中的各个组件的相对横坐标相乘，得到所述当前模块中的各个组件的横屏显示横坐标；将所述当前模块的横屏显示高度分别与所述当前模块中的各个组件的相对纵坐标相乘，得到所述各个组件的横屏显示纵坐标。
  18. 如权利要求15所述的方法，其特征在于，所述步骤H1之后，还包括：
    所述客户端根据自身所在设备的屏幕尺寸和所述各个模块的绘制信息，获取并保存所述各个模块的竖屏显示坐标和横屏显示坐标；
    所述客户端根据所述各个组件的竖屏显示信息绘制所述各个组件，具体包括：
    M1)所述客户端从所述用户界面中选取一个未被处理过的模块作为当前模块，从所述当前模块中选取一个未被绘制的组件作为当前组件；
    M2)所述客户端判断是否需要向所述当前组件中填充图片，如果是，则执行步骤M4；否则，执行步骤M3；
    M3)所述客户端根据所述当前组件的内容，获取需要填充到所述当前组件中的资源文件，根据所述资源文件、所述当前模块的竖屏显示坐标以及所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示 坐标，绘制所述当前组件，并执行步骤M11；
    M4)所述客户端判断所述设备的屏幕密度是否大于预设密度值，如果是，则执行步骤M5；否则，执行步骤M8；
    M5)所述客户端根据所述当前组件的内容，获取对应的高分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤M7；否则，执行步骤M6；
    M6)所述客户端根据所述高分辨率图片、所述当前模块的竖屏显示坐标以及所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，绘制所述当前组件，并执行步骤M11；
    M7)所述客户端根据所述当前组件的内容，获取所述其他资源文件，根据所述当前模块的竖屏显示坐标、所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤M11；
    M8)所述客户端根据当前组件的内容，获取对应的低分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤M10；否则，执行步骤M9；
    M9)所述客户端根据所述低分辨率图片、所述当前模块的竖屏显示坐标以及所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，绘制所述当前组件，并执行步骤M11；
    M10)所述客户端根据所述当前组件的内容，获取除图片之外的其他资源文件，根据所述当前模块的竖屏显示坐标、所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，以及所述低分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤M11；
    M11)所述客户端判断所述当前模块中是否包含未被绘制的组件，如果是，则从所述当前模块中选取一个未被绘制的组件作为当前组件，并返回步骤M2；否则，执行步骤M12；以及
    M12)所述客户端判断所述用户界面中是否包含未被处理过的模块，如果是，则返回步骤M1；否则，确定绘制组件完毕；
    所述客户端根据所述各个组件的横屏显示信息绘制所述各个组件，具体包括：
    N1)所述客户端从所述用户界面中选取一个未被处理过的模块作为当前模块，从所述当前模块中选取一个未被绘制的组件作为当前组件；
    N2)所述客户端判断是否需要向所述当前组件中填充图片，如果是，则执行步骤N4；否则，执行步骤N3；
    N3)所述客户端根据所述当前组件的内容，获取需要填充到所述当前组件中的资源文件，根据所述资源文件、所述当前模块的横屏显示坐标以及所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，并执行步骤N11；
    N4)所述客户端判断所述设备的屏幕密度是否大于预设密度值，如果是，则执行步骤N5；否则，执行步骤N8；
    N5)所述客户端根据所述当前组件的内容，获取对应的高分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤N7；否则，执行步骤N6；
    N6)所述客户端根据所述高分辨率图片、所述当前模块的横屏显示坐标以及所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，并执行步骤N11；
    N7)所述客户端根据所述当前组件的内容，获取所述其他资源文件，根据所述当前模块的横屏显示坐标、所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤N11；
    N8)所述客户端根据当前组件的内容，获取对应的低分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤N10；否则，执行步骤N9；
    N9)所述客户端根据所述低分辨率图片、所述当前模块的横屏显示坐标以及所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，并执行步骤N11；
    N10)所述客户端根据所述当前组件的内容，获取除图片之外的其他资源文件，根据所述当前模块的横屏显示坐标、所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，以及所述低分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤N11；
    N11)所述客户端判断所述当前模块中是否包含未被绘制的组件，如果是，则从所述当前模块中选取一个未被绘制的组件作为当前组件，并返回步骤N2；否则，执行步骤N12；以及
    N12)所述客户端判断所述用户界面中是否包含未被处理过的模块，如果是，则返回步骤N1；否则，确定绘制组件完毕。
  19. 如权利要求18所述的方法，其特征在于，所述客户端根据所述资源文件、所述当前模块的竖屏显示坐标以及所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的竖屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，对所述当前组件进行定位，并将所述资源文件填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述高分辨率图片、所述当前模块的竖屏显示坐标以及所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的竖屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，对所述当前组件进行定位，并将所述高分辨率图片填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述当前模块的竖屏显示坐标、所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的竖屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，对所述当前组件进行定位，并将所述高分辨率图片以及所述其他资源文件填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述低分辨率图片、所述当前模块的竖屏显示坐标以及所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的竖屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，对所述当前组件进行定位，并将所述低分辨率图片填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述当前模块的竖屏显示坐标、所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，以及所述低分辨率图片和所述其他资源文件，所述绘制当前组件，具体为：
    所述客户端根据所述当前模块的竖屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，对所述当前组件进行定位，并将所述低分辨率图片以及所述其他资源文件填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述资源文件、所述当前模块的横屏显示坐标以及所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的横屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，对所述当前组件进行定位，并将所述资源文件填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述高分辨率图片、所述当前模块的横屏显示坐标以及所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的横屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，对所述当前组件进行定位，并将所述高分辨率图片填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述当前模块的横屏显示坐标、所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的横屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，对所述当前组件进行定位，并将所述高分辨率图片以及所述其他资源文件填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述低分辨率图片、所述当前模块的横屏显示坐标以及所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，具体为：
    所述客户端根据所述当前模块的横屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，对所述当前组件进行定位，并将所述低分辨率图片填充到所述当前组件中，对所述当前组件进行显示；
    所述客户端根据所述当前模块的横屏显示坐标、所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，以及所述低分辨率图片和所述其他资源文件，所述绘制当前组件，具体为：
    所述客户端根据所述当前模块的横屏显示坐标，确定所述当前模块的左上角的位置，并将所述当前模块的左上角作为坐标原点，根据所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，对所述当前组件进行定位，并将所述低分辨率图片以及所述其他资源文件填充到所述当前组件中，对所述当前组件进行显示。
  20. 如权利要求13所述的方法，其特征在于，所述用户界面包括全局模块，所述全局模块包含所述用户界面中的所有组件；
    所述各个组件的竖屏显示坐标包括所述各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，所述各个组件的横屏显示坐标包括所述横屏显示宽度、横屏显示高度和横屏显示坐标；
    所述客户端根据自身所在设备的屏幕尺寸、所述各个模块的绘制信息和所述各个组件的绘制信息，获取并保存所述各个组件的竖屏显示信息，具体包括：
    P1)所述客户端根据所述全局模块的绘制信息，判断所述全局模块的宽高比进行判断，如果所述全局模块的宽高比小于所述设备的屏幕宽高比，则执行步骤P2；如果所述全局模块的宽高比等于所述设备的屏幕宽高比，则执行步骤P3；如果所述全局模块的宽高比大于所述设备的屏幕宽高比，则执行步骤P4；
    P2)所述客户端将所述全局模块的竖屏显示高度设置为所述设备的屏幕高度，根据所述全局模块的竖屏显示高度和所述全局模块的绘制信息，获取所述全局模块的竖屏显示宽度，并执行步骤P5；
    P3)所述客户端将所述全局模块的竖屏显示高度设置为所述设备的屏幕高度，将所述全局模块的竖屏显示宽度设置为所述设备的屏幕宽度，并执行步骤P5；
    P4)所述客户端将所述全局模块的竖屏显示宽度设置为所述设备的屏幕宽度，根据所述全局模块的竖屏显示宽度和所述全局模块的绘制信息，获取所述全局模块的竖屏显示高度，并执行步骤P5；以及
    P5)所述客户端根据所述全局模块的竖屏显示宽度、所述全局模块的竖屏显示高度以及所述各个组件的绘制信息，获取并保存所述各个组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标；
    所述客户端根据自身所在设备的屏幕尺寸、所述各个模块的绘制信息和所述各个组件的绘制信息，获取并保存所述各个组件的横屏显示信息，具体包括：
    Q1)所述客户端根据所述全局模块的绘制信息，对所述全局模块的宽高比进行判断，如果所述全局模块的宽高比小于所述设备的屏幕高宽比，则执行步骤Q2；如果所述全局模块的宽高比等于所述设备的屏幕高宽比，则执行步骤Q3；如果所述全局模块的宽高比大于所述设备的屏幕高宽比，则执行步骤Q4；
    Q2)所述客户端将所述全局模块的横屏显示高度设置为所述设备的屏幕宽度，根据所述全局模块的横屏显示高度和所述全局模块的绘制信息，获取所述全局模块的横屏显示宽度，并执行步骤Q5；
    Q3)所述客户端将全局模块的横屏显示高度设置为设备的屏幕宽度，将全局模块的横屏显示宽度设置为设备的屏幕高度，并执行步骤Q5；
    Q4)所述客户端将所述全局模块的横屏显示宽度设置为所述设备的屏幕高度，根据所述全局模块的横屏显示宽度和所述全局模块的绘制信息，获取所述全局模块的横屏显示高度，并执行步骤Q5；以及
    Q5)所述客户端根据所述全局模块的横屏显示宽度、所述全局模块的横屏显示高度以及所述各个组件的绘制信息，获取并保存所述各个组件的横屏显示宽度、横屏显示高度和横屏显示坐标。
  21. 如权利要求20所述的方法，其特征在于，所述客户端根据所述各个组件的竖屏显示信息绘制所述各个组件，具体包括：
    R1)所述客户端从所述用户界面中选取一个未被绘制的组件作为当前组件；
    R2)所述客户端判断是否需要向所述当前组件中填充图片，如果是，则执行步骤R4；否则，执行步骤R3；
    R3)所述客户端根据所述当前组件的内容，获取需要填充到所述当前组件中的资源文件，根据所述资源文件、所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，绘制所述当前组件，并执行步骤R11；
    R4)所述客户端判断所述设备的屏幕密度是否大于预设密度值，如果是，则执行步骤R5；否则，执行步骤R8；
    R5)所述客户端根据所述当前组件的内容，获取对应的高分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤R7；否则，执行步骤R6；
    R6)所述客户端根据所述高分辨率图片、所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，绘制所述当前组件，并执行步骤R11；
    R7)所述客户端根据所述当前组件的内容，获取所述其他资源文件，根据所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤R11；
    R8)所述客户端根据当前组件的内容，获取对应的低分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤R10；否则，执行步骤R9；
    R9)所述客户端根据所述低分辨率图片、所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示 坐标，绘制所述当前组件，并执行步骤R11；
    R10)所述客户端根据所述当前组件的内容，获取除图片之外的其他资源文件，根据所述当前组件的竖屏显示宽度、竖屏显示高度和竖屏显示坐标，以及所述低分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤R11；以及
    R11)所述客户端判断所述用户界面中是否包含未被绘制的组件，如果是，则返回步骤R1；否则，确定绘制组件完毕；
    所述客户端根据所述各个组件的横屏显示信息绘制所述各个组件，具体包括：
    S1)所述客户端从所述用户界面中选取一个未被绘制的组件作为当前组件；
    S2)所述客户端判断是否需要向所述当前组件中填充图片，如果是，则执行步骤S4；否则，执行步骤S3；
    S3)所述客户端根据所述当前组件的内容，获取需要填充到所述当前组件中的资源文件，根据所述资源文件、所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，并执行步骤S11；
    S4)所述客户端判断所述设备的屏幕密度是否大于预设密度值，如果是，则执行步骤S5；否则，执行步骤S8；
    S5)所述客户端根据所述当前组件的内容，获取对应的高分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤S7；否则，执行步骤S6；
    S6)所述客户端根据所述高分辨率图片、所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，并执行步骤S11；
    S7)所述客户端根据所述当前组件的内容，获取所述其他资源文件，根据所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，以及所述高分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤S11；
    S8)所述客户端根据当前组件的内容，获取对应的低分辨率图片，判断是否需要向所述当前组件中填充除图片之外的其他资源文件，如果是，则执行步骤S10；否则，执行步骤S9；
    S9)所述客户端根据所述低分辨率图片、所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，绘制所述当前组件，并执行步骤S11；
    S10)所述客户端根据所述当前组件的内容，获取除图片之外的其他资源文件，根据所述当前组件的横屏显示宽度、横屏显示高度和横屏显示坐标，以及所述低分辨率图片和所述其他资源文件，绘制所述当前组件，并执行步骤S11；以及
    S11)所述客户端判断所述用户界面中是否包含未被绘制的组件，如果是，则返回步骤S1；否则，确定绘制组件完毕。
PCT/CN2015/073471 2014-03-04 2015-03-02 一种屏幕适配的方法和装置 WO2015131787A1 (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
US15/122,647 US10089963B2 (en) 2014-03-04 2015-03-02 Screen adaptation method and apparatus

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201410077059.0 2014-03-04
CN201410077059.0A CN103823620B (zh) 2014-03-04 2014-03-04 一种屏幕适配的方法和装置

Publications (1)

Publication Number Publication Date
WO2015131787A1 true WO2015131787A1 (zh) 2015-09-11

Family

ID=50758713

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2015/073471 WO2015131787A1 (zh) 2014-03-04 2015-03-02 一种屏幕适配的方法和装置

Country Status (3)

Country Link
US (1) US10089963B2 (zh)
CN (1) CN103823620B (zh)
WO (1) WO2015131787A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107094200A (zh) * 2016-12-14 2017-08-25 口碑控股有限公司 一种视图调整的方法及装置

Families Citing this family (20)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103823620B (zh) * 2014-03-04 2017-01-25 飞天诚信科技股份有限公司 一种屏幕适配的方法和装置
CN105187634A (zh) * 2015-08-07 2015-12-23 北京思特奇信息技术股份有限公司 一种终端应用动态适配智能终端屏幕的方法及系统
CN105159552B (zh) * 2015-08-27 2019-04-23 Oppo广东移动通信有限公司 一种浏览网页的翻页控制方法及用户终端
CN105760178B (zh) * 2016-03-17 2019-03-26 网易（杭州）网络有限公司 对界面控件进行适配的方法及装置
CN105959825A (zh) * 2016-04-29 2016-09-21 乐视控股（北京）有限公司 一种竖直全屏播放方法、装置及其移动播放终端
CN108205398B (zh) * 2016-12-16 2021-06-11 腾讯科技（深圳）有限公司 网页动画适配屏幕的方法和装置
CN107168712B (zh) * 2017-05-19 2021-02-23 Oppo广东移动通信有限公司 界面绘制方法、移动终端及计算机可读存储介质
CN107300928B (zh) * 2017-06-23 2019-11-05 京东方科技集团股份有限公司 一种电子设备及其控制方法、系统
CN107729072B (zh) * 2017-08-25 2020-05-26 深圳壹账通智能科技有限公司 控件属性读取方法、装置、终端及可读存储介质
CN109783181B (zh) * 2019-01-31 2019-12-20 掌阅科技股份有限公司 屏幕适配显示方法、电子设备及计算机存储介质
CN110851368A (zh) * 2019-11-19 2020-02-28 天津车之家数据信息技术有限公司 一种多设备协同测试方法、装置、计算设备和系统
CN113126937B (zh) * 2019-12-31 2023-08-01 Tcl科技集团股份有限公司 一种显示终端调整方法及显示终端
CN111399789B (zh) * 2020-02-20 2021-11-19 华为技术有限公司 界面布局方法、装置及系统
CN113553014B (zh) * 2020-09-10 2023-01-06 华为技术有限公司 多窗口投屏场景下的应用界面显示方法及电子设备
CN112774186B (zh) * 2021-01-08 2023-05-23 深圳市灰鲨科技有限公司 一种应用于智能终端的交互显示系统及方法
CN113422906B (zh) * 2021-06-22 2022-08-26 平安普惠企业管理有限公司 设置分辨率的方法、装置、计算机设备和存储介质
CN114327335B (zh) * 2021-12-27 2024-04-02 珠海豹趣科技有限公司 一种界面处理方法及装置
CN114489909B (zh) * 2022-02-07 2023-09-08 智道网联科技(北京)有限公司 车载应用的屏幕适配方法、装置及电子设备、存储介质
CN114610426B (zh) * 2022-03-04 2023-09-08 腾讯科技（深圳）有限公司 一种调整界面布局的方法、装置、设备及存储介质
CN114816632A (zh) * 2022-04-22 2022-07-29 深圳市宇航软件股份有限公司 看板布局配置方法和装置、看板显示方法、设备和介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101369210A (zh) * 2008-08-22 2009-02-18 深圳华为通信技术有限公司 一种调整用户界面元素的方法及装置
CN102890632A (zh) * 2012-09-18 2013-01-23 深圳市融创天下科技股份有限公司 一种屏幕自适应方法、系统和终端设备
CN103823620A (zh) * 2014-03-04 2014-05-28 飞天诚信科技股份有限公司 一种屏幕适配的方法和装置

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2007114456A1 (en) * 2006-03-29 2007-10-11 Casio Computer Co., Ltd. Server apparatus of computer system
JP5150213B2 (ja) * 2007-11-07 2013-02-20 株式会社カテナス 構造化文書描画システム、構造化文書描画方法およびプログラム
US20120154297A1 (en) 2010-12-21 2012-06-21 Microsoft Corporation Display-screen adaptation for interactive devices
US8872855B2 (en) * 2011-07-21 2014-10-28 Flipboard, Inc. Adjusting orientation of content regions in a page layout
CN103164197A (zh) * 2011-12-14 2013-06-19 中兴通讯股份有限公司 Ui布局自适应方法、移动设备以及布局生成设备
CN103488403B (zh) * 2013-08-30 2018-02-02 小米科技有限责任公司 界面布局切换方法、装置和移动终端

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101369210A (zh) * 2008-08-22 2009-02-18 深圳华为通信技术有限公司 一种调整用户界面元素的方法及装置
CN102890632A (zh) * 2012-09-18 2013-01-23 深圳市融创天下科技股份有限公司 一种屏幕自适应方法、系统和终端设备
CN103823620A (zh) * 2014-03-04 2014-05-28 飞天诚信科技股份有限公司 一种屏幕适配的方法和装置

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107094200A (zh) * 2016-12-14 2017-08-25 口碑控股有限公司 一种视图调整的方法及装置
CN107094200B (zh) * 2016-12-14 2020-03-10 口碑控股有限公司 一种视图调整的方法及装置

Also Published As

Publication number Publication date
US10089963B2 (en) 2018-10-02
CN103823620B (zh) 2017-01-25
CN103823620A (zh) 2014-05-28
US20170069297A1 (en) 2017-03-09

Similar Documents

Publication Publication Date Title
WO2015131787A1 (zh) 一种屏幕适配的方法和装置
US9792670B2 (en) Picture display method and apparatus
US8913068B1 (en) Displaying video on a browser
EP2687965A1 (en) Icon generation method
US10089957B2 (en) Page display method and terminal
US20190130875A1 (en) Application Program Processing Method And Terminal Device
CN111552530A (zh) 用户界面的终端屏幕适配方法、装置及设备
WO2020192451A1 (en) Real-time picture projection method and apparatus of ar glasses screen, controller and medium
US20220328019A1 (en) Display terminal adjustment method and display terminal
US20230052979A1 (en) Image display method and apparatus, and medium
WO2023050829A1 (zh) 视频帧处理方法、装置、电子设备以及存储介质
WO2023019995A1 (zh) 训练方法、译文展示方法、装置、电子设备以及存储介质
CN113657518B (zh) 训练方法、目标图像检测方法、装置、电子设备以及介质
CN110858388B (zh) 一种增强视频画质的方法和装置
CN108989872B (zh) 一种安卓电视背景快速切换方法、框架、服务器及存储介质
CN111813466A (zh) 水印添加方法、装置、终端设备及计算机存储介质
CN111460342B (zh) 页面的渲染展示方法、装置、电子设备及计算机存储介质
CN105389308A (zh) 网页的显示处理方法及装置
US20140184603A1 (en) Method to improve usability of high pixel density displays
US9594955B2 (en) Modified wallis filter for improving the local contrast of GIS related images
US10067914B2 (en) Techniques for blending document objects
CN117009686A (zh) 页面内容的处理方法、装置及电子设备
CN113791857A (zh) Linux系统中应用窗口背景模糊处理方法及装置
CN113613043A (zh) 屏幕显示和图像处理方法以及嵌入式设备和云服务器
US20140354627A1 (en) Rendering a 3d shape

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 15758728

Country of ref document: EP

Kind code of ref document: A1

WWE Wipo information: entry into national phase

Ref document number: 15122647

Country of ref document: US

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 15758728

Country of ref document: EP

Kind code of ref document: A1