(10)微博cell中图片的显示以及各种填充模式简介
最后更新于：2022-04-01 07:27:14
## 一效果
如果直接设置会有拉伸等等的状况，这里主要介绍图片显示的一些细节
## 二：代码
代码实现其实很简单，微博当中用了一个photos来存放九宫格这些图片，然后用了一个photo类来做每个photo，并且在上面显示gif等的样式，很多很多小技巧，直接上代码
九宫格根据行列设置等算法，不难
~~~
#import "HWStatusPhotosView.h"
#import "HWPhoto.h"
#import "HWStatusPhotoView.h"
#define HWStatusPhotoWH 70
#define HWStatusPhotoMargin 10
#define HWStatusPhotoMaxCol(count) ((count==4)?2:3)
@implementation HWStatusPhotosView // 9
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
}
return self;
}
- (void)setPhotos:(NSArray *)photos
{
_photos = photos;
int photosCount = photos.count;
// 创建足够数量的图片控件
// 这里的self.subviews.count不要单独赋值给其他变量
while (self.subviews.count < photosCount) {
HWStatusPhotoView *photoView = [[HWStatusPhotoView alloc] init];
[self addSubview:photoView];
}
// 遍历所有的图片控件，设置图片
for (int i = 0; i<self.subviews.count; i++) {
HWStatusPhotoView *photoView = self.subviews[i];
if (i < photosCount) { // 显示
photoView.photo = photos[i];
photoView.hidden = NO;
} else { // 隐藏
photoView.hidden = YES;
}
}
}
- (void)layoutSubviews
{
[super layoutSubviews];
// 设置图片的尺寸和位置
int photosCount = self.photos.count;
int maxCol = HWStatusPhotoMaxCol(photosCount);
for (int i = 0; i<photosCount; i++) {
HWStatusPhotoView *photoView = self.subviews[i];
int col = i % maxCol;
photoView.x = col * (HWStatusPhotoWH + HWStatusPhotoMargin);
int row = i / maxCol;
photoView.y = row * (HWStatusPhotoWH + HWStatusPhotoMargin);
photoView.width = HWStatusPhotoWH;
photoView.height = HWStatusPhotoWH;
}
}
+ (CGSize)sizeWithCount:(int)count
{
// 最大列数（一行最多有多少列）
int maxCols = HWStatusPhotoMaxCol(count);
int cols = (count >= maxCols)? maxCols : count;
CGFloat photosW = cols * HWStatusPhotoWH + (cols - 1) * HWStatusPhotoMargin;
// 行数
int rows = (count + maxCols - 1) / maxCols;
CGFloat photosH = rows * HWStatusPhotoWH + (rows - 1) * HWStatusPhotoMargin;
return CGSizeMake(photosW, photosH);
}
@end
~~~
photo的代码
~~~
#import "HWStatusPhotoView.h"
#import "HWPhoto.h"
#import "UIImageView+WebCache.h"
@interface HWStatusPhotoView()
@property (nonatomic, weak) UIImageView *gifView;
@end
@implementation HWStatusPhotoView
- (UIImageView *)gifView
{
if (!_gifView) {
UIImage *image = [UIImage imageNamed:@"timeline_image_gif"];
UIImageView *gifView = [[UIImageView alloc] initWithImage:image];
[self addSubview:gifView];
self.gifView = gifView;
}
return _gifView;
}
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 内容模式
self.contentMode = UIViewContentModeScaleAspectFill;
// 超出边框的内容都剪掉
self.clipsToBounds = YES;
}
return self;
}
- (void)setPhoto:(HWPhoto *)photo
{
_photo = photo;
// 设置图片
[self sd_setImageWithURL:[NSURL URLWithString:photo.thumbnail_pic] placeholderImage:[UIImage imageNamed:@"timeline_image_placeholder"]];
// 显示\隐藏gif控件
// 判断是够以gif或者GIF结尾
self.gifView.hidden = ![photo.thumbnail_pic.lowercaseString hasSuffix:@"gif"];
}
- (void)layoutSubviews
{
[super layoutSubviews];
self.gifView.x = self.width - self.gifView.width;
self.gifView.y = self.height - self.gifView.height;
}
@end
~~~
## 三：注意地方
### 显示\隐藏gif控件
~~~
// 判断是够以gif或者GIF结尾
self.gifView.hidden = ![photo.thumbnail_pic.lowercaseString hasSuffix:@"gif"];
~~~
### 字符串分类根据字符串字体和最大宽度来得到所占据的高度宽度
~~~
/**
* 根据字符串字体和最大宽度来得到所占据的高度宽度
*
* @param font 字体
* @param maxW 最大宽度
*
* @return 长宽size
*/
- (CGSize)sizeWithFont:(UIFont *)font maxW:(CGFloat)maxW
{
NSMutableDictionary *attrs = [NSMutableDictionary dictionary];
attrs[NSFontAttributeName] = font;
CGSize maxSize = CGSizeMake(maxW, MAXFLOAT);
return [self boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:attrs context:nil].size;
}
/**
* 在宽度为最大值时候根据字体得到宽高
*
* @param font 字体
*
* @return 长宽size
*/
- (CGSize)sizeWithFont:(UIFont *)font
{
return [self sizeWithFont:font maxW:MAXFLOAT];
}
~~~
### UIImageView图片设置
~~~
/**
UIViewContentModeScaleToFill : 图片拉伸至填充整个UIImageView（图片可能会变形）
UIViewContentModeScaleAspectFit : 图片拉伸至完全显示在UIImageView里面为止（图片不会变形）
UIViewContentModeScaleAspectFill :
图片拉伸至 图片的宽度等于UIImageView的宽度 或者 图片的高度等于UIImageView的高度 为止
UIViewContentModeRedraw : 调用了setNeedsDisplay方法时，就会将图片重新渲染
UIViewContentModeCenter : 居中显示
UIViewContentModeTop,
UIViewContentModeBottom,
UIViewContentModeLeft,
UIViewContentModeRight,
UIViewContentModeTopLeft,
UIViewContentModeTopRight,
UIViewContentModeBottomLeft,
UIViewContentModeBottomRight,
经验规律：
1.凡是带有Scale单词的，图片都会拉伸
2.凡是带有Aspect单词的，图片都会保持原来的宽高比，图片不会变形
*/
// 内容模式self（imageView对象）
self.contentMode = UIViewContentModeScaleAspectFill;
// 超出边框的内容都剪掉
self.clipsToBounds = YES;
~~~