{"id":320504,"date":"2021-03-30T09:01:34","date_gmt":"2021-03-30T09:01:34","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=320504"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=320504","title":{"rendered":"Compositional Layout: \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u0438\u0433\u0440\u0430 \u0441\u0432\u0435\u0447?"},"content":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3r\/h9\/fm\/3rh9fmui0yir49hc8kxxdpzmsqk.png\"><\/p>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0421\u043a\u043e\u0440\u043e\u0431\u043e\u0433\u0430\u0442\u043e\u0432, \u044f \u0432\u0435\u0434\u0443\u0449\u0438\u0439 iOS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 Delivery Club. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0443 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Compositional Layout. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0432\u043e\u043b\u0435\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c iOS-\u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u0430\u043f\u0440\u0443\u0432\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 iOS 13+. \u042d\u0442\u043e\u0442 \u043c\u0430\u043d\u0451\u0432\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u043d\u0430\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043d\u043e\u0432\u044b\u0439 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e layout-\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 <b>Compositional Layout<\/b>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f. <\/p>\n<p>  \u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e Compositional Layout \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432\u043e\u0442 \u044d\u0442\u0443 <a href=\"https:\/\/habr.com\/ru\/post\/495076\/\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a> \u0438 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 <a href=\"https:\/\/developer.apple.com\/documentation\/uikit\/views_and_controls\/collection_views\/implementing_modern_collection_views\">\u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438<\/a> Apple.<br \/>  <a name=\"habracut\"><\/a>  <\/p>\n<h2>\u042d\u043a\u0441\u043a\u0443\u0440\u0441 \u0432 \u044d\u043a\u0440\u0430\u043d \u0438 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u043e\u0432\u043a\u0443<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u043a\u0440\u0430\u043d \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u043b \u043d\u0430 iOS 12. \u041a\u043b\u0430\u0441\u0441\u0438\u0447\u0435\u0441\u043a\u0438\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0432\u0451\u0440\u0441\u0442\u043a\u0435, \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u0430\u044f \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0441 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0433\u0443\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0441\u043e \u0441\u0432\u043e\u0438\u043c\u0438 \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/yh\/gt\/ao\/yhgtaoenub2pv96tgtllihizqgo.png\"><\/p>\n<p>  \u0412 \u0447\u0451\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043c\u0438\u043d\u0443\u0441\u044b \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430?<\/p>\n<ul>\n<li>\u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043d\u0443\u0436\u043d\u043e \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u0432\u043e\u044e \u044f\u0447\u0435\u0439\u043a\u0443 \u0441 <code>UICollectionView<\/code>, \u0441\u043e \u0432\u0441\u0435\u043c \u0431\u043e\u0439\u043b\u0435\u0440\u043f\u043b\u0435\u0439\u0442\u043e\u043c (\u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u043e\u0439 \u0434\u0435\u043b\u0435\u0433\u0430\u0442\u043e\u0432 \u0438 \u043f\u0440\u043e\u0447\u0438\u043c).<\/li>\n<li>\u0418\u043d\u043e\u0433\u0434\u0430 \u0432\u0441\u0442\u0440\u0435\u0447\u0430\u044e\u0442\u0441\u044f \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0441 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f\u043c\u0438 \u0438 auto-sizing \u044f\u0447\u0435\u0439\u043a\u0430\u043c\u0438.<\/li>\n<li>\u041f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u0440\u0435\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0430\u0441\u0442\u043e\u044f\u0449\u0435\u0435 \u043f\u0440\u0438\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435.<\/li>\n<\/ul>\n<p>  \u0422\u0430\u043a \u0447\u0442\u043e \u0436\u0435 \u043d\u0430\u043c \u0434\u0430\u0451\u0442 Compositional Layout?<\/p>\n<ul>\n<li>\u041c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0432\u0435\u0441\u044c layout \u044d\u043a\u0440\u0430\u043d\u0430 \u0432 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c \u0441\u0442\u0438\u043b\u0435 \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/li>\n<li>\u041f\u0435\u0440\u0435\u0441\u0442\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0443 <code>UICollectionviewCell<\/code> \u0441 <code>UICollectionView<\/code>, \u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0442\u043e\u043b\u044c\u043a\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u044f\u0447\u0435\u0439\u043a\u0438.<\/li>\n<li>\u041b\u0435\u0433\u043a\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c auto-sizing \u044f\u0447\u0435\u0439\u043a\u0438.<\/li>\n<\/ul>\n<p>  <\/p>\n<h2>\u0412\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0435 Composition Layout<\/h2>\n<p>  \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0439\u0434\u0451\u043c \u043a \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435. \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0437\u0430\u043c\u0435\u043d\u0438\u043c \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0439 <code>flowLayout<\/code> \u043d\u0430 <code>UICollectionViewCompositionalLayout<\/code>:<\/p>\n<pre><code class=\"swift\">private lazy var collectionView: UICollectionView = {     let collectionViewLayout = UICollectionViewCompositionalLayout { [weak self] (sectionIndex, environment) -&gt; NSCollectionLayoutSection? in         guard let self = self else { return nil }           let section = self.viewModel.sections[sectionIndex]         switch section.kind {         \/\/\u0422\u0443\u0442 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0432\u0435\u0440\u043d\u0443\u0442\u044c NSCollectionLayoutSection \u0434\u043b\u044f \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438         }     }       let collectionView = UICollectionView(frame: .zero, collectionViewLayout: collectionViewLayout)     collectionView.dataSource = self     collectionView.delegate = self     \/\/\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u044f\u0447\u0435\u0439\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432       return collectionView }()<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u043e\u0441\u044c, \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u043e\u044f\u0432\u0438\u043b\u0441\u044f handler \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438. \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0435 \u043a\u043b\u0430\u0441\u0441\u044b Compositional Layout, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c:<\/p>\n<ul>\n<li><code>NSCollectionLayoutItem<\/code> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 layout \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430;<\/li>\n<li><code>NSCollectionLayoutGroup<\/code> \u2014 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 layout \u0433\u0440\u0443\u043f\u043f\u044b \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432;<\/li>\n<li><code>NSCollectionLayoutSection<\/code> \u2014 \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442 layout \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438.<\/li>\n<\/ul>\n<p>  \u041c\u0435\u0442\u043e\u0434\u044b <code>UICollectionViewDelegateFlowLayout<\/code> \u0443\u0434\u0430\u043b\u044f\u0435\u043c, \u043e\u043d\u0438 \u043d\u0430\u043c \u043d\u0435 \u043f\u043e\u043d\u0430\u0434\u043e\u0431\u044f\u0442\u0441\u044f. \u041a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435 \u044f\u0447\u0435\u0435\u043a \u043e\u0441\u0442\u0430\u0451\u0442\u0441\u044f \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439 \u0438 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0447\u0435\u0440\u0435\u0437 <code>cellForItemAtIndexPath<\/code>:<\/p>\n<pre><code class=\"swift\">func collectionView(_ collectionView: UICollectionView,                     cellForItemAt indexPath: IndexPath) -&gt; UICollectionViewCell {     let section = viewModel.sections[indexPath.section]     let item = section.items[indexPath.row]       switch item {     case .restaurant:         \/\/\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 UICollectionViewCell \u0434\u043b\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0440\u0435\u0441\u0442\u043e\u0440\u0430\u043d\u043e\u0432         return UICollectionViewCell()     } }<\/code><\/pre>\n<p>  <\/p>\n<h2>\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a<\/h2>\n<p>  \u0420\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u043e \u0441\u0430\u043c\u044b\u0439 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0435\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d\u0435 \u2014 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ng\/ne\/-r\/ngne-reds-bdkiwyizq1pukmcw8.jpeg\"><\/p>\n<p>  \u041e\u043f\u0438\u0448\u0435\u043c \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0441\u0435\u043a\u0446\u0438\u0438:<\/p>\n<pre><code class=\"swift\">func restaurantsSectionLayout(sectionItems: [SearchViewModel.Item],                               environment: NSCollectionLayoutEnvironment) -&gt; NSCollectionLayoutSection {     let contentSize = environment.container.contentSize     let itemSize = NSCollectionLayoutSize(         widthDimension: .absolute(contentSize.width * 0.6),         heightDimension: .estimated(216)     )     let items: [NSCollectionLayoutItem] = sectionItems.map({ _ in         .init(layoutSize: itemSize)     })       \/\/\u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b     let groupEstimateSize = CGSize(width: 50, height: 50)       let groupSize = NSCollectionLayoutSize(         widthDimension: .estimated(groupEstimateSize.width),         heightDimension: .estimated(groupEstimateSize.height)     )     let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: items)     group.interItemSpacing = .fixed(12)       let section = NSCollectionLayoutSection(group: group)     section.orthogonalScrollingBehavior = .continuous       section.boundarySupplementaryItems = [headerItem]     section.supplementariesFollowContentInsets = false       return section }<\/code><\/pre>\n<p>  \u041d\u0430 \u0432\u0445\u043e\u0434 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043c\u044b \u043f\u043e\u0434\u0430\u0451\u043c \u043c\u0430\u0441\u0441\u0438\u0432 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u043d\u0430\u0448 layout \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 <code>NSCollectionLayoutEnvironment<\/code>, \u043e\u0442\u0432\u0435\u0447\u0430\u044e\u0449\u0438\u0439 \u0437\u0430 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0435 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u043f\u0438\u0448\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0448\u0438\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 \u0432 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>NSCollectionLayoutSize<\/code>. \u0412 \u044d\u0442\u043e\u043c \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0448\u0438\u0440\u0438\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435, \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u043d\u043e\u0435 \u0441 \u0443\u0447\u0451\u0442\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430, \u0430 \u0432\u044b\u0441\u043e\u0442\u0430 \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d\u0430 \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430.<\/p>\n<pre><code class=\"swift\">let contentSize = environment.container.contentSize let itemSize = NSCollectionLayoutSize(     widthDimension: .absolute(contentSize.width * 0.6),     heightDimension: .estimated(216) )<\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u043d\u0430\u043c \u043d\u0430\u0434\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0433\u0440\u0443\u043f\u043f\u0443, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0434\u0435\u0440\u0436\u0430\u0442\u044c \u0432\u0441\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b. \u0423\u043a\u0430\u0436\u0435\u043c, \u0447\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440 \u043d\u0430\u0448\u0435\u0439 \u0433\u0440\u0443\u043f\u043f\u044b groupSize \u0434\u043e\u043b\u0436\u0435\u043d \u0431\u044b\u0442\u044c \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u043d \u043d\u0430 \u044d\u0442\u0430\u043f\u0435 \u0440\u0435\u043d\u0434\u0435\u0440\u0438\u043d\u0433\u0430, \u0442\u0430\u043a\u0436\u0435 \u0437\u0430\u0434\u0430\u0434\u0438\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u0447\u0435\u0440\u0435\u0437 <code>interItemSpacing<\/code>.<\/p>\n<pre><code class=\"swift\">\/\/\u0422\u0443\u0442 \u043c\u043e\u0436\u043d\u043e \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043f\u0440\u0438\u0431\u043b\u0438\u0437\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u0440\u0430\u0437\u043c\u0435\u0440 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0433\u0440\u0443\u043f\u043f\u044b let groupEstimateSize = CGSize(width: 50, height: 50)   let groupSize = NSCollectionLayoutSize(     widthDimension: .estimated(groupEstimateSize.width),     heightDimension: .estimated(groupEstimateSize.height) ) let group = NSCollectionLayoutGroup.horizontal(layoutSize: groupSize, subitems: items) group.interItemSpacing = .fixed(12)<\/code><\/pre>\n<p>  \u0421\u0430\u043c\u043e\u0435 \u0433\u043b\u0430\u0432\u043d\u043e\u0435 \u2014 \u043d\u0435 \u0437\u0430\u0431\u044b\u0442\u044c \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e \u043d\u0430\u0448\u0430 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0431\u0443\u0434\u0435\u0442 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0439, \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043c: <\/p>\n<pre><code class=\"swift\">section.orthogonalScrollingBehavior = .continuous<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u0440\u0438\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u0435\u0442 \u0431\u043b\u043e\u043a \u0441 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u0438 \u0441\u0442\u0440\u0435\u043b\u043a\u043e\u0439 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043d\u0430 \u043f\u043e\u043b\u043d\u044b\u0439 \u0441\u043f\u0438\u0441\u043e\u043a. \u0412\u044b, \u043d\u0430\u0432\u0435\u0440\u043d\u043e\u0435, \u0443\u0436\u0435 \u0434\u043e\u0433\u0430\u0434\u0430\u043b\u0438\u0441\u044c, \u0447\u0442\u043e \u044d\u0442\u043e Supplementary View, \u0435\u0433\u043e \u0442\u043e\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u043b\u0435\u0433\u043a\u043e \u043e\u043f\u0438\u0441\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043a\u043b\u0430\u0441\u0441 <code>NSCollectionLayoutBoundarySupplementaryItem<\/code>, \u0433\u0434\u0435 \u0443\u043a\u0430\u0436\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440 \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"swift\">private var headerItem: NSCollectionLayoutBoundarySupplementaryItem {     let headerSize = NSCollectionLayoutSize(         widthDimension: .fractionalWidth(1.0),         heightDimension: .estimated(50)     )       return NSCollectionLayoutBoundarySupplementaryItem(         layoutSize: headerSize,         elementKind: UICollectionView.elementKindSectionHeader,         alignment: .topLeading     ) }<\/code><\/pre>\n<p>  \u0414\u0430\u043b\u0435\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u0441\u0435\u043a\u0446\u0438\u0438 \u043d\u0430\u0448 Supplementary View. \u0427\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0438\u0433\u043d\u043e\u0440\u0438\u0440\u043e\u0432\u0430\u043b <code>contentInsets<\/code> \u043d\u0430\u0448\u0435\u0439 \u0441\u0435\u043a\u0446\u0438\u0438, \u0432\u044b\u0441\u0442\u0430\u0432\u0438\u043c <code>supplementariesFollowContentInsets<\/code> \u0432 <code>false<\/code>:<\/p>\n<pre><code class=\"swift\">section.boundarySupplementaryItems = [headerItem] section.supplementariesFollowContentInsets = false<\/code><\/pre>\n<p>  \u0412\u043e\u0442 \u0438 \u0432\u0441\u0451, \u0447\u0442\u043e \u043d\u0430\u043c \u043f\u043e\u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043b\u043e\u0441\u044c \u0434\u043b\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044f \u0441\u0435\u043a\u0446\u0438\u0438.<\/p>\n<h2>\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043a\u0443\u0445\u043e\u043d\u044c<\/h2>\n<p>  \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e\u0441\u0442\u044c \u044d\u0442\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u043c \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u043f\u043e \u0434\u0432\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u043d\u0430 \u043a\u0430\u0436\u0434\u0443\u044e \u0441\u0442\u0440\u043e\u043a\u0443:<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mw\/0s\/bu\/mw0sbuufiy7yu9xe3bbqtwwsxqw.jpeg\"><\/p>\n<p>  \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0443 <code>NSCollectionLayoutSection<\/code> \u0434\u043b\u044f \u044d\u0442\u043e\u0439 \u0441\u0435\u043a\u0446\u0438\u0438 \u0434\u0435\u043b\u0430\u0435\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0435\u0439:<\/p>\n<pre><code class=\"swift\">func kitchenSectionLayout() -&gt; NSCollectionLayoutSection {     let itemSize = NSCollectionLayoutSize(         widthDimension: .fractionalWidth(1.0),         heightDimension: .fractionalHeight(1.0)     )     let item = NSCollectionLayoutItem(layoutSize: itemSize)       let groupSize = NSCollectionLayoutSize(         widthDimension: .fractionalWidth(1.0),         heightDimension: .absolute(128)     )     let group = NSCollectionLayoutGroup.horizontal(         layoutSize: groupSize,         subitem: item,         count: 2     )     group.interItemSpacing = .fixed(12)       let section = NSCollectionLayoutSection(group: group)     section.interGroupSpacing = 12       return section }<\/code><\/pre>\n<p>  \u0420\u0430\u0437\u043c\u0435\u0440 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0443\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u043e\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0420\u0430\u0437\u043c\u0435\u0440 \u0433\u0440\u0443\u043f\u043f\u044b \u0437\u0430\u0434\u0430\u0451\u043c \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u044b\u043c \u043e\u0442 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 \u043f\u043e \u0448\u0438\u0440\u0438\u043d\u0435 \u0438 \u0441 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u044b. \u0421\u0430\u043c\u0443 \u0433\u0440\u0443\u043f\u043f\u0443 \u043c\u044b \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u043c \u043a\u0430\u043a \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440, \u0441\u043e\u0441\u0442\u043e\u044f\u0449\u0438\u0439 \u0438\u0437 \u0434\u0432\u0443\u0445 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432, \u0441 \u0437\u0430\u0440\u0430\u043d\u0435\u0435 \u0437\u0430\u0434\u0430\u043d\u043d\u044b\u043c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435\u043c \u043c\u0435\u0436\u0434\u0443 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430\u043c\u0438. \u0422\u0430\u043a \u043a\u0430\u043a \u0443 \u043d\u0430\u0441 \u0431\u0443\u0434\u0435\u0442 \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e \u0442\u0430\u043a\u0438\u0445 \u0433\u0440\u0443\u043f\u043f, \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e, \u043d\u0435 \u0437\u0430\u0431\u044b\u0432\u0430\u0435\u043c \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u0440\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u044d\u0442\u0438\u043c\u0438 \u0433\u0440\u0443\u043f\u043f\u0430\u043c\u0438: <code>interGroupSpacing<\/code>. \u041a\u043d\u043e\u043f\u043a\u0443 \u00ab\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u0432\u0441\u0435\u00bb \u0437\u0430\u0434\u0430\u0451\u043c \u043a\u0430\u043a Supplementary View \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u043e headerItem, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u044d\u0442\u043e <code>elementKindSectionFooter<\/code>, \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u0430\u0433\u0430\u0435\u0442\u0441\u044f \u043e\u043d \u043f\u043e\u0434 \u0441\u0435\u043a\u0446\u0438\u0435\u0439.<\/p>\n<pre><code class=\"swift\">private var footerButtonItem: NSCollectionLayoutBoundarySupplementaryItem {     let footerSize = NSCollectionLayoutSize(         widthDimension: .fractionalWidth(1.0),         heightDimension: .estimated(50)     )       return NSCollectionLayoutBoundarySupplementaryItem(         layoutSize: footerSize,         elementKind: UICollectionView.elementKindSectionFooter,         alignment: .bottom     ) }<\/code><\/pre>\n<p>  <\/p>\n<h2>\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0431\u043b\u044e\u0434<\/h2>\n<p>  \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043e\u0447\u0435\u043d\u044c \u043f\u043e\u0445\u043e\u0436 \u043d\u0430 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044e \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0441\u0435\u043a\u0446\u0438\u0438 \u0432\u043d\u0443\u0442\u0440\u0438 \u0441\u0445\u043e\u0436\u0430 \u0441 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0435\u0439 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a, \u0437\u0430 \u0438\u0441\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 item, \u0442\u0443\u0442 \u043e\u043d\u0438 \u0437\u0430\u0434\u0430\u043d\u044b \u0432 \u0430\u0431\u0441\u043e\u043b\u044e\u0442\u043d\u044b\u0445 \u0432\u0435\u043b\u0438\u0447\u0438\u043d\u0430\u0445.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/mj\/go\/lx\/mjgolxsnd7nbuojqqru0cexju7q.jpeg\"><\/p>\n<p>  \u041d\u043e \u043d\u0435 \u0432\u0441\u0451 \u0442\u0430\u043a \u043f\u0440\u043e\u0441\u0442\u043e, \u043a\u0443\u0434\u0430 \u0436\u0435 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c. \u041f\u043e \u0437\u0430\u0434\u0443\u043c\u043a\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u043e\u0432 \u043a\u0430\u0440\u0442\u043e\u0447\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u043b\u0438 \u0441\u043a\u0440\u043e\u043b\u0438\u0442\u044c\u0441\u044f \u0432 \u0440\u0430\u043c\u043a\u0430\u0445 \u043e\u0440\u0430\u043d\u0436\u0435\u0432\u043e\u0433\u043e \u0444\u043e\u043d\u0430, \u043d\u043e \u043f\u043e \u0444\u0430\u043a\u0442\u0443 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0438\u0442\u044c \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0443 \u0447\u0435\u0440\u0435\u0437 <code>NSCollectionLayoutSection<\/code> \u043d\u0435 \u043f\u043e\u043b\u0443\u0447\u0430\u043b\u043e\u0441\u044c, \u0438 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u043f\u0440\u043e\u043a\u0440\u0443\u0447\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0447\u0435\u0440\u0435\u0437 \u0432\u0435\u0441\u044c \u044d\u043a\u0440\u0430\u043d.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/cj\/s3\/sk\/cjs3skbtpqmbake9yxa39is4cdg.png\"><\/p>\n<p>  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c\u0443\u0447\u0438\u0432\u0448\u0438\u0441\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0447\u0430\u0441\u043e\u0432 \u0441 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0435\u0439 \u0438 \u0433\u0443\u0433\u043b\u043e\u043c, \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0432\u0435\u0440\u043d\u0443\u0442\u044c\u0441\u044f \u043a \u0438\u0441\u0442\u043e\u043a\u0430\u043c \u0438 \u043f\u043e \u0441\u0442\u0430\u0440\u0438\u043d\u043a\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0443 <code>UICollectionViewCell<\/code> \u0438 <code>UICollectionView<\/code>.<\/p>\n<h2>\u041f\u0440\u043e\u0431\u043b\u0435\u043c\u044b<\/h2>\n<p>  \u041d\u0430 \u0434\u0430\u043d\u043d\u044b\u0439 \u043c\u043e\u043c\u0435\u043d\u0442 \u044d\u0442\u043e \u0432\u0441\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u044d\u0442\u043e\u043c \u044d\u043a\u0440\u0430\u043d\u0435, \u0442\u0435\u043f\u0435\u0440\u044c \u044f \u0431\u044b \u0445\u043e\u0442\u0435\u043b \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445 \u0438 \u043a\u043e\u0441\u0442\u044b\u043b\u044f\u0445, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043d\u0435 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u0432\u043d\u0435\u0434\u0440\u0435\u043d\u0438\u0438 Compositional Layout.<\/p>\n<h4>\u041d\u0435 \u043e\u0447\u0435\u043d\u044c \u0433\u0438\u0431\u043a\u0438\u0439 self-sizing \u0434\u043b\u044f \u044f\u0447\u0435\u0435\u043a<\/h4>\n<p>  \u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e <code>NSCollectionLayoutEdgeSpacing<\/code> \u0434\u043b\u044f \u0441\u0435\u043a\u0446\u0438\u0438 \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u043f\u0438\u0441\u044b\u0432\u0430\u044e\u0442\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b, \u043a\u043e\u0433\u0434\u0430 \u044f\u0447\u0435\u0439\u043a\u0438 \u0434\u043e\u043b\u0436\u043d\u044b \u0431\u044b\u0442\u044c \u043f\u0440\u0438\u0436\u0430\u0442\u044b \u043a \u043a\u0440\u0430\u044f\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 (<code>top<\/code>, <code>bottom<\/code>, <code>left<\/code>, <code>right<\/code>), \u043d\u043e \u0432\u043e\u0442 \u0443\u043a\u0430\u0437\u0430\u0442\u044c, \u0447\u0442\u043e\u0431\u044b \u044f\u0447\u0435\u0439\u043a\u0438 \u0440\u0430\u0441\u0442\u044f\u0433\u0438\u0432\u0430\u043b\u0438\u0441\u044c \u0434\u043e \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u0430 \u0432 \u0433\u0440\u0443\u043f\u043f\u0435, \u043c\u043d\u0435 \u0442\u0430\u043a \u0438 \u043d\u0435 \u0443\u0434\u0430\u043b\u043e\u0441\u044c, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u0442\u0430\u043a\u0438\u0435 \u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0441\u043a\u0438\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0441\u0435\u0439\u0447\u0430\u0441 \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u044e\u0442\u0441\u044f.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/nj\/tc\/qv\/njtcqv4fotaqjigktos2tkutyq8.png\"><\/p>\n<h4>\u0420\u0430\u0431\u043e\u0442\u0430 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438<\/h4>\n<p>  \u0412 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043a\u0430\u0440\u0442\u043e\u0447\u0435\u043a \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 SupplementaryItem, \u043f\u0440\u0438\u0436\u0430\u0442\u044b\u0439 \u043a \u043f\u0440\u0430\u0432\u043e\u043c\u0443 \u043a\u0440\u0430\u044e, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u0435\u0434\u0451\u0442 \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0441\u043e \u0441\u043f\u0438\u0441\u043a\u043e\u043c. \u0415\u0433\u043e \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044f \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 <code>contentOffset<\/code> \u0438 <code>contentSize<\/code> \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e <code>UIScrollView<\/code>. <\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/rg\/3h\/xe\/rg3hxeycivhjhoh4siqbevhgrg8.jpeg\"><\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0440\u0430\u043d\u044c\u0448\u0435 \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u044d\u0442\u0438\u0445 \u0434\u0430\u043d\u043d\u044b\u0445 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043c\u0435\u0442\u043e\u0434 <code>scrollViewDidScroll<\/code> \u0443 \u0434\u0435\u043b\u0435\u0433\u0430\u0442\u0430 <code>UICollectionView<\/code> \u0432 <code>UICollectionViewCell<\/code>, \u0442\u043e \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u043e\u0437\u043d\u0438\u043a \u0432\u043e\u043f\u0440\u043e\u0441, \u043a\u0430\u043a \u0431\u044b\u0442\u044c \u0441 Compositional Layout. \u041f\u0435\u0440\u0432\u043e\u0435, \u0447\u0442\u043e \u043f\u0440\u0438\u0448\u043b\u043e \u0432 \u0433\u043e\u043b\u043e\u0432\u0443, \u2014 \u043f\u043e\u0434\u043f\u0438\u0441\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0434\u0435\u043b\u0435\u0433\u0430\u0442 \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0433\u043e <code>UICollectionView<\/code>, \u043d\u043e \u044f \u0441\u0440\u0430\u0437\u0443 \u043f\u043e\u043b\u0443\u0447\u0438\u043b \u043e\u043f\u043b\u0435\u0443\u0445\u0443 \u0432 \u0432\u0438\u0434\u0435 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0432 <code>scrollViewDidScroll<\/code> \u043f\u0430\u0434\u0430\u044e\u0442 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0442\u043e\u043b\u044c\u043a\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0438. \u0420\u0435\u0437\u043e\u043d\u043d\u044b\u0439 \u0432\u043e\u043f\u0440\u043e\u0441: \u043f\u043e\u0447\u0435\u043c\u0443? \u041e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b Apple \u0434\u043b\u044f \u0433\u043e\u0440\u0437\u0438\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044e\u0442 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441 <code>_UICollectionViewOrthogonalScrollerEmbeddedScrollView<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u043d\u0430\u0441\u043b\u0435\u0434\u043d\u0438\u043a\u043e\u043c <code>UIScrollView<\/code>, \u0443 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e subviews \u2014 \u044d\u0442\u043e <code>UICollectionVIewCell<\/code>.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/ct\/yc\/1a\/ctyc1abc6dz6f6zw6a51gibo3-u.png\"><\/p>\n<p>  \u041a\u0430\u043a \u043e\u0431\u044b\u0447\u043d\u043e, \u043b\u0435\u0433\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0441\u043f\u043e\u0441\u043e\u0431\u0430 \u0434\u043e\u0431\u0440\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u044d\u0442\u043e\u0433\u043e <code>scrollView<\/code> Apple \u043d\u0430\u043c \u043d\u0435 \u043e\u0441\u0442\u0430\u0432\u0438\u043b\u0430, \u043d\u043e \u0434\u0430\u043b\u0430 \u0434\u043e\u0441\u0442\u0443\u043f \u043a <code>visibleItemsInvalidationHandler<\/code> \u0432 <code>NSCollectionLayoutSection<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u043f\u0440\u0438 \u043f\u0440\u043e\u043a\u0440\u0443\u0442\u043a\u0435:<\/p>\n<pre><code class=\"swift\">\/\/ Called for each layout pass to allow modification of item properties right before they are displayed. open var visibleItemsInvalidationHandler: NSCollectionLayoutSectionVisibleItemsInvalidationHandler?<\/code><\/pre>\n<p>  \u041a\u0430\u043a \u0432\u0438\u0434\u043d\u043e, \u043d\u0430 \u0432\u0445\u043e\u0434\u0435 \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u043c\u0435\u0442\u044c \u043c\u0430\u0441\u0441\u0438\u0432 <code>visibleItems<\/code>, <code>contentOffset<\/code> \u0438 <code>environment<\/code>. <\/p>\n<pre><code class=\"swift\">public typealias NSCollectionLayoutSectionVisibleItemsInvalidationHandler = ([NSCollectionLayoutVisibleItem], CGPoint, NSCollectionLayoutEnvironment) -&gt; Void<\/code><\/pre>\n<p>  \u0412 \u0438\u0442\u043e\u0433\u0435 \u0434\u043b\u044f \u043f\u0440\u043e\u0441\u0442\u044b\u0445 \u0432\u0435\u0449\u0435\u0439 \u044d\u0442\u043e\u0433\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0445\u0432\u0430\u0442\u0438\u0442\u044c, \u043d\u043e, \u0443\u0432\u044b, \u0435\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0443\u0436\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f \u043a \u0434\u0440\u0443\u0433\u0438\u043c \u043c\u0435\u0442\u043e\u0434\u0430\u043c <code>UIScrollViewDelegate<\/code>, \u0442\u043e \u0431\u0435\u0437 \u043a\u043e\u0441\u0442\u044b\u043b\u0435\u0439 \u0432\u0430\u043c \u043d\u0435 \u043e\u0431\u043e\u0439\u0442\u0438\u0441\u044c, \u0442\u0430\u043a \u043a\u0430\u043a <code>UICollectionViewOrthogonalScrollerEmbeddedScrollView<\/code> \u2014 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u044b\u0439 \u0438 \u0443\u0436\u0435 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u0434\u0435\u043b\u0435\u0433\u0430\u0442.<\/p>\n<h4>\u0411\u0430\u0433 \u0441 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u043c\u0438 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u043c\u0438<\/h4>\n<p>  \u041f\u043e\u0441\u043b\u0435 \u0440\u0435\u043b\u0438\u0437\u0430 \u0432 \u043f\u0440\u043e\u0434\u0430\u043a\u0448\u0435\u043d \u043d\u043e\u0432\u043e\u0433\u043e layout, \u0443 \u043d\u0430\u0441 \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 \u0441\u0442\u0430\u043b\u0438 \u043f\u0430\u0434\u0430\u0442\u044c \u0442\u0438\u043a\u0435\u0442\u044b \u043e \u0442\u043e\u043c, \u0447\u0442\u043e \u0438\u043d\u043e\u0433\u0434\u0430 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0438 \u043d\u0435 \u0440\u0435\u0430\u0433\u0438\u0440\u0443\u044e\u0442 \u043d\u0430 \u043d\u0430\u0436\u0430\u0442\u0438\u044f \u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u043d\u0433. \u0418\u0441\u0441\u043b\u0435\u0434\u043e\u0432\u0430\u043d\u0438\u0435 \u044d\u0442\u043e\u0439 \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u044b \u0437\u0430\u0432\u0435\u043b\u043e \u043c\u0435\u043d\u044f \u043d\u0430 \u0441\u0442\u0430\u0440\u044b\u0439 \u0434\u043e\u0431\u0440\u044b\u0439 StackOverflow, \u0438 \u043a\u0430\u043a \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c, \u0432 \u0432\u0435\u0440\u0441\u0438\u0438 iOS 14.3+ \u0438\u043d\u0436\u0435\u043d\u0435\u0440\u044b Apple \u0441\u043b\u043e\u043c\u0430\u043b\u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0433\u043e\u0440\u0438\u0437\u043e\u043d\u0442\u0430\u043b\u044c\u043d\u043e\u0433\u043e <code>UIScrollView<\/code>, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 estimate \u0432 <code>NSCollectionLayoutSize<\/code>.<\/p>\n<p>  \u042d\u0442\u043e\u0442 \u0431\u0430\u0433 \u0443 \u043d\u0430\u0441 \u043f\u0440\u043e\u044f\u0432\u0438\u043b\u0441\u044f \u0432 \u043a\u043e\u0440\u0437\u0438\u043d\u0435 \u0441 \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0430\u0446\u0438\u044f\u043c\u0438: \u043a\u0430\u043a \u0432\u0438\u0434\u0438\u0442\u0435, \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0430 \u0441\u0432\u043e\u0451\u043c \u043c\u0435\u0441\u0442\u0435, \u043d\u043e \u0432\u043e\u0442 \u0435\u0451 <code>UICollectionViewOrthogonalScrollerEmbeddedScrollView<\/code> (\u043f\u043e\u0434\u0441\u0432\u0435\u0447\u0435\u043d \u0441\u0438\u043d\u0438\u043c) \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0433\u0430\u0435\u0442\u0441\u044f \u0432 \u043d\u0435\u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/k8\/mz\/6k\/k8mz6k3le-wrggs8z7zy8rilkl8.png\"><\/p>\n<p>  Workaround \u044d\u0442\u043e\u0433\u043e \u0431\u0430\u0433\u0430 \u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u043d\u0435\u043c\u043d\u043e\u0433\u043e \u043a\u043e\u0441\u0442\u044b\u043b\u044c\u043d\u043e-\u043e\u0440\u0438\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u043c \u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u043b\u0441\u044f \u0432 \u0442\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u0440\u043e\u0431\u0435\u0436\u0430\u0442\u044c\u0441\u044f \u043f\u043e subviews \u0443 <code>UICollectionView<\/code> \u0438 \u043f\u043e\u0447\u0438\u043d\u0438\u0442\u044c \u0440\u0443\u043a\u0430\u043c\u0438 \u0441\u043b\u043e\u043c\u0430\u043d\u043d\u044b\u0435 \u0444\u0440\u0435\u0439\u043c\u044b. \u041e\u0446\u0435\u043d\u0438\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e <a href=\"https:\/\/stackoverflow.com\/questions\/65369130\/uicollectionviewcompositionallayout-bug-on-ios-14-3\">\u0437\u0434\u0435\u0441\u044c<\/a>.<\/p>\n<h2>\u0412\u044b\u0432\u043e\u0434\u044b<\/h2>\n<p>  \u0422\u0430\u043a \u0441\u0442\u043e\u0438\u0442 \u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0439 <b>layout<\/b> \u0438\u043b\u0438 \u043d\u0435\u0442? \u041a\u0430\u043a \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0430, \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u044f \u043f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0434\u0435\u0430\u043b\u044c\u043d\u0430 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0433\u043e \u043d\u044e\u0430\u043d\u0441\u043e\u0432 \u0438 \u043e\u0433\u043e\u0432\u043e\u0440\u043e\u043a: \u043d\u0430 \u0441\u043b\u043e\u0436\u043d\u044b\u0445 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\u0445 \u043c\u043e\u0436\u043d\u043e \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u0442\u044c\u0441\u044f \u0441\u043e \u043c\u043d\u043e\u0436\u0435\u0441\u0442\u0432\u043e\u043c \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0432\u0430\u0441 \u043f\u043e\u043f\u043e\u0442\u0435\u0442\u044c. \u041d\u043e, \u0441 \u0434\u0440\u0443\u0433\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u044b, \u043c\u043e\u0436\u043d\u043e \u0432\u0441\u043f\u043e\u043c\u043d\u0438\u0442\u044c \u0440\u0435\u043b\u0438\u0437 UICollectionView \u0432 iOS 6 \u0438 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0442\u0430\u043c \u0431\u044b\u043b\u043e \u0433\u043e\u043b\u043e\u0432\u043d\u043e\u0439 \u0431\u043e\u043b\u0438 \u0438 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043d\u043e \u0441\u0435\u0439\u0447\u0430\u0441 \u0443\u0436\u0435 \u0441\u043b\u043e\u0436\u043d\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u0438\u0442\u044c \u0436\u0438\u0437\u043d\u044c \u0431\u0435\u0437 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439. <\/p>\n<p>  \u0415\u0441\u043b\u0438 \u0433\u043e\u0432\u043e\u0440\u0438\u0442\u044c \u043f\u0440\u043e \u043d\u0430\u0448 \u043f\u0440\u043e\u0435\u043a\u0442, \u0442\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043a \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u043e\u043c\u0443 \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e \u043b\u0435\u0439\u0430\u0443\u0442\u0430, \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u043d\u0430\u043c \u0441\u043e\u043a\u0440\u0430\u0442\u0438\u0442\u044c \u0432\u0440\u0435\u043c\u044f \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0423\u043f\u0440\u043e\u0441\u0442\u0438\u043b\u0430\u0441\u044c \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u044d\u043a\u0440\u0430\u043d\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u0447\u0442\u0438 \u0432\u0441\u044f \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0435 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u043e\u0434\u043d\u043e\u043c \u043c\u0435\u0441\u0442\u0435 \u0438 \u0438\u043c\u0435\u0435\u0442 \u043e\u0431\u0449\u0438\u0439 \u0432\u0438\u0434 (\u0440\u0430\u043d\u044c\u0448\u0435 \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0441\u043a\u0430\u043a\u0430\u0442\u044c \u043f\u043e xib-\u0444\u0430\u0439\u043b\u0430\u043c \u0438 \u0438\u0445 \u043a\u043b\u0430\u0441\u0441\u0430\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043c\u0435\u043d\u044f\u0442\u044c \u043a\u0430\u043a\u043e\u0439-\u043d\u0438\u0431\u0443\u0434\u044c \u043e\u0442\u0441\u0442\u0443\u043f \u0438 \u0442.\u0434.). \u0422\u0430\u043a\u0436\u0435 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u0434\u043e\u043b\u0436\u043d\u043e \u0432\u043e\u0437\u043d\u0438\u043a\u0430\u0442\u044c \u043f\u0440\u043e\u0431\u043b\u0435\u043c \u0441\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0432\u0435\u0440\u0441\u0442\u043a\u043e\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 (\u043f\u043b\u0430\u043c\u0435\u043d\u043d\u044b\u0439 \u043f\u0440\u0438\u0432\u0435\u0442 \u0432\u0441\u0435\u043c \u0442\u0435\u043c, \u043a\u0442\u043e \u0437\u0430\u043d\u0438\u043c\u0430\u043b\u0441\u044f \u043f\u0435\u0440\u0435\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u0438\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u0430 <code>layoutAttributesForElements<\/code> \u0432 <code>UICollectionViewFlowLayout<\/code>).<\/p>\n<p>  \u041f\u043e\u044d\u0442\u043e\u043c\u0443 \u0435\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0438 \u0432\u0440\u0435\u043c\u044f, \u044f \u043d\u0430\u0441\u0442\u043e\u044f\u0442\u0435\u043b\u044c\u043d\u043e \u0440\u0435\u043a\u043e\u043c\u0435\u043d\u0434\u0443\u044e \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Compositional Layout \u0432 \u0441\u0432\u043e\u0438\u0445 \u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f\u0445 \u0438 \u043d\u0435 \u0431\u043e\u044f\u0442\u044c\u0441\u044f \u0441\u043e\u043f\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0445 \u043f\u0440\u043e\u0431\u043b\u0435\u043c.<\/p><\/div>\n<p> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/company\/mailru\/blog\/548792\/\"> https:\/\/habr.com\/ru\/company\/mailru\/blog\/548792\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\n<div class=\"post__text post__text-html post__text_v1\" id=\"post-content-body\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/3r\/h9\/fm\/3rh9fmui0yir49hc8kxxdpzmsqk.png\"><\/p>\n<p>  \u0412\u0441\u0435\u043c \u043f\u0440\u0438\u0432\u0435\u0442! \u041c\u0435\u043d\u044f \u0437\u043e\u0432\u0443\u0442 \u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0421\u043a\u043e\u0440\u043e\u0431\u043e\u0433\u0430\u0442\u043e\u0432, \u044f \u0432\u0435\u0434\u0443\u0449\u0438\u0439 iOS-\u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a \u0432 Delivery Club. \u0421\u0435\u0433\u043e\u0434\u043d\u044f \u044f \u0445\u043e\u0442\u0435\u043b \u0431\u044b \u0440\u0430\u0441\u0441\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0440\u043e \u0432\u0451\u0440\u0441\u0442\u043a\u0443 \u0432 \u043d\u0430\u0448\u0435\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u043d\u0430 \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f Compositional Layout. \u0412 \u043a\u043e\u043d\u0446\u0435 \u043f\u0440\u043e\u0448\u043b\u043e\u0433\u043e \u0433\u043e\u0434\u0430 \u0432\u043e\u043b\u0435\u0432\u044b\u043c \u0440\u0435\u0448\u0435\u043d\u0438\u0435\u043c iOS-\u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0438 \u0430\u043f\u0440\u0443\u0432\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043c\u044b \u043f\u0435\u0440\u0435\u0448\u043b\u0438 \u043d\u0430 iOS 13+. \u042d\u0442\u043e\u0442 \u043c\u0430\u043d\u0451\u0432\u0440 \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u043b \u043d\u0430\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u044b\u0435 \u043d\u0430\u0442\u0438\u0432\u043d\u044b\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b, \u0432 \u0442\u043e\u043c \u0447\u0438\u0441\u043b\u0435 \u0438 \u043d\u043e\u0432\u044b\u0439 \u0434\u0435\u043a\u043b\u0430\u0440\u0430\u0442\u0438\u0432\u043d\u044b\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u043e\u043f\u0438\u0441\u0430\u043d\u0438\u044e layout-\u043a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u0439. \u0420\u0430\u0441\u0441\u043a\u0430\u0436\u0443 \u043e \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0435 \u043d\u0430\u0448\u0435\u0433\u043e \u044d\u043a\u0440\u0430\u043d\u0430 \u043f\u043e\u0438\u0441\u043a\u0430 \u0438 \u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 <b>Compositional Layout<\/b>, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043e \u043f\u0440\u043e\u0431\u043b\u0435\u043c\u0430\u0445, \u0441 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u044f \u0441\u0442\u043e\u043b\u043a\u043d\u0443\u043b\u0441\u044f. <\/p>\n<p>  \u0414\u043b\u044f \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0434\u0441\u0442\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043e Compositional Layout \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u044e \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0432\u043e\u0442 \u044d\u0442\u0443 <a href=\"https:\/\/habr.com\/ru\/post\/495076\/\">\u0441\u0442\u0430\u0442\u044c\u044e<\/a> \u0438 \u043e\u0437\u043d\u0430\u043a\u043e\u043c\u0438\u0442\u044c\u0441\u044f \u0441 <a href=\"https:\/\/developer.apple.com\/documentation\/uikit\/views_and_controls\/collection_views\/implementing_modern_collection_views\">\u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438<\/a> Apple.  <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-320504","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/320504","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=320504"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/320504\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=320504"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=320504"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=320504"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}