App Inventor 2 屏幕适配教程 - 多分辨率适配方案

• 概述
• Android屏幕基础概念
  • 屏幕密度
  • App Inventor的Screen属性
• 方案一：使用Responsive布局（推荐）
  • 设置方法
  • 布局技巧
  • 关键原则
• 方案二：使用布局容器
  • 垂直滚动布局
  • 等分布局
  • Grid布局（表格）
• 方案三：动态尺寸计算
  • 获取设备信息
  • 动态字体大小
  • 动态间距
• 方案四：多布局方案
• 实战技巧
  • 1. 使用 ScrollView处理长内容
  • 2. 图片自适应
  • 3. 横竖屏适配
  • 4. 参考OctoStudio的实时测试
• 常见问题
  • Q1: 模拟器和真机显示差异大？
  • Q2: 固定像素在不同设备上大小不同？
  • Q3: 绝对布局中的标签在雷电模拟器中无法显示？
• 总结

« 返回首页

概述

Android设备屏幕尺寸和分辨率差异巨大（从3.5寸手机到12寸平板），App Inventor 2默认使用像素(px)布局，不做适配会导致在不同设备上布局错乱。

Android屏幕基础概念

屏幕密度

App Inventor的Screen属性

方案一：使用Responsive布局（推荐）

设置方法

在Designer中设置Screen1的 Sizing 属性为 Responsive。

Responsive模式下，组件的宽高百分比基于屏幕实际尺寸，而非固定像素值。

布局技巧

当 Screen1.初始化
  ' 获取屏幕尺寸
  设 屏幕宽度 = Screen1.宽度
  设 屏幕高度 = Screen1.高度
  
  ' 根据屏幕宽度动态调整
  如果 屏幕宽度 < 400
    ' 小屏幕手机
    设 标签_标题.字体大小 = 16
    设 按钮_操作.宽度 = 屏幕宽度 - 40
  否则 如果 屏幕宽度 < 720
    ' 中等屏幕
    设 标签_标题.字体大小 = 20
    设 按钮_操作.宽度 = 屏幕宽度 * 0.8
  否则
    ' 大屏幕/平板
    设 标签_标题.字体大小 = 24
    设 按钮_操作.宽度 = 屏幕宽度 * 0.6

关键原则

1. 使用百分比而非固定像素
   • ✅ Width = 80%（占屏幕80%）
   • ❌ Width = 300px（在不同设备上大小不一）
2. 使用布局容器
   • HorizontalArrangement（水平排列）
   • VerticalArrangement（垂直排列）
   • TableArrangement（表格布局）
3. Fill Parent
   • 宽/高设为 Fill Parent，组件自动填满父容器

方案二：使用布局容器

垂直滚动布局

结构：
VerticalScrollArrangement（填满屏幕）
  ├── 标题标签（宽度：Fill Parent）
  ├── HorizontalArrangement（宽度：Fill Parent）
  │   ├── 按钮1（宽度：50%）
  │   └── 按钮2（宽度：50%）
  ├── 图片（宽度：Fill Parent，高度：自适应）
  └── 长文本标签（宽度：Fill Parent）

等分布局

当 Screen1.初始化
  设 按钮宽度 = Screen1.宽度 / 3
  设 按钮1.宽度 = 按钮宽度
  设 按钮2.宽度 = 按钮宽度
  设 按钮3.宽度 = 按钮宽度

Grid布局（表格）

使用TableArrangement实现网格布局：

TableArrangement
  Columns: 2
  Rows: 3
  ├── (1,1) 图片1
  ├── (1,2) 图片2
  ├── (2,1) 图片3
  ├── (2,2) 图片4
  ├── (3,1) 图片5
  └── (3,2) 图片6

方案三：动态尺寸计算

获取设备信息

当 Screen1.初始化
  设 屏幕宽 = Screen1.宽度
  设 屏幕高 = Screen1.高度
  设 密度 = Screen1.密度  ' 屏幕密度系数
  设 是平板 = 屏幕宽 > 720
  
  标签_设备信息.文本 = "屏幕：" & 屏幕宽 & "x" & 屏幕高 & " 密度：" & 密度

动态字体大小

定义 自适应字号(基础字号) 返回 实际字号
  设 密度 = Screen1.密度
  如果 密度 ≤ 1
    返回 基础字号
  否则 如果 密度 ≤ 1.5
    返回 基础字号 * 0.9
  否则 如果 密度 ≤ 2
    返回 基础字号
  否则 如果 密度 ≤ 3
    返回 基础字号 * 1.1
  否则
    返回 基础字号 * 1.2

动态间距

定义 自适应边距() 返回 边距
  设 屏幕宽 = Screen1.宽度
  如果 屏幕宽 < 400
    返回 8
  否则 如果 屏幕宽 < 720
    返回 16
  否则
    返回 24

方案四：多布局方案

为不同屏幕尺寸准备不同布局：

当 Screen1.初始化
  设 屏幕宽 = Screen1.宽度
  
  如果 屏幕宽 < 480
    ' 小屏幕：隐藏次要信息，简化布局
    设 图片_广告.可见 = false
    设 标签_副标题.可见 = false
    设 标签_标题.字体大小 = 18
    设 按钮行.水平对齐 = 居中
  否则 如果 屏幕宽 < 720
    ' 中屏幕：正常显示
    设 图片_广告.可见 = true
    设 标签_副标题.可见 = true
    设 标签_标题.字体大小 = 22
  否则
    ' 大屏幕/平板：增加间距，加大字号
    设 图片_广告.可见 = true
    设 标签_副标题.可见 = true
    设 标签_标题.字体大小 = 28
    设 水平布局1.宽度 = 屏幕宽 * 0.7  ' 限制最大宽度

实战技巧

1. 使用 ScrollView处理长内容

对于内容可能超出屏幕的页面，使用 VerticalScrollArrangement 或 allow_scrolling 方案：

Designer → 拖入 VerticalScrollArrangement → 填满屏幕 → 内部放组件

2. 图片自适应

• Image组件设置 ScalePictureToFit = true
• 使用百分比宽高
• 或动态设置图片尺寸

3. 横竖屏适配

当 Screen1.屏幕方向改变()
  设 新宽度 = Screen1.宽度
  设 新高度 = Screen1.高度
  如果 新宽度 > 新高度
    ' 横屏布局
    设 垂直布局.方向 = 水平
  否则
    ' 竖屏布局
    设 垂直布局.方向 = 垂直

4. 参考OctoStudio的实时测试

OctoStudio 是MIT开发的手机端App Inventor，支持实时预览。可以参考其做法：

• 使用WebRTC实现手机和电脑实时同步
• 通过USB/WiFi连接测试
• App Inventor的Companion App本身也支持实时测试

常见问题

Q1: 模拟器和真机显示差异大？

模拟器分辨率固定，建议用不同尺寸的真机测试。使用Companion App实时调试：

• 手机和电脑连同一WiFi
• 扫描二维码连接
• 实时修改实时预览

Q2: 固定像素在不同设备上大小不同？

这是因为屏幕密度不同。100px在高密度屏幕上看起来比低密度屏幕小。使用Responsive模式+百分比布局解决。

Q3: 绝对布局中的标签在雷电模拟器中无法显示？

雷电模拟器可能使用特殊的分辨率和密度。避免使用绝对坐标布局，改用相对布局容器。

总结

核心原则：

• 优先使用 Responsive 模式
• 使用百分比和 Fill Parent
• 避免固定像素值
• 用布局容器组织组件

版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。