iOS - автоматическое масштабирование для разных размеров экрана кнопок над изображением

Question

У меня есть родительский UIView с UIImageView и другой UIView внутри.UIImageView имеет изображение, и оно ограничено тем же размером родительского UIView.Дочерний UIView также ограничен тем же размером родительского UIView, и у него есть кнопки, которые располагаются над определенными частями UIImageView (это позволяет пользователю нажимать на изображение, чтобы вызвать действие в зависимости от того, где изображение было нажато).

Я пытался установить ограничения с помощью AutoLayout, используя классы размеров, но я не могу заставить их изменять размеры в соответствии с размерами экрана.Я создал фиксированные ограничения на экране iPhone 8.iPhone 8, iPhone X и iPhone 8 Plus имеют ширину Compact / height Regular, однако это выглядит только на iPhone 8 / X.Я также хотел бы, чтобы размеры кнопок уменьшались для iPhone SE / 4s.

Вот как это выглядит (синий реальный фон заменен на реальное изображение): обратите внимание, что кнопки имеют одинаковый размерна всех 3 экранах

родительские ограничения UIView

дочерние ограничения UIImageView

дочерние ограничения UIView

Кнопки внутри дочернего UIView имеют фиксированные ограничения сверху / сзади / вперед / снизу в соответствии с размером экрана iPhone 8 / X.

Как можно заставить кнопки соответствующим образом изменять размердля всех размеров экрана при сохранении одинакового положения на изображении, которое также масштабируется в зависимости от размеров экрана?

ОБНОВЛЕНИЕ: После замены внутреннего UIView на StackView и обновления ограничений с помощью распределенияпри одинаковом заполнении это выглядит следующим образом:

Заменен UIView на StackView

Как мне сделать так, чтобы он выглядел так?

исходный экран

ОБНОВЛЕНИЕ 2:

Добавлен интервал и центрированы X / Y стека.

обновленный stackView

ОБНОВЛЕНИЕ 3: Изображение, которое у меня есть в imageView, имеет режим содержимого в Aspect Fit.Как мне масштабировать кнопки в этом режиме?

Answer 1

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

Поместите два горизонтальных вида поверх изображения.и сделать их ограничение по высоте равным.Для ознакомления ниже изображение.

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

Надеюсь, это поможет вам.

Answer 2

Во-первых, в отношении родительского вида не задавайте статическую высоту (371) -> вместо этого задайте пропорциональное ограничение высоты для основного вида

Во-вторых, в отношении внутренних подпредставлений

1 - imageView не будетизмените размер так, как вы думаете, так как он имеет ограничения «Ведущий», «Трейлинг», «Верх», «В»

2 - то же самое для вида с кнопками

вместо того, чтобы давать эти ограничения, рассмотрите возможность предоставления centerX & Y с пропорциональными ограничениями ширины и высоты дляэти подпредставления для родительского представления

Также stackView подойдет для этих кнопок, если вы еще не используете его