Как определить правильные ограничения для scrollview для эффективной работы

Question

Мой макет раскадровки прост, как показано на прикрепленном изображении.Я предполагаю, что основной текст может занимать от одной строки до нескольких строк.Рассматривая случай с несколькими строками, я ожидаю, что содержимое будет прокручиваться, чтобы кнопка могла быть нажата.Однако с учетом установленных ограничений представление прокрутки не прокручивается.Какие ограничения я должен изменить, чтобы получить желаемый эффект?Спасибо.

Answer 1

Ключ к использованию UIScrollView: у вас должна быть «цепочка» ограничений, чтобы позволить автоматическому макету определять .contentSize представления прокрутки.

Пошагово (мне нравитсяустановить цвета фона во время компоновки, чтобы было легко видеть границы / рамки элементов) ...

Добавьте UIScrollView (цвет канталупы) к вашему контроллеру представления и ограничьте его 20-все точки вокруг (просто чтобы мы могли видеть, где это):

Добавьте UIView в качестве ContentView (Клубничный цвет) как подпредставление прокрутки.Присвойте ему равные ограничения высоты и ширины для вида прокрутки, а ограничения сверху / вперед / сзади / снизу - 0:

Добавитьваш Title UILabel (желтый фон).Ограничить это Top: 30 / Leading: 50 / Trailing: 50.Добавьте свой Body UILabel (желтый фон).Ограничьте его сверху до основания ярлыка заголовка (я использовал 200) и Leading: 10 / Trailing: 10.Добавьте свой UIButton (светло-серый фон).Ограничьте его верх над нижней частью тела (я использовал 50), и Leading: 50 / Trailing: 50:

Пока ничего особенного, и выне получит никакой прокрутки ...

Затем добавьте еще Нижнее ограничение 0 к ContentView и измените первое Нижнее ограничение набыть >= 0 и установить Приоритет нового нижнего ограничения на 250:

Это (после еще нескольких шагов) позволит ContentView развернуть / свернуть на основе его содержимого, а также управлять .contentSize представления прокрутки.

Следующим шагом является указание Button, чтобы определить высоту ContentView -поэтому добавьте нижнее ограничение 30 к кнопке (которое будет равно Top: 30, которое мы дали метке заголовка):

Конечно, это не совсем что мы хотим.Она растягивает высоту кнопки, потому что мы установили ограничение высоты на ContentView.Итак ... удалить ограничение высоты из ContentView:

В результате высота ContentViewуменьшится до 30 пунктов ниже нижней части кнопки.

Если вы добавите немного текста к метке Body (при условии, что он установлен на Number of Lines; 0), вы увидите Bodyразметить метку и «нажать вниз» кнопку, которая в свою очередь «толкает» нижнюю часть ContentView:

Если вы добавите достаточно текстана Body, чтобы нажать кнопку под нижней частью вида прокрутки - либо в IB, либо с помощью кода - теперь он будет прокручиваться по вертикали.

Надеюсь, это понятно ... пожалуйста, спросите, если у вас есть какие-либо вопросы.

Answer 2

Для того чтобы ваши ограничения соответствовали представлению прокрутки, есть определенный способ, которым вы должны следовать. Пожалуйста, найдите следующие шаги.

1.Добавьте представление прокрутки к супер-представлению. После добавления представления прокрутки добавьте подпредставление к прокруткепосмотреть, как показано на рисунке.Этот вид будет иметь те же координаты x, y, а также ту же высоту и ширину, что и вид прокрутки.Пожалуйста, обратитесь к изображению ниже, чтобы понять иерархию.

Вы найдете красное предупреждение, потому что мы еще не добавили никаких ограничений.

Теперь пришло время применить некоторые ограничения.См. Изображение ниже и добавьте сверху, снизу, впереди и сзади для прокрутки.

Теперь добавьте ту же верхнюю, нижнюю, начальную и конечную части для дочернего представления прокрутки.Смотрите изображение ниже.

Теперь это реальная хитрость. Держите и прокрутку, и вид в одном и присвойте им одинаковую ширину, равные ограничения по высоте, как показано на рисунке ниже.

Ваши ограничения почти установлены. Теперь, в зависимости от содержания, растяните вид.Когда вы увеличите высоту представления после этого, нажмите на ограничения обновления.

Последнее, что вам нужно сделать, это изменить значение нижних ограничений представления прокрутки. Это будет некоторое отрицательное значение. Замените его на 0.Следуйте ниже скриншот

Пожалуйста, обновите, если это работает