Mastering iOS Responsive Layout: Youku’s Universal Design in Action

iOS Layout Size Research

iOS devices have five main size types: iPhone, iPad portrait, iPad landscape, iPad floating window, and iPad split‑screen. Apps are usually built for iPhone and must adapt to the four iPad modes.

Device

Floating Window

Split Screen

iPad mini 2

✓

iPad mini 3

✓

iPad mini 4

✓

✓

iPad Air

✓

iPad Air 2

✓

✓

iPad Pro

✓

✓

Youku iOS Responsive Solution

Responsive layout relies on a unified set of adaptation rules that re‑layout when screen size changes. Most apps only target iPhone; to support more devices we need to obtain and update responsive state, calculate layout parameters (columns, widths), and handle data for complex components.

We built a Responsive Layout SDK that manages state, layout logic, and data mapping.

Responsive App Configuration

The app must be built as a universal binary and configure a LaunchScreen.storyboard (image‑based launch screens are unsuitable for many sizes). In Info.plist it must support all orientations, avoid the "Requires full screen" flag, and use the system UIWindow for split‑screen.

After enabling floating window and split‑screen, the system no longer calls orientation‑locking code.

Responsive SDK

State Management

The SDK provides flags for whether responsive mode is on, the layout size type, and the screen type. It updates state on size changes and notifies via system and custom notifications.

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

typedef NS_ENUM(NSInteger, YKRLLayoutSizeType) {
    YKRLLayoutSizeTypeS = 0, // phone‑pad floating
    YKRLLayoutSizeTypeL = 1, // pad
    YKRLLayoutSizeTypeXL = 2, // reserved
};

typedef NS_OPTIONS(NSUInteger, YKRLLayoutScreenType) {
    YKRLLayoutScreenTypeUnknown = (1 << 0),
    YKRLLayoutScreenTypePortrait = (1 << 1),
    YKRLLayoutScreenTypeLandscapeLeft = (1 << 2),
    // … other screen types
};

Layout Rules

Rules include column adaptation and width adaptation. Column count is computed from the current screen width, a standard width (440 dp), and a scale factor (1.2).

Responsive columns = (Current width ÷ (Standard width ÷ Standard columns × scale))

Width adaptation uses the adapted column count.

Responsive width = (Current width – margin) ÷ Adapted columns

Data Processing

Data mapping, filtering, merging, and padding ensure consistent handling on both sides. Components that cannot be scaled proportionally (e.g., full‑width video reservation cards) are mapped to simpler versions.

Implementation Flow

The SDK processes data after API responses, provides layout parameters, monitors size changes, and triggers re‑layout.

Deployment

Integrating the SDK requires converting absolute layouts to relative ones, configuring the hierarchy Window → ViewController → Container → Component, and using AutoLayout, Masonry, or manual frame calculations as needed.

Results

By August, Youku’s universal version supports iPhone, iPad portrait, iPad landscape, floating window, and split‑screen with a single codebase, delivering a richer user experience.

Conclusion

Responsive capability is the first step toward multi‑device deployment; it raises expectations for performance and stability and prepares apps for future devices such as foldable screens.