blocks|key|2698623|text|#2似乎是一个很好的解决方案-滚动手势将最符合用户的期望，因为它都是单一的滚动视图。(我同意#3听起来像黑客。)你可以用一些custom+layout+attributes使标题“粘性”。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2698624|2698625|这里唯一的问题是在第一个、第二个和第三个选项卡之间快速切换时的竞争条件。|blockquote|2698626|2698627|2698628|当切换视图时，这是异步加载的一个常见问题(特别是当您将数据加载到单个单元格中时，这些单元格在滚动时会被重用)。重要的是，在接收到数据后，始终检查接收器是否仍在期待它；即，在更改后备数据源之前，您应该检查分段控制值。您还可以：|style|BOLD|2698629|2698630|对不同的段使用单独的数据源对象，让每个段管理自己的数据提取，这样它们就不会混淆。在快速切换选项卡时，如果可以，|unordered-list-item|2698631|会取消未完成的请求，以避免不必要的网络|2698632|数据，从而避免每次切换选项卡时都重新提取。|2698633|2698634|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/13511733/how-to-make-supplementary-view-float-in-uicollectionview-as-section-headers-do-i^0|1Q|O|0|0|0|0|0|0|1W|4|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|-4|5|6|7|18|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|19|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1C|8|@$A|1D|B|1E|L|M]]|9|@]|C|$]]|$1|N|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]|$1|O|3|P|5|Q|7|1G|8|@]|9|@]|C|$]]|$1|R|3|S|5|Q|7|1H|8|@]|9|@]|C|$]]|$1|T|3|U|5|Q|7|1I|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1J|8|@]|9|@]|C|$]]|$1|W|3|-4|5|6|7|1K|8|@]|9|@]|C|$]]]|X|$Y|$5|Z|10|11|C|$12|13]]]]

#2 seems like a good solution — the scrolling gestures will be most consistent with what users expect, since it's all a single scroll view. (I agree that #3 sounds like a hack.) You can make the header "sticky" with some <a href="https://stackoverflow.com/questions/13511733/how-to-make-supplementary-view-float-in-uicollectionview-as-section-headers-do-i">custom layout attributes</a>.

<blockquote>
 The only problem here is the race condition when switching quickly between first, second and third tabs.
</blockquote>

This is a common problem with asynchronous loading when views are being switched out (especially when you are loading data into individual cells, which are being reused as you scroll). It is important that upon receiving the data you always check whether the receiver is still expecting it; i.e., you should check the segmented control value before changing the backing data source. You could also:

<ul>
<li>Use separate data source objects for the different segments, having each one manage its own data fetching so they can't get mixed up.</li>
<li>Cancel the outstanding requests, if you can, when quickly switching tabs, to avoid unnecessary network requests.</li>
<li>Cache data to avoid re-fetching every time you switch tabs.</li>
</ul>

blocks|key|2698690|text|我所能说的就是，你需要将UIView子类化，让它成为UIGestureRecognizerDelegate和UICollectionViewDelegate的一个委托，然后在你的UIView子类中，做如下操作，我不能给出更多关于这方面的信息，因为虽然代码属于我自己所有，但它的专有可能会激怒我用过它的相当多的组织，所以这里有个秘诀：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2698691|CGPoint+contentOffset+=+[scrollView+contentOffset];
CGFloat+newHeight+=+[_headerView+maxHeight]+-+contentOffset.y;
CGRect+frame+=+[_headerView+frame];

