M3UAndroid应用分屏模式下的界面优化方案

M3UAndroid应用分屏模式下的界面优化方案

M3UAndroid FOSS Player, which made of jetpack compose. Android 8.0 and above supported. 项目地址: https://gitcode.com/gh_mirrors/m3/M3UAndroid

背景分析

M3UAndroid作为一款流媒体播放应用，其画中画（Zapping Mode）功能已实现基础的多任务操作支持。但在现代Android设备的多窗口分屏场景下，用户界面元素（特别是频道列表的文字显示）存在可读性问题。当应用被压缩至分屏模式时，默认的紧凑视图（Compact Mode）会导致文字显示不全，影响用户快速识别频道信息。

技术挑战

分屏模式下应用窗口宽度通常仅为竖屏模式的1/2至1/3，这导致：

1. 原有双列布局的频道列表出现文字截断
2. 字体大小未根据窗口尺寸动态调整
3. 元素间距未适配窄宽度场景

解决方案

布局优化策略

1. 单列强制布局：当检测到分屏模式时，自动切换为单列显示模式，确保每个频道条目获得最大显示宽度
2. 动态字体缩放：基于窗口宽度计算合适的字体大小（建议不小于12sp）
3. 间距压缩算法：在保持可点击区域的前提下，将行间距从8dp调整为4dp

分屏状态检测

通过以下方式判断分屏状态：

// 检测当前是否处于多窗口模式
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
    return isInMultiWindowMode();
}

// 通过尺寸变化检测
Configuration config = getResources().getConfiguration();
return config.smallestScreenWidthDp < 360; // 典型分屏阈值

实现建议

1. 在RecyclerView.Adapter中增加分屏状态标志位
2. 根据标志位动态调整getSpanCount()返回值
3. 使用ConstraintLayout实现弹性边距
4. 添加尺寸变化监听器动态刷新UI

用户体验提升

优化后的分屏模式应支持：

• 完整显示频道名称（至少20个字符可见）
• 保持EPG信息的可读性
• 触摸目标不小于48dp×48dp
• 平滑的布局过渡动画

延伸思考

该优化方案不仅适用于分屏场景，还可扩展至：

1. 折叠设备的小屏模式
2. 桌面模式下的浮动窗口
3. 车载系统的特殊显示比例

通过系统化的响应式设计，M3UAndroid可在各类Android设备上提供一致的优质体验。

M3UAndroid FOSS Player, which made of jetpack compose. Android 8.0 and above supported. 项目地址: https://gitcode.com/gh_mirrors/m3/M3UAndroid