Theme and device adaptive switching method suitable for domestic mobile terminal software

Abstract

The invention discloses a theme and equipment adaptive switching method suitable for domestic mobile terminal software, which comprises the following steps: designing theme and equipment style specifications, creating style files, and describing view style attributes of different themes and different equipment; the domestic mobile terminal locally stores required style files and static resource files in an off-line manner; the domestic mobile terminal software application view adopts a responsive style layout, and an application configuration module sets page styles according to sizes, colors and static resources specified in the equipment style file and the theme style file; after the domestic mobile terminal software application is started, the application response type updating module obtains the device type and the subject name, matches and updates the current subject and the device configuration information, matches the replacement device and the subject style file, and notifies the view to update the style, so that response type switching of multiple subjects and multiple devices of the mobile application is realized. According to the method, compatible operation of one set of application software on multiple domestic terminals can be realized, the layout can be automatically adjusted according to the equipment type, and meanwhile, free switching of multiple sets of themes is supported.

Description

Technical Field

[0001] The present invention relates to mobile communication technology, and in particular to a theme and device adaptive switching method applicable to domestic mobile terminal software. Background Art

[0002] Existing theme switching methods mostly use loops to traverse page views to achieve style switching, which has the problem of low efficiency when there are many views. At the same time, the theme switching method does not comprehensively consider the device differences and does not design a compatible switching method for mobile terminals of different sizes.

[0003] Document 1: CN invention patent CN105204709A. Vivo Mobile Communications Co., Ltd., Lu Yiling, Method and device for theme switching. 2015.12. A method for theme switching is disclosed. The method determines the theme type based on image and user characteristics to achieve theme switching, but does not elaborate on how to switch and update the theme, and the scenarios and processes it faces are also unclear.

[0004] Document 2: CN invention patent CN106569885A. LeTV Holdings (Beijing) Co., Ltd., Liu Liwei, application theme switching method and device. 2017.04. A method and device for switching application themes are disclosed. The method describes how to achieve theme switching through pre-stored style view files. However, the method determines the view of the style to be switched by traversing the views of the current page. When there are many page views, there are problems such as long query time and low efficiency. Summary of the invention

[0005] The purpose of the present invention is to propose a theme and device adaptive switching method suitable for domestic mobile software, to achieve adaptive layout of human-machine interface of various types of mobile phones and tablets and responsive switching of multiple themes such as day and night, while effectively improving the switching efficiency.

[0006] The technical solution to achieve the purpose of the present invention is: a method for adaptively switching themes and devices applicable to domestic mobile terminal software, comprising the following steps:

[0007] Step 1: Design theme and device style specifications and create style files to describe the view style properties of different themes and devices;

[0008] Step 2: Local offline storage of style files and static resource files required by domestic mobile terminals;

[0009] Step 3: The domestic mobile software application view adopts a responsive style layout and an application configuration module to set the page style according to the size, color and static resources specified in the device style file and the theme style file;

[0010] Step 4: After the domestic mobile software application is started, the application responsive update module obtains the device type and theme name, matches and updates the current theme and device configuration information, matches and replaces the device and theme style files, and notifies the view to update the style, thereby realizing responsive switching of multiple themes and multiple devices in the mobile application.

[0011] Further, in step 1, design the theme and device style specifications and create style files to describe the view style properties of different themes and different devices, including:

[0012] The device style specification describes the style of the device that the application needs to be compatible with, including the application font size, application icon size, login interface size, main interface navigation bar size, main router size, secondary router size, pop-up window size, and notch screen size;

[0013] The theme style specification describes the styles that the application needs to be compatible with the theme, including theme color, theme dark color, theme light color, background color, selected color, selected panel color, unselected color, success color, warning color, error color, theme default font style, title font style, login page background image resources, routing page background image resources, button background image resources, and other image resources;

[0014] Style files include device style files and theme style files. Device style files are used to describe the styles of applications on different devices, while theme style files are used to describe the styles of applications on different themes.

[0015] Furthermore, the style size is in pixels, the component color is in hexadecimal color code, and the icon resource is encoded in base64.

