Responsive Design — 基础知识，界面适配屏幕

什么是 Responsive Design？

Responsive Design — 一种构建界面的方法，布局对屏幕尺寸、方向和可用空间做出反应，在不损失功能的情况下重新排列元素的位置。该术语由 Ethan Marcotte 于 2010 年为网页设计提出，但原理完全适用于原生移动应用程序。

在移动开发中，responsive design 意味着同一个应用程序在所有设备上都能正确显示：从 iPhone SE (375 pt) 到 iPad Pro (1024 pt 竖屏)，从 Android 智能手机 (360 dp) 到平板电脑 (800 dp)。关键元素包括 灵活网格 (flexible grid)、自适应图片 和框架级别的 media queries (size classes, qualifiers)。

根据 Apple Developer Documentation，应用程序应该是通用的 — 在所有设备上运行，无需为 iPad 单独编译。Google Play 推荐通过 Jetpack WindowManager 和 canonical layouts 使用 adaptive layouts。缺乏对平板电脑的适配是负面评价的常见原因。

Responsive vs Adaptive Design

Responsive 和 adaptive 这两个术语经常混淆，尽管它们描述的是不同的方法。Responsive design 使用灵活网格，不断适应屏幕宽度。Adaptive design 为预定义的 breakpoints 使用固定布局 — 应用程序在这些布局之间跳转。

在实践中，移动应用程序结合使用两种方法。基础网格以 responsive 方式构建（Auto Layout 带有约束依赖），当达到 breakpoint（例如宽度 > 600 pt）时，布局切换到具有不同元素组合的自适应版本。iOS 结合了 Auto Layout (responsive) 和 Size Classes (adaptive)。Android 结合了 ConstraintLayout (responsive) 和 qualifier 资源 (adaptive)。

iOS Size Classes: Compact 和 Regular

Size Classes — iOS 机制，将可用屏幕空间按两个轴分类：水平和垂直。每个轴可以是 Compact (C) 或 Regular (R)。组合提供四种布局适应变体：CR（普通 iPhone 竖屏）、RR（iPad 竖屏/横屏）、RC（iPhone 横屏 Plus/Pro Max）、CC（iPad Split View）。

// 在 Swift 中定义 Size Classes
import UIKit

class AdaptiveViewController: UIViewController {

    override func traitCollectionDidChange(
        _ previousTraitCollection: UITraitCollection?
    ) {
        super.traitCollectionDidChange(previousTraitCollection)
        adjustLayout(for: traitCollection)
    }

    private func adjustLayout(for traits: UITraitCollection) {
        switch (traits.horizontalSizeClass, traits.verticalSizeClass) {
        case (.regular, .regular):
            showSplitView() // iPad — 显示 master-detail
        case (.compact, .regular):
            showStackedView() // iPhone 竖屏 — 堆栈布局
        case (.compact, .compact):
            showCompactView() // iPhone SE 横屏 — 最小化
        default:
            showDefaultView()
        }
    }

    private func showSplitView() {
        // 我们使用 UISplitViewController 或 HStack
    }

    private func showStackedView() {
        // iPhone 的垂直堆栈
    }

    private func showCompactView() {
        // 隐藏次要元素，显示主要元素
    }
}

在 Interface Builder 中，Size Classes 通过 “wAny hAny” 面板配置 — 开发人员选择特定组合（wRegular hRegular, wCompact hRegular）并添加约束变体。SwiftUI 使用 @Environment(\.horizontalSizeClass) 和 @Environment(\.verticalSizeClass) 进行响应式适配 — 当方向或窗口大小改变时，SwiftUI 自动重新绘制视图。

// SwiftUI 中的 Size Classes
import SwiftUI

struct ResponsiveView: View {
    @Environment(\.horizontalSizeClass) private var hSizeClass

    var body: some View {
        if hSizeClass == .regular {
            // iPad — 带侧面板的水平布局
            HStack {
                SidebarView()
                    .frame(width: 300)
                ContentView()
            }
        } else {
            // iPhone — 全屏垂直堆栈
            VStack {
                ContentView()
            }
        }
    }
}

Android Configuration Qualifiers

