iOS Messages显示图片功能分析

目录

一、目标

二、功能分析

1. 显示尺寸

2. 显示形状

三、功能总结

1. 显示尺寸

2. 显示形状

四、接下来

五、Finally

在上一个开发阶段《神马笔记 版本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

• 显示区域

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

• 参数一览

• 计算过程

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

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