iOS中Cell高度如何能够自动适应需要显示的内容

本文的代码例子 ： "Cell行高自适应.zip" http://vdisk.weibo.com/s/Gb9Mt

 

下面我们来看看代码。我需要一个第三方库EGO异步下载、addtion文件夹和StringUtil文件以及Comment、Status、User这三个数据模型，这篇文章的主要目的是讲解如何计算Cell的高度，jSON数据分类见上面那篇文章，上面说的在代码例子中都有的。将它们考入你的工程。

 

实现思路：

 

/* 

  File.strings

  Cell行高自适应

 

  Created by 杜甲 on 13-4-2.

  Copyright (c) 2013年杜甲. All rights reserved.

 

 实现类似微博这样的项目需要怎么做？

 1、首先，要获取数据。（这部分在网络请求中介绍）

 2、其次，将数据分类保存在对应的模型中。（这个技术在大字典中介绍）

 3、最后，将获取的数据显示在屏幕上。

 

 一、为什么要学习Cell的行高自适应？

 因为，我们要将获取的内容合理的显示在屏幕上。

 

 二、实现步骤

 1、要先将数据发送到显示界面的类ShowDataViewController中

 2、计算获取每个数据单元需要在屏幕上占多大的空间，这个功能的实现在类Algorithm中，详细解释在类中。

 3、创建一个UITableViewCell类型的类：StatusCell这个类的作用就是为了设计如何在Cell中显示数据进行布局。

 

 三、技术难点：

 1、控件.autoresizingMask属性：每个控件几乎都有autoresizingMask的属性，该属性的作用是将改控件固定在相对的某个位置，例如：要将位置固定在当前cell的左下方，需要按下面的格式写UIViewAutoresizingFlexibleTopMargin代表是上方、UIViewAutoresizingFlexibleRightMargin是右方的意思。因此写代码设置控件的相对位置需要写出相反的方向。 

 

*/

 

 

我们先实现一个计算Cell高度的类：

Algorithm.h

 

<span >#import <Foundation/Foundation.h>
#import "Status.h"
@interface Algorithm : NSObject

-(CGFloat)cellHeight:(NSString*)contentText with:(CGFloat)with;
//计算Cell的高度
-(CGFloat)calculation:(NSIndexPath*)indexPath StatusArr:(NSMutableArray*)statusArr;


@end
</span>

 

 

Algorithm.m

 

<span >#import "Algorithm.h"
#define kTextViewPadding            16.0
#define kLineBreakMode1              UILineBreakModeWordWrap
@implementation Algorithm
-(CGFloat)calculation:(NSIndexPath *)indexPath StatusArr:(NSMutableArray *)statusArr
{
    NSInteger row = indexPath.row;
    if (row >= [statusArr count]) {
        return 1;
    }
    Status* status = [statusArr objectAtIndex:row];

    NSString* url = status.retweetedStatus.thumbnailPic;

    NSString* url2 = status.thumbnailPic;

    CGFloat height  = 0.0f;

    if (status.retweetedStatus && ![status.retweetedStatus isEqual:[NSNull null]]) {
        //调用下面-(CGFloat)cellHeight:(NSString *)contentText with:(CGFloat)with的方法计算一段文字所占的高度
        height = [self cellHeight:status.text with:320.0f] + [self cellHeight:[NSString stringWithFormat:@"%@:%@",status.retweetedStatus.user.screenName,status.retweetedStatus.text] with:300.0f] - 22.0f;
        NSLog(@"status.retweetedStatus,height = %f",height);
    }
    else
    {
        height = [self cellHeight:status.text with:320.0f];
        //后加调式用
        height+=40;
        NSLog(@"height = %f",height);
    }
    if ((url && [url length] != 0) || (url2 && [url2 length] != 0)) {
        //如果有图片将高度增加80个像素
        height = height + 80;
        NSLog(@"height = %f",height);
    }
    return height;

}</span>

<span >//计算一段文字的高度
-(CGFloat)cellHeight:(NSString *)contentText with:(CGFloat)with
{

    UIFont* font = [UIFont systemFontOfSize:14];
   //sizeWithFont:字体大小constrainedToSize:显示的范围lineBreakMode:
    CGSize size = [contentText sizeWithFont:font constrainedToSize:CGSizeMake(with - kTextViewPadding , 3000000.f) lineBreakMode:kLineBreakMode1];
    CGFloat height = size.height + 44;
    return height;
}
</span>

 

 

