Продолжаем оптимизировать UI-kit и дизайн-систему необычными способами. В прошлый раз мы разбирали хардкорные ячейки, многим зашла эта тема, поэтому продолжаем делать разборы компонентов, следующий на очереди — карточки.
Всё из статьи упаковано в этом Figma-проекте, тыкайтесь на здоровье. А пока вот краткое превью, как работают карточки:
Как видишь, всё работает внутри одного scroll-блока и нам не нужно множество компонентов Scroll Block/Small, Medium, Horizontal и так далее, а размеры картинок у нас и так должны быть в ките, если ты добрался до систематизации размеров изображений, конечно.
Все изображения можно менять через инстансы, а не удаление/проявление слоёв, значит наш проект будет в разы меньше весить и не будет лагать (особенно актуально для больших проектов).
Прежде чем у меня получился гибкий и лёгкий в использовании компонент, я потратил не одну попытку, а весь секрет карточки на auto layout оказался в одном НЕ auto layout слое, вот так вот...
Чтобы менять размер изображения в auto layout через instanse и не потерять саму заливку изображения, нужно добавить отдельный обычный слой внутрь него, который и будет отвечать за размер карточки.
Позже оказалось, что этот слой не останется пустышкой, внутрь него можно положить различные контролы (например, таймер для видео) и обводку, чтобы белые карточки имели чёткие границы, если тебе это нужно, конечно.
После того, как мы разобрались с изображениями, просто засовываем один из вариантов картинок и слой c заголовком и подзаголовком в один auto layout компонент. Для текстового слоя включите режим Stretch left and right, чтобы при смене размера изображения текстовый слой тоже расширялся или сужался до нужного размера автоматически.
Теперь без всяких извращений можешь использовать готовую карточку где угодно, а сменять изображение по Ctrl + нажатие и смена инстанса на нужный, всё легко и просто.
На этом всё. Рассказать об этой карточке, оказалось, намного проще, чем к ней прийти, обычно наоборот. Поэтому пробуйте и тыкайтесь в этом Figma-проекте, если будут какие-нибудь предложения, допиливайте и оставляйте ссылки в комментариях. Туда же пишите вопросы и пожелания, обсудим.
А если хочется ещё хардкорных статей по компонентам и дизайн-системам, залетайте в мой Telegram-канал ;)
Где ты был месяц назад...
Я месяц назад был в Москве, а вы?)
Этажом ниже)
Разве самоизоляции тогда не было? По-моему мы уже по домам сидели))
-
Тире, минус или дефис?)
там был коммент, что не очень понятно зачем 2 раза оборачивать в автолайаут, но потом понял на больших размерах)
но не кажется, что это несколько оверкилл и проще всё же создавать определенные пресеты каруселей/ячеек?
Возможно, это разные подходы к формированию процесса создания дизайна интерфейсов, у каждого свои плюсы и минусы: с одной стороны моими способом кажется сложнее пользоваться, но я постарался сделать такую систему, что сменить карточки в пресете можно за один клик, а сэкономленное место в облаке фигмы поможет сохранить нервы, когда проект просто вырубится из-за большого количества синхронизируемых компонентов. У нашей команды недавно случился такой трабл и сейчас поддержка фигмы просто восстанавливает нам проект своими силами, поэтому сейчас я пытаюсь выжать максимум из каждого слоя и упаковать всё в один дополнительный контейнер вместо разделения на несколько компонентов)
Спасибо Евгений, эта тема тоже зашла) давайте ещё
Спасибо, как-то на твою статейку натыкался, тоже понравилась) Есть идеи, какую тему взять в следующем посте?
Спасибо) Очень интересно читать про универсальные компоненты
Спасибо за статью!
Было бы интересно про хардкорные таблицы почитать, если такие есть у вас на проекте.
Привет, а ты сам пробовал таблицы на лэйаутах собирать?)
Пробовал, но до удобства экселя не довёл ) вот, начал автолэйаутом пробовать реализовать перенос строки на требуемые позиции
Сейчас на проекте сделано так:
- есть компоненты "колонки", (числа, даты, иконки, выравнивание в стороны)
- есть задний фон (разной высоты строк 1х, 2х, 3х).
Из этого собираем вручную таблицы. Колонки удобно передвигать влево-вправо и менять их ширину. Кстати, надо их тоже обернуть в автолэйаут (понял, пока печатал камент).
У этого решения есть проблема –
Невозможно передвинуть строку. Только вручную.
Хотя опять же, сейчас понял, что можно просто тоже у колонок сделать автолэйаут вертикальный для ячеек.
Вообще в одном проекте мне понадобится обширная таблица, поэтому может попробую собрать хардкорный компонент и написать статью. Но попробуй сначала собрать её сам по совету выше, потом сверимся как что получилось)
Я так понимаю у тебя столбец собран с отступами и расстояниями между текстом и разделителем. Советую собрать ячейки в отдельный компонент и разделить их на несколько видов, как в экселе, типо текста прибиваются к левому краю, цифры к правому и т.д. Должно получится так, что у тебя столбик свёрстан из нескольких ячеек без паддингов сверху и снизу (странно выглядит отступ от последнего разделителя) и без расстояния между ячейками (сами ячейки должны включать внутри себя это расстояние
Спасибо за анализ и совет, попробую так победить, через ячейки )
Давай-давай) потом в комментах отпишись как получилось)
Привет! Спасибо за статью, супер хард вери гуд :)
Возможно вопрос не по теме и ответ на него будет не из разряда хард, но вдруг сможешь помочь :) Если карточки по концепции должны накладываться друг на друга и при этом филиться по ширине, как это решить через автолэйаут?