iOS 表格头部视图下拉放大+单元格重写图文混排

效果展示

QQ20170925-155107-HD.gif
ViewController.m

#import "ViewController.h"
#import "Model.h"
#import "FrameModel.h"
#import "TableViewCell.h"

@property(nonatomic,strong)UIImageView *headImageView;//头部图片
@property(nonatomic,strong)UITableView *tableView;//列表
@property (nonatomic, strong) NSArray *InfoArray;//数组

//屏幕宽、高 宏定义
#define IPHONE_W ([UIScreen mainScreen].bounds.size.width)
#define IPHONE_H ([UIScreen mainScreen].bounds.size.height)

// 头视图高度
static CGFloat kImageOriginHight = 250;

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    
    //将视图添加到界面上
    [self.view addSubview:self.tableView];
    [self.tableView addSubview:self.headImageView];
    
    //隐藏系统tableViewCell分割线
    self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
    //隐藏垂直滚动条
    self.tableView.showsVerticalScrollIndicator = NO;
    
    [self getInfo];
}

#pragma mark -- 滚动视图的代理方法
- (void)scrollViewDidScroll:(UIScrollView*)scrollView{
    /**
     *  关键处理：通过滚动视图获取到滚动偏移量从而去改变图片的变化
     */
    //获取滚动视图y值的偏移量
    CGFloat yOffset  = scrollView.contentOffset.y;
    NSLog(@"yOffset===%f",yOffset);
    CGFloat xOffset = (yOffset +kImageOriginHight)/2;
    
    if(yOffset < -kImageOriginHight) {
        CGRect f =self.headImageView.frame;
        f.origin.y= yOffset ;
        f.size.height=  -yOffset;
        f.origin.x= xOffset;
        //int abs(int i); // 处理int类型的取绝对值
        //double fabs(double i); //处理double类型的取绝对值
        //float fabsf(float i); //处理float类型的取绝对值
        f.size.width=IPHONE_W + fabs(xOffset)*2;
        
        self.headImageView.frame= f;
    }
}

#pragma mark -- 表视图代理
- (void)getInfo
{
    //实际开发数据是网络获取到的，这里模拟给出一个数据
    NSArray *array = @[
                       @{@"name" : @"aaa", @"icon" : @"icon", @"text" : @"这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容", @"picture" : @"hero.jpg"},
                       @{@"name" : @"bbb", @"icon" : @"icon", @"text" : @"这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容这里是内容", @"picture" : @"hero.jpg"},
                       @{@"name" : @"ccccc", @"icon" : @"icon", @"text" : @"这里是内容，没有配图"},
                       @{@"name" : @"ddd", @"icon" : @"icon", @"picture" : @"hero.jpg"}];
    
    //解析数据，转模型保存
    NSMutableArray *tempArray = [NSMutableArray array];
    for (NSDictionary *dict in array) {
        Model *model = [Model modelWithDict:dict];
        FrameModel *frameModel = [[FrameModel alloc] init];
        frameModel.model = model;
        [tempArray addObject:frameModel];
    }
    self.InfoArray = [tempArray copy];
    
    NSLog(@"%ld",_InfoArray.count);
}

#pragma mark - Table view data source
//组数
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
    return 1;
}

//组中行数
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return self.InfoArray.count;
}

//cell内容
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    TableViewCell *cell = [TableViewCell cellWIthTableView:tableView];
    
    cell.frameModel = self.InfoArray[indexPath.row];
    
    return cell;
}

//设置行高
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    FrameModel *frameModel = self.InfoArray[indexPath.row];
    
    return frameModel.cellHeight;
}

#pragma mark -- get 初始化操作

-(UITableView *)tableView
{
    if (_tableView == nil)
    {
        _tableView= [[UITableView alloc]initWithFrame:CGRectMake(0,0,IPHONE_W,IPHONE_H)];
        _tableView.delegate=self;
        _tableView.dataSource=self;
        _tableView.backgroundColor= [UIColor lightGrayColor];
        //内容由kImageOriginHight 处开始显示。
        _tableView.contentInset=UIEdgeInsetsMake(kImageOriginHight,0,0,0);
    }
    return _tableView;
}

-(UIImageView *)headImageView
{
    if (_headImageView == nil)
    {
        _headImageView= [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"111.jpg"]];
        _headImageView.frame=CGRectMake(0, -kImageOriginHight,IPHONE_W,kImageOriginHight);
    }
    return _headImageView;
}

Model.h

#import <Foundation/Foundation.h>

@interface Model : NSObject

@property (nonatomic, copy) NSString *icon;
@property (nonatomic, copy) NSString *name;
@property (nonatomic, copy) NSString *text;
@property (nonatomic, copy) NSString *picture;

- (id)initWithDict:(NSDictionary *)dict;
+ (id)modelWithDict:(NSDictionary *)dict;

@end

Model.m

#import "Model.h"

@implementation Model

- (id)initWithDict:(NSDictionary *)dict
{
    self = [super init];
    if (self) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}

