## 一效果 如果直接設置會有拉伸等等的狀況，這里主要介紹圖片顯示的一些細節  ## 二：代碼 代碼實現其實很簡單，微博當中用了一個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; ~~~