接下来我们创建一个继承自UITableViewCell

StatusCell.h

 

<span >#import <UIKit/UIKit.h>
#import "Status.h"
#import "EGOImageView.h"
@interface StatusCell : UITableViewCell

@property (nonatomic, retain) UITableViewCell* tableViewCell;
@property (nonatomic, retain) UITableView*     tableVw;
@property (nonatomic, retain) NSMutableArray* StatusArr;

@property (retain, nonatomic)  UILabel *countLB;             //数量
@property (retain, nonatomic)  EGOImageView *avatarImage;
@property (retain, nonatomic)  UITextView *contentTF;        //微博正文
@property (retain, nonatomic) UILabel *userNameLB;
@property (retain, nonatomic)  UIImageView *bgImage;         //微博背景
@property (retain, nonatomic)  EGOImageView *contentImage;  //正文的图片
@property (retain, nonatomic)  UIView *retwitterMainV;       //转发的View
@property (retain, nonatomic)  EGOImageView *retwitterBgImage;     //转发的背景
@property (retain, nonatomic)  UITextView *retwitterContentTF;//转发的正文
@property (retain, nonatomic)  EGOImageView *retwitterContentImage;//转发正文的图片
//@property (assign, nonatomic) id<StatusViewCellDelegate> delegate;
@property (retain, nonatomic) NSIndexPath *cellIndexPath;
@property (retain, nonatomic)  UILabel *fromLB;
@property (retain, nonatomic)  UILabel *timeLB;
@property (retain, nonatomic)  UILabel* sourceLB;  //微博来源


-(CGFloat)setTFHeightWithImage:(BOOL)hasImage haveRetwitterImage:(BOOL)haveRetwitterImage;
-(void)setupCell:(Status*)status;

-(void)controlPosition;

@end
</span>

StatusCell.m

 

本文中CELL中的控件全部用代码实现，所以下面的代码比较多。

 

<span >#define IMAGE_VIEW_HEIGHT 80.0f
#import "StatusCell.h"

@implementation StatusCell

