как использовать uiscrollview в раскадровке

<p>у меня есть представление прокрутки с контентом высотой 1000 пикселей, и я хотел бы иметь возможность выложить его для легкого дизайна раскадровки.<br> я знаю, что это можно сделать программно, но я действительно хочу видеть это визуально. каждый раз, когда я помещаю представление прокрутки в контроллер представления, оно не будет прокручиваться. можно ли заставить его работать так, как я хочу, или я должен делать это в коде?</p>

<p>я отвечаю на свой собственный вопрос, потому что я потратил 2 часа, чтобы найти решение, и stackoverflow позволяет этот стиль qa.</p><p>начните заканчивать здесь, как заставить это работать в раскадровке.</p><p>1: перейдите к просмотру контроллера и нажмите <code>attribute inspector</code>.</p><p>2: измените размер на <code>freeform</code> вместо inferred.</p><p>3. перейдите к основному представлению на этой раскадровке, а не к просмотру прокрутки, а к представлению верхнего уровня.</p><p>4: нажмите <code>size inspector</code> и установите желаемый размер. я изменил свой рост до 1000. </p><p>теперь вы увидите, что у вашей раскадровки есть настройки вида, так что вы можете видеть всю высоту прокрутки для простоты проектирования.</p><p>5: перетащите на прокрутку и растяните ее так, чтобы она занимала весь вид. теперь у вас должен быть прокручиваемый вид размером 320,1000, сидящий на виде в вашем контроллере вида.</p><p>теперь нам нужно сделать так, чтобы он прокручивался, и чтобы он правильно показывал контент.</p><p>6: нажмите на свой прокрутки и нажмите <code>identity inspector</code>.</p><p>7. добавьте <code>user defined runtime attribute</code> с keypath <code>contentsize</code>, затем введите size и укажите размер вашего контента. для меня это (320, 1000).</p><p>поскольку мы хотим видеть весь вид прокрутки на раскадровке, мы растянули его, и у него есть кадр 320,1000, но для того, чтобы это работало в нашем приложении, нам нужно изменить кадр до того, каким будет видимый вид прокрутки.</p><p>8: добавьте <code>runtime attribute</code> с keypath <code>frame</code> с типом rect и 0,0,320,416.</p><p>теперь, когда мы запустим наше приложение, у нас будет видимый вид прокрутки с кадрами 0,0320, 416 и прокруткой вниз до 1000. мы можем расположить наши подпредставления и изображения и тому подобное в раскадровке так, как мы хотим, чтобы они отображались. тогда наши атрибуты времени выполнения гарантируют правильное отображение. все это без 1 строки кода.</p>

<p>вот шаги с <strong><code>auto layout</code></strong>, которые работали для меня на xcode 8.2.1.</p><ol> <li>выберите <code>size inspector</code> из <code>view controller</code> и измените <code>simulated size</code> на <code>freeform</code> с высотой <strong>1000</strong> вместо <code>fixed</code>.</li> <li>переименуйте представление <code>view controller</code> в <strong>rootview</strong>.</li> <li>перетащите <code>scroll view</code> как подпредставление <strong>rootview</strong> и переименуйте его в <strong>scrollview</strong>.</li> <li>добавьте ограничения для <strong>scrollview</strong>: <ul> <li><strong>scrollview</strong> [top, bottom, leading, trailing] = <strong>rootview</strong> [top, bottom, leading, trailing]</li> </ul></li> <li>перетащите <code>vertical stack view</code> как подпредставление <strong>scrollview</strong> и переименуйте его в <strong>contentview</strong>.</li> <li>добавьте ограничения для <strong>contentview</strong>: <ul> <li><strong>contentview</strong> .height = <strong>1000</strong></li> <li><strong>contentview</strong> [сверху, снизу, впереди, трейлинг, ширина] = <strong>scrollview</strong> [сверху, внизу, вперед, трейлинг, ширина]</li> </ul></li> <li>выберите <code>attributes inspector</code> из <strong>contentview</strong> и измените <code>distribution</code> на <code>fill equally</code> вместо <code>fill</code>.</li> <li>перетащите <code>view</code> как подпредставление <strong>contentview</strong> и переименуйте его в <strong>redview</strong>.</li> <li>установите <code>red</code> в качестве фона <strong>redview</strong>.</li> <li>перетащите <code>view</code> как подпредставление <strong>contentview</strong> и переименуйте его в <strong>blueview</strong>.</li> <li>установите <code>blue</code> в качестве фона <strong>blueview</strong>.</li> <li>выберите <strong>rootview</strong> и нажмите кнопку <code>update frames</code> . <ul> <li><code>update frames</code> - это новая кнопка в xcode8 вместо кнопки <code>resolve auto layout issues</code>. это похоже на кнопку обновления, расположенную на панели управления под раскадровкой: <a href="https://i.stack.imgur.com/hfk5o.png"> <img src="https://i.stack.imgur.com/hfk5o.png" alt="update frames button"> </a> </li> </ul></li> </ol><hr><p>посмотреть иерархию:</p><ul> <li><strong>rootview</strong> <ul> <li><strong>scrollview</strong> <ul> <li><strong>contentview</strong> <ul> <li><strong>redview</strong></li> <li><strong>blueview</strong></li> </ul></li> </ul></li> </ul></li> </ul><hr><p>просмотр сцены контроллера (высота: 1000):</p><p><img src="https://i.stack.imgur.com/f4qya.png" width="300" alt="scene"></p><p>запустите на iphone7 (высота: 1334/2):</p><p><img src="https://i.stack.imgur.com/i0pkx.gif" width="300" alt="demo"></p>

