xib-基本使用,tableView篇,以及Xib实现自适应高度

本文适合没有使用过xib的小白看, 包含约束的基本设置, 以及用xib实现tableView的自适应

首先,创建一个ViewController,并勾选Also create XIB file,然后托进一个TableView并设置简单约束,使tableView对上,下,左,右距离为0, 如图1-1

xib-基本使用,tableView篇,以及Xib实现自适应高度_第1张图片

图1-1

然后点击Add按钮, 即添加完约束。

创建一个TableViewCell类, 同样勾选Also create XIB file。

首先, 要拖入一张图片, 使他实现距左10, 距上10, 距下10,宽高比为1:1且宽度为父视图的0.25。如下列图所示

xib-基本使用,tableView篇,以及Xib实现自适应高度_第2张图片

设置距上,距左和宽高比

要实现宽度为父视图的0.25,需要右键按住图片,然后拉向父视图, 然后选择Equal Widths,然后再调整比例。

xib-基本使用,tableView篇,以及Xib实现自适应高度_第3张图片

子视图与父视图约束关联

然后调整宽高比例和子视图宽度与父视图的比例。

xib-基本使用,tableView篇,以及Xib实现自适应高度_第4张图片

找到需要调整的约束,并点击

xib-基本使用,tableView篇,以及Xib实现自适应高度_第5张图片

分别调整Multiplier为1和0.25

然后我们再加一个标题与内容, 先托入一个label,按住command键选中2个, 点击如图按钮

xib-基本使用,tableView篇,以及Xib实现自适应高度_第6张图片

这里我们实现上对齐,并且label距左10,距右10,并且要设置label的高度为50, lines为0用于自适应

这个地方约束依次往下为, 左, 右, 上, 下对齐,垂直中心对齐, 水平中心对齐, 基线对齐, 和父视图垂直中心对齐, 和父视图水平中心对齐。

xib-基本使用,tableView篇,以及Xib实现自适应高度_第7张图片

这里可以设置label的属性,如字体,对齐方式,行数等等

再次拖入一个label,并设置距左10,距上10,距右10,距下10, 并且设置lines为0

xib-基本使用,tableView篇,以及Xib实现自适应高度_第8张图片

设置约束

最终效果

xib-基本使用,tableView篇,以及Xib实现自适应高度_第9张图片

然后我们就需要设置属性关联了。

xib-基本使用,tableView篇,以及Xib实现自适应高度_第10张图片

点击此处,然后右键点击tableView拖入代码中,设置属性名即可

xib-基本使用,tableView篇,以及Xib实现自适应高度_第11张图片

点击tableView到File's Owner可以设置代理

然后在.m文件里写相关代码,如下

#import "TableViewVC.h"#import "TableViewCell.h"#define cellIdentifier @"TableViewCell"@interface TableViewVC ()@property (weak, nonatomic) IBOutlet UITableView *tableView;

@property (nonatomic, strong) NSMutableArray *dataArray;

@end

@implementation TableViewVC

- (void)viewDidLoad {

[super viewDidLoad];

_tableView.estimatedRowHeight = 50;

[_tableView registerNib:[UINib nibWithNibName:cellIdentifier bundle:nil] forCellReuseIdentifier:cellIdentifier];

[self generateData];

}

- (void)generateData{

_dataArray = [NSMutableArray array];

NSMutableArray *imageArray = [NSMutableArray array];

for (int i = 22; i < 40; i++) {

[imageArray addObject:[UIImage imageNamed:[NSString stringWithFormat:@"WechatIMG%d", i]]];

}

NSInteger count = arc4random() % 100 + 10;

for (int i = 0; i < count; i++) {

NSMutableDictionary *dic = [NSMutableDictionary dictionary];

int titleCount = arc4random() % 100 + 30;

int contextCount = arc4random() % 100 + 30;

NSString *title = [NSString string];

NSString *context = [NSString string];

for (int i = 0; i < contextCount; i++) {

if (i < titleCount) {

NSInteger titleCount = arc4random() % 64 + 26;

NSInteger contextCount = arc4random() % 64 + 26;

title = [NSString stringWithFormat:@"%@%c", title, titleCount];

context = [NSString stringWithFormat:@"%@%c", context, contextCount];

}else{

NSInteger contextCount = arc4random() % 64 + 26;

context = [NSString stringWithFormat:@"%@%c", context, contextCount];

}

}

[dic setObject:title forKey:@"titleString"];

[dic setObject:context forKey:@"contextString"];

[dic setObject:[imageArray objectAtIndex:arc4random() % imageArray.count] forKey:@"image"];

[_dataArray addObject:dic];

}

[_tableView reloadData];

}

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

{

return _dataArray.count;

}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath

{

return UITableViewAutomaticDimension;

}

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

{

TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

cell.dic = [_dataArray objectAtIndex:indexPath.row];

return cell;

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

}

@end

在cell里边同样拉控件属性约束到代码中, 并在set方法里赋值。

.h中为

@property (weak, nonatomic) IBOutlet UILabel *contextLabel;

@property (weak, nonatomic) IBOutlet UILabel *titleLabel;

@property (weak, nonatomic) IBOutlet UIImageView *picture;

@property (nonatomic, strong) NSDictionary *dic;

.m中为

- (void)setDic:(NSDictionary *)dic

{

if (dic) {

_dic = dic;

_picture.image = [dic objectForKey:@"image"];

_titleLabel.text = [dic objectForKey:@"titleString"];

_contextLabel.text = [dic objectForKey:@"contextString"];

}

}

这里特别说下自适应, 需要约束从上到下都设置, 然后给tableView一个预加载高度, 并且在高度返回方法里返回UITableViewAutomaticDimension。

完成效果如下图

xib-基本使用,tableView篇,以及Xib实现自适应高度_第12张图片

你可能感兴趣的:(xib-基本使用,tableView篇,以及Xib实现自适应高度)