[0016] Further, in step 2, the domestic mobile terminal locally stores the required style files and static resource files offline, where:

[0017] The device style file is stored in the form of device.device type.json, the theme style file is stored in the form of heme.theme type.json, and the static resource file is provided because different themes in the theme style file depend on different image resources. The static resource files are stored in the local terminal folder with the theme name as the folder, and the image resources stored are in PNG format.

[0018] Further, in step 3, the domestic mobile software application view adopts a responsive style layout, designs an application configuration module, and sets the page style view according to the size, color and static resources specified in the device style file and the theme style file, wherein the application configuration module includes:

[0019] The device description unit obtains the current device type through the system interface;

[0020] Theme description unit, which obtains the historical theme type through the configuration unit. If it does not exist, the default theme type is used. Users can manually set the theme type;

[0021] Configuration unit, caches device types and topic types and provides a global query interface;

[0022] Update unit, match and update the theme and device configuration information.

[0023] Further, in step 4, after the domestic mobile software application is started, the application responsive update module obtains the device type and theme name, matches and updates the current theme and device configuration information, matches and replaces the device and theme style files, and notifies the view to update the style, so as to realize the responsive switching of multiple themes and multiple devices of the mobile application, wherein the application responsive update module includes:

[0024] View unit: The application interface consists of several view units. Each view unit should be styled according to the style specification. The size, color, and resource file should be obtained and saved from the style file.

[0025] Notification unit, when the application needs to switch themes or devices, it notifies the style control unit and the response unit of the current theme or device name;

[0026] The style control unit replaces the device and theme style codes upon receiving the switch notification;

[0027] The response unit provides a style response function to respond to the current theme or device name. When the response is triggered, the view automatically updates the style.

[0028] A theme and device adaptive switching system suitable for domestic mobile software implements the theme and device adaptive switching method suitable for domestic mobile software to achieve theme and device adaptive switching of domestic mobile software, which is divided into a style file creation module, an offline storage module, an application configuration module and an application responsive update module.

[0029] Compared with the prior art, the present invention has the following significant advantages: 1) It can realize the compatible operation of a set of application software on multiple domestic terminals, automatically adjust the layout according to the device type, and support free switching of multiple themes. 2) It adopts the method of local storage of style files and resource files, without the need to download a large number of resource files through the Internet, and can be suitable for adaptive switching of themes and devices in offline usage scenarios. 3) It can actively adjust the theme style and device layout during the operation of the application without affecting the business of the current application operation, and has high switching efficiency, usually with a switching time of milliseconds. 4) The style specifications provided can support the expansion of themes and devices. After the application software development is completed, it is necessary to expand the theme and expand the device. You only need to add the theme style file and the device style file, preset them to the terminal locally, and the style files can be recognized after the application is restarted, so as to realize flexible expansion of themes and devices. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] Figure 1 It is the main flow chart of the multi-topic and multi-device adaptive switching method of the present invention.

[0031] Figure 2 It is an application start sub-flow chart of the multi-topic and multi-device adaptive switching method of the present invention.

[0032] Figure 3 It is an automatic reading configuration sub-flow chart of the multi-topic and multi-device adaptive switching method of the present invention.

[0033] Figure 4 It is a sub-flow chart of actively setting parameters of the multi-topic and multi-device adaptive switching method of the present invention.

[0034] Figure 5 It is a notification update sub-flow chart of the multi-topic and multi-device adaptive switching method of the present invention.

[0035] Figure 6 It is a style update sub-flow chart of the multi-theme and multi-device adaptive switching method of the present invention.

[0036] Figure 7 It is a view update sub-flow chart of the multi-topic and multi-device adaptive switching method of the present invention. DETAILED DESCRIPTION

[0037] In order to make the purpose, technical solution and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not used to limit the present application.

[0038] A method for adaptively switching themes and devices applicable to domestic mobile software, comprising the following steps:

[0039] Step 1: Design theme and device style specifications and create style files to fully describe the style attributes of different themes and devices. The size is in pixels (px), the color is in hexadecimal color code, and the image resource file is encoded in base64.

