iOS开发——使用Autolayout生成动态高度的TableViewCell单元格

步骤一、TableViewCell中使用Autolayout

要点：Cell的高度必须在Constraints中指明，但不能定死，需要让内部由内容决定高度的View决定动态高度。

如UILabel设置numberOfLines为0，设置好左右约束和上下相对位置的约束后就可以让Label的内在高度尺寸约束决定Label的高，即可让系统推断出整个cell的高。

 

步骤二、在Controller中设置TableView的属性

要点：

self.tableView.estimatedRowHeight = 54;//54为你估算的每个单元格的平均行高，方便系统计算滚动条大小等动作

       self.tableView.rowHeight = UITableViewAutomaticDimension;//实际值为-1,让系统自动计算Cell的行高。

 

样例代码：(使用Masonry第三方Autolayout库)

Cell：

   1:  //

   2:  //  NewsCell.h

   3:  //  M04P20-新闻

   4:  //

   5:  //  Created by 张泽阳 on 4/26/15.

   6:  //  Copyright (c) 2015 张泽阳. All rights reserved.

   7:  //

   8:   

   9:  #import <UIKit/UIKit.h>

  10:  @class News;

  11:  @interface NewsCell : UITableViewCell

  12:   

  13:  @property (nonatomic,strong) UILabel* newsTitleLabel;

  14:  @property (nonatomic,strong) UILabel* newsAuthorLabel;

  15:  @property (nonatomic,strong) UILabel* newsCommentsLabel;

  16:  @property (nonatomic,strong) UIImageView* pictureImageView;

  17:  -(void)setContentData:(News*)news;

  18:  +(instancetype)newsCellWithTableView:(UITableView*)tableView;

  19:  @end

  20:   

  21:   

  22:  //

  23:  //  NewsCell.m

  24:  //  M04P20-新闻

  25:  //

  26:  //  Created by 张泽阳 on 4/26/15.

  27:  //  Copyright (c) 2015 张泽阳. All rights reserved.

  28:  //

  29:   

  30:  #import "NewsCell.h"

  31:  #import "News.h"

  32:  #import "Masonry.h"

  33:  @implementation NewsCell

  34:   

  35:  /**

  36:   *  懒加载

  37:   */

  38:  -(UILabel *)newsCommentsLabel{

  39:      if (!_newsCommentsLabel) {

  40:          _newsCommentsLabel = [[UILabel alloc]init];

  41:      }

  42:      return _newsCommentsLabel;

  43:  }

  44:  -(UILabel *)newsTitleLabel{

  45:      if (!_newsTitleLabel) {

  46:          _newsTitleLabel = [[UILabel alloc]init];

  47:          

  48:      }

  49:      return _newsTitleLabel;

  50:  }

  51:  -(UILabel *)newsAuthorLabel{

  52:      if (!_newsAuthorLabel) {

  53:          _newsAuthorLabel = [[UILabel alloc]init];

  54:          [self.contentView addSubview:_newsAuthorLabel];

  55:      }

  56:      return _newsAuthorLabel;

  57:  }

  58:  -(UIImageView *)pictureImageView{

  59:      if (!_pictureImageView) {

  60:          _pictureImageView = [[UIImageView alloc]init];

  61:      }

  62:      return _pictureImageView;

  63:  }

  64:  /**

  65:   *  便利构造器

  66:   */

  67:  +(instancetype)newsCellWithTableView:(UITableView *)tableView{

  68:      static NSString* ID = @"news";

  69:      NewsCell* cell = [tableView dequeueReusableCellWithIdentifier:ID];

  70:      if (!cell) {

  71:          cell = [[NewsCell alloc]initWIthTableView:tableView andID:ID];

  72:      }

  73:      

  74:      [cell setNeedsLayout];

  75:      [cell layoutIfNeeded];

  76:      return cell;

  77:  }

  78:  /**

  79:   *  init中设置相对固定的数据

  80:   *

  81:   */

  82:  -(instancetype)initWIthTableView:(UITableView*)tablview andID:(NSString*)ID{

  83:  //    static NSString* ID = @"news";

  84:      self = [super initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];//别忘了super init

  85:      [self.contentView addSubview:self.newsTitleLabel];

  86:      [self.contentView addSubview:self.newsAuthorLabel];

  87:      [self.contentView addSubview:self.pictureImageView];

  88:      [self.contentView addSubview:self.newsCommentsLabel];

  89:      

  90:      self.newsCommentsLabel.textColor = [UIColor grayColor];

  91:      self.newsCommentsLabel.font = [UIFont systemFontOfSize:12];

  92:      [self.newsCommentsLabel setHighlightedTextColor:[UIColor whiteColor]];

  93:      self.newsAuthorLabel.textColor = [UIColor grayColor];

  94:      self.newsAuthorLabel.font = [UIFont systemFontOfSize:12];

  95:      [self.newsAuthorLabel setHighlightedTextColor:[UIColor whiteColor]];

  96:      

  97:      self.newsTitleLabel.font = [UIFont boldSystemFontOfSize:15];

  98:      self.newsTitleLabel.numberOfLines = 0;

  99:      

 100:      [self.newsTitleLabel setHighlightedTextColor:[UIColor whiteColor]];

 101:      self.pictureImageView.contentMode = UIViewContentModeScaleAspectFit;

 102:      

 103:      return self;

 104:  }

 105:  /**

 106:   *  设置相对动态的数据

 107:   */

 108:  -(void)setContentData:(News *)news{

 109:      self.newsTitleLabel.text = news.title;

 110:      self.newsAuthorLabel.text = news.author;

 111:      self.newsCommentsLabel.text = [NSString stringWithFormat:@"评论：%d",news.comments];

 112:      self.pictureImageView.image = [UIImage imageNamed:news.icon];

 113:  }

 114:  /**

 115:   *  设置布局  记得调用super

 116:   */

 117:  -(void)layoutSubviews{

 118:      [super layoutSubviews];

 119:      [self.newsTitleLabel mas_makeConstraints:^(MASConstraintMaker *make){

 120:          make.top.equalTo(self.contentView.mas_top).mas_offset(8);  ///offset???

 121:          make.left.equalTo(self.contentView.mas_left).mas_offset(8);

 122:          make.right.equalTo(self.pictureImageView.mas_left).mas_offset(-8);

 123:      }];

 124:      

 125:      [self.newsAuthorLabel mas_makeConstraints:^(MASConstraintMaker *make){

 126:          make.left.equalTo(self.newsTitleLabel);

 127:          make.top.greaterThanOrEqualTo(self.newsTitleLabel.mas_bottom).mas_offset(8);

 128:          make.bottom.equalTo(self.contentView.mas_bottom).mas_offset(-8);

 129:      }];

 130:      

 131:      [self.newsCommentsLabel mas_makeConstraints:^(MASConstraintMaker *make){

 132:          make.top.equalTo(self.newsAuthorLabel.mas_top);

 133:          make.right.equalTo(self.pictureImageView.mas_left).mas_offset(-8);

 134:      }];

 135:      

 136:      [self.pictureImageView mas_makeConstraints:^(MASConstraintMaker *make){

 137:          make.top.equalTo(self.contentView.mas_top).mas_offset(8);

 138:          make.right.equalTo(self.contentView.mas_right).mas_offset(-8);

 139:          make.bottom.equalTo(self.contentView.mas_bottom).mas_offset(-8);

 140:          make.width.mas_equalTo(120);

 141:      }];

 142:  }

 143:  /**

 144:   *  单元格被选中/取消选中时的表现

 145:   */

 146:  -(void)setSelected:(BOOL)selected animated:(BOOL)animated{

 147:      [super setSelected:selected animated:animated];

 148:  //    self.newsTitleLabel.textColor = selected?([UIColor whiteColor]):([UIColor blackColor]);

 149:  //    self.newsAuthorLabel.textColor = selected?([UIColor whiteColor]):([UIColor blackColor]);

 150:  //    self.newsCommentsLabel.textColor = selected?([UIColor whiteColor]):([UIColor blackColor]);

 151:  }

 152:  @end

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

