10.项目实战百思不得姐设置图片,视频,声音图片控件的内容

@(iOS 项目实战)[项目实战]

作者: Liwx
邮箱: [email protected]

目录

10.项目实战百思不得姐设置图片,视频,声音图片控件的内容
1.计算帖子cell的高度(暂不考虑中间图片控件)
- 计算帖子cell高度的方式一(使用字典缓存方式)
- 计算帖子cell高度的方式一(通过模型数据计算cell高度)
- tableView估算高度的简单使用
2.计算中间图片控件的frame
- 计算中间图片控件的frame
3.使用xib自定义中间图片控件(图片,声音,视频类型的图片控件)
- 使用xib自定义三种图片控件
- tableView补充
4.设置声音,视频图片控件的内容
- 设置声音图片控件的内容
- 封装分类UIImageView+Image,实现通过判断网络状态下载对应的图片
5.设置图片控件的内容(长图,动态图,普通图)
- 通过url判断是静态图还是动态图
- 设置图片控件内容
- 存在问题
补充
- xib命名时需注意
- SDWebImage补充

1.计算帖子cell的高度(暂不考虑中间图片控件)

因为中间图片控件显示的图片的尺寸(宽高)是由服务器返回的数据提供,所以此次不能使用自动计算高度的方式,需手动计算cell高度.

使用xib布局帖子的cell

使用xib布局帖子的cell.png

计算帖子cell高度的方式一(使用字典缓存方式)

方式一: 使用字典缓存所有模型对应的cell的高度(不推荐)
- 使用模型的内存地址作为字典的key.
```
  // 将内存地址转换成字符串,作为字典的key
  NSString *key = [NSString stringWithFormat:@"%p", topicItem];
```
- 也可以使用模型的description方法来获取类名+内存地址,作为字典的key.
```
// description方法来获取类名+内存地址,作为字典的key
NSString *key = topicItem.description;
```
- 缓存cell的高度,无需每次都计算cell高度
  - 如果cell高度不为0,表示已经计算过cell高度,无需再重复计算.

计算帖子cell高度的方式一(通过模型数据计算cell高度)

使用模型数据计算cell高度,为模型额外添加cellHeight属性,用户存放每个模型对应cell的高度,更利于程序封装性.

方式二: 通过模型数据计算cell高度
- 1.为WXTopicItem模型添加cellHeight属性,用于存放通过模型数据计算的cell高度.
- 2.重写cellHeight的get方法,在方法中实现通过模型数据计算cell高度.使用cellHeight累计cell高度.
  - 1.顶部view高度55
  - 2.文字高度
    - 计算文字高度方式一: (过期)使用sizeWithFont:constrainedToSize:方法,参数Size表示限制文字显示的范围.
    - 计算文字高度方式二: 使用boundingRectWithSize:options:attributes:attributes context:方法计算文字高度,options参数需设置为NSStringDrawingUsesLineFragmentOrigin.
  - 3.中间显示的图片控件高度(此处暂不考虑)
  - 4.最热评论高度 = 最热评论标题高度(20) + 最热评论内容高度
  - 5.底部工具条高度
    - 底部工具条的高度包括下面灰色分割线高度10
      实现分割线方法: 设置tableView的背景色为灰色,重写cell的setFrame:方法,设置每个cell之间的间隔为10

          // WXAllViewController.m控制器的viewDidLoad方法中设置tableView背景色,并取消原来的分割线.
          self.tableView.backgroundColor = WXColor(206, 206, 206);
          self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
          
          // WXTopicItem.m文件中重写,设置每个cell之间的间隔为10
          - (void)setFrame:(CGRect)frame
          {
              frame.size.height -= WXMargin;
              [super setFrame:frame];
          }

设置cell的背景图片,需在Assets.xcassets中设置mainCellBackground背景图片为可拉伸图片,或者可以使用代码方式拉伸背景图片最中间的点.

