在tableHeaderView中使用autolayout

例子一 :理解父视图通过子视图适配大小

原帖传送门:stackoverflow

#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()

@property (nonatomic,strong) UIView *contentView;
@property (nonatomic,strong) UILabel *titleLabel;
@property (nonatomic,strong) UILabel *detailLabel;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.contentView = [UIView new];
    self.contentView.backgroundColor = [UIColor redColor];
    [self.view addSubview:self.contentView];

    self.titleLabel = [UILabel new];
    self.titleLabel.numberOfLines = 0;
    self.titleLabel.backgroundColor = [UIColor greenColor];
    [self.contentView addSubview:self.titleLabel];

    self.detailLabel = [UILabel new];
    self.detailLabel.numberOfLines = 0;
    self.detailLabel.backgroundColor = [UIColor orangeColor];
    [self.contentView addSubview:self.detailLabel];

    self.titleLabel.text = @"小明:你好!\n小红:你好!";
    self.detailLabel.text = @"小明:你好!\n小红:你好!\n小明:你吃饭了吗?\n小红:没吃呢。\n小明:没吃赶紧回家吃去!";

    [self.contentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_offset(100);
        make.left.mas_offset(100);
    }];
    [self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(5);
        make.top.equalTo(self.contentView).offset(5);
        make.trailing.greaterThanOrEqualTo(self.contentView).offset(-5);
    }];
    [self.detailLabel mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.contentView).offset(5);
        make.right.equalTo(self.contentView).offset(-5);
        make.top.equalTo(self.titleLabel.mas_bottom).offset(5);
        make.bottom.equalTo(self.contentView).offset(-5);
    }];
}

效果如图

在tableHeaderView中使用autolayout_第1张图片
image.png

这就是一个父视图通过子视图自动适配大小的例子。

重点是如何在tableHeaderView中使用呢?而且是XIB中的TableView?!

例子二 :在tableHeaderView中使用autolayout

原题传送门:stackoverflow

在tableHeaderView中使用autolayout_第2张图片
image.png

运行起来也就是这个样,蓝色的tableHeaderView没什么变化。
好,我们增加点代码。

#import "ViewController.h"
#import "Masonry.h"

@interface ViewController ()

@property (strong, nonatomic) IBOutlet UIView *containerView;
@property (nonatomic,strong) UILabel *label1;
@property (nonatomic,strong) UILabel *label2;
@property (strong, nonatomic) IBOutlet UITableView *testTableView;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    self.label1 = [UILabel new];
    self.label1.numberOfLines = 0;
    self.label1.backgroundColor = [UIColor greenColor];
    [self.containerView addSubview:self.label1];

    self.label2 = [UILabel new];
    self.label2.numberOfLines = 0;
    self.label2.backgroundColor = [UIColor orangeColor];
    [self.containerView addSubview:self.label2];

    self.label1.text = @"小明:你好!\n小红:你好!";
    self.label2.text = @"小明:你好!\n小红:你好!\n小明:你吃饭了吗?\n小红:没吃呢。\n小明:没吃赶紧回家吃去!";

    [self.label1 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.containerView).offset(5);
        make.top.equalTo(self.containerView).offset(5);
    make.trailing.greaterThanOrEqualTo(self.containerView).offset(-5);
    }];
    [self.label2 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.containerView).offset(5);
        make.right.equalTo(self.containerView).offset(-5);
        make.top.equalTo(self.label1.mas_bottom).offset(5);
        make.bottom.equalTo(self.containerView).offset(-5);
    }];

}

运行后是这个样子的

在tableHeaderView中使用autolayout_第3张图片
image.png

很显然,不是我们想要的样子。

加上下面的代码,就是见证奇迹的时刻了!!
-(void)viewWillLayoutSubviews
{
    [super viewWillLayoutSubviews];
    self.testTableView.tableHeaderView = self.containerView;
    [self.containerView setNeedsLayout];
    [self.containerView layoutIfNeeded];
    CGFloat height = [self.containerView systemLayoutSizeFittingSize:UILayoutFittingCompressedSize].height;
    self.containerView.frame = CGRectMake(0, 0, 0, height);
    self.testTableView.tableHeaderView = self.containerView;
}

运行效果如下

在tableHeaderView中使用autolayout_第4张图片
image.png

好了!看完回家吃饭去吧!

你可能感兴趣的:(在tableHeaderView中使用autolayout)