[0040] The designed device style specification mainly describes the style of the device that the application needs to be compatible with. The device style specification (taking Huawei Mate30 device as an example) is as follows:

[0041] 1. Apply font size 0 to 5 levels: extra small, small, medium, large, extra large

[0042] 2. App Icon Size: 32px

[0043] 3. Login interface size: 400px

[0044] 4. Main interface navigation bar size: 580px*45px

[0045] 5. Main route size: 300px*400px

[0046] 6. Secondary routing size: 230px*400px

[0047] 7. Pop-up window size: 200px*150px

[0048] 8. Notch screen size: The default is 0px (taking Huawei Mate20 as an example, the notch screen size is 20px)

[0049] The designed theme style specification mainly describes the style of the theme that the application needs to be compatible with. The theme style specification (taking the default blue theme background as an example) is as follows:

[0050] 1. Theme color: #77caff

[0051] 2. Dark theme: #63acdf

[0052] 3. Theme light color: #b9eeff

[0053] 4. Background color: #032b46

[0054] 5. Select color: #68e6fb

[0055] 6. Select the panel color: #02193a

[0056] 7. Unselected color: #8d8d8d

[0057] 8. Success Color: #9bdff1

[0058] 9. Warning color: #f1b000

[0059] 10. Error Color: #b0001d

[0060] 11. Theme default font style: "Arial", "MicrosoftYaHei", "Hei", "Song", sans-serif′

[0061] 12. Title font style: 'MicrosoftYaHei-Bold'

[0062] 13. Login page background image resource: base64 encoding of the resource

[0063] 14. Routing page background image resource: base64 encoding of the resource

[0064] 15.Button background image resource: base64 encoding of the resource

[0065] 16. Other image resources: base64 encoding of the resource

[0066] Step 2: The domestic mobile terminal stores the required style files and static resource files locally offline. The style files include device style files and theme style files, as follows:

[0067] Device style files are used to describe the styles of applications on different devices, such as Huawei Mate30 mobile phone device style files (device.Mate30.json) and Huawei Mate30 mobile phone device style files (device.Mate20.json);

[0068] Theme style files are used to describe the styles applied to different themes, such as the default theme style file (theme.Default.json) and the dark theme style file (theme.Dark.json);

[0069] Static resource files: Different themes in the theme style files depend on different image resources. Supporting static resource files are provided and stored in folders with the theme name, such as the default theme and the night theme. The image resources stored in them are in PNG format.

[0070] Step 3: The domestic mobile software application view adopts a responsive style layout, and the application configuration module sets the page style according to the size, color and static resources specified in the device style file and the theme style file; the application configuration module specifically includes:

[0071] The device description unit obtains the current device type through the system interface;

[0072] Theme description unit, which obtains the historical theme type through the configuration unit. If it does not exist, the default theme type is used. Users can manually set the theme type;

[0073] Configuration unit, caches device types and topic types and provides a global query interface;

[0074] Update unit, matching and updating the subject and device configuration information;

[0075] Step 4: After the domestic mobile software is started, the application responsive update module obtains the device type and theme name, matches and updates the current theme and device configuration information, matches and replaces the device and theme style files, and notifies the view to update the style, so as to realize the responsive switching of multiple themes and multiple devices of the mobile application. The application responsive update module specifically includes:

[0076] View unit: The application interface consists of several view units. Each view unit should be styled according to the style specification. The size, color, and resource file should be obtained and saved from the style file.

[0077] Notification unit, when the application needs to switch themes or devices, it notifies the style control unit and the response unit of the current theme or device name;

[0078] The style control unit replaces the device and theme style codes upon receiving the switch notification;

[0079] The response unit provides a style response function to respond to the current theme or device name. When the response is triggered, the view automatically updates the style.

[0080] Example

[0081] In order to verify the effectiveness of the scheme of the present invention, the following experimental design was carried out.

[0082] The main process of implementing multi-theme and multi-device adaptive switching is as follows:

