Как создать табличное представление с закругленными углами вокруг элементов списка

Question

Я пытаюсь воссоздать меню, похожее на подробное представление приложения iOS 13 Health. Пожалуйста, обратитесь к размеченному скриншоту.

Я знаю, что это можно сделать с помощью табличного представления. Там есть заголовок раздела и элементы списка. Но я хочу добиться того же, что показано на снимке экрана: цвет элементов списка (не включая заголовок раздела) и закругленные углы вверху и внизу списка.

Может Кто-нибудь сказать мне, как я могу добиться этого с помощью таблицы? Или укажете мне правильное направление? Я уже знаю, как настроить табличные представления и программно добавить детали. Мне просто нужна помощь в создании стиля, как показано ниже.

Спасибо!

Answer 1

Итак, я смог понять это. Для блага разработчиков, которые сталкиваются с той же дилеммой, я публикую здесь свое решение. Но я буду отмечать ответ Гленна выше как правильный ответ, так как это привело меня к поиску решения. Еще раз спасибо, Гленн!

Похоже, мне не нужно было делать ничего особенного с моим кодом. Я только что обнаружил, что в XCode 11 и iOS 13 есть новый стиль табличного представления, называемый Inset Grouped. Вы можете установить это свойство из IB или с помощью кода.

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

Answer 2

Это не так сложно сделать. Это один из множества способов, которыми этот стиль может быть выполнен.

a. Вы можете использовать сгруппированный tableView, как показано на скриншоте.

b. Укажите заголовок раздела или, что еще лучше, вид сечения (для дополнительной настройки!).

c. Для каждого раздела у вас есть ОДИН tableViewCell.

d. Для каждой ячейки этой c. у вас будет tableView.

e. Для каждого tableView этого d. у вас будет новая ячейка курса (ячейка элемента).

f. Как вычислить высоту tableView e. ? Есть несколько способов.

• Обеспечить стати c высоту (если у вас количество элементов stati c).

• Если динамическое число c рассчитано, но у вас есть постоянная высота каждой ячейки, тогда вы можете просто вычислить ее следующим образом: itemsCount * heightConstantOfCell

• Если снова у вас есть Dynami c количество строк / элементы, и у вас есть постоянная высота каждой ячейки или динамическая c высота каждой ячейки, тогда вы можете наблюдать ключ кадра всей таблицы.

g. Наконец, просто добавьте некоторый угловой радиус к каждому виду контейнера вашего tableView в d. .

Обратите внимание, этот снимок экрана ТОЛЬКО показывает элемент г. . Это просто угловой радиус каждого контейнерного представления вашего tableView в tableViewCell, который является ячейкой вашего основного tableView.

---

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