Responsive Layout Techniques for iOS Apps: Youku's Implementation and Practice

With the rapid development of mobile devices, screen sizes have become increasingly diverse (foldable screens, split‑screen, floating windows, etc.). Adapting each size separately is time‑consuming and adds maintenance pressure. This article shares the practice and implementation of responsive layout technology in the Youku iOS app.

1. iOS Layout Size Research

The iOS side mainly has five size categories: iPhone, iPad portrait, iPad landscape, iPad floating window, and iPad split‑screen. Most apps are developed for iPhone and need to adapt to the remaining four iPad modes. The table below shows which iPad models support floating window and split‑screen.

Device

Floating Window

Split‑Screen

iPad mini 2

✓

iPad mini 3

✓

iPad mini 4

✓

✓

iPad Air

✓

iPad Air 2

✓

✓

iPad Pro

✓

✓

2. Youku iOS Responsive Solution

The core of responsive layout is a unified adaptation rule that re‑layouts when screen size changes. Most apps only target iPhone; to support more devices, three problems must be solved: obtaining and updating responsive state, calculating layout parameters (column count, component width) for different screen widths, and handling data to reduce blank spaces. Youku built a Responsive Layout SDK that manages state, processes layout logic, and maps data.

Key configuration steps for a responsive app include:

Provide a LaunchScreen.storyboard instead of static launch images.

Set UIRequiresFullScreen to NO and enable all interface orientations in Info.plist.

Use the system UIWindow (not a subclass) and initialize it with [UIScreen mainScreen].bounds.

Avoid forcing orientation via code; the system will allow all orientations when split‑screen is enabled.

After enabling floating window and split‑screen, the previous code that forced portrait orientation no longer works, as shown in the screenshots.

3. Responsive SDK – State Management

The SDK provides three enums to describe the current responsive situation: whether responsive mode is on, the size type (S, L, XL), and the specific screen type (portrait, landscape left, etc.). The code definitions are:

// Responsive enable/disable state
typedef NS_ENUM(NSInteger, YKRLLayoutStyle) {
    YKRLLayoutStyleNormal = 0,        // responsive off
    YKRLLayoutStyleResponsive = 1,   // responsive on
};

// Responsive screen size type
typedef NS_ENUM(NSInteger, YKRLLayoutSizeType) {
    YKRLLayoutSizeTypeS = 0,   // e.g., phone‑pad floating window
    YKRLLayoutSizeTypeL = 1,   // pad
    YKRLLayoutSizeTypeXL = 2,  // reserved
};

// Responsive screen type (10 possible values)
typedef NS_OPTIONS(NSUInteger, YKRLLayoutScreenType) {
    YKRLLayoutScreenTypeUnknown        = (1 << 0), // unknown
    YKRLLayoutScreenTypePortrait       = (1 << 1), // portrait full‑screen
    YKRLLayoutScreenTypeLandscapeLeft = (1 << 2), // landscape left full‑screen
    // … other types omitted for brevity
};

The SDK updates these states when the device rotates or split‑screen is activated and notifies business modules via system and custom notifications.

4. Responsive Layout Rules

Youku’s rules mainly cover column count adaptation and width adaptation. For a component that evenly distributes columns, the SDK calculates the appropriate column count based on the current screen width. The formula used is:

Responsive column count = (Current screen width ÷ (Standard screen width ÷ Standard column count × scale))

where scale is a magnification factor (Youku uses 1.2) to avoid components becoming too small on iPad.

Width adaptation follows a similar two‑step process: first compute the adapted column count, then calculate component width:

Responsive width = (Current screen width – margins) ÷ Adapted column count

These rules are encapsulated in YKRLCompLayoutManager. Business code can also implement YKRLCompLayoutAdapterProtocol for custom logic.

5. Responsive Data Processing

Data handling includes mapping, filtering, merging, and padding to ensure consistency between backend and frontend. For components that cannot be scaled proportionally (e.g., a full‑width video reservation component), Youku maps them to simpler components that fit all screen sizes.

6. Implementation Workflow

The responsive integration follows the hierarchy: Window → ViewController → Container → Component. After enabling split‑screen, the system automatically lays out the window; root view controllers inherit this layout. Special view controllers (e.g., tab pages) need manual conversion to relative layout using autoresizing, AutoLayout, Masonry, or custom layoutSubviews calculations.

Pages that already use the unified architecture receive layout column and width management from the SDK automatically, reducing integration effort.

7. Results

By August, Youku’s universal version was released, supporting iPhone, iPad portrait, iPad landscape, floating window, and various split‑screen ratios with a single code base, delivering a richer user experience.

8. Conclusion

Responsive capability is the first step toward multi‑device deployment. As Apple introduces ARM‑based Macs and explores foldable screens, responsive design will become increasingly essential. Youku’s solution provides a solid foundation for future complex device scenarios.