UITableView-不等高的Cell

一.工程链接

链接:
https://pan.baidu.com/s/1tQu-hokF2Uw96emvwxb5vg
密码:okzq

二.开发流程

1.解析数据

a.将数据模型化

#import 

@interface XLWeiBoModel : NSObject

@property (nonatomic,copy) NSString *name;

@property (nonatomic,copy) NSString *time;

@property (nonatomic,copy) NSString *text;

@property (nonatomic,copy) NSString *icon;

@property (nonatomic,copy) NSString *imageName;//与plist文件里面的不相同，测试

+(NSArray *)loadData;

@end

b.利用MJExtension解析数据

+(NSArray *)loadData{
    
    //模型里面的属性名和json数据里面对应的key不同
    [XLWeiBoModel mj_setupReplacedKeyFromPropertyName:^NSDictionary *{
        return @{@"imageName":@"pic"};
    }];
    
    return [XLWeiBoModel mj_objectArrayWithFilename:@"weibo.plist"];
}

2.利用UITableViewController显示数据

利用#warning...可以在某一处留下警告，告诉自己这一部分还没有全部完成

#import "XLTableViewController.h"
#import "MJRefresh.h"
#import "XLWeiBoModel.h"
#import "XLWeiBoCell.h"

@interface XLTableViewController ()

/**存放数据的数组*/
@property (nonatomic,copy) NSArray *weiboModelsArray;

@end

@implementation XLTableViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.title = @"微博";
    
    //给tableView嵌入下拉刷新
    self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        
        //下拉刷新做的事
        
        //下载数据
        
        [NSThread sleepForTimeInterval:2];
        
        self.weiboModelsArray = [XLWeiBoModel loadData];
        
        //数据下载完毕
        [self.tableView.mj_header endRefreshing];
        
        //刷新列表
        [self.tableView reloadData];
        
    }];
    
    //注册cell 如果没有重复利用的cell就创建一个cell
    [self.tableView registerNib:[UINib nibWithNibName:@"XLWeiBoCell" bundle:nil] forCellReuseIdentifier:@"cellID"];

}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

#pragma mark - Table view data source

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    
    return 1;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

    return _weiboModelsArray.count;
}


- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    
    XLWeiBoCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellID" forIndexPath:indexPath];
    
    cell.model = _weiboModelsArray[indexPath.row];
    
    //设置选中之后的样式
    cell.selectionStyle = UITableViewCellSelectionStyleNone;
    
    return cell;
}

@end

3.自定义我们想要显示的Cell

1.利用Xib文件布局并与代码关联

Xib文件

2.重写model的set方法，数据一来就显示数据

将两个约束属性化了，用来控制Cell的高度，如果没有给图片，那么图片的长度以及其与Label的间距都要为0

-(void)setModel:(XLWeiBoModel *)model{
    _model = model;
    
    _iconImageView.image = [UIImage imageNamed:model.icon];
    
    _nameLabel.text = model.name;
    
    _timeLabel.text = model.time;
    
    _contentLabel.text = model.text;
    
    if (model.imageName.length == 0) {
        _heightConstraint.constant = 0;
        _topConstraint.constant = 0;
    }else{
        _heightConstraint.constant = 175;
        _topConstraint.constant = 5;
        _picImageView.image = [UIImage imageNamed:model.imageName];
    }  
}

3.加载Xib文件时，给图片添加手势

- (void)awakeFromNib {
    [super awakeFromNib];
    
    //打开交互能力
    _picImageView.userInteractionEnabled = YES;
    
    //添加点击手势
    UITapGestureRecognizer *tapGes = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(showImage)];
    [_picImageView addGestureRecognizer:tapGes];
}

-(void)showImage{
    
    //找到窗口的根视图控制器的视图
    UIView *v = [UIApplication sharedApplication].keyWindow.rootViewController.view;
    
    //将cell里面的视图的坐标转化到self.view上
    CGRect orgFrame = [self convertRect:_picImageView.frame toView:v];
    
    [XLPhotoBrowser showImage:_picImageView.image withFrame:orgFrame];
}

4.浏览图片的类

a.提供一个创建自己的类方法

//重写initWithFrame方法 布局
-(instancetype)initWithFrame:(CGRect)frame{
    if (self = [super initWithFrame:frame]) {
        
        self.imgView = [[UIImageView alloc] init];
        
        _imgView.contentMode = UIViewContentModeScaleAspectFit;
        
        [self addSubview:_imgView];
        
        //设置背景颜色
        self.backgroundColor = [UIColor blackColor];
        
    }
    return self;
}

+(void)showImage:(UIImage *)img withFrame:(CGRect)orgFrame{
    
    //创建这个视图和屏幕一样大
    XLPhotoBrowser *browser = [[XLPhotoBrowser alloc] initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];
    
    //设置图片
    browser.imgView.image = img;
    
    //设置初始大小
    browser.imgView.frame = orgFrame;
    
    browser.orgFrame = orgFrame;
    
    //显示视图
    [[UIApplication sharedApplication].keyWindow addSubview:browser];
}

b.从原来的位置放大显示

-(void)didMoveToSuperview{
    [UIView animateWithDuration:1 animations:^{
        
        self.imgView.frame = self.bounds;
    }];
}

c.缩小到原来的位置

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    [UIView animateWithDuration:1 animations:^{
        
        self.imgView.frame = self.orgFrame;
    }completion:^(BOOL finished) {
        
        [self removeFromSuperview];
    }];
}

5.利用MJRefresh刷新数据

   //给tableView嵌入下拉刷新
    self.tableView.mj_header = [MJRefreshNormalHeader headerWithRefreshingBlock:^{
        
        //下拉刷新做的事
        
        //下载数据
        
        [NSThread sleepForTimeInterval:2];
        
        self.weiboModelsArray = [XLWeiBoModel loadData];
        
        //数据下载完毕
        [self.tableView.mj_header endRefreshing];
        
        //刷新列表
        [self.tableView reloadData];
        
    }];

三.运行结果

不等高的Cell