注意: 每个模块间都有10的间距.
性能优化: 每次新的cell重新进入视野时,系统会重新调用heightRowAtIndexPath方法,获取新的cell的高度.
此处cell的高度是通过模型数据计算的,无需每次都重新计算cell高度.如果cell高度已经计算过,则直接返回cell高度.
使用模型数据计算cell高度核心参考代码

  // ----------------------------------------------------------------------------
  // WXTopicItem.m中重写cellHeight方法,计算cell高度
  - (CGFloat)cellHeight
  {
      // 如果已经计算过cell的高度,无需再计算
      if (_cellHeight) return _cellHeight;
      
      // ------------------------------------------------------------------------
      // 1.顶部view高度55
      _cellHeight += 55;
      
      // ------------------------------------------------------------------------
      // 2.文字高度
      // 2.1 文字最大宽度 = 屏幕宽度 - 2 * 间距
      CGFloat textMaxW = screenW - 2 * WXMargin;
      _cellHeight += [self.text boundingRectWithSize:CGSizeMake(textMaxW, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:15]} context:nil].size.height + WXMargin;
      
      // ------------------------------------------------------------------------
      // 3.最热评论高度 = 最热评论标题高度(20) + 最热评论内容高度
      // 3.1 取出最热评论
      NSDictionary *cmt = self.top_cmt.firstObject;
      
      if (cmt) {
          // 3.2 最热评论标题高度20
          _cellHeight += 20;
          
          // 3.3 最热评论内容高度
          NSString *username = cmt[@"user"][@"username"];
          NSString *content = cmt[@"content"];
          if (content.length == 0) {
              content = @"[语音评论]";
          }
          NSString *cmtText = [NSString stringWithFormat:@"%@ : %@", username, content];
          _cellHeight += [cmtText boundingRectWithSize:CGSizeMake(textMaxW, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName : [UIFont systemFontOfSize:14]} context:nil].size.height + WXMargin;
      }
      
      // ------------------------------------------------------------------------
      // 4.底部工具条高度
      _cellHeight += 35 + WXMargin;
      
      return _cellHeight;
  }

tableView估算高度的简单使用

设置tableView中的cell估算高度的两种方式
- 方式一: 统一设置tableView所有cell估算高度
  self.tableView.estimatedRowHeight = 100;
- 方式二: 使用代理方法分别设置tableView中每个cell的估算高度
  tableView会先多次调用estimatedHeightForRowAtIndexPath:方法,再调用heightRowAtIndexPath方法.
  - (CGFloat)tableView:(UITableView *)tableView estimatedHeightForRowAtIndexPath:(NSIndexPath *)indexPath;
  如果没有使用估算高度,tableView显示前会先多次调用heightRowAtIndexPath方法,之后每次cell显示时又会调用heightRowAtIndexPath方法.
- 会出现滚动tableView时,滚动条的长度会随tableView的滚动而不断变化.

2.计算中间图片控件的frame

计算中间图片控件的frame

1.为WXTopicItem模型添加图片高度和宽度属性,为模型额外添加中间图片控件的frame属性centerFrame.
2.在cellHeight的get方法中添加计算中间图片控件高度和frame的处理,计算中间图片控件高度和centerFrame的核心参考代码如下
- 如果是非文字段子,累计中间图片控件高度.
- 计算中间图片控件等比例显示图片
- 计算中间图片控件的centerFrame属性
- _cellHeight属性累计图片控件高度.

// ------------------------------------------------------------------------
// 3.中间图片控件高度,等比例填充方式显示图片
// 3.1 判断如果不是文字段子,累加图片控件高度
if (self.type != WXTopicTypeWord) {
    // 3.2 计算图片控件实际的frame
    // centerW / centerH = self.width / self.height;
    CGFloat centerW = textMaxW;
    CGFloat centerH = centerW * self.height / self.width;
    CGFloat centerX = WXMargin;
    CGFloat centerY = _cellHeight;
    self.centerFrame = CGRectMake(centerX, centerY, centerW, centerH);
    
    _cellHeight += centerH + WXMargin;
}

3.使用xib自定义中间图片控件(图片,声音,视频类型的图片控件)

