IM聊天缩略图显示策略

背景介绍

在IM产品中，发送图片是产品的一个基本功能，由于图片消耗内存，通常为了防止OOM的发生，在聊天面板中会显示一种图片的缩略图，点击可以看大图。由于用户可以选择发送任何尺寸的图片，因此在开发的过程中就需要考虑对一些尺寸比较大和比较小的图片的显示策略，否则会影响产品的用户体验。下面就介绍一下本人在产品中显示缩略图的策略，希望可以帮助大家。

限定图片显示尺寸

通常为了有一个比较好的显示效果，UE同学通常会告诉RD图片显示的最大最小尺寸，这里我们规定图片的maxHeight=maxWidth=135dp,minWidth=minHeight=55dp。

图片默认显示策略

默认情况下设置ImageView可根据图片的最长和最宽尺寸自适应显示图片，图片的缩略类型为CENTER_INSIDE。
关键代码如下：

viewHolderImage.chatItemContentPic.setAdjustViewBounds(true); viewHolderImage.chatItemContentPic.setScaleType(ImageView.ScaleType.CENTER_INSIDE); RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewHolderImage.chatItemContentPic.getLayoutParams(); params.width = RelativeLayout.LayoutParams.WRAP_CONTENT; params.height = RelativeLayout.LayoutParams.WRAP_CONTENT; viewHolderImage.chatItemContentPic.setMaxHeight(maxHight); viewHolderImage.chatItemContentPic.setMaxWidth(maxWidth); viewHolderImage.chatItemContentPic.setLayoutParams(params);

图片显示策略

根据图片的长imageHeight和宽imageWidth动态设置显示效果：

• imageHeight < minHeight 或 imageWidth < minWidth
  由于图片的尺寸小于最小宽高，所以我们就需要放大图片，然后截取图片的中心按最小宽高显示图片，核心代码如下：

`
viewHolderImage.chatItemContentPic.setAdjustViewBounds(false);
viewHolderImage.chatItemContentPic.setScaleType(ImageView.ScaleType.CENTER_CROP);
RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewHolderImage.chatItemContentPic.getLayoutParams();
if (imageWidth< imageHeight) {
params.width = minWidth;
params.height = Math.min(maxHight,minWidth * imageHeight / imageWidth);
} else {

params.height = minHeight;    
params.width = Math.min(maxWidth,minHeight * imageWidth/ imageHeight );

}
viewHolderImage.chatItemContentPic.setLayoutParams(params);`

• imageWidth > maxWidth 或 imageHeight > maxHeight
  这种情况需要考虑的场景是，由于图片尺寸很大，按照默认显示策略，图片会按照最大尺寸等比缩放，但这可能会导致缩放后的图片的长或宽比最小尺寸小，对于此种情况处理策略是按照最小尺寸缩放图片 并裁剪。
  关键代码如下：

if (imageWidth < imageHeight ) { if (maxHight * imageWidth /imageHeight < minWidth) { viewHolderImage.chatItemContentPic.setAdjustViewBounds(false); viewHolderImage.chatItemContentPic.setScaleType(ImageView.ScaleType.CENTER_CROP); RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewHolderImage.chatItemContentPic.getLayoutParams(); params.width = minWidth; params.height = Math.min(maxHight,minWidth * imageHeight / imageWidth ); viewHolderImage.chatItemContentPic.setLayoutParams(params); } } else { if (maxWidth * imageHeight / imageWidth < minHeight) { viewHolderImage.chatItemContentPic.setAdjustViewBounds(false); viewHolderImage.chatItemContentPic.setScaleType(ImageView.ScaleType.CENTER_CROP); RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewHolderImage.chatItemContentPic.getLayoutParams(); params.height = minHeight; params.width = Math.min(maxWidth,minHeight * imageWidth / imageHeight ); viewHolderImage.chatItemContentPic.setLayoutParams(params); } }

• 其他情况
  其他图片尺寸则按照默认显示策略显示即可。