版权声明：个人原创，欢迎转载。 https://blog.csdn.net/chuyangchangxi/article/details/90748895
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 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
～过去心不可得～现在心不可得～未来心不可得～