Dynamic UICollectionView -> ошибки и проблемы визуального макета

Это представление, которое я хочу воспроизвести:

Dynamic UICollectionView -> ошибки и проблемы визуального макета

Я предполагаю, что это UICollectionView. Ширина и высота должны динамически рассчитываться на основе содержимого, и это то, с чем я борюсь.

Я создал проект, в котором UICollectionView ведет себя не так, как я хочу: https://github.com/Jasperav/CollectionViewDynamic/blob/master/UIKitTest/ViewController.swift. Вы можете просто запустить проект и увидеть проблему самостоятельно.

Каждый раз, когда добавляется новый Emoji, можно вызвать метод reloadData, а размер UICollectionView должен быть равен размеру контента но с максимальной шириной. Вот как это выглядит, когда добавлен 1 смайлик (ужасно):

Dynamic UICollectionView -> ошибки и проблемы визуального макета

Это действительно странно, ячейка не центрирована, и я получаю ошибки макета в консоли. Когда добавляются 2 смайлика, я ожидаю, что линия окажется рядом друг с другом, но в конечном итоге они окажутся друг под другом...

Dynamic UICollectionView -> ошибки и проблемы визуального макета

Места достаточно, чтобы клетки находились рядом друг с другом. Что я делаю не так? Я правильно вычисляю размер ячейки, когда проверяю значения в визуальном отладчике. Я думаю, что делаю много ручной работы, чтобы убедиться, что размер UICollectionView правильный, но я не понимаю его правильно.

Я слишком усложняю вещи? То, что я хочу, выглядит довольно просто для меня. Я впервые делаю что-то с UICollectionView.

Вот так выглядит метод addEmoji, весь код можно увидеть по ссылке, которую я упомянул выше:

func addEmoji(emoji: Emoji) {
    emojis.append(emoji)

    var width: CGFloat = 0

    for emoji in emojis {
        width += emoji.size().width
    }

    let finalWidth = min(width, 280)

    // Add some breath
    widthAnchor_.constant = finalWidth + 5

    reloadData()

    heightAnchor_.constant = collectionViewLayout.collectionViewContentSize.height
}

вы можете искать что-то вроде этого stackoverflow.com/questions/22539979/…

Abdul Momen 08.05.2022 13:05
Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
1
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я добавил небольшие изменения в ваш код и теперь все работает нормально (изменения помечены комментарием // NEW): https://gist.github.com/sa1dai/b50bec10438b439a8c74cc6e8071bcf4?ts=4

Ключевая идея — не обновлять heightAnchor_.constant в функции addEmoji, а использовать contentSizeObservation (идею contentSizeObservation я взял из здесь).

Другие вопросы по теме