問(wèn)題描述

這是我對(duì)此詳細(xì)視圖的視圖結(jié)構(gòu)(博客應(yīng)用程序，我想查看在滾動(dòng)視圖內(nèi)具有動(dòng)態(tài)高度的整個(gè)帖子):

UIView-UIScrollView-SinglePostView(自定義視圖)-標(biāo)題-字幕-內(nèi)容

通常要向 UIView 添加單個(gè)帖子視圖"，我只需將其實(shí)例化，將其提供給我的 Post 對(duì)象，然后添加一個(gè)約束，將 singlePostView 的寬度固定到超級(jí)視圖，此時(shí)事情會(huì)很好地布置.但是，當(dāng)我嘗試將其添加到滾動(dòng)視圖時(shí)，它既不顯示也不滾動(dòng).

UIScrollView *scrollView = [[UIScrollView alloc] init];[self.view addSubview:scrollView];NOBSinglePostView *singlePost = [[NOBSinglePostView alloc] initWithPost:self.post];[scrollView addSubview:singlePost];singlePost.translatesAutoresizingMaskIntoConstraints = NO;scrollView.translatesAutoresizingMaskIntoConstraints = NO;NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(scrollView,singlePost);[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|"選項(xiàng):0 指標(biāo):0 視圖:viewsDictionary]]；[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|"選項(xiàng):0 指標(biāo):0 視圖:viewsDictionary]]；[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[singlePost]|"選項(xiàng):0 指標(biāo):0 視圖:viewsDictionary]]；

在你呈現(xiàn)的結(jié)構(gòu)中，使用 AutoLayout，你的 UIScrollView 的 contentSize 是由intrinsicContentSize 的子視圖，這里是你的 SinglePostView.

問(wèn)題是，SinglePostView 是 UIView 的子類，它的 intrinsicContentSize 在考慮時(shí)總是 CGSizeZero本身.您需要做的是使 SinglePostView 的 intrinsicContentSize 依賴于其子視圖的 intrinsicContentSize.

那么，因?yàn)槟愕?SinglePostView 的子視圖是 UILabels，并且因?yàn)?UILabel 的 intrinsicContentSize 是顯示其內(nèi)容所需的最小尺寸，您的 SinglePostView 的 intrinsicContentSize 將等于其子視圖 intrinsicContentSizes 的總和，即顯示所有三個(gè)標(biāo)簽的內(nèi)容所需的總大小.

這里是怎么做的.

第 1 步:刪除所有自動(dòng)設(shè)置的約束

首先，正如您部分所做的那樣，您需要?jiǎng)h除系統(tǒng)自動(dòng)設(shè)置的所有約束.

假設(shè)您沒(méi)有在情節(jié)提要或 XIB 中設(shè)置任何約束(或者您甚至沒(méi)有這些約束)，只需執(zhí)行以下操作:

scrollView.translatesAutoresizingMaskIntoConstraints = NO;singlePost.translatesAutoresizingMaskIntoConstraints = NO;titleLabel.translatesAutoresizingMaskIntoConstraints = NO;subtitleLabel.translatesAutoresizingMaskIntoConstraints = NO;contentLabel.translatesAutoresizingMaskIntoConstraints = NO;

現(xiàn)在您有了清晰的計(jì)劃，您可以開(kāi)始設(shè)置自己的約束條件了.

第 2 步:約束 scrollView

首先，讓我們像您一樣創(chuàng)建視圖引用字典以供 AutoLayout 使用:

NSDictionary *views = NSDictionaryOfVariableBindings(scrollView, singlePost, titleLabel, subtitleLabel, contentLabel);

然后，就像你已經(jīng)做過(guò)的那樣，讓我們??將滾動(dòng)視圖限制為其父視圖的大小:

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[scrollView]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[scrollView]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；

第三步:約束SinglePostView推送scrollView的contentSize