据分析,三种类型的图片控件都是用xib方式创建,无需多处都用[[NSBundle mainBundle] loadNibNamed:方法从xib创建图片控件,可以考虑封装UIView+Init的分类.UIView+Init分类中封装加载同名xib的类方法.这样就无需在每个图片控件类中实现快速从xib创建控件的类方法.参考代码如下.

// ----------------------------------------------------------------------------
// 从xib创建view
+ (instancetype)wx_viewFromXib
{
    return [[NSBundle mainBundle] loadNibNamed:NSStringFromClass(self) owner:nil options:nil].lastObject;
}

使用xib自定义三种图片控件

1.使用xib方式创建图片,声音,视频类型的图片控件类.
2.为区分三种不同控件,粗略用不同背景色来区分三种图片控件.在xib中分别设置图片,声音,视频的图片控件背景色为红色,绿色,蓝色.
3.避免重复添加图片控件,使用懒加载的方式将三种类型的图片控件添加到cell的contentView中.
4.避免重复利用时,重复添加不同类型的图片控件,出现图片控件既有声音图片控件,又有视频图片控件.解决方案:在cell的模型set方法setTopicItem:中控制不同类型的帖子的图片控件是否要隐藏/显示.

// WXTopicCell.m中的setTopicItem:方法中添加控制中间图片控件的隐藏/显示
// ------------------------------------------------------------------------
// 设置中间图片控件的隐藏/显示
if (self.topicItem.type == WXTopicTypePicture) {        // 图片
    self.pictureView.hidden = NO;
    self.voiceView.hidden = YES;
    self.videoView.hidden = YES;
} else if (self.topicItem.type == WXTopicTypeVoice) {   // 声音
    self.pictureView.hidden = YES;
    self.voiceView.hidden = NO;
    self.videoView.hidden = YES;
} else if (self.topicItem.type == WXTopicTypeVideo) {   // 视频
    self.pictureView.hidden = YES;
    self.voiceView.hidden = YES;
    self.videoView.hidden = NO;
} else if (self.topicItem.type == WXTopicTypeWord) {    // 文字
    self.pictureView.hidden = YES;
    self.voiceView.hidden = YES;
    self.videoView.hidden = YES;
}

5.在layoutSubviews方法中重新布局不同类型的帖子要显示的图片控件
- 只有cell显示时才会调用cell的layoutSubviews方法进行布局.最好在layoutSubviews方法中设置子控件的frame.

// ----------------------------------------------------------------------------
// 布局子控件
- (void)layoutSubviews
{
    [super layoutSubviews];
    
    // ------------------------------------------------------------------------
    // 布局中间图片控件
    if (self.topicItem.type == WXTopicTypePicture) {        // 图片
        self.pictureView.frame = self.topicItem.centerFrame;
    } else if (self.topicItem.type == WXTopicTypeVoice) {   // 声音
        self.voiceView.frame = self.topicItem.centerFrame;
    } else if (self.topicItem.type == WXTopicTypeVideo) {   // 视频
        self.videoView.frame = self.topicItem.centerFrame;
    }
}

帖子初步运行效果

帖子初步运行效果.gif

如果不在layoutSubviews中设置子控件的frame,可能会出现布局异常.
- 如果不在layoutSubviews里面设置子控件的frame，有可能会受到autoresizingMask的影响，导致子控件的尺寸发生变化.
- 如果要消除autoresizingMask的影响，可以设置view.autoresizingMask = UIViewAutoresizingNone;.
- 注意: UIView创建时,autoresizingMask默认是拉伸宽高.
- 以后如果遇到布局不符合预计的效果(不受控制)时,应该想到很有可能是autoresizing问题.
- 建议: 最好在layoutSubviews方法中设置子控件的frame.

tableView补充

tableView的代理方法调用顺序
- 1.numberOfRowInSection
- 2.heightForRowAtIndexPath
- 3.cellForRowAtIndexPath
cell的layoutSubviews方法只有在cell即将显示的时候才会调用,
- 1.numberOfRowInSection
- 2.heightForRowAtIndexPath
- 3.cellForRowAtIndexPath
- 4.最好调用cell的layoutSubviews方法.

4.设置声音,视频图片控件的内容

设置声音和视频图片控件的功能实现方式基本一致.所以只对声音图片控件的实现进行描述,不再对视频图片控件的实现进行累述.

使用xib布局声音和视频图片控件
- 在xib中设置占位图片(显示百思不得姐图片)
  - 设置占位图片的imageView的contentMode为Aspect Fit,按比例填充.
xib布局声音和视频图片控件.png

设置声音图片控件的内容

1.给WXTopicItem模型添加播放数量,声音文件的播放时长,视频文件的播放时长,小图,大图,中图等属性.
2.声音图片控件WXTopicVoiceView对外提供模型数据
3.在WXTopicCell.m文件的模型set方法setTopicItem:中,控制voiceView的隐藏/显示处,为voiceView提供模型数据self.voiceView.topicItem = topicItem;.

4.重写模型数据的set方法,设置声音view的数据

在模型的set方法设置图片,因该功能多处都会用到,故考虑封装分类.
封装通过网络状态判断要下载大图或小图,显示的占位图片的分类UIImageView+Image.
处理并设置播放数量,播放时长.
模型set方法实现代码

  // ----------------------------------------------------------------------------
  // 重写模型数据的set方法,设置声音view的数据
  - (void)setTopicItem:(WXTopicItem *)topicItem
  {
      _topicItem = topicItem;
      
      // ------------------------------------------------------------------------
      // 1.设置图片
      [self.imageView wx_setLargetImage:topicItem.image1 smallImage:topicItem.image0 placeholder:nil];
      
      // ------------------------------------------------------------------------
      // 2.设置播放数量
      if (topicItem.playcount >= 10000) {
          self.playCountLabel.text = [NSString stringWithFormat:@"%.1f万播放",topicItem.playcount / 10000.0];
      } else {
          self.playCountLabel.text = [NSString stringWithFormat:@"%zd播放", topicItem.playcount];
      }
      
      // ------------------------------------------------------------------------
      // 3.设置播放时长
      NSInteger minutes = topicItem.voicetime / 60;
      NSInteger seconds = topicItem.videotime % 60;
      self.voiceTimeLabel.text = [NSString stringWithFormat:@"%02zd:%02zd", minutes, seconds];
      
  }

封装分类UIImageView+Image,实现通过判断网络状态下载对应的图片

封装通过网络状态判断要下载大图或小图,显示的占位图片的分类UIImageView+Image.

注意: 判断网络状态仅在真机才有效,模拟器不能用.使用预编译宏TARGET_IPHONE_SIMULATOR,TARGET_OS_IPHONE来判断当前要运行环境是模拟器还是真机.

#if TARGET_IPHONE_SIMULATOR //模拟器
    // 模拟器环境实现代码
#elif TARGET_OS_IPHONE      //真机
    // 真机环境实现代码
#endif

如果是模拟器环境,直接用大图显示
如果是真机环境下通过判断网络状态来确定要下载大图或小图.
- 1.优先判断是否已经下载过大图 ,如果已下载过大图,直接显示大图
- 2.如果为下载过大图,使用AFNetworking的AFNetworkReachabilityManager判断网络状态,用于确定要下载大图/小图.
```
// AFNetworkReachabilityManager判断当前网络状态,如果网络状态变化,会执行block的任务
[[AFNetworkReachabilityManager sharedManager] setReachabilityStatusChangeBlock:^(AFNetworkReachabilityStatus status) {
    NSLog(@"Reachability: %@", AFStringFromNetworkReachabilityStatus(status));
}];
// 必须启动监听
[[AFNetworkReachabilityManager sharedManager] startMonitoring];
```
- 3.如果AFNetworkReachabilityManager监听到当前网络状态变化,则根据不同网络状态下载不同图片.
  - 1.如果是wifi,则下载大图;
  - 2.如果是手机自带3G/4G网络,则下载小图;
  - 3.如果没有网络,先判断是否已下载过小图,如果已下载过小图,则显示小图.
  - 4.若没有下载过小图,则根据需求如果有占位图片显示占位图片,如果没有占位图片则清空图片.

通过AFNetworkReachabilityManager判断网络状态下载对应的图片实现参考代码

  // ----------------------------------------------------------------------------
  // 通过网络状态判断要下载大图或小图,显示的占位图片
  - (void)wx_setLargetImage:(NSString *)largetImageUrl smallImage:(NSString *)smallImageUrl placeholder:(UIImage *)placeholder
  {
      
  #if TARGET_IPHONE_SIMULATOR //模拟器
      // ------------------------------------------------------------------------
      // 1.1 模拟器不同判断网络状态,直接用大图显示
      [self sd_setImageWithURL:[NSURL URLWithString:largetImageUrl] placeholderImage:placeholder];
      
  #elif TARGET_OS_IPHONE      //真机
      // ------------------------------------------------------------------------
      // 1.1 在真机环境下通过判断网络状态来确定要下载大图或中图或小图
      // 如果已经下载过大图,优先显示大图
      UIImage *largeImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:largetImageUrl];
      if (largeImage) {
          // --------------------------------------------------------------------
          // 已下载过大图,直接显示大图
          self.image = largeImage;
      } else {
          // --------------------------------------------------------------------
          // 未下载过大图,使用AFNetworking判断网络状态,用于确定要下载大图/小图
          __weak AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
          __weak typeof(self) weakSelf = self;
          [mgr setReachabilityStatusChangeBlock:^(AFNetworkReachabilityStatus status) {
              
  //            NSLog(@"%zd", mgr.networkReachabilityStatus);
              if (mgr.isReachableViaWiFi) {           // 如果是wifi,下载大图
                  [weakSelf sd_setImageWithURL:[NSURL URLWithString:largetImageUrl]];
              } else if (mgr.isReachableViaWWAN) {    // 如果是手机自带3G/4G网络,下载小图
                  [weakSelf sd_setImageWithURL:[NSURL URLWithString:smallImageUrl]];
              } else {                                // 没有网络,如果有占位图片显示占位图片,如果没有占位图片则清空图片
                  // 判断是否已下载过小图
                  UIImage *smallImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:smallImageUrl];
                  if (smallImage) {
                      weakSelf.image = smallImage;
                  } else {
                      weakSelf.image = nil;     // 根据需求显示占位图片或清空图片
                  }
              }
          }];
          
          [mgr startMonitoring];
      }
  #endif
      
  }

