Новое в автоматическом макете, представления не отображаются так, как настроено в IB

Я сходил с ума по этому поводу в течение нескольких дней, и я перепробовал все, что знал об автоматической компоновке, но не могу пройти мимо этого. У меня есть стопка кнопок и ярлык. Ярлык вверху и 5 кнопок под ним. Каждое представление представляет собой прямоугольник, ширина которого составляет 8 точек от любого конца суперпредставления. Метка имеет высоту 134 пункта, а каждая кнопка под ней немного меньше (хотя на снимке экрана показано 83 высоты для каждой, поскольку я что-то тестировал и забыл изменить это (я могу повторно опубликовать изображение, если это необходимо с уменьшением высоты)), самая нижняя кнопка имеет высоту 65 пунктов. Это все. Кажется, что это простой и понятный дизайн, верно? Что ж, изучив основы автоматического макета за последние 2 недели и найдя учебники «Рэя Вендерлиха» отличной помощью, я перепробовал все, что мог, чтобы это правильно симулировалось, но это просто не так! Я устанавливаю ограничения для каждого представления, трейлинга, интерлиньяжа, низа, верха, высоты, ширины, все настолько правильно, насколько я могу понять, но вот что происходит:

На 4-х: метка вверху становится тонкой линией

На 6+: этикетка намного больше, чем должна быть

Я ограничен в том, как и сколько изображений я могу публиковать, так как я новый участник.

Построитель интерфейсов:

СКРИНШОТ ИБ

Айфон 4С:

СИМУЛЯТОР 4S


ios ios-autolayout
person dan10    schedule 08.03.2016    source источник
comment
Есть ли явное ограничение высоты самой метки?   -  person jscs    schedule 08.03.2016
comment
не задавайте ограничение высоты/ширины для элемента, если это не требуется. Всегда задавайте верхнюю, нижнюю, начальную, конечную и позволяйте автомакету определять ширину и высоту для этого конкретного элемента.   -  person Teja Nandamuri    schedule 08.03.2016
comment
да, 134 балла. Я установил его, перетащив элемент управления на метку, которая отображает всплывающее меню.   -  person dan10    schedule 08.03.2016
comment
Ваш вид слишком высокий, чтобы поместиться на экране 4s. 134 для метки + 83 * 4 для кнопок — это уже 466. Добавление расстояния между представлениями и вашей высотой намного больше, чем высота экрана 480.   -  person dan    schedule 08.03.2016
comment
Вы также чрезмерно ограничиваете свои представления, поэтому ограничения работают только для одной высоты. Если вы удалите нижнее ограничение интервала между последней кнопкой и нижней частью представления, оно должно работать на 6 плюс.   -  person dan    schedule 09.03.2016
comment
@dan Должен ли я использовать холст размером 4s или мне следует использовать универсальный холст и установить размеры, как вы объяснили?   -  person dan10    schedule 09.03.2016
comment
Я всегда использую универсальный холст, но ваши представления должны быть настроены так, чтобы они могли сжиматься, чтобы соответствовать меньшему экрану, или вставлять их в прокрутку.   -  person dan    schedule 09.03.2016
comment
Я еще раз пройдусь по дизайну в ИБ в соответствии с этими предложениями и вернусь. Благодарю вас   -  person dan10    schedule 09.03.2016
comment
Вместо того, чтобы жестко кодировать высоту кнопок, если вы хотите, чтобы они были одинакового размера, определите, чтобы они были одинаковой высоты друг с другом, а затем, в сочетании со всеми верхними/нижними ограничениями, они будут расположены иметь одинаковый размер, независимо от устройства. И если вы хотите, чтобы метка была, скажем, в два раза выше высоты кнопок, определите это ограничение соответствующим образом.   -  person Rob    schedule 09.03.2016
comment
@Teja Nandamuri, не могли бы вы привести пример того, когда вам «нужно» указать ограничения по высоте/ширине для элемента, пожалуйста..   -  person dan10    schedule 09.03.2016
comment
Автомакет продолжает портить мой дизайн. Каждый раз, когда я устанавливаю ограничения макета и делаю все возможное, чтобы быть точным, используя приведенные выше предложения, г-н автомакет дает мне кучу «ожиданий». Почему, черт возьми, мистер автоматический макет ожидает, что мой дизайн будет чем-то отличным от того, что я хочу?? Это самая нелогичная технология, которую я когда-либо использовал, и она отнимает у меня столько времени и энергии... Мне больше не разрешено публиковать скриншоты, и я не знаю, что теперь делать :(   -  person dan10    schedule 09.03.2016
comment
@DannyHuseyin - Просто дайте нам ссылки на изображения, и мы сможем включить их в вопрос. И не отказывайтесь от автоматической компоновки, так как мы все когда-то сталкивались с ней, просто желая выбросить ее в окно, когда впервые делали что-то сложное. Но как только вы освоите его, это действительно мощный (хотя и не всегда интуитивно понятный) способ определения представлений с динамическим размером, что является нашей новой реальностью теперь, когда устройства имеют разные размеры, а у нас есть функции разделения экрана на iPad.   -  person Rob    schedule 09.03.2016

Ответы (3)


arrow_upward
0
arrow_downward

В своем вопросе вы точно говорите о том, сколько точек должна быть каждая из кнопок, но вы не описали, как вы хотите, чтобы она вел себя, когда устройство было недостаточно высоким для этого представления (например, на iPhone 4s).

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

NSLayoutConstraint.activateConstraints([
    // leading constraints

    pinkLabel.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button1.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button2.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button3.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),
    button4.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor, constant: 8),

    // trailing constraints

    view.trailingAnchor.constraintEqualToAnchor(pinkLabel.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button1.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button2.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button3.trailingAnchor, constant: 8),
    view.trailingAnchor.constraintEqualToAnchor(button4.trailingAnchor, constant: 8),

    // vertical spacing constraints

    pinkLabel.topAnchor.constraintEqualToAnchor(view.topAnchor, constant: 20),
    button1.topAnchor.constraintEqualToAnchor(pinkLabel.bottomAnchor, constant: 8),
    button2.topAnchor.constraintEqualToAnchor(button1.bottomAnchor, constant: 8),
    button3.topAnchor.constraintEqualToAnchor(button2.bottomAnchor, constant: 8),
    button4.topAnchor.constraintEqualToAnchor(button3.bottomAnchor, constant: 8),
    view.bottomAnchor.constraintEqualToAnchor(button4.bottomAnchor, constant: 83),

    // now set relative height

    pinkLabel.heightAnchor.constraintEqualToAnchor(button1.heightAnchor, multiplier: 1.5),
    button2.heightAnchor.constraintEqualToAnchor(button1.heightAnchor),
    button3.heightAnchor.constraintEqualToAnchor(button1.heightAnchor),
    button4.heightAnchor.constraintEqualToAnchor(button1.heightAnchor)
])

