WedX - журнал о программировании и компьютерных науках

Понимание множителя в автоматической компоновке для использования относительного позиционирования

Я пытаюсь понять, как можно использовать Auto Layout для позиционирования элементов относительно других представлений в процентах.

Например, я недавно узнал, что вы можете указать, что нижняя часть представления должна лежать на 4% выше, чем нижняя часть его суперпредставления, используя это:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 0.96, constant: 0))

Для меня это имеет смысл, потому что множитель, равный 1, выровняет его прямо в нижней части представления, поэтому вы можете уменьшить это количество на 4 процента, изменив множитель на 0,96.

Но как сделать то же самое в другом направлении? Вы хотите указать, что верхняя часть метки должна начинаться на 4% ниже верхней части супервизора. Если вы используете ту же самую строку, но измените атрибуты на .Top, это означает, что она будет на 4% выше верхней части суперпредставления (но на самом деле она не перемещается за пределы экрана). Я не думаю, что у вас может быть отрицательный множитель, и я не верю, что значение больше 1 что-то делает, когда константа равна 0. Итак, как вам это настроить?

У меня тот же вопрос для реализации ведущего и трейлинга. Следить легко. Если вы хотите, чтобы это было на 10% справа:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 0.9, constant: 0))

Это имеет смысл, потому что вы набираете его обратно на 0,1 или 10% вместо полного выравнивания на 1,0. Но как сделать то же самое для лидерства? Я подумал, что вы могли бы установить начало метки относительно конца представления, а затем установить множитель на 0,1. На мой взгляд, это означало бы, что метка будет начинаться в самом крайнем правом углу, но затем будет набираться назад на 90%, таким образом, получая желаемые 10% слева. Но это не так, я не уверен, почему.

Можете ли вы объяснить, как это работает, как правильно использовать множитель для получения этих относительных макетов?

Чтобы упростить задачу, предположим, что вы хотите создать метку, которая имеет верхние и нижние 10% высоты суперпредставления, а также 10% ширины суперпредставления в конце и в начале. На iPhone в портретной ориентации будет больше отступов над и под меткой, чем отступов слева и справа от нее, например (да, они нарисованы в масштабе):
введите описание изображения здесь

Но скажем, на iPad оно будет отображаться в виде идеального квадрата. Таким образом, отступы будут одинаковыми по всему периметру, например:
введите здесь описание изображения

Вопрос заключается в том, как определить динамические значения таких ограничений, а не устанавливать фиксированное значение для константы. Я уже знаю, как делать низ и отставание, но верх и ведущее положение поставили меня в тупик. Я надеюсь понять, как использовать множитель для создания более сложных макетов, например, указание верхней части метки должно лежать на 10% ниже нижней части другой метки, а не установка фиксированной константы.


  • Можете ли вы показать диаграмму того, чего вы пытаетесь достичь? 17.11.2014
  • Для этого очень старого QA .. основной подход заключается в использовании прокладок или измерительных представлений. Просто отметьте их как скрытые. Они делают все расчеты за вас. 03.01.2018

Ответы:


1

Есть несколько способов сделать это. В простейшем случае вы уже почти поняли: если вы хотите, чтобы горизонтальные границы находились на уровне 10 % и 90 %, вам нужно указать оба ограничения относительно задней кромки superview -- так что Subview.Trailing блокируется в Superview.Trailing с множителем 0.9, как вы говорите, но затем Subview.Leading также блокируется в Superview.Trailing, только с множителем 0.1:

введите здесь описание изображения

(и аналогично для верха/низа)

С другой стороны, случай, который вы упомянули в конце, немного сложнее: «указание верхней части метки должно лежать на 10% ниже нижней части другой метки». Для этого вы, вероятно, не сможете использовать фиксированные процентные вставки, как в предыдущем случае. Вместо этого вы можете создать невидимую прокладку между ними: добавьте ограничение с помощью Spacer.Height = 0.1 * Superview.Height, а затем прикрепите его между двумя метками. (Вы также можете обработать предыдущий случай с помощью этих разделителей, но в этом случае это не обязательно.)