- (id)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier
{
    self = [super initWithStyle:style reuseIdentifier:reuseIdentifier];
    if (self) {

        // Initialization code
        //点击Cell时背景不变蓝
        self.selectionStyle = UITableViewCellSelectionStyleNone;

        self.bgImage = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"table_header_bg.png"]];
        self.bgImage.frame = CGRectMake(0, 29 , 320, 73);
       // self.bgImage.contentMode = UIViewContentModeScaleToFill;
        [self.contentView addSubview:self.bgImage];


        self.avatarImage = [[EGOImageView alloc] initWithFrame: CGRectMake(5.0 , 5.0, 22, 22)];

        self.avatarImage.image = [UIImage imageNamed:@"loadingImage_50x118.png"];
        self.avatarImage.contentMode = UIViewContentModeScaleToFill;
        [self.contentView addSubview:self.avatarImage];


        self.userNameLB = [[UILabel alloc] initWithFrame:CGRectMake(35, 0, 165, 28)];
        self.userNameLB.font = [UIFont systemFontOfSize:17.0];
        self.userNameLB.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:self.userNameLB];

        self.contentTF = [[UITextView alloc] init];
        self.contentTF.editable = NO;
        self.contentTF.frame = CGRectMake(0, 29 , 320, 73);
        self.contentTF.font = [UIFont systemFontOfSize:14.0];
        //UITextView如果有网址可以直接打开
        self.contentTF.dataDetectorTypes = UIDataDetectorTypeLink;
        //开启多点触摸
        self.contentTF.multipleTouchEnabled = YES;
        self.contentTF.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:self.contentTF];


        self.contentImage = [[EGOImageView alloc] initWithImage:[UIImage imageNamed:@"loadingImage_50x118.png"]];
        self.contentImage.frame = CGRectMake(90, 84, 140, 80);
        self.contentImage.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:self.contentImage];




        self.retwitterMainV = [[UIView alloc] initWithFrame:CGRectMake(0, 166, 320, 160)];
        self.retwitterMainV.contentMode = UIViewContentModeScaleAspectFill;
        self.retwitterMainV.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:self.retwitterMainV];

        //转发背景图
        self.retwitterBgImage = [[EGOImageView alloc] initWithFrame:CGRectMake(-10, -10, 320, 100)];
        self.retwitterBgImage.contentMode = UIViewContentModeScaleToFill;
        self.retwitterBgImage.backgroundColor = [UIColor clearColor];
        [self.retwitterMainV addSubview:self.retwitterBgImage];

        //转发的正文
        self.retwitterContentTF = [[UITextView alloc] initWithFrame:CGRectMake(10, 5, 300, 150)];
        self.retwitterContentTF.editable = NO;
        self.retwitterContentTF.backgroundColor = [UIColor clearColor];
        [self.retwitterMainV addSubview:self.retwitterContentTF];

        //转发的图片
        self.retwitterContentImage = [[EGOImageView alloc] initWithFrame:CGRectMake(90, 100, 140, 80)];
        self.retwitterContentImage.backgroundColor = [UIColor clearColor];
        self.retwitterContentImage.contentMode = UIViewContentModeScaleAspectFit;
        [self.retwitterMainV addSubview:self.retwitterContentImage];


        self.countLB = [[UILabel alloc] init];
        self.countLB.backgroundColor = [UIColor clearColor];
        [self.countLB setFont:[UIFont fontWithName:@"Arial Rounded MT Bold" size:13.0]];
        self.countLB.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleLeftMargin;
        [self.contentView addSubview:self.countLB];

        self.sourceLB = [[UILabel alloc] init];
        self.sourceLB.backgroundColor = [UIColor clearColor];
        [self.sourceLB setFont:[UIFont fontWithName:@"Arial Rounded MT Bold" size:13.0]];
        //每个控件几乎都有autoresizingMask的属性，该属性的作用是将改控件固定在相对的某个位置，例如：要将位置固定在当前cell的左下方，需要按下面的格式写UIViewAutoresizingFlexibleTopMargin代表是上方、UIViewAutoresizingFlexibleRightMargin是右方的意思。因此写代码设置控件的相对位置需要写出相反的方向。
        self.sourceLB.autoresizingMask = UIViewAutoresizingFlexibleTopMargin|UIViewAutoresizingFlexibleRightMargin;
        [self.contentView addSubview:self.sourceLB];

        self.timeLB = [[UILabel alloc] initWithFrame:CGRectMake(200, 0, 165, 28)];
        [self.timeLB setFont:[UIFont fontWithName:@"Arial Rounded MT Bold" size:13.0]];
        self.timeLB.backgroundColor = [UIColor clearColor];
        [self.contentView addSubview:self.timeLB];


    }
    return self;
}</span>

<span >-(void)setupCell:(Status *)status
{
    //头像图片的网址
    NSURL* avatarImageUrl = [NSURL URLWithString:status.user.profileImageUrl];
    //正文图片的网址
    NSURL* contentImageUrl = [NSURL URLWithString:status.thumbnailPic];
    //转发图片的方法
    NSURL* retweetedStatusUrl = [NSURL URLWithString:status.retweetedStatus.thumbnailPic];

    self.contentTF.text = status.text;
    self.userNameLB.text = status.user.screenName;
    self.timeLB.text = [status timestamp];
    self.avatarImage.imageURL =avatarImageUrl;

    self.countLB.text = [NSString stringWithFormat:@"评论:%d 转发:%d",status.commentsCount,status.retweetsCount];
    self.fromLB.text = [NSString stringWithFormat:@"来自:%@",status.source];
    self.timeLB.text = status.timestamp;

    self.sourceLB.text = [NSString stringWithFormat:@"来源:%@",status.source];
    Status  *retwitterStatus    = status.retweetedStatus;

    //有转发
    if (retwitterStatus && ![retwitterStatus isEqual:[NSNull null]])
    {
        self.retwitterMainV.hidden = NO;
        self.retwitterContentTF.text = [NSString stringWithFormat:@"%@:%@",status.retweetedStatus.user.screenName,retwitterStatus.text];
        self.contentImage.hidden = YES;

        if (![retweetedStatusUrl isEqual:[NSNull null]])
        {
            self.retwitterContentImage.imageURL = retweetedStatusUrl;
        }

        NSString *url = status.retweetedStatus.thumbnailPic;
        self.retwitterContentImage.hidden = url != nil && [url length] != 0 ? NO : YES;
        [self setTFHeightWithImage:NO
                haveRetwitterImage:url != nil && [url length] != 0 ? YES : NO];//计算cell的高度，以及背景图的处理
    }

    //无转发
    else
    {
        self.retwitterMainV.hidden = YES;
        if (![contentImageUrl isEqual:[NSNull null]]) {
            self.contentImage.imageURL = contentImageUrl;
        }

        NSString *url = status.thumbnailPic;
        self.contentImage.hidden = url != nil && [url length] != 0 ? NO : YES;
        [self setTFHeightWithImage:url != nil && [url length] != 0 ? YES : NO
                haveRetwitterImage:NO];//计算cell的高度，以及背景图的处理
    }
}</span>