[0083] Step S1: The application is imported and installed successfully. Domestic mobile terminal application installation process: import the software installation package into the domestic mobile terminal, and execute the installation process through commands or start the installation process by clicking, and then start the application after the application is successfully installed. Figure 2 , describes the step S1 application startup sub-process, the specific steps are as follows:

[0084] Step S11, loading style files. When the application is started, it is necessary to load the device and theme style files applicable to the application. Device style files such as device.Mate20.json, device.Mate30.json, and device.M6.json describe the styles of Huawei Mate20 Pro, Huawei Mate30 Pro, and Huawei M6 devices respectively; theme style files such as theme.Default.json, theme.Light.json, and theme.Dark.json describe the default theme, day theme, and night theme respectively.

[0085] Step S12, loading logic files. In addition, the application needs to load logic units such as application configuration module and application responsive update module, the application configuration logic file is appConfig.js, and the application responsive update logic file is appEmitAction.js.

[0086] Step S13, subscribing to topics and device update notifications. This embodiment implements responsive triggering and processing through a "publish-subscribe" mechanism. After the logic file is loaded and initialized, the style control unit and each view unit need to subscribe to topics and device update events.

[0087] Step S14, obtaining a default theme and device type. In this embodiment, the configuration unit reads cache information to obtain the default device and theme type, which provide a basic basis for view rendering.

[0088] Step S15, loading the matching style code. In this embodiment, the matching style code is loaded from the style file according to the default theme and the device type, and is placed into the application cache.

[0089] Step S16, creating and rendering a basic view. In this embodiment, each view unit renders an application basic view according to the style code, matching the default device and theme type.

[0090] Step S2, the application starts and initializes the view. The domestic mobile terminal application startup process is as follows: click the application to enter the startup process, first load the necessary resource files, style files and logic files, then initialize the application state, and notify the main view and each subview to initialize the interface elements and control unit, and at the same time set the view state to the ready state. Figure 3 , describes the step S2 automatic configuration reading sub-process, the specific steps are as follows:

[0091] Step S21, read the device type through the system interface. In this embodiment, the application configuration module calls the system interface through the device description unit to obtain the current device type, such as Mate20, Mate30, M6, and sets the device read status to true.

[0092] Step S22, reading the theme type from the configuration file: The application configuration module reads the cached theme type from the configuration file through the theme description unit.

[0093] Step S23, determine the cached theme type. The application configuration module determines whether the currently cached theme type is consistent with the default theme. If the theme is consistent, it is processed as the default theme; if the theme is inconsistent, it is processed as the currently cached theme.

[0094] Step S24, reading the topic. According to the pre-determination condition, the application configuration module completes the reading of the topic type and sets the topic reading state to true.

[0095] Step S25, setting the device and subject type. In this embodiment, when the device and subject type read states are both true, the application configuration module sets the read device and subject type as global variables through the configuration unit and temporarily stores them in the memory space.

[0096] Step S26, writing into cache. In this embodiment, the application configuration module writes the global device and subject type variables in the memory space into the configuration file through the update unit, completing the writing into cache operation.

[0097] Combination Figure 4 , describes the step S2 active parameter setting sub-process, the specific steps are as follows:

[0098] Step S27, the user inputs the theme type. In this embodiment, the user is supported to actively set the theme type. The user inputs the theme type through the keyboard, and the application configuration module sets the theme type as a global variable through the configuration unit and temporarily stores it in the memory space.

[0099] Step S28, the user inputs the device type. In this embodiment, the user is supported to actively set the device type. The user inputs the device type through the keyboard, and the application configuration module sets the device type as a global variable and temporarily stores it in the memory space through the configuration unit.

[0100] Step S29, writing into cache. In this embodiment, the operation of writing into the device and subject type cache is the same as step S26.

[0101] Step S3, set the device type and theme type. The devices described in this embodiment cover mobile phones and tablets, and can adapt to most device sizes. The device types include Huawei Mate20 Pro, Huawei Mate30 Pro and Huawei M6. The theme types include default, daytime and nighttime themes. The default theme is blue, and the color code is #77caff; the daytime theme is mainly white background and black fonts, and the color code is #ffffff; the night theme is mainly black background and white fonts, and the color code is #000000. In this step, the application automatically or manually sets the current device type and theme type. Combined with Figure 5 , describes the step S3 notification update sub-process, the specific steps are as follows:

[0102] Step S31, triggering a topic and device update event. In this embodiment, the application responsive update module triggers a topic and device update event through a notification unit, and the unit subscribing to the event will trigger a callback and receive information.

[0103] Step S32, the style control unit receives the theme and device update events. In the preceding step S13 of this embodiment, the control unit subscribes to events, and when the notification unit triggers an event, the style control unit automatically receives the theme and device update events.

[0104] Step S33, the view unit receives the topic and device update events. In the preceding step S13 of this embodiment, the view unit subscribes to events, and when the notification unit triggers an event, the view unit automatically receives the topic and device update events.

[0105] Step S4, notify the view to update the style. The present invention constrains the application to subscribe to the topic and device update events of the control unit and the view unit respectively after startup. After determining the topic and device type that the application needs to set, the application publishes an update event through the notification unit. The control unit receives the notification to prepare for the style code update, and the view unit receives the notification to prepare for the view update. Figure 6 , describes the step S4 style update sub-process, the specific steps are as follows:

[0106] Step S41, triggering device and theme type update, which is the same as the preceding step S32 of this embodiment.

[0107] Step S42, determine whether there is a change from the default style. The application responsive update module determines whether the device and theme type currently cached are consistent with the device and theme of the configuration unit, if consistent, then complete the style code update; if inconsistent, go to step S43.

[0108] Step S43, updating the matching style code. The style control unit loads the corresponding device style and theme style files according to the set device and theme type, puts the files into the cache, reads the style code in the files, and updates the style code according to the key-value pairs.

[0109] Step S44, completing the style code update. Through the above steps, the control unit implements the style code update adapted to the device and theme.

[0110] Step S5, update the device and theme style code. The style code that controls the display effect of the application view is defined in the device and theme style files. The style code is composed of key-value pairs in the form of "key-value". Generally speaking, different devices and themes have the same "key" but different "values". When the control unit receives a device and theme update event, the control unit updates the value of each "key" in the style code according to the device and theme type to implement the device and theme style code update. Figure 1 Generally divided into main view and sub-view, the main view is usually loaded by default, sub-view is loaded in order according to logic, view unit has different states such as ready state and running state, and the view unit loads the default style when the application is initialized. Figure 7 , describes the view update sub-process in step S5, and the specific steps are as follows:

[0111] Step S51, triggering device and theme type update, which is the same as the preceding step S33 of this embodiment.

[0112] Step S52, determine whether there is a change from the default style. The application responsive update module determines whether the device and theme type currently cached are consistent with the device and theme of the configuration unit, if consistent, then complete the view update; if inconsistent, go to step S53.

[0113] Step S53, the view removes the old style. Each view unit first removes the old style, sets the value of the style code "value" that needs to be adjusted in the view unit to a null value, and sets the view from the running state to the ready state.

[0114] Step S54, refresh the view and update the style. Each view unit re-inserts the style code after the theme and device type are matched, and sets the "value" value to the current matching style code value.

[0115] Step S55, completing the responsive view update. Each view unit refreshes the view in the order of the main view and the sub-view, and changes from the ready state to the running state, completing the responsive view refresh, and realizing the theme and device adaptive refresh based on the domestic mobile terminal.

[0116] Step S6, the view completes the responsive style update. The responsive view refresh mechanism means that the view unit loads the unified style code that complies with the style specification and renders the default interface when it is initialized. When a view update event is received, the view update is triggered in the main view and sub-view queues, and the view is updated on demand through the "emit-action" method. When each view unit receives a device and theme update event, each view unit removes the old style code, updates it to the new style code, and refreshes the view to complete the responsive style update.

[0117] The technical features of the above embodiments may be combined arbitrarily. To make the description concise, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0118] The above-described embodiments only express several implementation methods of the present application, and the descriptions thereof are relatively specific and detailed, but they cannot be understood as limiting the scope of the present application. It should be pointed out that, for a person of ordinary skill in the art, several variations and improvements can be made without departing from the concept of the present application, and these all belong to the protection scope of the present application. Therefore, the protection scope of the present application shall be subject to the attached claims.