Controller中：

   1:  //

   2:  //  ViewController.h

   3:  //  M04P20-新闻

   4:  //

   5:  //  Created by 张泽阳 on 4/26/15.

   6:  //  Copyright (c) 2015 张泽阳. All rights reserved.

   7:  //

   8:   

   9:  #import <UIKit/UIKit.h>

  10:   

  11:  @interface ViewController : UIViewController

  12:  @property (nonatomic,strong) NSArray* newses;

  13:   

  14:  @end

  15:   

  16:   

  17:  //

  18:  //  ViewController.m

  19:  //  M04P20-新闻

  20:  //

  21:  //  Created by 张泽阳 on 4/26/15.

  22:  //  Copyright (c) 2015 张泽阳. All rights reserved.

  23:  //

  24:   

  25:  #import "ViewController.h"

  26:  #import "News.h"

  27:  #import "NewsCell.h"

  28:  #import "NSObject+NSObject_ZZYMODEL.h"

  29:  @interface ViewController ()<UITableViewDelegate,UITableViewDataSource>

  30:  @property (weak, nonatomic) IBOutlet UITableView *tableView;

  31:   

  32:  @end

  33:   

  34:  @implementation ViewController

  35:  -(NSArray *)newses{

  36:      if (!_newses) {

  37:          _newses = [News modelArrayWithFilename:@"news.plist"];

  38:      }

  39:      return _newses;

  40:  }

  41:  - (void)viewDidLoad {

  42:      [super viewDidLoad];

  43:      self.tableView.estimatedRowHeight = 54;

  44:      self.tableView.rowHeight = UITableViewAutomaticDimension;

  45:      [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(orientationDidRotate) name:UIApplicationDidChangeStatusBarOrientationNotification object:nil];

  46:  }

  47:  -(BOOL)prefersStatusBarHidden{

  48:      return YES;

  49:  }

  50:  -(void)orientationDidRotate{

  51:      [self.tableView reloadData];

  52:  }

  53:  -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{

  54:      return 1;

  55:  }

  56:   

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

  58:      return self.newses.count;

  59:  }

  60:   

  61:  -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{

  62:      NewsCell* cell = [NewsCell newsCellWithTableView:tableView];

  63:      [cell setContentData:self.newses[indexPath.row]];

  64:       

  65:       

  66:       return cell;

  67:       

  68:  }

  69:   

  70:   

  71:   

  72:   

  73:  @end

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

参考连接：

http://itony.me/381.html

http://www.mgenware.com/blog/?p=507

http://blog.163.com/china_uv/blog/static/1171372672014111681232340/

http://codingobjc.com/blog/2014/10/15/shi-yong-autolayoutshi-xian-uitableviewde-celldong-tai-bu-ju-he-ke-bian-xing-gao/index.html