Android大屏适配实战：JioHotstar如何用Jetpack Compose优化折叠屏与平板体验

作为印度领先的流媒体平台，JioHotstar拥有超过4亿用户，其内容库庞大，涵盖了超过33万小时的点播视频以及重大体育赛事的实时转播。面对如此庞大的运营规模，确保向所有用户提供一致且优质的体验是核心目标。

为了充分利用日益普及的折叠屏与平板设备，JioHotstar团队决定对其应用进行深度优化，旨在提升这些大屏设备上的观看体验。为此，他们严格遵循了Google的自适应应用指南，并充分利用了官方提供的示例、Codelab、Cookbook及文档等一系列资源，力求在所有尺寸的屏幕上创建流畅、沉浸的用户体验。

应用链接：https://play.google.com/store/apps/details?id=in.startv.hotstar&hl=en_IN

参考资源：

• 示例：https://developer.android.com/design/ui/large-screens/samples
• Codelab：https://github.com/android/large-screen-codelabs
• Cookbook：https://developer.android.com/guide/topics/large-screens/large-screen-cookbook
• 文档：https://developer.android.com/guide/topics/large-screens

JioHotstar 的大屏挑战

尽管在传统手机上已提供了出色的体验，JioHotstar团队希望在新的设备形态上更进一步。团队首先依据大屏应用质量指南对现有应用进行了全面评估，以明确将用户体验拓展至折叠屏与平板设备所需的具体优化点。