要清楚這一步，您必須了解 UIScrollView 及其 subviews 之間設(shè)置的每個(gè)約束實(shí)際上都會(huì)改變 contentSizeUIScrollView，而不是它的實(shí)際 bounds.例如，如果您將 UIImageView 約束到其父 UIScrollView 的邊框，然后將 UIScrollView 大小兩倍的圖像放入 UIImageView，你的圖像不會(huì)被縮小，它的 UIImageView 會(huì)占用它的圖像大小并在 UIScrollView 內(nèi)變得可滾動(dòng).UIImageViewp>

所以你必須在這里設(shè)置:

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[singlePost]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[singlePost]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:singlePost屬性:NSLayoutAttributeWidthrelatedBy:NSLayoutRelationEqualtoItem:滾動(dòng)視圖屬性:NSLayoutAttributeWidth乘數(shù):1.0f常數(shù):0.0f]]；

前兩個(gè)約束非常明顯.然而，第三個(gè)在這里是因?yàn)椋瑸榱俗屇?UILabels 正確顯示其內(nèi)容并且仍然可讀，您可能希望它們是多行的并且滾動(dòng)是垂直的，而不是水平的.這就是您將 SinglePostView 的 width 設(shè)置為與 scrollView 相同的原因.這樣，您可以防止 scrollView 的 contentSize.width 超出其 bounds.width.

第 4 步:約束您的 UILabels 以推動(dòng)"您的 SinglePostView

第四步，也是最后一步，您現(xiàn)在需要對(duì) SinglePostView 的子視圖設(shè)置約束，以便從它們那里獲得 intrinsicContentSize.

這是你的做法(最簡(jiǎn)單的實(shí)現(xiàn)，沒(méi)有邊距，一個(gè)標(biāo)簽一個(gè)接一個(gè)垂直):

[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[titleLabel]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[subtitleLabel]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[contentLabel]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[titleLabel]-0-[subtitleLabel]-[contentLabel]-0-|"選項(xiàng):0 指標(biāo):0 意見(jiàn):意見(jiàn)]]；

你應(yīng)該完成了.

最后一個(gè)建議，你絕對(duì)應(yīng)該查看 UIStoryboard 來(lái)做這些事情.它更簡(jiǎn)單，更直觀.

希望這會(huì)有所幫助，

P.S.:如果你愿意，我可以花一些時(shí)間在 Github 上同時(shí)使用 UIStoryboard 和 Visual Format Language 推送一個(gè)項(xiàng)目.只要告訴我你是否需要一個(gè).

祝你好運(yùn).

Here is my structure of views for this detail view (blogging application, I want to view the entire post which has dynamic height inside of a scrollview):

UIView
  -UIScrollView
    -SinglePostView (custom view)
      -Title
      -Subtitle
      -Content

Normally to add a 'single post view' to a UIView I simply instantiate it, feed it my Post object and then add a single constraint that pins the width of the singlePostView to the superview, at which point things get laid out nicely. However when I try to add it to a scroll view, it doesn't show up nor does it scroll.

UIScrollView *scrollView = [[UIScrollView alloc] init];
[self.view addSubview:scrollView];

NOBSinglePostView *singlePost = [[NOBSinglePostView alloc] initWithPost:self.post];
[scrollView addSubview:singlePost];
singlePost.translatesAutoresizingMaskIntoConstraints = NO;
scrollView.translatesAutoresizingMaskIntoConstraints  = NO;

NSDictionary *viewsDictionary = NSDictionaryOfVariableBindings(scrollView,singlePost);
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|" options:0 metrics: 0 views:viewsDictionary]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[singlePost]|" options:0 metrics: 0 views:viewsDictionary]];

In the structure you are presenting, using AutoLayout, the contentSize of your UIScrollView is driven by the intrinsicContentSize of its subviews, here your SinglePostView.

