本文適合沒有使用過xib的小白看, 包含約束的基本設(shè)置, 以及用xib實現(xiàn)tableView的自適應(yīng)
首先,創(chuàng)建一個ViewController,并勾選Also create XIB file,然后托進一個TableView并設(shè)置簡單約束,使tableView對上,下,左,右距離為0, 如圖1-1
圖1-1
然后點擊Add按鈕, 即添加完約束调炬。
創(chuàng)建一個TableViewCell類, 同樣勾選Also create XIB file。
首先, 要拖入一張圖片, 使他實現(xiàn)距左10, 距上10, 距下10,寬高比為1:1且寬度為父視圖的0.25舱馅。如下列圖所示
設(shè)置距上,距左和寬高比
要實現(xiàn)寬度為父視圖的0.25,需要右鍵按住圖片,然后拉向父視圖, 然后選擇Equal Widths,然后再調(diào)整比例缰泡。
子視圖與父視圖約束關(guān)聯(lián)
然后調(diào)整寬高比例和子視圖寬度與父視圖的比例。
找到需要調(diào)整的約束,并點擊
分別調(diào)整Multiplier為1和0.25
然后我們再加一個標題與內(nèi)容, 先托入一個label,按住command鍵選中2個, 點擊如圖按鈕
這里我們實現(xiàn)上對齊,并且label距左10,距右10,并且要設(shè)置label的高度為50, lines為0用于自適應(yīng)
這個地方約束依次往下為, 左, 右, 上, 下對齊,垂直中心對齊, 水平中心對齊, 基線對齊, 和父視圖垂直中心對齊, 和父視圖水平中心對齊代嗤。
這里可以設(shè)置label的屬性,如字體,對齊方式,行數(shù)等等
再次拖入一個label,并設(shè)置距左10,距上10,距右10,距下10, 并且設(shè)置lines為0
設(shè)置約束
最終效果
然后我們就需要設(shè)置屬性關(guān)聯(lián)了棘钞。
點擊此處,然后右鍵點擊tableView拖入代碼中,設(shè)置屬性名即可
點擊tableView到File's Owner可以設(shè)置代理
然后在.m文件里寫相關(guān)代碼,如下
#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"];
}
}
這里特別說下自適應(yīng), 需要約束從上到下都設(shè)置, 然后給tableView一個預(yù)加載高度, 并且在高度返回方法里返回UITableViewAutomaticDimension干毅。
完成效果如下圖