<p><strong> вот шаги, которые работали для меня на ios 7 и xcode 5. </strong></p><ol> <li><p>перетащите viewcontroller (он поставляется с uiview «view»).</p> <p>1.1 выберите «view controller», выберите «file inspector» и снимите флажок «auto layout».</p></li> <li>перетащите scrollview (как потомок uiview viewcontroller "view")</li> <li>выберите scrollview и откройте «identity inspector».</li> <li><p>введите «contentsize» для ключевого пути. выберите «размер» для типа. и введите<strong> {320, 1000} </strong>для значения. </p> <p>примечание. шаг 4 просто говорит о том, что скроллер содержит некоторый контент, размер которого составляет 320x1000 единиц. поэтому настройка contentsize заставит работать скроллер.</p></li> <li><p>выберите view controller, выберите «attributes inspector», затем выберите<strong> freeform </strong>from size.</p> <p>примечание: шаг 5 позволит нам изменить размер «view», который поставляется с контроллером представления.</p></li> <li><p>выберите «вид», а затем «инспектор размеров». </p></li> <li>установите ширину до 320 и высоту до 1000.</li> </ol><p>примечание. 5, 6 и 7 предназначены исключительно для <em>просмотра растянутого или полного развернутого вида</em> в storyboard . примечание. обязательно снимите флажок «авторазметка» в view controller.</p><p><strong> ваша иерархия view должна выглядеть следующим образом: </strong> <img src="https://i.stack.imgur.com/hg8ar.png" alt="hierarchy"></p>

<p>после нескольких часов проб и ошибок, я нашел очень простой способ поместить содержимое в просмотры прокрутки, которые «за кадром». протестировано с xcode 5 и ios 7. вы можете сделать это почти полностью в раскадровке, используя два небольших трюка/обходного пути:</p><ol> <li>перетащите viewcontroller на вашу раскадровку.</li> <li>перетащите scrollview на этот viewcontroller, для демонстрации вы можете оставить его размер по умолчанию, охватывающий весь экран.</li> <li>теперь приходит<strong> трюк 1 </strong>: перед добавлением любого элемента в scrollview перетащите в обычный «вид» (этот вид будет сделан больше, чем экран, и будет содержать все подэлементы, такие как кнопки, метки, ... давайте назовем это «<strong> включающий вид </strong>»).</li> <li>пусть это<strong> размер y вмещающего представления </strong>в инспекторе размера, например, до 800.</li> <li>поместите метку на охватывающий вид, где-то в позиции y 200, назовите ее «метка 1».</li> <li><strong> трюк 2 </strong>: убедитесь, что выбран<strong> вмещающий вид </strong>(<strong> не scrollview! </strong>), и установите его позицию y, например, -250, чтобы вы могли добавить элемент, который находится «снаружи» ' экран </li> <li>вставьте ярлык где-то внизу экрана, назовите его «ярлык 2». этот ярлык на самом деле «за кадром».</li> <li>сбросьте позицию y вмещающего вида на 0, вы больше не увидите метку 2, так как она была расположена вне экрана.</li> </ol><p>что касается работы с раскадровкой, теперь вам нужно добавить одну строку кода в метод viewcontroller 'viewdidload', чтобы установить содержимое scrollviews, чтобы оно содержало весь «включающий вид». я не нашел способ сделать это в раскадровке:</p><pre><code>- (void)viewdidload { [super viewdidload]; self.scrollview.contentsize = cgsizemake(320, 800); } </code></pre><p>вы можете попробовать сделать это, добавив <code>contentsize</code> keypath в качестве <code>size</code> к scrollview в identity inspector и установив его в (320, 1000).</p><p>я думаю, что apple должна упростить эту задачу в раскадровке, в tableviewcontroller вы можете просто прокрутить за пределы экрана в раскадровке (просто добавьте 20 ячеек, и вы увидите, что вы можете просто прокрутить), это также возможно с scrollviewcontroller. </p>