Configuration Qualifiers — Android 机制，根据设备特性加载不同资源（layout, values, drawables）。限定符包括屏幕尺寸（small, normal, large, xlarge）、方向（port, land）、最小宽度（swdp）、可用宽度（wdp）和高度（hdp）。

// 在 Kotlin 中定义设备配置
class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        val config = resources.configuration
        val screenWidthDp = config.screenWidthDp
        val screenHeightDp = config.screenHeightDp
        val orientation = config.orientation

        when {
            screenWidthDp >= 900 -> setContentView(R.layout.activity_main_tablet)
            screenWidthDp >= 600 -> setContentView(R.layout.activity_main_sw600)
            else -> setContentView(R.layout.activity_main_phone)
        }
    }

    override fun onConfigurationChanged(newConfig: Configuration) {
        super.onConfigurationChanged(newConfig)
        if (newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE) {
            supportFragmentManager.beginTransaction()
                .replace(R.id.container, LandscapeFragment())
                .commit()
        }
    }
}

不同屏幕的资源结构：res/layout/activity_main.xml（手机）、res/layout-sw600dp/activity_main.xml（7 英寸平板）、res/layout-sw720dp/activity_main.xml（10 英寸平板）。Android 根据 smallestWidth 自动选择正确的布局 — 屏幕在 dp 中的最小宽度，与方向无关。swdp 限定符 — 最稳定的适配方法。

// Jetpack Compose — 用于适配的 WindowSizeClass
@Composable
fun ResponsiveScreen() {
    val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass

    when {
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.EXPANDED -> {
            TabletLayout() // >= 840 dp
        }
        windowSizeClass.windowSizeClass == WindowWidthSizeClass.MEDIUM -> {
            MediumLayout() // 600–840 dp
        }
        else -> {
            CompactLayout() // < 600 dp
        }
    }
}

Jetpack WindowManager（androidx.window 库）提供具有三种宽度类别的 WindowSizeClass：COMPACT (0–600 dp)、MEDIUM (600–840 dp)、EXPANDED (>840 dp)。这是旧版 qualifier 文件夹的现代替代方案。Google 推荐用于适配可折叠设备和平板电脑。

自适应网格和 breakpoints

自适应网格是 responsive design 的基础。元素使用百分比比例、灵活约束和 intrinsic content size 而不是固定尺寸。Breakpoints — 屏幕宽度的点，当达到这些点时布局在状态之间切换。

Google Material Design 和 Apple HIG 推荐的 breakpoints：0–599 dp（手机，一列）、600–839 dp（平板，两列，navigation rail）、840+ dp（平板，三列，navigation drawer）。Breakpoints 数量不应超过 4 个 — 过多的过渡点会增加维护和测试的复杂性。

自适应设计的最佳实践

成功的 responsive design 需要遵守过去十年来 iOS 和 Android 开发者社区制定的一套规则。以下是基于 Apple HIG、Google Material Design 和实际项目经验的关键建议。

• 从最小的屏幕开始 — 为 iPhone SE (375 pt) 或 Android compact (360 dp) 设计布局，然后为更大的屏幕添加扩展。这确保了关键内容在任何地方都能容纳
• 使用 intrinsic content size — UILabel、UIButton、ImageView 具有自然尺寸。Auto Layout 和 ConstraintLayout 使用它进行自动定位，无需不必要的约束
• 不要在小屏幕上隐藏内容 — 与其隐藏，不如重新排列（reflow）。用户应该能够访问相同的功能，只是顺序不同
• 在所有 size classes 上测试 — iOS 模拟器允许在不重启的情况下切换 Size Classes。Android 模拟器提供不同的设备配置文件。务必在平板电脑和可折叠设备上进行测试
• Material 3 Adaptive Layout — Google 提供了用于列表/详情、工具栏和导航的现成 canonical layouts。使用它们而不是发明自己的模式

自适应设计的主要原则：内容决定布局，而不是相反。如果在 iPad 上显示与 iPhone 相同的卡片堆叠，只是横向拉伸 — 这不是 responsive design。Responsive design 重新构思了组合：iPhone 上 — 垂直滚动，iPad 上 — 带侧面板的 master-detail。