The problem is, SinglePostView being a subclass of UIView, its intrinsicContentSize is always CGSizeZero when considered by itself. What you need to do is make the intrinsicContentSize of your SinglePostView depend on the intrinsicContentSize of its subviews.

Then, because the subviews of your SinglePostView are UILabels, and because a UILabel's intrinsicContentSize is the smallest size it needs to display its content, your SinglePostView's intrinsicContentSize will be equal to the sum of its subviews intrinsicContentSizes, that is the total size needed to display the content of all three of your labels.

Here is how to do it.

Step 1: Removing all automatically set constraints

First, as you partially did, you need to remove all constraints automatically set by the system.

Assuming you don't have any constraints set in your storyboard or XIB (or you don't even have one of these), just do:

scrollView.translatesAutoresizingMaskIntoConstraints  = NO;
singlePost.translatesAutoresizingMaskIntoConstraints = NO;
titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
subtitleLabel.translatesAutoresizingMaskIntoConstraints = NO;
contentLabel.translatesAutoresizingMaskIntoConstraints = NO;

Now you have a clear slate and you can start setting your own constraints.

Step 2: Constraining the scrollView

First, let's create, as you did, the views references dictionary for AutoLayout to use:

NSDictionary *views = NSDictionaryOfVariableBindings(scrollView, singlePost, titleLabel, subtitleLabel, contentLabel);

Then, also as you already did, let's constrain the scroll view to be the size of its superview:

[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[scrollView]-0-|" options:0 metrics:0 views:views]];
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[scrollView]-0-|" options:0 metrics:0 views:views]];

Step 3: Constraining the SinglePostView to push the scrollView's contentSize

For this step to be clear, you have to understand that every constraints set between a UIScrollView and its subviews will actually change the contentSize of the UIScrollView, not its actual bounds. For Example, if you constrain a UIImageView to the borders of its parent UIScrollView and then put an image twice the size of the UIScrollView inside the UIImageView, your image won't get shrunk, its the UIImageView that will take the size of its image and become scrollable inside the UIScrollView.

So here is what you have to set here:

[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[singlePost]-0-|" options:0 metrics:0 views:views]];
[scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[singlePost]-0-|" options:0 metrics:0 views:views]];
[scrollView addConstraint:[NSLayoutConstraint constraintWithItem:singlePost
                                                         attribute:NSLayoutAttributeWidth
                                                         relatedBy:NSLayoutRelationEqual
                                                            toItem:scrollView
                                                         attribute:NSLayoutAttributeWidth
                                                        multiplier:1.0f
                                                          constant:0.0f]];

First two constraints are pretty obvious. The third one, however, is here because, for your UILabels to display their content properly and still be readable, you will probably want them to be multilined and the scrolling to be vertical, not horizontal. That's why you set your SinglePostView's width to be the same as your scrollView's. This way, you prevent your scrollView's contentSize.width to be anything more than its bounds.width.

Step 4: Constraining your UILabels to "push" the bounds of your SinglePostView

Fourth and final step, you now need to set constraints on your SinglePostView's subviews, so that it gets an intrinsicContentSize from them.

Here is how you do it (simplest implementation, no margins, one label after the other vertically):

[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[titleLabel]-0-|" options:0 metrics:0 views:views]];
[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[subtitleLabel]-0-|" options:0 metrics:0 views:views]];
[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-0-[contentLabel]-0-|" options:0 metrics:0 views:views]];
[singlePost addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[titleLabel]-0-[subtitleLabel]-[contentLabel]-0-|" options:0 metrics:0 views:views]];

And with that you should be done.

One last advice, you should definitely look into UIStoryboard to do these kinds of things. It's a lot simpler and more visual.

Hope this helps,

P.S.: If you want, I can take some time and push a project using both UIStoryboard and the Visual Format Language on Github. Just tell me if you would need one.

Good luck.

這篇關(guān)于使用自動(dòng)布局向 UIScrollView 添加動(dòng)態(tài)大小的視圖(高度)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！