最近做公司項(xiàng)目,使用到到tableHeadView马胧,一直習(xí)慣用masonry來設(shè)置約束汉买,但是設(shè)置tableHeadView沒有那么的簡單。先看下效果圖:
視圖層次結(jié)構(gòu)是這樣的:
基礎(chǔ)的創(chuàng)建工程項(xiàng)目之類的就直接跳過佩脊,直接來分析:
頂部的tableHeadView 是一個(gè)自定義的view蛙粘,然后內(nèi)部存在兩個(gè)view 。我們設(shè)置如下:
1> 創(chuàng)建一個(gè)ContainerView 繼承自 UIView;
2> 在ContainerView 添加子控件威彰,設(shè)置Container 的底部約束
3> 在設(shè)置tableView 的控制器處理
tableView的基本設(shè)置:創(chuàng)建出牧、添加到父視圖、設(shè)置約束歇盼、數(shù)據(jù)源舔痕、代理等
創(chuàng)建一個(gè)headView,來容納帶有約束的 ContainerView
利用 systemLayoutSizeFittingSize:UILayoutFittingCompressedSize 計(jì)算出約束后的高度,然后設(shè)置給headView,
設(shè)置tableHeadView = headView
原因:
tableHeadView是一個(gè)自適應(yīng)的視圖,本身就會適應(yīng)伯复,一般的方法慨代,你如果利用frame 來設(shè)置,沒有問題啸如,
如果你用masonry / AutoLayout 來設(shè)置的話侍匙,自定義頂部的視圖會出現(xiàn)各種奇葩的問題(網(wǎng)上有人說這事tableView 的一個(gè)bug,你們可以嘗試一下)叮雳。
如果你自定義視圖想暗,那么建議你使用外部 用一個(gè)View 來包住,根據(jù)內(nèi)部的約束帘不,來反推外部frame的高度说莫,然后設(shè)置給headView
具體代碼實(shí)現(xiàn)如下:
//
//? ContainerView.m
//? Masonry的內(nèi)部視圖視圖
//
//? Created by admin on 16/1/20.
//? Copyright ? 2016年 admin. All rights reserved.
//
#import "ContainerView.h"
#import "Masonry.h"
@interface ContainerView () {
UITextView *_textView;
UIButton *_selecteBtn;
}
@end
@implementation ContainerView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setupUI];
}
return self;
}
- (void)setupUI {
_textView = [[UITextView alloc] init];
_selecteBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[self addSubview:_textView];
[self addSubview:_selecteBtn];
_textView.backgroundColor = [UIColor blueColor];
[_textView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.equalTo(self);
make.top.equalTo(self);
make.height.equalTo(@50);
}];
_selecteBtn.backgroundColor = [UIColor purpleColor];
[_selecteBtn mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(_textView.mas_bottom).offset(20);
make.left.right.equalTo(self);
make.height.equalTo(@50);
}];
[self mas_makeConstraints:^(MASConstraintMaker *make) {
make.bottom.equalTo(_selecteBtn);
}];
}
@end
//
//? ViewController.m
//? Masonry的內(nèi)部視圖視圖
//
//? Created by admin on 16/1/20.
//? Copyright ? 2016年 admin. All rights reserved.
//
#import "ViewController.h"
#import "ContainerView.h"
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UITableView *tableView =[[UITableView alloc]init];
[tableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"cellIdentifier"];
tableView.dataSource =self;
tableView.delegate =self;
[self.view addSubview:tableView];
[tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.left.right.bottom.equalTo(self.view);
make.top.equalTo(self.view).offset(20);
}];
[tableView setNeedsLayout];
[tableView layoutIfNeeded];
UIView *headView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 1)];
ContainerView *con = [[ContainerView alloc] init];
con.backgroundColor = [UIColor blackColor];
[headView addSubview:con];
[con mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(headView);
}];
CGFloat height = [headView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
CGRect frame = headView.frame;
frame.size.height = height;
headView.frame = frame;
tableView.tableHeaderView = headView;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 20;
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cellIdentifier"];
cell.textLabel.text = [NSString stringWithFormat:@"%d",indexPath.row];
return cell;
}
@end