<span >//计算cell的高度，以及背景图的处理
-(CGFloat)setTFHeightWithImage:(BOOL)hasImage haveRetwitterImage:(BOOL)haveRetwitterImage
{
    [self.contentTF layoutIfNeeded];

    //博文Text
    CGRect frame = self.contentTF.frame;
    frame.size = self.contentTF.contentSize;
    self.contentTF.frame = frame;
    //设置正文的背景
    self.bgImage.frame = frame;

    //转发博文Text
    frame = self.retwitterContentTF.frame;
    frame.size = self.retwitterContentTF.contentSize;
    self.retwitterContentTF.frame = frame;
    //调整转发背景
    self.retwitterBgImage.image = [[UIImage imageNamed:@"timeline_rt_border_t.png"] stretchableImageWithLeftCapWidth:130 topCapHeight:7];
    frame.origin.x -=10;
    frame.origin.y -=5;
    frame.size.width = frame.size.width +15;

    self.retwitterBgImage.frame = frame;

    //转发的主View
    frame = self.retwitterMainV.frame;

    if (haveRetwitterImage) frame.size.height = self.retwitterContentTF.frame.size.height + IMAGE_VIEW_HEIGHT + 15;
    else frame.size.height = self.retwitterContentTF.frame.size.height + 15;

    if(hasImage) frame.origin.y = self.contentTF.frame.size.height + self.contentTF.frame.origin.y + IMAGE_VIEW_HEIGHT;
    else frame.origin.y = self.contentTF.frame.size.height + self.contentTF.frame.origin.y;

    self.retwitterMainV.frame = frame;


    //转发的图片
    frame = self.retwitterContentImage.frame;
    frame.origin.y = self.retwitterContentTF.frame.size.height;
    frame.size.height = IMAGE_VIEW_HEIGHT;
    self.retwitterContentImage.frame = frame;

    //正文的图片
    frame = self.contentImage.frame;
    frame.origin.y = self.contentTF.frame.size.height + self.contentTF.frame.origin.y - 5.0f;
    frame.size.height = IMAGE_VIEW_HEIGHT;
    self.contentImage.frame = frame;

    //背景设置
    self.bgImage.image = [[UIImage imageNamed:@"table_header_bg.png"] stretchableImageWithLeftCapWidth:10 topCapHeight:10];

  //   = self.retwitterContentTF.frame;
    return self.contentTF.contentSize.height;
}</span>

<span >-(void)controlPosition
{
      self.countLB.frame = CGRectMake(198, self.frame.size.height - 20, 142, 21);
    self.sourceLB.frame = CGRectMake(20, self.frame.size.height - 20, 152, 21);

}</span>

 

 

再创建一个继承自的UIViewController类ShowDataViewController这个类用来创建tableView以及显示Cell中的内容。

ShowDataViewController.h

 

 

<span >#import <UIKit/UIKit.h>
#import "Algorithm.h"
@interface ShowDataViewController : UIViewController<UITableViewDataSource,UITableViewDelegate>
//创建一个UITableView
@property (strong, nonatomic) UITableView* tb;
//Algorithm类的作用是根据内容计算Cell的高度
@property (strong, nonatomic) Algorithm* algorithm;
//用一个NSMutableArray接收Status类的对象
@property (strong , nonatomic) NSMutableArray* statusArr;
@end
</span>

ShowDataViewController.m

 

 

 

<span >-(id)init
{
    if (self = [super init]) {
        //为什么要在init方法中注册消息中心，这样可以在AppDelegate方法中初始化这个类时注册消息中心
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(getArray:) name:@"getArray" object:nil];
    }
    return self;
}</span>