if+(newHeight+>+[_headerView+maxHeight])+{
++++frame.origin.y+=+contentOffset.y;
++++frame.size.height+=+[_headerView+maxHeight];
++++[_headerView+setFrame:frame];
}+else+if+(newHeight+<+[_headerView+minHeight])+{

++++frame.origin.y+=+contentOffset.y;
++++frame.size.height+=+[_headerView+minHeight];
++++[_headerView+setFrame:frame];
}+else+{
++++frame.origin.y+=+contentOffset.y;
++++frame.size.height+=+newHeight;
++++[_headerView+setFrame:frame];
}
if+([_delegate+respondsToSelector:@selector(scrollViewDidScroll:)])+{
++++return+[_delegate+scrollViewDidScroll:scrollView];
}|code-block|syntax|javascript|2698692|您必须将另一个定义为此自定义UiCollectionView标头的UIView子类化。然后，必须在UIView/UICollectionView委托的自定义子视图中声明UIView自定义标题视图，然后在UICollctionViewdelegate中设置该自定义子视图的标题。然后，您应该将UIView/+in集合视图的这个复合子类拉入您的UIViewController中。哦，是的，在你的layoutSubViews中，确保你做了通过双层子类传递的高度计算。因此，您将拥有以下文件：|2698693|2698694|UIVew这是UICollectionView的委托，我在|ordered-list-item|2698695|+UIView之前提到过，这是一个UISCrollViewDelegate，这是一个头UIView，它拉入编号1的|2698696|UIView子类中的子类UIView，这个子类拉入编号2，并将其设置为其头|2698697|2698698|在第4部分中，请确保执行以下操作：|2698699|-+(CGFloat)maxHeight
{
++++if+(SCREEN_WIDTH+==+414)
++++{
++++++++return+260;

++++}else+if+(SCREEN_WIDTH+==+375)
++++{
++++++++return+325;

++++}else
++++{
++++++++return+290;
++++}
}

-+(CGFloat)minHeight
{
++++if+(SCREEN_WIDTH+==+414)
++++{

++++++++return+90;
++++}else+if+(SCREEN_WIDTH+==+375)
++++{
++++++++return+325;
++++}else
++++{
++++++++return+290;
++++}
}|2698700|这将传递到UIView子类，正如我已经解释过的那样，它是一个复合子类。其思想是在这个header+UIView的子类(上面的第2个)中捕获header的maxHeight，然后将其传递到主UIView子类中，该子类在scrollViewDidScroll中拦截这些值。|2698701|最后一点信息，请确保在所有方法中都设置了layoutSubviews来拦截滚动事件。例如，在上面的编号1中，layoutsubviews方法是这样的：|2698702|-+(void)layoutSubviews
{
++++CGRect+frame+=+[_headerView+frame];
++++frame.size.width+=+[self+frame].size.width;
++++[_headerView+setFrame:frame];
++++[super+layoutSubviews];
}|2698703|这是我能给你的全部，我希望我能发布更多，但这应该会让你了解在生产环境中是如何为你在野外看到的一流应用程序做这件事的。|2698704|还有一件事需要注意。当你开始像这样的密集实现时，不要惊讶地了解到，例如，在使用我已经解释过的方法的应用程序中，单个视图控制器将有30-40个自定义子类，这些子类要么是它们本身的子类，要么是我自己的子类或我自己的子类的复合子类或子类。我告诉你这一点是为了让你知道需要多少代码才能让这一切变得正确，不是为了吓倒你，而是让你知道这可能需要一段时间才能正确，如果它需要一段时间才能正常工作，也不要踢自己的屁股。祝你好运！|2698705|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|19|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1B|8|@]|9|@]|A|$]]|$1|M|3|N|5|L|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|L|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1F|8|@]|9|@]|A|$]]|$1|T|3|U|5|D|7|1G|8|@]|9|@]|A|$E|F]]|$1|V|3|W|5|6|7|1H|8|@]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1I|8|@]|9|@]|A|$]]|$1|Z|3|10|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|11|3|12|5|6|7|1K|8|@]|9|@]|A|$]]|$1|13|3|14|5|6|7|1L|8|@]|9|@]|A|$]]|$1|15|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|16|$]]

All I can say is that you need to subclass UIView and make it a delegate of UIGestureRecognizerDelegate and UICollectionViewDelegate, then in your UIView subclass, do the following, I can't give out anymore information on this because the code, although owned by myself, is proprietary to the point of probably enraging quite a few organizations that I've used this for, so here's the secret sauce: 