(Кстати, я показываю это программно, потому что это самый простой способ однозначно сформулировать все ограничения, но вы можете настроить их в IB или реализовать и в Objective-C. Реализуйте как хотите, но это примеры. ограничения.)

Это приведет к тому, что на трех разных устройствах:

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

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

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

person Rob    schedule 09.03.2016
comment
Огромное спасибо,. Кажется, мне нужно узнать и понять, что такое множители и как их использовать для определения представлений относительно друг друга. Я должен научиться этому быстро! Если есть какие-либо учебные пособия, которые вы могли бы порекомендовать, я был бы признателен, но я посмотрю, как я могу справиться с собой. Я вернусь.. - person dan10; 10.03.2016
comment
Я не знаю никаких руководств (кроме соответствующих видеороликов WWDC), но основная идея проста: вы можете определить ограничение, равное другому ограничению (например, кнопка2 имеет ту же высоту, что и кнопка1), кратное другое ограничение (например, метка в 1,5 раза больше высоты кнопки 1), другое ограничение плюс некоторая константа (например, верхняя часть метки — это верхняя часть суперпредставления плюс 20), или вы даже можете сделать комбинацию (например, высота некоторого представления может быть определен как 50 + удвоенная высота другого представления). Итак, выше я просто определил, что метка будет равна полутора высотам кнопки. - person Rob; 10.03.2016
comment
так что макет дизайна в IB не обязательно такой, каким он будет выглядеть на экране устройства. То, как это будет выглядеть на экране устройства, определяется ограничениями и настройкой свойств каждого ограничения. Так что это больше о том, как каждый элемент соотносится со следующим при работе на устройствах разных размеров, а не о точном размещении/размере элементов, как если бы они предназначались для экрана одного размера? Так что же на самом деле означает список «ожиданий» слева от редактора? Что означает Xcode под «ожиданием» так и так y/x/height/width и т. д.? - person dan10; 10.03.2016
comment
Да, в IB вы обычно определяете представления относительно других представлений. Тем не менее, вы можете в IB попросить его показать вам ваши ограничения, используя смоделированные метрики для разных устройств (это можно найти в инспекторе атрибутов для сцены), так что вы получите приличное представление о том, как это будет выглядеть на различных устройствах прямо в ИБ. Но обычно вы хотите свести к минимуму частоту жесткого кодирования различных размеров. Что касается ожиданий, я не уверен, что вы имеете в виду, поэтому, возможно, задайте новый вопрос по этому поводу. Но если вы используете старую версию Xcode, обратите внимание, что обработка автомакета в IB теперь намного лучше. - person Rob; 10.03.2016
comment
Роб, не могли бы вы помочь мне, пожалуйста :( Я потратил на это больше недели, и я с треском не смог понять, что происходит, и я на пределе своих возможностей. Все, что я хочу, это чтобы мое приложение выглядело вот так mediafire.com/download/np4aqpulrcpnfkp/ на всех размерах портретного экрана iPhone. Вот и все. Я пробовал все, что мог, и читал / смотрел все учебники по теме множителей и автоматического / адаптивного макета, но я просто не могу заставить его работать, и мое зрение стало нечетким с разочарование .. Могу я спросить, как это делается с помощью IB, пожалуйста .. Я был бы так благодарен - person dan10; 13.03.2016
comment
@DannyHuseyin - Это в равной степени расстраивает нас, потому что вы показываете нам, как вы хотите, чтобы он выглядел при одном конкретном размере, но не говорите нам, как вы хотите, чтобы элементы управления менялись для разных размеров экрана. Все ли они изменяются пропорционально? Если это так, вы определяете высоты как кратные друг другу. На снимке экрана метка имеет высоту 162 pt, а кнопки — 108, 93, 76, 58 и 29 pt соответственно. Затем определите высоту кнопки 1 как 108,0/162,0 высоты метки. Высота кнопки 2 равна 93,0/162,0 этикетки. И т.д. Но если они не меняются пропорционально, то какое поведение вы хотите?!? - person Rob; 13.03.2016
comment
Да, мне нужно, чтобы кнопки и метка изменялись пропорционально для каждого изменения размера экрана, чтобы приложение выглядело одинаково на всех устройствах (книжная ориентация). Когда вы говорите «определить высоту как кратную друг другу» и «определить высоту кнопки 1 как 108,0/162,0 метки и т. д.», я не понимаю, что вы подразумеваете под этим, потому что я не понимаю требуемый метод реализации чтобы разрешить пропорциональное изменение размера представлений для каждого устройства. Если я установлю для всех представлений разную высоту на холсте, что я должен сделать для этого, чтобы обеспечить правильное изменение размеров представлений? Извините, если я кажусь запутанным .. - person dan10; 14.03.2016
comment
@DannyHuseyin - Мой ответ выше демонстрирует, что я имею в виду, но, возможно, это видео послужит практической демонстрацией процесса. Я прохожу процесс относительно быстро, но, надеюсь, это иллюстрирует идею: не используйте никаких ограничений постоянной высоты, а скорее определяйте высоты относительно друг друга: youtu.be/XCCGIcloQBI. А вот пример проекта, в котором раскадровка имеет такие ограничения: github.com/robertmryan/DynamicButtonHeightDemo - person Rob; 14.03.2016
comment
:))))) Спасибо Спасибо Спасибо Спасибо!! - person dan10; 14.03.2016
comment
Могу я задать несколько вопросов, чтобы прояснить кое-что, пожалуйста? Я работаю с файлами xib. Я получаю ограничения по высоте, когда нажимаю «предлагаемые ограничения», хотя я их снял. На 1:15 вы управляете перетаскиванием, чтобы создать ограничение, как вы изменили отображение всплывающего окна? Когда я устанавливаю нижнее пространство для ограничения контейнера на 20, метка становится больше, но нижняя кнопка остается того же размера? Почему мне приходится обновлять кадры каждый раз, когда я переключаюсь между смоделированными показателями, чтобы холст отображался правильно? Я заметил, что у вас были красные ошибки в вашем IB. Что бы вы сделали, чтобы исправить их? - person dan10; 14.03.2016
comment
@DannyHuseyin - это работает и в NIB. Когда вы контролируете перетаскивание и получаете всплывающее окно, вы можете нажать клавишу «опция» и переключать варианты. С точки зрения IB, автоматически изменяющего размеры кадров, да, это кажется непродуктивным при настройке ограничений, но при добавлении набора ограничений в начале было бы раздражающе применять неполный набор ограничений, потому что, пока вы не закончите, очень странно вещи могут случиться. Красная ошибка в IB заключалась в том, что метка имела затянувшееся ограничение по фиксированной высоте, и когда я удалил это, ошибка исчезла. - person Rob; 14.03.2016
comment
@Rob: Можем ли мы установить шрифт UIButton в соответствии с его высотой или шириной? - person iPhone; 08.07.2020

arrow_upward
0
arrow_downward

Попробуйте поместить всю метку с фиксированной высотой в вертикальное представление стека с другим вертикальным представлением стека и поместить все кнопки во внутреннее вертикальное представление стека и установить Distribution: Fill Equally, а также интервал по вашему выбору. Это покажет наиболее точно на всех телефонах. Убедитесь, что установлены ограничения представления внешнего стека. Не нужно устанавливать внутренний стек с какими-либо ограничениями, и все встанет на свои места.

person Mohamed Mohamed    schedule 08.03.2016

arrow_upward
0
arrow_downward

Установить нижний приоритет кнопок с низким приоритетом, например

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

person Shrikant Tanwade    schedule 09.03.2016