声音,视频类型的帖子运行效果
- 红色部分是还未实现的图片控件.

声音视频类型帖子运行效果.gif

5.设置图片控件的内容(长图,动态图,普通图)

通过url判断是静态图还是动态图

    // gif的url,注意大小写.
    http://ww4.sinaimg.cn/large/61129224jw1f139h1eop6g207804ax6q.GIF
    http://ww4.sinaimg.cn/large/61129224jw1f139h1eop6g207804ax6q.jpg

判断图片是静态图还是动态图
- 方法一: 先将url转成小写, 使用lowercaseString
- 通过后缀名判断, 使用hasSuffix方法
```
if ([topic.image1.lowercaseString hasSuffix:@"gif"]) ;
```
- 方法二; 还可以使用pathExtension方法
```
if ([topic.image1.pathExtension.lowercaseString isEqualToString:@"gif"]) ;
```
- 方法三: 看下服务器是否有返回图片是否为动态图.服务器有返回参数is_gif,该参数是用来判断是静态或动态图.
- 方法四: 使用SDWebImage中NSData的分类方法sd_contentTypeForImageData:方法判断图片是静态图还是动态图.(图片数据的第一个字节是图片的类型),该方法必须要下载完图片才能确定.不推荐使用,效率低.

设置图片控件内容

