Twitter-Like Header: doesn't snap back

[btrzupek]

We have implemented a header view based pretty much exactly off the Twitter-like example. The main difference is that we centered the UserImage View and made it larger. We also added an additional field below the description field you had. So some pretty minor layout changes.

It looks great when the view first loads. However, (only after) I scroll through a page of data in the view and THEN scroll back to the top, when the top scrolls to the full size again. the header background image stays extremely large, and forces all the fields below it to compress and clip.

Why would this be happening?

Example image attached.

Sorry for the blurs. (Customer data)

[btrzupek]

Just a bit more info I discovered. If I use your example header image and navigation blur image it works as expected.

We need to dynamically load our images, so that part is different. Also, these images will vary in size and aspect ratios (they are user submitted).

How would the dimensions or aspect ratio effect this part of the control? More importantly, how do we fix it?

[gskbyte]

Hi @btrzupek ,

it seems to be a problem with the constraints definition. Honestly without seeing the code I can't know it. You could try to print the rect for the problematic background and guess what's going on, probably Auto Layout is giving you warnings...

Good luck!

[gskbyte]

Oh by the way, I would have a look at the added text field, probably its constraints are the ones misadjusting the imageView's constraints.

[btrzupek]

Thanks for the quick reply! Have a look, if you can, at the constraints code below:

`- (void)setupConstraints {
CGFloat padding = 10;

[self.navigationBar mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(@0);
    make.left.equalTo(@0);
    make.right.equalTo(@0);
    make.height.equalTo(@64);
}];

[self.navigationBackground mas_makeConstraints:^(MASConstraintMaker *make) {
    make.edges.equalTo(@0);
}];

[self.navigationVisualEffectView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.top.equalTo(self.navigationBackground.mas_top);
    make.left.equalTo(self.navigationBackground.mas_left);
    make.right.equalTo(self.navigationBackground.mas_right);
    make.bottom.equalTo(self.navigationBackground.mas_bottom);
}];

[self.navigationBarTitle mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerX.equalTo(@0);
    make.top.equalTo(@0).offset(kNavigationTitleTop);
}];

[self.backButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(@0);
    make.left.equalTo(@12);
}];

[self.optionsButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.centerY.equalTo(@0);
    make.right.equalTo(@(-12));
}];

[self.tabs mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(@(-padding));
    make.left.equalTo(@(padding));
    make.right.equalTo(@(-padding));
}];

[self.websiteLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.tabs.mas_top).offset(-padding);
    make.left.equalTo(self.tabs.mas_left);
    make.right.equalTo(self.tabs.mas_right);
}];

[self.phoneLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.websiteLabel.mas_top).offset(-padding);
    make.left.equalTo(self.tabs.mas_left);
    make.right.equalTo(self.tabs.mas_right);
}];

[self.addressLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.phoneLabel.mas_top).offset(-padding);
    make.left.equalTo(self.tabs.mas_left);
    make.right.equalTo(self.tabs.mas_right);
}];

[self.nicknameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.addressLabel.mas_top).offset(-padding);
    make.left.equalTo(self.tabs.mas_left);
    make.right.equalTo(self.tabs.mas_right);
}];

[self.realNameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
    make.bottom.equalTo(self.nicknameLabel.mas_top);
    make.left.equalTo(self.tabs.mas_left);
    make.right.equalTo(self.tabs.mas_right);
}];

[self.userImageView mas_makeConstraints:^(MASConstraintMaker *  make) {
    make.bottom.equalTo(self.realNameLabel.mas_top).offset(-padding);
    make.width.equalTo(@(kMaxImageSize));
    make.height.equalTo(@(kMaxImageSize));
    make.centerX.equalTo(self.contentView.mas_centerX);
}];

[self.followButton mas_makeConstraints:^(MASConstraintMaker *make) {
    make.height.equalTo(@(32));
    make.right.equalTo(self.tabs.mas_right);
    make.bottom.equalTo(self.userImageView.mas_bottom);
}];

[self remakeHeaderImageConstraints];

}`

[btrzupek]

Oh - and Auto-Layout is silent, there aren't any warnings. :/

[gskbyte]

Honestly, I don't know what might be wrong: I added an extra label below infoLabel and moved the user image in my example to the center and everything works as expected:

To debug the issue, I would deactivate views one by one to see where the error is. If you can confirm it's an error in the library I could debug it a little bit further.

[btrzupek]

Ok, so tweaking the constraint on the userImageView did the trick. Here is where it ended. I am not sure why this was the magic - but I will accept it:)

[self.userImageView mas_makeConstraints:^(MASConstraintMaker *make) { make.centerX.equalTo(self.contentView.mas_centerX); make.centerY.equalTo(self.contentView.mas_centerY).offset(-90); make.width.equalTo(@(kUserImageSize.width)); make.height.equalTo(@(kUserImageSize.height)); }];

[btrzupek]

Thanks a ton for the help!