Claims

1. A method for adaptively switching themes and devices applicable to domestic mobile terminal software, characterized in that: The steps include: Step 1: Design theme and device style specifications and create style files to describe the view style properties of different themes and devices; Step 2: Local offline storage of style files and static resource files required by domestic mobile terminals; Step 3: The domestic mobile software application view adopts a responsive style layout, and the application configuration module sets the page style according to the size, color and static resources specified in the device style file and the theme style file; Step 4: After the domestic mobile software application is started, the application responsive update module obtains the device type and theme name, matches and updates the current theme and device configuration information, matches and replaces the device and theme style files, and notifies the view to update the style, thereby realizing responsive switching of multiple themes and multiple devices in the mobile application.

2. The method for adaptively switching themes and devices applicable to domestic mobile terminal software according to claim 1, characterized in that: Step 1: Design theme and device style specifications and create style files to describe the view style properties of different themes and devices, including: The device style specification describes the style of the device that the application needs to be compatible with, including the application font size, application icon size, login interface size, main interface navigation bar size, main router size, secondary router size, pop-up window size, and notch screen size; The theme style specification describes the styles that the application needs to be compatible with the theme, including theme color, theme dark color, theme light color, background color, selected color, selected panel color, unselected color, success color, warning color, error color, theme default font style, title font style, login page background image resources, routing page background image resources, button background image resources, and other image resources; Style files include device style files and theme style files. Device style files are used to describe the styles of applications on different devices, while theme style files are used to describe the styles of applications on different themes.

3. The method for adaptively switching themes and devices applicable to domestic mobile terminal software according to claim 2, characterized in that: The size is in pixels, the color is in hexadecimal color code, and the image resources are encoded in base64.

4. The method for adaptively switching themes and devices applicable to domestic mobile terminal software according to claim 1, characterized in that: Step 2: Local offline storage of style files and static resource files required by domestic mobile terminals, including: The device style file is stored in the form of device.device type.json, the theme style file is stored in the form of heme.theme type.json, and the static resource file is provided because different themes in the theme style file depend on different image resources. The static resource files are stored in the local terminal folder with the theme name as the folder, and the image resources stored are in PNG format.

5. The method for adaptively switching themes and devices applicable to domestic mobile terminal software according to claim 1, characterized in that: Step 3: The domestic mobile software application view adopts a responsive style layout. The application configuration module sets the page style view according to the size, color and static resources specified in the device style file and the theme style file. The application configuration module includes: The device description unit obtains the current device type through the system interface; Theme description unit, which obtains the historical theme type through the configuration unit. If it does not exist, the default theme type is used. Users can manually set the theme type; Configuration unit, caches device types and topic types and provides a global query interface; Update unit, match and update the theme and device configuration information.

6. The method for adaptively switching themes and devices applicable to domestic mobile terminal software according to claim 1, characterized in that: Step 4: After the domestic mobile software application is started, the application responsive update module obtains the device type and theme name, matches and updates the current theme and device configuration information, matches and replaces the device and theme style files, and notifies the view to update the style, so as to realize the responsive switching of multiple themes and multiple devices of the mobile application. The application responsive update module includes: View unit: The application interface consists of several view units. Each view unit should be styled according to the style specification. The size, color, and resource file should be obtained and saved from the style file. Notification unit, when the application needs to switch themes or devices, it notifies the style control unit and the response unit of the current theme or device name; The style control unit replaces the device and theme style codes upon receiving the switch notification; The response unit provides a style response function to respond to the current theme or device name. When the response is triggered, the view automatically updates the style.

7. A theme and device adaptive switching system suitable for domestic mobile terminal software, characterized in that: The method for adaptive switching of themes and devices applicable to domestic mobile software as described in any one of claims 1 to 6 is implemented to realize adaptive switching of themes and devices of domestic mobile software, which is divided into a style file creation module, an offline storage module, an application configuration module and an application responsive update module.

Images