<pre><code>CGPoint contentOffset = [scrollView contentOffset];
CGFloat newHeight = [_headerView maxHeight] - contentOffset.y;
CGRect frame = [_headerView frame];

if (newHeight &gt; [_headerView maxHeight]) {
 frame.origin.y = contentOffset.y;
 frame.size.height = [_headerView maxHeight];
 [_headerView setFrame:frame];
} else if (newHeight &lt; [_headerView minHeight]) {

 frame.origin.y = contentOffset.y;
 frame.size.height = [_headerView minHeight];
 [_headerView setFrame:frame];
} else {
 frame.origin.y = contentOffset.y;
 frame.size.height = newHeight;
 [_headerView setFrame:frame];
}
if ([_delegate respondsToSelector:@selector(scrollViewDidScroll:)]) {
 return [_delegate scrollViewDidScroll:scrollView];
}
</code></pre>

You must subclass another UIView that is defined as the header for this custom UiCollectionView. Then, you must declare the UIView custom header view inside the custom subview of the UIView/UICollectionView delegate, and then set the header of that custom subview inside the UICollctionViewdelegate. You should then pull in this compounded subclass of UIView/UIcollectionView into your UIViewController. Oh yes, and in your layoutSubViews, make sure you do the height calculations that are passed through a double layered subclass. So, you will have the following files:

<ol>
<li>UIVew this is the delegate of UICollectionView and what I mentioned before</li>
<li>UIView this is a UISCrollViewDelegate and this is the header view</li>
<li>UIViewController that pulls in the subclassed UIView in number 1</li>
<li>UIView subclass of number 1 that pulls in number 2 and sets it as its header</li>
</ol>

In the number 4 part, make sure you do something like this:

<pre><code>- (CGFloat)maxHeight
{
 if (SCREEN_WIDTH == 414)
 {
 return 260;

 }else if (SCREEN_WIDTH == 375)
 {
 return 325;

 }else
 {
 return 290;
 }
}

- (CGFloat)minHeight
{
 if (SCREEN_WIDTH == 414)
 {

 return 90;
 }else if (SCREEN_WIDTH == 375)
 {
 return 325;
 }else
 {
 return 290;
 }
}
</code></pre>

This will then pass through to the UIView subclass that is a compounded subclass as I already explained. The idea is to capture the maxHeight of you header in the subclass of this header UIView (number 2 above), and then pass this into the main UIView subclass that intercepts these values in the scrollViewDidScroll.

Last tidbit of information, make sure you set up your layoutSubviews in all methods to intercept scroll events. For example in number 1 above, the layoutsubviews method is this:

<pre><code>- (void)layoutSubviews
{
 CGRect frame = [_headerView frame];
 frame.size.width = [self frame].size.width;
 [_headerView setFrame:frame];
 [super layoutSubviews];
}
</code></pre>

This is all I can give you, I wish I could post more, but this should give you an idea of how it's done in production environments for the big time apps you see out in the wild.

One more thing to note. When you start going down the road of intense implementations like this, don't be surprised to learn that, for example, a single view controller in an app that works with methods like I've explained will have anywhere from 30-40 custom subclasses that are either subclasses in their own right or compounded subclasses or subclasses of my own subclasses or my own subclasses. I'm telling you this so you get an idea of how much code is required to get this right, not to scare you, but to let you know that it might take a while to get right, and to not kick yourself in the butt if it takes awhile to make work. Good luck!!