参考资源：大屏应用质量指南 (https://developer.android.com/docs/quality-guidelines/large-screen-app-quality)

目标直指达到 “第一层级 (Tier 1)” 大屏应用的最佳实践。为此，团队实施了两项关键的战略更新，不仅让应用能自适应各种设备形态，更在折叠屏上打造了独特的差异化体验。通过直面大屏设备带来的独特挑战，JioHotstar致力于在所有尺寸和比例的屏幕上，为用户提供高质量的沉浸式内容消费体验。

参考资源：第一层级 (Tier 1) 标准 (https://developer.android.com/docs/quality-guidelines/large-screen-app-quality?hl=en#tier_1_best_large_screen_differentiated)

需要实现的目标

JioHotstar原有的界面主要针对标准手机屏幕设计，这带来了多重挑战：需要根据不同设备的屏幕尺寸和分辨率，动态调整主视觉图的宽高比、菜单布局以及节目详情页。尤其在横屏模式下，原有设计容易导致图像被裁剪、出现黑边、分辨率下降以及屏幕空间利用率低等问题。

为了充分释放平板和折叠屏的潜力，团队聚焦于界面改造，目标是实现更优的布局灵活性、图像渲染效果和导航体验，确保应用在更广泛的设备上都能表现出色。

采取的策略

为了在大屏上提供更佳的观看体验，JioHotstar主动引入了 WindowSizeClass 的概念，并针对紧凑（Compact）、中等（Medium）和扩展（Expanded）三种不同的宽度类别创建了优化后的布局。这使得应用界面能够根据屏幕尺寸和宽高比灵活调整，确保视觉呈现的一致性与美观性。

参考资源：WindowSizeClass (https://developer.android.com/develop/ui/compose/layouts/adaptive/use-window-size-classes)

具体实现上，JioHotstar遵循了 Material 3 Adaptive 库的模式来感知可用空间。首先调用 currentWindowAdaptiveInfo() 函数，然后根据窗口尺寸类别启用对应的布局。

val sizeClass = currentWindowAdaptiveInfo().windowSizeClass
if(sizeClass.isWidthAtLeastBreakpoint(WIDTH_DP_EXPANDED_LOWER_BOUND)) {
    showExpandedLayout()
} else if(sizeClass.isHeightAtLeastBreakpoint(WIDTH_DP_MEDIUM_LOWER_BOUND)) {
    showMediumLayout()
} else {
    showCompactLayout()
}

参考资源：currentWindowAdaptiveInfo() (https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/package-summary#currentWindowAdaptiveInfo(kotlin.Boolean))

这里断点的判断遵循从大到小的优先级顺序，因为API内部使用“大于或等于”条件进行比较。这意味着任何满足“扩展(EXPANDED)”条件的屏幕宽度，也必然满足“中等(MEDIUM)”的条件。

打造折叠屏专属体验：桌面模式

JioHotstar在折叠屏设备上提供了一项高级独家功能：桌面模式。当设备处于部分折叠状态时，此功能可以自动将视频播放器重新布局到屏幕上半部分，并将控制面板调整至下半部分，为用户带来无需手动干预的便捷体验。

参考资源：桌面模式 (https://developer.android.com/develop/ui/compose/layouts/adaptive/foldables/make-your-app-fold-aware#tabletop_posture)

实现这一效果同样依赖于 Material 3 自适应库。通过 currentWindowAdaptiveInfo() 函数可以查询设备是否处于桌面模式。一旦检测到该模式，便可以根据这种物理姿态调整布局，例如使用 Column 将播放器置于上半屏，控制面板置于下半屏。

val isTabletTop = currentWindowAdaptiveInfo().windowPosture.isTabletop
if(isTabletopMode) {
   Column {
       Player(Modifier.weight(1f))
       Controls(Modifier.weight(1f))
   }
} else {
   usualPlayerLayout()
}

参考资源：Posture.isTabletop() (https://developer.android.com/reference/kotlin/androidx/compose/material3/adaptive/Posture#isTabletop())

优化成果与体验提升

通过上述策略，JioHotstar现已符合大屏应用质量指南的 “第一层级 (Tier 1)” 标准。团队不仅运用了自适应应用指南，还整合了示例、Codelab、Cookbook和文档中的诸多建议。

参考资源：

• 大屏应用质量指南：https://developer.android.com/docs/quality-guidelines/large-screen-app-quality
• 自适应应用：https://developer.android.com/adaptive-apps
• 示例：https://developer.android.com/design/ui/large-screens/samples
• Codelab：https://github.com/android/large-screen-codelabs
• Cookbook：https://developer.android.com/guide/topics/large-screens/large-screen-cookbook
• 文档：https://developer.android.com/guide/topics/large-screens

为进一步提升用户体验，JioHotstar还将视频发现页面的触摸点击区域增加至推荐的48dp，确保了大屏设备上的无障碍操作体验。团队的视频详情页现已实现完全自适应，能够根据屏幕尺寸和方向动态调整。

这种调整不仅仅是简单的图像缩放。应用利用窗口大小类实时检测窗口尺寸和密度，从而为每种设备形态加载最合适的主视觉图，显著提高了视觉保真度。通过布局自动适配不同的屏幕尺寸，导航功能也得到了同步优化。

如今，用户可以在大屏设备上享受自己喜爱的JioHotstar内容，获得经过极致优化的观看体验。

获评 Google 的 “第一层级 (Tier 1)” 大屏应用是一个里程碑，反映了我们共同愿景的力量。JioHotstar 始终相信，针对大屏设备的优化不只限于适配性，更需要为那些日益增长的可折叠设备、平板电脑和联网电视的用户群体提供更优质的观看体验。

依托 Google 的 Jetpack 库和指南，我们可以将自身对内容消费趋势的洞察与 Google 在平台创新方面的专业知识相结合。这种合作使双方团队得以打破壁垒，弥补不足，并在各种屏幕尺寸上联手创造流畅的沉浸式体验。

能够为数百万用户带来这一升级后的观看体验，并为印度乃至全球的流媒体行业树立新的标杆，我们倍感自豪。

— 高级软件开发工程师 Sonu Sanjeev

对于开发者而言，大屏与多设备适配已成为应用开发的重要议题。想要了解更多关于 Jetpack Compose 和 Kotlin 在大屏场景下的最佳实践，或与其他开发者交流 Cross-platform 开发经验，欢迎访问 云栈社区，这里汇聚了丰富的技术资源和活跃的开发者社群。