iOS仿微博客户端一条微博的展示效果

2020-01-18 21:16:55王振洲

LeadingSpace 是图片与两侧屏幕的间隙,为8PX, ImageSpace是图片之间的间隙为4PX。UI_SCREEN_WIDTH是屏幕宽度。


 //根据图片数量获得列数
 if (_imageArray.count == 1) {
 //一列
 column = 1;
 imageWidth = UI_SCREEN_WIDTH * 0.55;
 }
 else if (_imageArray.count == 2 || _imageArray.count == 4) {
 //两列
 column = 2;
 imageWidth = (UI_SCREEN_WIDTH - (LeadingSpace + ImageSpace) * 2) / 3;
 }
 else {
 //三列
 column = 3;
 imageWidth = (UI_SCREEN_WIDTH - (LeadingSpace + ImageSpace) * 2) / 3;
 }

 //根据图片的数量和列数获得行数
 if (_imageArray.count % column == 0) {
 row = _imageArray.count / column;
 }
 else {
 row = _imageArray.count / column + 1;
 }

确定了配图的大小,再根据位置,就可以创建UIImageView。 配图的位置则在正文起始位置 + 正文的高度 + 间隙,而获取正文的高度由以下方法来完成:


 * 计算label的高度
 *
 * @param text 文字
 * @param width label宽度
 * @param font 字体
 *
 * @return label高度
+ (CGFloat)getLabelHeightWithText:(NSString *)text width:(CGFloat)width font:(UIFont *)font {
CGSize size = CGSizeMake(width, MAXFLOAT);//设置一个行高的上限
CGSize returnSize;

NSDictionary *attribute = @{ NSFontAttributeName : font };
returnSize = [text boundingRectWithSize:size
                options:NSStringDrawingUsesLineFragmentOrigin | NSStringDrawingUsesFontLeading
               attributes:attribute
                context:nil].size;

return returnSize.height;
}

对于原创微博正文的起始位置可以由xib看出来,头像的高度固定为48,而上下的间隙为8, 则起始位置Y坐标为 48 + 16 = 64;而对于非原创微博,正文的起始位置Y坐标为8 (此处的8是相对于配图的父容器UIView的位置,对于非原创微博而言,更重要的是计算出父容器UIView在Cell中的位置);

然后根据配图的位置和大小创建UIImageView,如下图,其中originY为第一张配图的起始位置的Y坐标。


//根据位置创建imageView
for (int i = 0; i < row; i++) {
  for (int j = 0; j < column; j++) {
    //用来判断数据是否越界
    if (i * column + j < _imageArray.count) {
      imageUrl = _imageArray[i * column + j];

      if (imageUrl) {
        TapImageView *imageView = [[TapImageView alloc] initWithFrame:CGRectMake(LeadingSpace + j * (ImageSpace + imageWidth), originY + LeadingSpace + i * (ImageSpace + imageWidth), imageWidth, imageWidth)];
        imageView.tag = ImageViewTag + i * column + j;

        //block通知,点击了图片,展示大图
        __weak typeof(self) weakSelf = self;
        imageView.didTouchImage = ^(NSInteger index) {
          [weakSelf showFullScreenImage:index];
        };

        [imageView setImageUrl:imageUrl index:i * column + j];

        //原创微博直接添加的cell中,非原创则加入一个容器中UIView,再将容器加入cell中
        if (isForward) {
          [_forwardedContainerView addSubview:imageView];
        }
        else {
          [self addSubview:imageView];
        }
      }
    }
    else {
      //越界后跳出for循环
      break;
    }
  }
}