一,内容介绍

  1. 完善第三天中单元格高度的计算,(根据单元格中数据自动适配高度)

  2. 自动布局的应用

  3. 原微博背景的设置

  3. 支持旋转功能的实现

  4. iOS实现图文混排的方式:

     二,主要技术点

  1. 对于单元格的适配,会通过简单的demo来实现原理

  2. 自动布局的原理和要主要的点,与横竖屏结合起来

    三,代码的实现

 UITabeViewController),数据来自plist文件

#import "ViewController.h"
#import "WeiboCell.h"

@interface ViewController ()

@end

@implementation ViewController {
    NSString *identify;
    NSArray *_data;
    
    WeiboCell *_propertyCell;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"data.plist" ofType:nil];
    _data = [NSArray arrayWithContentsOfFile:filePath];
    
    identify = @"WeiboCell-01";
    UINib *nib = [UINib nibWithNibName:@"WeiboCell" bundle:nil];
    [self.tableView registerNib:nib forCellReuseIdentifier:identify];
    
    _propertyCell = [[[NSBundle mainBundle] loadNibNamed:@"WeiboCell" owner:nil options:nil] lastObject];
    
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return _data.count;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    WeiboCell *cell = [tableView dequeueReusableCellWithIdentifier:identify];
    
    cell.text = _data[indexPath.row];
    
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
        
    //告诉系统调用LayoutSubview填充数据
    [_propertyCell setNeedsLayout];
    [_propertyCell layoutIfNeeded];  //让cell立刻调用LayoutSubview
    
    //计算cell中所有的子视图的总高度
    CGSize size = [_propertyCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
    
    return size.height;
}

@end


  子类化单元格(通过xib)

#import <UIKit/UIKit.h>

@interface WeiboCell : UITableViewCell
{
    __weak IBOutlet UILabel *_weiboLabel;
    
    __weak IBOutlet UILabel *reWeiboText;
}

@property(nonatomic,copy)NSString *text;


@end
#import "WeiboCell.h"

@implementation WeiboCell

- (void)layoutSubviews {
    [super layoutSubviews];
    
    _weiboLabel.text = self.text;
    reWeiboText.text = self.text;
    
//    _weiboLabel.preferredMaxLayoutWidth = _weiboLabel.frame.size.width;
    
    _weiboLabel.preferredMaxLayoutWidth = CGRectGetWidth(_weiboLabel.frame);
    reWeiboText.preferredMaxLayoutWidth = CGRectGetWidth(reWeiboText.frame);
    reWeiboText.numberOfLines = 0;
}

@end



2. WeiboTableView 类中配置单元格高度


- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    //把高度加在字典中,不用重复计算高度
    if (cellHeightCache == nil) {
        
        cellHeightCache = [NSMutableDictionary dictionary];
    }
    
    NSNumber *heightNumber = cellHeightCache[indexPath];
    if (heightNumber == nil) {
    
    _propertyCell.weiboModel = _data[indexPath.row];
    
    [_propertyCell setNeedsLayout];
    [_propertyCell layoutIfNeeded];
    
    CGSize size = [_propertyCell.contentView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize];
        
        CGFloat height = size.height;
     
    //height 是contentView的高度,而cell的高度要比contentView多1个尺寸
       
        [cellHeightCache setObject:@(height + 1) forKey:indexPath];
        
        heightNumber = @(height + 1);
   
  }
    
    return [heightNumber floatValue];
}



  3. 关于单元格的自动布局

  主要是通过代码和storyboard相结合的方式,通过对UI空间(UIView、UIButton、UILabel)等添加约束(constraint),通过简单的例子来看下具体约束的方法

                                     

iOS 仿微博图文混排 iphone微博图片自动横屏_iOS 仿微博图文混排

                                     

iOS 仿微博图文混排 iphone微博图片自动横屏_#import_02

  头像、转发的图片约束顶部、左边和宽高,保持图片不被拉伸。 昵称、评论数、转发数设置等高,保证不被拉伸,评论和转发的宽度可以设置 <= 某一值,根据内容拉伸文本宽度。微博的内容和转发的微博内容的长宽会根据内容自适应,约束边界即可。

  4. 原微博背景的设置

  背景的大小需要拉伸,我们在 ThemeManager 中定义一个拉伸的方法,拉伸点由外部传入,只有要拉伸才传入拉伸点

#import <UIKit/UIKit.h>
@interface ThemeImageView : UIImageView
//定义宽和高
@property (nonatomic,copy) NSString *imgName;
@property (nonatomic,assign) CGFloat leftWidth;
@property (nonatomic,assign) CGFloat topHeight;
@end

方法的实现

- (void) setImage:(UIImage *)image {
    image = [image stretchableImageWithLeftCapWidth:self.leftWidth topCapHeight:self.topHeight];
    super.image = image;
}

  WeiboCell.m中传入拉伸点


- (void)awakeFromNib {
    [super awakeFromNib];
    _bgImgView.leftWidth = 25;
    [_bgImgView setTopHeight:25];
    _bgImgView.imgName = @"timeline_rt_border_9.png";
  
}



  5. 图文混排

 应用:

(1)、新闻类的APP

(2)、社交类的APP

(3)、教育类、笔记(文档):印象笔记

 iOS实现图文混排的方式:

(1)、WebView     html+javascript  (头条新闻)

(2)、CoreText   (C语言实现的框架) 

(3)、iOS新增加的特性:

           TextKit