<p><strong>получение прокрутки для работы в ios7 и auto-layout в ios 7 и xcode 5.</strong></p><p>в дополнение к этому: <a href="https://stackoverflow.com/a/22489795/1553014">https://stackoverflow.com/a/22489795/1553014</a> </p><p>по-видимому, все, что нам нужно сделать, это:</p><ol> <li><p>установите для всех ограничений вид прокрутки (т.е. сначала исправьте вид прокрутки)</p></li> <li><p>затем установите ограничение distance-from-scrollview на самый нижний элемент для просмотра с прокруткой (который является суперпредставлением). </p></li> </ol><p>примечание. шаг 2 расскажет раскадровке, где последний фрагмент контента находится в представлении прокрутки.</p>

<p>в этом примере я отключил функцию autolayout в интерфейсном конструкторе. и я все еще использую (без всякой причины) относительно старую версию xcode 4.6.1.</p><p>начните с контроллера представления, у которого есть представление прокрутки по нему (основной вид).</p><p>1: добавить представление контейнера из библиотеки объектов в представление прокрутки. обратите внимание, что в раскадровку добавлен новый контроллер представления, и он связан с контроллером представления с представлением прокрутки.</p><p>2: выберите вид контейнера и в инспекторе размеров установите привязку к верху и левому краю без автоматического изменения размера.</p><p><img src="https://i.stack.imgur.com/uqyi2.png" alt="enter image description here"></p><p>3: измените его высоту на 1000. (1000 используется для этого примера. вы должны применить требуемое значение.)</p><p>4: выберите новый контроллер представления и в инспекторе атрибутов измените размер на произвольную.</p><p><img src="https://i.stack.imgur.com/jqg8n.png" alt="enter image description here"></p><p>5: выберите вид нового контроллера представления и, на размер инспектора, измените высоту на 1000 (что равно высоте просмотра контейнера).</p><p>6: для вашего теста позже, пока он еще находится в представлении нового контроллера представления, добавьте метку вверху и внизу представления.</p><p>7: выберите вид прокрутки в исходном контроллере вида. в инспекторе удостоверений добавьте атрибут с параметром keypath, равным contentsize, типом, равным размеру, и значением, равным {320, 1000} (или размером вашего контейнера).</p><p><img src="https://i.stack.imgur.com/cacte.png" alt="enter image description here"></p><p>8: запустите на 4-дюймовом iphone simulator. вы должны быть в состоянии прокрутить от верхней метки до нижней метки.</p><p>9: запустите на 3,5-дюймовом iphone simulator. вы должны быть в состоянии прокрутить от верхней метки до нижней метки.</p><p>помните, что xcode 4.6.1 может собираться только для ios6 и ниже. используя этот подход и построение для ios6, я все еще могу достичь тех же результатов, когда приложение работает на ios7.</p>

<p>обратите внимание, что внутри <code>uitableview</code> вы можете прокрутить табличное представление, выбрав ячейку или элемент в ней и прокручивая вверх или вниз с помощью трекпада.</p><p>для <code>uiscrollview</code> мне нравится предложение алекса, но я бы порекомендовал<em> временно </em>изменить контроллер представления для произвольной формы, увеличить высоту корневого представления, построить свой пользовательский интерфейс (шаги 1-5), а затем изменить его обратно на стандартный вывод размер, когда вы закончите, чтобы вам не приходилось жестко кодировать размеры контента в качестве атрибутов времени выполнения. если вы сделаете это, вы откроете для себя множество проблем с обслуживанием, пытаясь поддерживать как 3,5-дюймовые, так и 4-дюймовые устройства, а также возможность увеличения разрешения экрана в будущем.</p>

<p>в ios7 я обнаружил, что если бы у меня был view внутри uiscrollview на viewcontroller размером с freeform, он бы не прокручивал приложение, независимо от того, что я делал. я поиграл и обнаружил, что работает следующее, которое не использует freeforms:</p><ol> <li><p>вставьте uiscrollview внутри основного представления viewcontroller</p></li> <li><p>установите ограничения autolayout на scrollview соответствующим образом. для меня я использовал от 0 до top руководство по макету и от 0 до bottom guide</p></li> <li><p>внутри scrollview поместите контейнерный вид. установите его высоту на то, что вы хотите (например, 1000)</p></li> <li><p>добавьте ограничение высоты (1000) к контейнеру, чтобы он не менялся. дно будет за концом формы.</p></li> <li><p>добавьте строку [self.scrollview setcontentsize: cgsizemake (320, 1000)]; в viewcontroller, который содержит scrollview (который вы подключили как iboutlet)</p></li> </ol><p>viewcontroller (добавляется автоматически), связанный с контейнером, будет иметь желаемую высоту (1000) в интерфейсном разработчике, а также будет правильно прокручиваться в исходном контроллере представления. теперь вы можете использовать viewcontroller контейнера для разметки ваших элементов управления.</p>

