IOS: как выровнять центр просмотра с нижней стороны другого вида с помощью AutoLayout

Я хочу сделать центр головы imageView с нижней частью синего заголовка imageView сохранить выравнивание.

Как это сделать, используя Autolayout?

screen 4.0inches [screen 4.7inches] экран 4.7inches screen 4.0inches [screen 4.7inches

Ответ 1

Есть много способов сделать это. Я просто покажу один из способов.

ОК, сделайте это шаг за шагом.

Шаг 1

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

Этот вид контейнера будет иметь атрибуты ff:

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

Для ограничений вида контейнера:

  • Ведущий равен супер-представлению, ведущему
  • верхнее пространство для супер-просмотра - 0
  • Центрируется горизонтально в режиме супер-просмотра.
  • установить соотношение сторон с самим собой.

Как только вы закончите, ограничения будут выглядеть следующим образом.

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

Шаг 2

Теперь для представления прямоугольного изображения ограничения будут:

  • Ведущее значение соответствует представлению контейнера
  • Верхнее пространство для представления контейнера равно 0
  • Трейлинг равен завершению представления контейнера.
  • Установить соотношение сторон с овальным изображением

    • Установив формат изображения с овальным изображением. Изменение размера этого прямоугольного вида будет пропорционально изменению размера овального вида.

Он будет выглядеть следующим образом:

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

Шаг 3

На этот раз контуры овального вида:

  • по горизонтали в виде контейнера
  • по вертикали также в виде контейнера
  • установить соотношение сторон с self

    • Настройка аспекта с помощью self гарантирует, что при увеличении размера прямоугольного представления изменение размера овального представления не приведет к искажению.

Это будет результат:

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

Шаг 4

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

Манекен-представление будет иметь атрибуты ff:

  • прозрачный цвет фона
  • Значение ширины и высоты должно быть 1

Пункты фиктивного представления:

  • по вертикали в представлении контейнера
  • по горизонтали в виде контейнера
  • ширина и высота фиксированы.
  • назначить вертикальное расстояние с прямоугольным представлением

Вот как это должно быть сделано:

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

Хорошо, если вы сделали шаги выше, вы достигнете эффекта.

Это будет обзор ограничений:

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

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

Доказательство того, что это работает!

Я запустил его в симуляторе...: D

iPhone 4:

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

iPhone 5:

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

iPhone 6:

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

iPhone 6 Plus:

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

Ответ 2

Шаг 1. Создайте свои представления, как показано ниже.

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

Шаг 2: Установите ограничения фонового представления для всех трех ребер.

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

Шаг 3: Установите собственное соотношение. Поскольку вы упомянули, что вы не знаете высоту.

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

Шаг 4. Выберите вид центра и добавьте ограничения ширины и высоты, как вы хотите.

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

Шаг 5: установите центральное представление в виде горизонтального центра в режиме супервизора, как показано ниже.

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

Шаг 6: Теперь выберите фон и вид в центре. Установите ограничение выравнивания на "Вертикальные центры".

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

Шаг 7: Теперь вы можете увидеть ограничение с предупреждением с неправильной константой, как показано ниже. Выберите это ограничение

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

Шаг 8: В инспекторе подключений выберите "второй элемент" и измените его на "внизу"

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

Шаг 9: Это. Если есть предупреждение, обновите свои ограничения. Вы можете проверить различные симуляторы с любыми размерами экрана.

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

Для этого вам не нужны супервизоры или новый брат. Легкий способ сделать любой вид в центре и сохранить его как снизу/сверху другого вида.

Ответ 3

Это может вам помочь. Полностью основанный на AutoLayout, дополнительный просмотр не требуется.

  • Сначала установите некоторые ограничения на высоту и ширину и расположение изображения обложки. (синий)

Это 0,4 общей высоты, равной ширине ширины, вы можете видеть ее ограничения.

step1

  • Затем я фиксирую высоту и ширину изображения Avatar (зеленое), сделайте его горизонтально по ширине.

Затем выберите изображение обложки и изображения аватара, сделайте их выравниванием нижнего края.

step3

Теперь он превращает это.

step4

  • На последнем шаге выберите "Выровнять снизу на обложку" и сделайте константу равной половине высоты изображения "Аватар". Готово!

step5

Это самый простой способ, который я нашел сейчас.

Ответ 5

Сначала я бы разместил фоновое изображение и сначала WHILE HODLING SHIFT вручную перетащил его, пока он не станет правильным размером. THEN коснитесь | o | в правом нижнем углу экрана я бы снял флажок с поля и оставил 0, верхний 0, правый 0, а затем нижний должен быть большим числом (должен автоматически генерировать для вас)

теперь разместите второй UIImage... поместите его и размер его, как вам нравится... теперь на той же иконке | o | коснитесь этого и дайте ему высоту и ширину... добавьте ограничения... теперь переходите к 2-му последнему слева (например, к двум уложенным прямоугольникам).. коснитесь этого и коснитесь "горизонтально в контейнере... СЕЙЧАС нажмите уменьшите изображение и удерживайте управление и перетащите на большее изображение и отпустите... нажмите вертикальное расстояние...

ПОСЛЕДНЕЕ.... значок справа, который выглядит как | o | но имеет треугольник... пока выбрано одно из изображений... коснитесь нижних "кадров обновления"

Ответ 6

Если у вас есть 2 вида (фиксированный и плавающий), а ваш поплавок имеет фиксированную высоту, вы можете установить вертикальное пространство от плавающего до фиксированного со значением -height/2. пример: если ваша кнопка имеет высоту 20, тогда установите вертикальное пространство для фиксированного просмотра со значением -10

enter image description here