<span >-(void)getArray:(NSNotification*)aNotification
{
    //接收传过来的数组，数组中存有Status类的对象
    self.statusArr = aNotification.object;
}</span>

<span >- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.tb = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, 320, 548) style:UITableViewStylePlain];
    self.tb.delegate = self;
    self.tb.dataSource = self;
    [self.view addSubview:self.tb];
    self.algorithm = [[Algorithm alloc] init];



}</span>

<span >- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    return [self.statusArr count];
}</span>

<span >-(CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //调用Algorithm类的方法计算cell的高度 这个方法如何实现见Algorithm类中的注释
    CGFloat height = [self.algorithm calculation:indexPath StatusArr:self.statusArr];

    return height;
}</span>

<span >- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    int  row = indexPath.row;
   static NSString* strIdentifier = @"StatusCell";
//
//    //自定义Cell只需要将初始化的类变成自定义的Cell
    StatusCell* cell  = [tableView dequeueReusableCellWithIdentifier:strIdentifier];
    if (cell == nil)
    {
        cell =  [[StatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:strIdentifier];
    }
    //下面这个方法是用来调整控件坐标的
    [cell controlPosition];
    //Status是储存微博信息的类，将数组中的微博类的对象按照行号取出
    Status* status = [self.statusArr objectAtIndex:row];
    NSLog(@"row = %d",row);
    //下面这个方法是将微博信息放在Cell中
    [cell setupCell:status];


    return cell;

}
</span>

 

 

接下来我们在ViewController类中添加如下代码

ViewController.h

 

 

<span >@interface ViewController : UIViewController
-(IBAction)changeVC:(id)sender;
-(IBAction)sendData:(id)sender;
@end
</span>

 

 

自己在XIB中拖2个button与下面两个方法相关联吧

<span >-(IBAction)sendData:(id)sender
{
    //将JSON格式的数据文件的路径找出
    NSString* path = [[NSBundle mainBundle] pathForResource:@"jsonTest" ofType:@"json"];
    //将数据放入NSData中
    NSData* data = [NSData dataWithContentsOfFile:path];
    //JSON解析
    NSDictionary* dic =  [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil];
    //    NSLog(@"dic = %@",dic);





    NSArray* arr = [dic objectForKey:@"statuses"];
    NSLog(@"%d",arr.count);
    NSLog(@"arr = %@",arr);


    //初始化一个数组
    NSMutableArray* tempArr = [NSMutableArray array];
    //将数组中的字典放入Status模型中，大家在这里会有一个疑问将数组中的字典都放入模型中，怎么区分不同数组中的数据？
    for (NSDictionary* item in arr) {
        //答案在statusWithJsonDictionary:的类方法中见该方法注释
        Status* status = [Status statusWithJsonDictionary:item];




        //将Status类型的对象放入数组中
        [tempArr addObject:status];
    }
    //将tempArr数组通过消息中心发送到@"getArray" 这个名字的消息对应的方法中
    [[NSNotificationCenter defaultCenter] postNotificationName:@"getArray" object:tempArr];
}
</span>

 

 

<span >-(IBAction)changeVC:(id)sender
{
    //切换视图控制器
    [[NSNotificationCenter defaultCenter] postNotificationName:@"changeVC" object:nil];

}
</span>

 

 

我们还要在AppDelegate类中添加如下代码。

 

<span >#import <UIKit/UIKit.h>
<span >#import "ShowDataViewController.h"
@class ViewController;</span><span >
</span>
@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (strong, nonatomic) UIWindow *window;

@property (strong, nonatomic) ViewController *viewController;
<span >@property (strong, nonatomic) ShowDataViewController* showVC;
</span>
@end</span>

AppDelegate.m

 

 

<span >#import "AppDelegate.h"
#import "ShowDataViewController.h"
<span >#import "ViewController.h"</span>

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{</span>

<span ><span > </span>//为了注册消息</span>

<span >   <span > [[ShowDataViewController alloc] init];</span></span>

<span ><span >//注册消息为了切换视图控制器
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(changeVC) name:@"changeVC" object:nil];</span>
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.viewController = [[ViewController alloc] initWithNibName:@"ViewController" bundle:nil];
    self.showVC = [[ShowDataViewController alloc] init];
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];
    return YES;
}</span>

 

 

 

<span >-(void)changeVC
{
    self.window.rootViewController = self.showVC;
}</span>