Introduction: With the development of mobile Internet equipment and technology, various mobile device screen sizes emerge in endlessly, such as folding screens, split screens, floating windows, etc., facing more and more diverse screens, if you adapt each size separately, Not only is it time-consuming and laborious, but it also increases the pressure on the development and maintenance of end-side code. How to make a set of codes adapt to all size changes and enhance the general capabilities of the App? Alibaba's entertainment technology Tritium Rain will share the practice and implementation of Youku APP in iOS responsive layout technology.
Responsive is based on the same set of codes. The development of an APP can be compatible with the display of multiple sizes and multiple terminal devices, can dynamically adjust the layout of the page and the layout of the container, make full use of the current screen size, provide users with a better browsing experience, and improve APP development efficiency and iteration efficiency.
One iOS layout size pre-research
Currently, there are five main types of sizes on the iOS side: iPhone, iPad vertical screen, iPad horizontal screen, iPad floating window, and iPad split screen. Usually, the app is developed according to the iPhone size and needs to be adapted to the remaining four iPad sizes.
iPad horizontal and vertical screens are more common, just rotate the device, the more special ones are floating window and split screen mode. Since Apple’s iPad iOS 9, when a user opens an app, slide up from the bottom to open the Dock, and then drag another app into floating window mode:
Drag and drop to a more edge on the iPad that supports split screen to enable split screen mode:
The floating window mode is supported by all devices upgraded to iOS 9, and the split-screen mode is only supported by the latest version of the hardware devices iPad mini 4, iPad Air 2 and iPad Pro:
Two Youku iOS Responsive Solution
The core of the responsive layout is to design a unified adaptation rule, and re-layout according to the layout rule when the screen size changes to adapt to different screen sizes, and most apps generally only have an iPhone version during development. When responsively adapting to more models, there are three main problems to be solved, namely how to obtain and update the responsive state for corresponding adaptation, and how to calculate the layout parameters such as the width of the App content and the number of columns under different screen widths , How to perform data processing under responsive to solve difficult to adapt components, reduce page blanking, etc. Based on this, we developed responsive layout SDK, responsible for unified management of responsive state, processing layout logic, tailoring mapping data, etc.
1 Responsive App configuration
In addition to being configured as a universal version, App needs some configuration to support floating window or split screen mode:
(1) You need to provide LaunchScreen.storyboard as the startup map. Because the app supports too many running sizes, it is no longer suitable to use pictures as the startup map.
(2) Need to configure to support all screen directions in info.plist:
(3) Note that you cannot check the Requires full screen configuration item or configure UIRequiresFullScreen to YES. This will declare that the App requires full screen operation, which naturally means that floating windows or split screens are not supported:
(4) The main Window of the App that supports split screen requires the use of the system UIWindow, which cannot be inherited, and must be initialized through the init method or initWithFrame:[UIScreen mainScreen].bounds.
After opening the floating window and split screen capabilities through the above steps, the device direction can no longer be controlled by the relevant code in the App. In the past, the ViewController can be controlled to be a vertical screen through the following code. After the split screen is supported, the following methods are no longer called by the system. ViewController supports all screen orientations:
The black method of forcing the screen orientation as follows is also invalid:
The main reason for this design is that when an App supports split screen, it no longer occupies the entire screen alone. When another App is running at the same time, it is impossible for the same screen to appear one horizontal screen and another vertical screen. There is no perfect solution to this kind of problem. In order to ensure user experience, apps that support split screen must adapt all pages to all screen orientations. This also reflects Apple's ultimate pursuit of user experience. See the developer's discussion in Developer Forums:
https: //developer.apple.com/forums/thread/19578
2 Responsive SDK
Responsive state management
The responsive state provides the current status of whether responsive is enabled, responsive layout size type, current layout window size, etc. The responsive SDK will update the responsive state after the screen size changes, and through system notifications and custom notification mechanisms, Notify relevant business parties.
// 响应式开启关闭状态
typedefNS_ENUM(NSInteger, YKRLLayoutStyle) {
YKRLLayoutStyleNormal =0, // 响应式状态关闭
YKRLLayoutStyleResponsive =1, // 响应式状态开启};
// 响应式屏幕尺寸类型，页面可依据此类型区分是否分屏等
typedefNS_ENUM(NSInteger, YKRLLayoutSizeType) {
YKRLLayoutSizeTypeS =0, // eg. phone pad浮窗
YKRLLayoutSizeTypeL =1, // pad
YKRLLayoutSizeTypeXL =2, // 预留
};
// 响应式屏幕状态类型（一共有十种类型）
typedefNS_OPTIONS(NSUInteger, YKRLLayoutScreenType) {
YKRLLayoutScreenTypeUnknown = (1<<0), //未知
YKRLLayoutScreenTypePortrait = (1<<1), //竖屏全屏
YKRLLayoutScreenTypeLandscapeLeft = (1<<2), //横屏全屏左
… …
};The responsive SDK declares three enumerated states of YKRLLayoutStyle, YKRLLayoutSizeType, and YKRLLayoutScreenType to mark the current responsive state, which respectively indicate the responsive on and off status, the current size type and the specific screen type. The general business side only needs to obtain whether it is a responsive device status , For business parties with inconsistent page layouts under different widths, they can distinguish and adapt by size type status, while business parties who need to know the current screen status can be obtained by screen type. The screen type only includes the screens supported by the current iOS device. Status, with the richness of device types, such as folding screens, the screen types will be expanded accordingly. Whenever the device rotates or the user opens the split screen, the responsive SDK will update the current responsive state in the system callback and notify the business side of the change in the responsive state.
Responsive layout rules
Youku's responsive layout rules mainly include column number adaptation rules, width adaptation rules, etc. For example, the number of columns for multi-column evenly divided components is variable under different screen widths, and the responsive SDK will output appropriate according to the current responsive state For each layout rule, the responsive SDK has corresponding layout adaptation logic. The responsive layout rule meets the overall UI specification of Youku App. The business party can directly specify the rules they need, except for a few In addition to special rules, most layout rules are used for component column number and component width layout. Such responsive layout rules will specify a standard width, and calculate the component standard width based on the original layout column number and standard width of the component, and then According to the current screen width, calculate the number of adapted component columns, which can be expressed by the following formula:
Responsive adaptation number of columns (number of component columns under standard screen width) = (current screen width ÷ (standard screen width ÷ number of component columns under standard screen width × scale))
Among them, scale is the component magnification parameter. The original width of the component under the standard screen width will be too small when it is put on the iPad. You can use the scale parameter to enlarge it appropriately.
For component width adaptation, the responsive rule will first calculate the number of component columns under the standard screen width and perform the column number adaptation, and then calculate the adaptation width based on the number of columns after the adaptation:
Responsive adaptation width (component width under standard screen width) = (current screen width-margin spacing) ÷ number of responsive adaptation columns (standard screen width ÷ component width under standard screen width)
In the above formula, adjust the standard screen width and the component magnification scale to get a general layout rule with better adaptation effect. After the design students' adjustment and summary under various device sizes, the current standard screen width used in Youku is 440dp, scale It is 1.2 times, the best adaptation effect. The component adaptation logic has been implemented uniformly in the responsive SDK layout rules, which can be directly called by the business party, and it is also convenient for design students to uniformly adjust the component adaptation of the entire App.
The YKRLCompLayoutManager class in the responsive SDK encapsulates the relevant layout logic. The business party can also customize the responsive layout logic through the YKRLCompLayoutAdapterProtocol protocol to customize the responsive layout logic. You can directly call the relevant interface of YKRLCompLayoutManager in the App unified architecture to obtain the calculation according to the responsive rules. The layout parameters, such as the number of columns, width, etc., can be re-layed to complete the responsive layout when the responsive state changes.
Responsive data processing
Responsive data processing includes data mapping, data filtering, data merging, and data completion. The data processing logic is consistent at both ends. For details, please refer to: How does one APP adapt to multiple Android terminals? , The following briefly introduces the implementation of iOS responsive data mapping.
Some components cannot be adapted to different screen sizes through rules, such as the component that occupies the entire screen width on a mobile phone (the left side of the figure below has a video playback reservation component). If the adaptation rule of proportional magnification is adopted, it will appear excessive on the iPad. Large, such components can be mapped into relatively simple components to adapt to different screen sizes.
Youku adopts a unified and abstract data structure, which is relatively easy to implement in terms of component mapping. You only need to modify the corresponding component logo. Thanks to the universal promotion and use of the unified architecture, we have added component mapping capabilities in the unified architecture to facilitate the invocation of various business parties. The responsive SDK provides data tailoring mapping rules, and business parties can query and add corresponding tailoring mapping rules. . For business parties that are not connected to the unified architecture, the business parties need to implement relevant data processing.
3 Responsive business process
Youku's responsive business process is consistent at both ends. Responsive layout requires data processing, responsive state management, trigger layout, etc. Youku responsive SDK will process relevant data after the interface returns, provide a corresponding layout interface for the unified architecture, and monitor the screen The size changes and triggers the layout, etc.
4 Youku's responsive solution landed
Absolute layout is often used in iOS development, and the main work to achieve responsiveness is to modify "absolute layout" to "relative layout", which is more cumbersome than Android.
iOS responsive can be accessed according to the level of Window->ViewController->Container->Component.
After Window is configured to support split screen, it will be automatically laid out by the system. The child ViewController in the RootViewController tree will also be automatically laid out with the Window. Special ViewControllers, such as the child ViewController of multiple tab pages, are not added to the RootViewController tree and need to be manually modified to relative Layout, the page can realize relative layout through Autoresizing or monitoring response state.
The page container that accesses the unified architecture is provided by the unified architecture. The layout column number management and layout width management of the unified architecture container have been connected to the responsive SDK, which reduces a lot of work for the business side to access. The business side only needs to specify its own The layout rules used are sufficient. After the ViewController and the container realize the relative layout, whenever the screen size changes, the responsive SDK will notify the container to re-layout, change the number of component columns or width, etc. The component cards only need to be laid out according to the size provided by the container. can.
Frame absolute layout is generally used in component cards and needs to be modified to relative layout. Simple layout logic can be implemented using Autoresizing, which is convenient and fast. Complex layouts can be implemented using automatic layout frameworks such as AutoLayout or Masonry (with poor performance), or in layoutSubviews In the method, the layout is recalculated, and the business side can choose a suitable way to realize automatic layout to reduce access costs.
For pages that are not connected to the unified architecture, you need to manually access the responsive SDK related layout interfaces in this page layout logic.
During the landing process, it was found that many component card layouts depended on the screen width, which did not conform to the responsive development specifications, resulting in a large workload when adapting to responsive. Each layer of View should only rely on the parent layer View layout. After each layer of View realizes the relative layout, each layer of View will automatically adapt whenever the screen size changes. At the same time, the container's component column number and size will be adapted according to responsive rules , One set of code can adapt to all screen sizes, and realize responsive layout.
Sanyouku responsive results
At present, Youku's full terminal has the capability of responsive layout. The universal version has been launched in August. A set of codes supports iPhone, iPad vertical screen, iPad horizontal screen, floating window, and various ratio split screens, providing users with better and richer User experience.
Four summary
Responsive capability is the first step in multi-terminal delivery capabilities. After Youku’s responsive layout has been implemented, Youku has put forward higher requirements on development, design and products. At the same time, given the relatively high proportion of low-end iPad devices, it is not only necessary to consider communication in the business development process. Investment ability requires the App to always maintain higher performance and stability. This is what we continue to work on.
Apple will launch an ARM-based MacBook at the end of 2020. There are also media exposures. Apple is applying for patents related to folding screens. It is believed that the size of Apple devices will become more and more abundant in the future. App adaptation and efficiency improvement are a topic that cannot be avoided, and Youku Responsive development greatly expands the applicable scenarios of the iPhone version of the App, is a better way to solve the support of multiple devices, and lays a solid foundation for adapting to more complex device scenarios in the future.
Original link
This article is the original content of Alibaba Cloud and may not be reproduced without permission.