1.给WXTopicItem模型添加是否为动态图is_gif属性,额外添加是否为长图bigPicture属性.
2.在模型cellHeight属性的set方法中,计算中间图片控件高度的地方判断图片是否是长图.

// 超过屏幕高度的图片为长图
if (centerH >= XMGScreenH) {
    centerH = 200;
    self.bigPicture = YES;
}

3.图片控件WXTopicPictureView对外提供模型数据
4.在WXTopicCell.m文件的模型set方法setTopicItem:中,控制pictureView的隐藏/显示处,为pictureView提供模型数据self.pictureView.topicItem = topicItem;.

5.重写模型数据的set方法,设置pictureView的数据

设置图片控件显示的图片
控制左上角gif图片隐藏/显示.
控制点击显示大图按钮的隐藏/显示,并控制长图与普通图的imageView的内容模式contentMode和clipsToBounds.
- 图片空间高度变小,内容模式改变为Top模式,超出部分裁减.
- 点击显示大图处理
图片控件模型数据的set方法实现参考代码

  - (void)setTopicItem:(WXTopicItem *)topicItem
  {
      _topicItem = topicItem;
      
      // 设置图片
      [self.imageView wx_setLargetImage:topicItem.image1 smallImage:topicItem.image0 placeholder:nil];
      
      // 控制gif图片隐藏/显示
      self.gifView.hidden = !topicItem.is_gif;
      
      // 显示长图按钮
      if (topicItem.isBigPicture) {
          self.seeBigPictureButton.hidden = NO;
          self.imageView.contentMode = UIViewContentModeTop;
          self.imageView.clipsToBounds = YES;
      } else {
          self.seeBigPictureButton.hidden = YES;
          self.imageView.contentMode = UIViewContentModeScaleToFill;
          self.imageView.clipsToBounds = NO;
      }
  }

声音,视频,图片帖子运行效果

声音,视频,图片类型帖子运行效果.gif

存在问题

滚动会有卡顿
4s真机测试频繁出现内存警告

补充

xib命名时需注意

xib命名需注意,避免控制器加载的时候加载该xib.
- 使用[[WXPictureViewController alloc] init]方法创建控制器是会自动加载WXPictureViewController.xib,WXPictureView.xib.所以使用xib自定义view时,要注意命名,避免控制器加载的时候加载到该xib的view.

加载xib错误信息

1.错误信息


-[UIViewController _loadViewFromNibNamed:bundle:] loaded the "WXPictureView" nib but the view outlet was not set.
错误原因：通过加载WXPictureView.xib来创建控制器的view时，并没有在WXPictureView.xib中明确指出控制器的view是谁.
// 1> 没有设置File's Owner为控制器
// 2> 没有设置控制器的view属性

2.错误信息

-[UITableViewController loadView] loaded the "WXPictureView" nib but didn't get a UITableView.
错误原因：通过加载WXPictureView.xib来创建控制器的view时，没有在WXPictureView.xib中设置控制器的view是tableView（因为当前控制器是一个UITableViewController）

SDWebImage补充

SDWebImage是使用url作为key来存储已下载的图片.

10.项目实战 百思不得姐 设置图片,视频,声音图片控件的内容