blocks|key|132077|text|我想你想要和pinterest个人资料页面一样的功能。要以简单的方式实现这些功能，您需要做以下事情。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|132078|Step+1：将UIView添加为tableHeaderView那些在滚动时炫耀的人。|132079|self.tableHeaderView+=+yourView|code-block|syntax|javascript|132080|第2步：在部分标题视图中添加UISegmentControl。|CODE|132081|+-+(UITableViewHeaderFooterView+*)headerViewForSection:(NSInteger)section{
++return+your_segmentcontrolView;

}|132082|Step+3：将UICollectionView添加到第一部分的第一行。|132083|通过实现以下方式，您可以获得您想要的功能。|132084|希望这能对你有所帮助。|132085|entityMap^0|6|9|0|0|6|0|0|0|3|E|G|0|0|0|6|8|G|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|O]]|D|@]|E|$]]|$1|P|3|Q|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|R|3|S|5|6|7|1C|8|@$9|1D|A|1E|B|C]|$9|1F|A|1G|B|O]]|D|@]|E|$]]|$1|T|3|U|5|6|7|1H|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1I|8|@]|D|@]|E|$]]|$1|X|3|-4|5|6|7|1J|8|@]|D|@]|E|$]]]|Y|$]]

I think you want the same functionality that pinterest profile page have. To implement such functionality at easy way, you need to do following things.

Step 1 : Add UIView as tableHeaderView those who showing off while scrolling up.

<pre><code>self.tableHeaderView = yourView
</code></pre>

Step 2 : Add <code>UISegmentControl</code> in section header view.

<pre><code> - (UITableViewHeaderFooterView *)headerViewForSection:(NSInteger)section{
 return your_segmentcontrolView;

}
</code></pre>

Step 3 : Add <code>UICollectionView</code> into first row of first section.

By implementing following way, you can got your desire functionality.

Hope this help you.

blocks|key|133211|text|type|unstyled|depth|inlineStyleRanges|entityRanges|data|133212|将标题视图、正文视图(持有段视图和集合视图)添加到scroll+view.|unordered-list-item|133213|Initially中为集合视图设置userInteractionEnabled属性为"NO“。|133214|始终跟踪滚动视图的昆虫。|133215|如果滚动的昆虫的y坐标大于标题视图的高度，则将userInteractionEnabled属性设置为"YES”，以便此后可以滚动集合视图。|133216|如果用户滚动到滚动视图之外并试图使标题视图向下滚动，即Scroll视图的y坐标昆虫小于标题视图的高度，然后立即更改集合视图的用户迭代模式，并允许用户滚动滚动视图直到顶部。|133217|133218|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|-4|4|5|6|O|7|@]|8|@]|9|$]]|$1|A|3|B|4|C|6|P|7|@]|8|@]|9|$]]|$1|D|3|E|4|C|6|Q|7|@]|8|@]|9|$]]|$1|F|3|G|4|C|6|R|7|@]|8|@]|9|$]]|$1|H|3|I|4|C|6|S|7|@]|8|@]|9|$]]|$1|J|3|K|4|C|6|T|7|@]|8|@]|9|$]]|$1|L|3|-4|4|5|6|U|7|@]|8|@]|9|$]]|$1|M|3|-4|4|5|6|V|7|@]|8|@]|9|$]]]|N|$]]

<ul>
<li>Add Header View, Body View (Holding Segment View &amp; Collection View) into scroll view.</li>
<li>Initially set userInteractionEnabled property to "NO" for collection view.</li>
<li>Track the insect of scroll view always.</li>
<li>If the y-coordinate of the scrolled insect is more than the height of header view, then set userInteractionEnabled property to "YES" so that thereafter collection view can be scrolled.</li>
<li>If user scroll outside the scroll view and try to bring the header view down, i.e Scroll view y-coordinate insect is less than the height of header view, then immediately change the user iteration mode of collection view and allow user to scroll the scroll view till the top.</li>
</ul>

blocks|key|2910817|text|您可以考虑的另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2910818|使用UITableView来包含您的UI|offset|length|style|BOLD|2910819|创建一个UITableView，并将你的头设置为UITableView的headerView.|2910820|Use+a+sectionHeader，以便在单个UITableViewCell中包含segmentedControl.|unordered-list-item|2910821|
|2910822|Place++collectionView。或者，您也可以使用UITableView的footerView来包含gridView。|2910823|2910824|通过使用sectionHeader，这应该允许标题滚动出视图，但随后sectionHeader将停留在navigationBar下方或contentView顶部，直到另一个部分进入视图(在本例中，您将只有一个部分)。|2910825|entityMap^0|0|0|K|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@$D|X|E|Y|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|Z|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|10|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|L|7|12|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|13|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|14|8|@]|9|@]|A|$]]|$1|T|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|U|$]]