+ (id)modelWithDict:(NSDictionary *)dict
{
    return [[self alloc] initWithDict:dict];
}

@end

FrameModel.h

@class Model;

@interface FrameModel : NSObject

@property (nonatomic, assign) CGRect iconFrame;
@property (nonatomic, assign) CGRect nameFrame;
@property (nonatomic, assign) CGRect textFrame;
@property (nonatomic, assign) CGRect pictureFrame;
@property (nonatomic, assign) CGFloat cellHeight;
@property (nonatomic, strong) Model *model;

@end

FrameModel.m

#import "FrameModel.h"

#import "Model.h"

#define mainW [UIScreen mainScreen].bounds.size.width
#define HWTextFont [UIFont systemFontOfSize:15]

@implementation FrameModel

- (void)setModel:(Model *)model
{
    _model = model;
    
    //头像
    CGFloat padding = 10;
    CGFloat iconWH = 30;
    self.iconFrame = CGRectMake(padding, padding, iconWH, iconWH);
    
    //名字
    CGSize nameSize = [self sizeWithText:model.name font:HWTextFont maxSize:CGSizeMake(MAXFLOAT, MAXFLOAT)];
    CGFloat nameW = nameSize.width;
    CGFloat nameH = nameSize.height;
    CGFloat nameX = CGRectGetMaxX(self.iconFrame) + padding;
    CGFloat nameY = CGRectGetMinY(self.iconFrame);
    self.nameFrame = CGRectMake(nameX, nameY, nameW, nameH);
    
    //文字内容
    CGSize textSize = [self sizeWithText:model.text font:HWTextFont maxSize:CGSizeMake(mainW - padding * 2, MAXFLOAT)];
    self.textFrame = CGRectMake(padding, iconWH + padding * 2, textSize.width, textSize.height);
    
    //配图
    if (model.picture) {
        self.pictureFrame = CGRectMake(padding, CGRectGetMaxY(self.textFrame) + padding, 120, 120);
        _cellHeight = CGRectGetMaxY(self.pictureFrame) + padding;
    }
    else {
        _cellHeight = CGRectGetMaxY(self.textFrame) + padding;
    }
}

//根据字体大小、限定长度动态获取文字宽高尺寸
- (CGSize)sizeWithText:(NSString *)text font:(UIFont *)font maxSize:(CGSize)maxSize
{
    NSDictionary *dict = @{NSFontAttributeName : font};
    return [text boundingRectWithSize:maxSize options:NSStringDrawingUsesLineFragmentOrigin attributes:dict context:nil].size;
}

TableViewCell.h

#import <UIKit/UIKit.h>

@class FrameModel;

@interface TableViewCell : UITableViewCell

@property (nonatomic, strong) FrameModel *frameModel;

+ (instancetype)cellWIthTableView:(UITableView *)tableView;

@end

TableViewCell.m

#import "TableViewCell.h"
#import "Model.h"
#import "FrameModel.h"

#define HWTextFont [UIFont systemFontOfSize:15]

@interface TableViewCell ()

@property (nonatomic, weak) UIImageView *icon;
@property (nonatomic, weak) UILabel *name;
@property (nonatomic, weak) UILabel *text;
@property (nonatomic, assign) UIImageView *picture;

@end

@implementation TableViewCell
+ (instancetype)cellWIthTableView:(UITableView *)tableView
{
    //cell复用，唯一标识
    static NSString *identifier = @"HWCell";
    //先在缓存池中取
    TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifier];
    //缓存池中没有再创建，并添加标识，cell移出屏幕时放入缓存池以复用
    if (cell == nil) {
        cell = [[TableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:identifier];
    }
    
    return cell;
}

//重写init方法构建cell内容
- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        //取消点击高亮状态
        self.selectionStyle = UITableViewCellSelectionStyleNone;
        
        //头像
        UIImageView *icon = [[UIImageView alloc] init];
        [self.contentView addSubview:icon];
        self.icon = icon;
        
        //名字
        UILabel *name = [[UILabel alloc] init];
        name.font = HWTextFont;
        [self.contentView addSubview:name];
        self.name = name;
        
        //内容
        UILabel *text = [[UILabel alloc] init];
        text.numberOfLines = 0;
        text.font = HWTextFont;
        [self.contentView addSubview:text];
        self.text = text;
        
        //配图
        UIImageView *picture = [[UIImageView alloc] init];
        [self.contentView addSubview:picture];
        self.picture = picture;
    }
    
    return self;
}

//重写set方法，模型传递
- (void)setFrameModel:(FrameModel *)frameModel
{
    _frameModel = frameModel;
    
    Model *model = frameModel.model;
    
    self.icon.image = [UIImage imageNamed:model.icon];
    self.icon.frame = frameModel.iconFrame;
    
    self.name.text = model.name;
    self.name.frame = frameModel.nameFrame;
    
    self.text.text = model.text;
    self.text.frame = frameModel.textFrame;
    
    self.picture.image = [UIImage imageNamed:model.picture];
    self.picture.frame = frameModel.pictureFrame;
}