Resize a superview to make its size equal to the the size of its subviews

Question

I have subclassed a UIView and created few views inside it. I want to create an instance of this view inside my view controller's view and there's another custom view which will be placed below that view. I am not sure how do I put the second view below my first view.

When I debug the frames, I get {{0,0}, {0,0}}. I am using Masonry for view layout. I have tried several solutions from this thread

I have created a sample project which has the actual code I have tried. https://github.com/anuj-rajput/ViewSample

In this sample project, there are 2 subclasses of UIView, PhoneVerificationTopView and PhoneVerificationPhoneNumberView and a view controller PhoneVerificationViewController which creates objects from both these views. I need to perfectly order them in such a way they are perfectly aligned vertically (PhoneNumberView below TopView).

Am I doing something wrong? Is there a right way to subclass a UIView and then refer it in the controller?

This is how the view should look like

You project doesn't compile for me. What cocoapod version are you using? Plus, Did you consider using UIStackView? It seems very suitable for this scenario — MCMatan, Aug 08 '16 at 21:04
@MCMatan CocoaPods version is 1.0.1. I did try considering UIStackView but it is available only in iOS 9 and my project needs to be backward compatible up to iOS 8 :( — Anuj Rajput, Aug 08 '16 at 21:09

score 1 · Answer 1 · answered Aug 08 '16 at 21:45

1

When you are using AutoLayout, and you want the parent view to resize according to I'ts subclasses, It needed to know how big the content is.

The most top view has to have a constraint to the top of the parent view. And the most bottom view has to have a constraint to the bottom of the parent view.

Currently your views are acutely not containing there subclasses.

If you will try, for instance to set the background color of "topView" to red, You will notice, It does not change I'ts color. That is because I'ts size is 0. I'ts not wrapping I'ts content. If you will set "clipToBound" to YES, you will not see Its subclasses too.

To fix it, add a bottom constraint, from the bottom view to the parent view:

[self.subtitleTextLabel mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self.titleTextLabel);
            make.width.equalTo(self.mas_width).multipliedBy(0.7);
            make.top.equalTo(self.titleTextLabel.mas_bottom).with.offset(10.f);
            make.bottom.equalTo(self.mas_bottom); //This line is added
        }];


[self.sendButton mas_makeConstraints:^(MASConstraintMaker *make) {
            make.centerX.equalTo(self);
            make.width.equalTo(self).multipliedBy(0.4);
            make.height.equalTo(@40);
            make.top.equalTo(self.phoneNumberTextView.mas_bottom).with.offset(30.f);
            make.bottom.equalTo(self.mas_bottom); // This line is added
        }];

answered Aug 08 '16 at 21:45

MCMatan

8,623
6
46
85

This seems to work fine. I need to understand what is this constraint doing to the view? – Anuj Rajput Aug 08 '16 at 21:53
1

This tells the view what size it is. before you had constrains referencing the width (make.width.equalTo(self.mas_width).multipliedBy(0.7) for example), and the top ( make.top.equalTo(self);) But you didn't have a constraint referencing the to the bottom. So It didn't know I'ts height. – MCMatan Aug 08 '16 at 21:56
Ah. Got it! Thank you sir – Anuj Rajput Aug 08 '16 at 21:58
It does look as it should but now there are several layout issues. Check it out here https://www.dropbox.com/s/qw36p1s7fipjt00/Layout-issues.txt – Anuj Rajput Aug 09 '16 at 08:27
I'm sorry this is a new question, and before asking it, I would recommend you to go over AutoLayout. Sites like https://www.raywenderlich.com have great tutorials and video tutorials that's explain AutoLayout, and autolayot warnings. Good luck. – MCMatan Aug 09 '16 at 08:43
The issue is with these constraints self.subtitleTextLabel.bottom == PhoneVerificationTopView.bottom PhoneVerificationTopView.height == 0 . Still the same issue I wanted to resolve – Anuj Rajput Aug 09 '16 at 10:13
@AnujRajput you sad your self "This seems to work fine". I've downloaded your project and solved your issue. Now you are facing a new one. Yet you don't accept my answer. I'm not planing on continuing to help you. – MCMatan Aug 10 '16 at 19:48
I didn't check for issues. I just ran the code and saw it on simulator. On inspecting it later, I found layout issues. This answer sure resolves some of the problem but adding on more issues to an existing problem is not the perfect solution. The layout issues came up only when I added your suggested code, it does look like it works visually on the simulator. I have unaccepted your answer because it is not the solution I am looking for, it still remains upvoted because it resolved some problem. Even you explanation comment remains upvoted. – Anuj Rajput Aug 10 '16 at 19:57
The warnings you are getting is of a variety of ether issues you have in your layout, not something I can give you one clear answer about. And the purpose of asking a question is getting a strait answer. Not asking to go over your project and re design your hole layout. That is the reason I recommended you to go over AutoLayout principles. AutoLayout demands a very Hi practice developer for managing to build a good clear and no warnings layout. Any way, I hope you the best, good luck. – MCMatan Aug 10 '16 at 20:11
I can read layout warning very well and can tell what caused the issue. The issue here clearly tells that self.subtitleLabel.bottom = TopView.bottom but TopView.height = 0 which clearly tells that top view's height is 0 but somehow it is breaking some constraints to make it what it should look like visually – Anuj Rajput Aug 10 '16 at 20:16

Resize a superview to make its size equal to the the size of its subviews

1 Answers1