17.11.2014
  • Ваш ответ прояснил одну из самых важных проблем автоматической компоновки, на мой взгляд. Большое спасибо! 07.08.2015

  • 2

    На мой взгляд, «у вас не может быть отрицательного множителя, я не думаю, и я не верю, что значение больше 1 что-то делает, когда константа равна 0», показало ваше понимание отклонения.

    Правило под капотом — это просто линейное уравнение:

    FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant
    

    Все измеряется в баллах. Как видите, множитель (свойство NSLayoutConstraint) не является множителем константы. Следуйте уравнению, то, что вы не понимаете, будет ясно.

    Что касается вашего конкретного примера, @Archaeopterasa представила отличное решение, другое показано ниже:

    Основываясь на том факте, что вы знаете, как делать дно и трейлинг, я полагаю, что вы сделали эти два. Затем добавьте еще два ограничения, эффект будет таким, как вы хотите: src="https://i.stack.imgur.com/LneOy.png" alt="установить высоту метки на 80% высоты супервизора">

    Наконец, если вы хотите указать, что верхняя часть метки находится на 10% ниже нижней части другой метки, кажется, что вы не сможете реализовать это без написания строки кода. Вы должны использовать код для установки константы объекта NSLayoutConstraint, соединяющего FirstItem и SecondItem после того, как высота суперпредставления известна во время выполнения.

    Во-первых, перетащите элемент управления с одной метки на другую и выберите «Вертикальный интервал». (Или вы можете сделать это другими способами)

    Во-вторых, необходима ссылочная розетка:

    @IBOutlet weak var tenPercentOfSuperview: NSLayoutConstraint!
    

    Затем сделайте это в подходящем месте (например, в viewDidLoad()).

    let heightOfSuperview = self.view.bounds.height
    tenPercentOfSuperview.constant = heightOfSuperview * 0.1
    

    Уже все хорошо.

    Если вы хотите узнать больше об этой теме, рекомендуется документ Apple:https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/chapters/EditingConstraintAttributesintheAttributesInspector.html

    02.02.2015

    3

    Вот

    НЕВЕРОЯТНО ПРОСТО

    способ сделать это.

    Просто добавьте «вспомогательные» или «измерительные» представления:

    Представления «помощника расчета» в примере выделены желтым цветом.

    Общая техника настолько проста и очевидна - она ​​не нуждается в объяснении, ее можно понять по изображению.

    Это один из тех слонов в комнате, которым вас не учат в iOS. Но он используется постоянно во всех раскладках.

    (Действительно, Apple должна была сделать специальные меры подкласса UIView именно для этой цели — и действительно, многие большие команды делают именно это, с очевидными функциями.)

    введите здесь описание изображения

    Значок уведомления № 1 расположен в центре правого края вспомогательного представления «Вид 1/4».

    Значок уведомления № 3 расположен в центре левого края вспомогательного представления View 3/4.

    Готово, выпейте Шардоне.

    Удобно, что во вспомогательных представлениях просто установите множитель на любое значение, которое вы хотите, в зависимости от желаемого ощущения. Затем невероятно легко изменить их в своем коде, использовать IBInspectable, animate и так далее и тому подобное...

    введите здесь описание изображения

    28.09.2015
    Новые материалы

    Как создать диаграмму градиентной кисти с помощью D3.js
    Резюме: Из этого туториала Вы узнаете, как добавить градиентную кисть к диаграмме с областями в D3.js. Мы добавим градиент к значениям SVG и применим градиент в качестве заливки к диаграмме с..

    Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что это выглядит сложно…
    Просто начните и учитесь самостоятельно Я хотел выучить язык программирования MVC4, но не мог выучить его раньше, потому что он кажется мне сложным, и я бросил его. Это в основном инструмент..

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

    Объяснение документов 02: BERT
    BERT представил двухступенчатую структуру обучения: предварительное обучение и тонкая настройка. Во время предварительного обучения модель обучается на неразмеченных данных с помощью..

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..


    Для любых предложений по сайту: [email protected]