<p>вам следует только установить свойство contentsize для viewdidappear, как в следующем примере:</p><pre><code>- (void)viewdidappear:(bool)animated{ [super viewdidappear:animated]; self.scrollview.contentsize=cgsizemake(306,400.0); } </code></pre><p>он решает проблемы с автопоставкой и отлично работает на ios7.</p>

<p>отказ от ответственности: - только для ios 9 и выше (stack view).</p><p>если вы развертываете свое приложение на устройствах ios 9, используйте представление<strong> stack </strong>. вот шаги: -</p><ol> <li>добавить представление прокрутки с ограничениями - закрепить слева, справа, снизу, сверху (без полей) в суперпредставлении (просмотр)</li> <li>добавьте представление стека с теми же ограничениями для просмотра с прокруткой.</li> <li>другие ограничения стека: - stackview.bottom = view.bottom и stackview.width = scrollview.width</li> <li>начните добавлять свои взгляды. представление прокрутки решит прокрутить на основе размера представления стека (который по сути является вашим представлением содержимого)</li> </ol>

<p>я хочу поставить свои 5 центов на принятый ответ: я изучал тему в течение 2 дней и, наконец, нашел решение, которое буду использовать всегда с этого момента.</p><p>перейдите к пункту 4 в принятом ответе и забудьте о добавлении атрибутов фреймов, размеров и т. д.</p><p>чтобы сделать все автоматически, просто используйте решение из <a href="http://codehappily.wordpress.com/2013/11/14/ios-how-to-use-uiscrollview-with-autolayout-pure-autolayout-approach-multiple-smaller-views/">эта ссылка</a> </p><p>на ios 7 все понятно, просто, элегантно и работает как шарм. я очень доволен всем этим</p>

<p>вот простое решение.</p><ol> <li><p>установите атрибут размера вашего контроллера представления в раскадровке на «свободная форма» и установите нужный размер. убедитесь, что он достаточно большой, чтобы вместить все содержимое вашего вида прокрутки.</p></li> <li><p>добавьте вид прокрутки и установите ограничения, как обычно. то есть, если вы хотите, чтобы представление прокрутки соответствовало размеру вашего представления, то прикрепите верхние, нижние, ведущие, конечные поля к суперпредставлению, как обычно.</p></li> <li><p>теперь просто убедитесь, что в подпредставлениях прокрутки есть ограничения, которые соединяют верх и низ представления прокрутки. то же самое для левой и правой, если у вас горизонтальная прокрутка.</p></li> </ol><p> <a href="https://i.stack.imgur.com/uptdw.png"> <img src="https://i.stack.imgur.com/uptdw.png" alt="enter image description here"> </a> </p>

<p>вот немного грубый ответ, который дает то же решение для вертикальной прокрутки, но (вопреки духу stackoverflow) не отвечает на вопрос. вместо использования scrollview, просто используйте uitableview, перетащите обычный uiview в заголовок и сделайте его настолько большим, насколько вам нужно, теперь вы можете прокручивать контент в раскадровке.</p>

<p>ключ является contentsize.</p><p>это часто отсутствует и не указывается при добавлении uiscrollview.</p><p>выберите uiscrollview и выберите identity inspector.</p><p>добавьте <code>contentsize</code> keypath в качестве <code>size</code> к scrollview в инспекторе удостоверений и установите для него значение (320, 1000).</p><p>прокрутите прочь.</p>

<p>видимо вам <strong>вообще не нужно указывать высоту!</strong> что хорошо, если он меняется по какой-либо причине (вы изменяете размеры компонентов или меняете размеры шрифта).</p><p>я просто следовал этому уроку, и все работало: <a href="http://natashatherobot.com/ios-autolayout-scrollview/">http://natashatherobot.com/ios-autolayout-scrollview/</a> </p><p>(примечание: нет необходимости реализовывать viewdidlayoutsubviews, если вы не хотите центрировать вид, поэтому список шагов еще короче).</p><p>надеюсь, это поможет!</p>

<p>если вы используете автоматическую компоновку, лучше всего использовать uitableviewcontroller со статическими ячейками в раскадровке.</p><p>я также однажды столкнулся с проблемой с представлением, которое требует гораздо большей прокрутки, поэтому измените uiscrollview с помощью вышеупомянутой техники.</p>