iOS Messages显示图片功能分析

iOS Messages显示图片功能分析

在上一个开发阶段《神马笔记 版本2.4.0——对话笔记》中,实现了对话笔记,接下来的几个开发阶段将不断丰富对话笔记的功能。

一、目标

分析iOS Message显示图片功能以实现神马笔记新的对话笔记元素——图片。

二、功能分析

1. 显示尺寸

测试机型——iPhone 6,750 x 1334。

  • 普通宽高比

测试图片为系统相机在竖屏和横屏下拍摄的2张照片。

图片大小为2448x3264,比例为3:4。

  • 显示宽度最大为500,屏幕宽度的2/3
  • 显示宽度为2倍的图片宽度
  • 显示宽高比与图片宽高比保持一致
图片尺寸 图片比例 显示尺寸 显示比例 显示效果
2448x3264 3:4 500x663 ≈3:4
3264x2448 4:3 500x372 ≈4:3
250x333 3:4 500x663 ≈3:4
333x250 4:3 663x500 ≈4:3
120x160 3:4 240x330 ≈3:4
160x120 4:3 320x240 ≈4:3
60x80 3:4 120x160 ≈3:4
80x60 4:3 160x120 ≈4:3
  • 异常宽高比

测试图片大小为950x15404,比例为3:48.6。

  • 显示宽度最大为500,屏幕宽度的2/3
  • 显示宽度为2倍的图片宽度
  • 显示宽高比不再保持图片宽高比
  • 显示图片从原图截取部分进行显示
图片尺寸 图片比例 显示尺寸 显示比例 显示效果
950x15404 3:48.6 500x662 ≈3:4
15404x950 48.6:3 500x280 ≈750:1334
250x4054 3:48.6 500x662 ≈3:4
4054x250 48.6:3 500x280 ≈750:1334
120x1946 3:48.6 240x663 ≈?
1946x120 48.6:3 500x242 ≈?
60x973 3:48.6 120x662 ≈?
973x60 48.6:3 500x122 ≈?

2. 显示形状

  • 6种不同的图片形状
图片形状 描述 截图
完整普通气泡 连续对话,只有一张图片。
完整尖角气泡 非连续对话,只有一张图片。
上气泡 连续图片的第一张
中气泡 连续图片的中间图片。
下普通气泡 连续对话,连续图片的最后一张图片。
下尖角气泡 非连续对话,连续图片的最后一张图片。

三、功能总结

1. 显示尺寸

  • 最大尺寸

最大宽度——屏幕宽度的2/3,以iPhone6为例,屏幕宽度为750,最大宽度为500。

最大高度——屏幕高度的1/2,以iPhone6为例,屏幕高度为1334,最大高度为667。

  • 显示尺寸

显示宽度=图片宽度 x 2

显示高度=图片高度 x 2

  • 显示区域

优先按图片宽高比进行缩放,缩放后的图片大小超过显示区域时,截取中间部分进行显示。

  • 参数一览
参数 描述 示例
screenWidth 屏幕宽度 750
screenHeight 屏幕高度 1334
pictureWidth 图片宽度 973
pictureHeight 图片高度 60
targetWidth 目标宽度 500
targetHeight 目标高度 120
pictureRatio 图片宽高比 pictureWidth / pictureHeight = 16.2167
screenRatio 屏幕宽高比 screenWidth / screenHeight = 0.5622
screenRatioInverse 屏幕宽高比倒数 1 / screenRatio = 1.77867
displayWidth 显示宽度 pictureWidth * 2 = 1946
displayHeight 显示高度 pictureHeight * 2 = 120
maxWidth 最大显示高度 screenWidth * 2 / 3 = 500
maxHeight 最大显示宽度 screenHeight / 2 = 667
preferHeight 期望显示高度 maxWidth * screenRatio = 281
  • 计算过程
  1. 判断高度优先或者宽度优先
  2. 根据尺寸限制,计算出目标尺寸
  3. 根据目标尺寸和图片尺寸计算出显示区域
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
int width = displayWidth; 
int height = displayHeight;

if (pictureRatio >= screenRatioInverse) {
height = (height > preferHeight)? preferHeight: height;
width = height * displayWidth / displayHeight;

width = (width > maxWidth)? maxWidth: width;
} else {
width = (width > maxWidth)? maxWidth: width;
height = width * displayHeight / displayWidth;

height = (height > maxHeight)? maxHeight: height;
}

int targetWidth = width;
int targetHeight = height;

2. 显示形状

根据图片发送的时间和前后消息类型,共出现6种不同的气泡形状。

四、接下来

着手实现通过拍照在对话中插入图片,下一版本将实现选择手机照片来插入图片。

五、Finally

~过去心不可得~现在心不可得~未来心不可得~