本文适合没有使用过xib的小白看, 包含约束的基本设置, 以及用xib实现tableView的自适应
首先,创建一个ViewController,并勾选Also create XIB file,然后托进一个TableView并设置简单约束,使tableView对上,下,左,右距离为0, 如图1-1
图1-1
然后点击Add按钮, 即添加完约束。
创建一个TableViewCell类, 同样勾选Also create XIB file。
首先, 要拖入一张图片, 使他实现距左10, 距上10, 距下10,宽高比为1:1且宽度为父视图的0.25。如下列图所示
设置距上,距左和宽高比
要实现宽度为父视图的0.25,需要右键按住图片,然后拉向父视图, 然后选择Equal Widths,然后再调整比例。
子视图与父视图约束关联
然后调整宽高比例和子视图宽度与父视图的比例。
找到需要调整的约束,并点击
分别调整Multiplier为1和0.25
然后我们再加一个标题与内容, 先托入一个label,按住command键选中2个, 点击如图按钮
这里我们实现上对齐,并且label距左10,距右10,并且要设置label的高度为50, lines为0用于自适应
这个地方约束依次往下为, 左, 右, 上, 下对齐,垂直中心对齐, 水平中心对齐, 基线对齐, 和父视图垂直中心对齐, 和父视图水平中心对齐。
这里可以设置label的属性,如字体,对齐方式,行数等等
再次拖入一个label,并设置距左10,距上10,距右10,距下10, 并且设置lines为0
设置约束
最终效果
然后我们就需要设置属性关联了。
点击此处,然后右键点击tableView拖入代码中,设置属性名即可
点击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。
完成效果如下图