An alternative approach you could consider:

Use a UITableView to contain your UI

<ul>
<li>Create a UITableView, and set your header as the UITableView's headerView.</li>
<li>Use a sectionHeader to contain the segmentedControl.</li>
<li>Place your collectionView inside of a single UITableViewCell. Or alternatively, you may be able to use the UITableView's footerView to contain the gridView.</li>
</ul>

By using the sectionHeader, this should allow the header to scroll out of view, but then the sectionHeader will stick below the navigationBar or top of the contentView until another section comes into view (and in your case you will only have one section.)

blocks|key|132216|text|您可以使用库/cocoapod来为您设置，而不是手动实现。这个看起来非常适合：https://github.com/iosengineer/BMFloatingHeaderCollectionViewLayout|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|132217|此外，代码是开源的，因此您可以随时根据需要进行修改。|132218|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/iosengineer/BMFloatingHeaderCollectionViewLayout^0|13|1V|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

Rather than implementing this by hand, you could use a library/cocoapod to set this up for you. This one looks like a pretty good fit: <a href="https://github.com/iosengineer/BMFloatingHeaderCollectionViewLayout" rel="nofollow">https://github.com/iosengineer/BMFloatingHeaderCollectionViewLayout</a>

Plus, the code is open-source, so you can always modify as needed.

I have the following layout in my view controller. I want to be able to scroll vertically with the header scrolling off the view and the UISegmentedControl sticking to the top of the view, beyond that the remaining scroll should be handled by the Collection View. 

However I'm a bit confused as to what is the best approach to implemented this layout. 

<img src="https://i.stack.imgur.com/XrN8Z.png" alt="Layout">

I tried a few implementations with mixed results:

<ol>
<li>UIScrollView with UICollectionView as subviews: UIScrollView as the parent view with the header, segmented control and collection views as child controls. The problem with this approach is that the nested scrolling does not seem to work correctly. To be able to scroll the UIScrollView the tap needs to be outside the CollectionView area otherwise only the CollectionView scrolls and the header and segmented control don't move.</li>
<li>Header and Segmented Control in Header cell: I tried another approach by using a single CollectionView. I added the header and Segmented Control as subviews of a single Header cell of the collection view. When the segmented control value was changed, I switch the data source property of the CollectionView to achieve the 3 views required for the collection view. Visually everything works perfectly. The only problem here is the race condition when switching quickly between first,second and third tabs. I load the data from a web service, if the web service takes time and is still loading the data and I quickly switch the tabs then I run into bugs where the data returned is for a different collection view than what is currently selected, a lot of out of order sync issues.</li>
<li>Update constant value for Autolayout Constraint: Another approach I tried is to change the constant value of the auto layout constraint applied to "Header" view. Then I added a gesture to the view controller's view to track the scroll, as the user scrolls vertically I adjust the constant of the auto layout constraint so that the "header" cell pops out of view. Again this doesn't seem to work that smoothly, but I suppose I can tweak it, but it seems sort of a hack.</li>
</ol>

Is there a better way to implement this layout?

iOS 7 - Layout advice

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我的视图控制器中有以下布局。我希望能够垂直滚动，标题滚动离开视图，UISegmentedControl贴在视图顶部，除此之外，剩余的滚动应该由集合视图处理。然而，我有点困惑，什么是实现这种布局的最佳方法。​​我尝试了几个实现，结果好坏参半：以UICollectionView作为子视图的UIScrollView： UIS...

问iOS 7-布局建议
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS 7-布局建议EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问iOS 7-布局建议
EN