Создайте карточку как контейнер

Составная Card действует как контейнер Material Design для вашего пользовательского интерфейса. Карты представляют собой единую связную часть контента, например:

  • Товар в приложении для покупок.
  • Новостной сюжет в новостном приложении.
  • Сообщение в коммуникационном приложении.

Акцент на изображении одного фрагмента контента отличает Card от других контейнеров. Например, Scaffold обеспечивает общую структуру всего экрана. Карта — это меньший элемент пользовательского интерфейса внутри более крупного макета, тогда как компонент макета, такой как Column или Row предоставляет более простой и универсальный API.

В этом разделе показано, как реализовать четыре типа карточек:

Совместимость версий

Для этой реализации требуется, чтобы для minSDK вашего проекта был установлен уровень API 21 или выше.

Зависимости

Создать базовую карту

Card ведет себя так же, как и другие контейнеры в Compose. Вы объявляете его содержимое, вызывая внутри него другие компонуемые объекты. Например, рассмотрим, как Card содержит вызов Text в следующем минимальном примере:

Создать заполненную карту

Ключевым моментом здесь является использование свойства colors для изменения цвета заливки:

Результаты

Карта заполняется цветом варианта поверхности из темы материала.
Рисунок 1. Пример заполненной карты.

Создать повышенную карту

В следующем фрагменте показано, как реализовать карту с повышенными правами. Используйте специальный составной элемент ElevatedCard .

Свойство elevation можно использовать для управления внешним видом возвышения и результирующей тени.

Результаты

Карточка возвышается над фоном приложения с тенью.
Рисунок 2. Пример карты с повышенными правами.

Создайте контурную карту

Ниже приведен пример контурной карты. Используйте специальный составной элемент OutlinedCard .

Результаты

Карта обведена тонкой черной рамкой.
Рисунок 3. Пример контурной карты.

Ключевые моменты

См. ссылку на определение API Card . Он определяет несколько параметров, которые можно использовать для настройки внешнего вида и поведения компонента.

Некоторые ключевые параметры включают в себя:

  • elevation : добавляет тень к компоненту, благодаря чему он выглядит приподнятым над фоном.
  • colors : использует тип CardColors для установки цвета по умолчанию как для контейнера, так и для всех дочерних элементов.
  • enabled : если вы укажете значение false для этого параметра, карта будет отображаться как отключенная и не будет реагировать на ввод пользователя.
  • onClick : Обычно Card не принимает события щелчка. Таким образом, основная перегрузка, которую вы хотели бы отметить, — это та, которая определяет параметр onClick . Используйте эту перегрузку, если хотите, чтобы ваша реализация Card реагировала на клики пользователя.

Карточки не имеют встроенных действий прокрутки или закрытия, но могут интегрироваться в составные элементы, предлагающие эти функции. Например, чтобы реализовать смахивание для закрытия карты, интегрируйте его с составным элементом SwipeToDismiss . Для интеграции с прокруткой используйте модификаторы прокрутки, такие verticalScroll . Дополнительную информацию см. в документации Scroll .

Коллекции, содержащие это руководство

Это руководство является частью тщательно подобранной коллекции быстрых руководств, охватывающих более широкие цели разработки Android:

Узнайте, как компонуемые функции позволяют легко создавать красивые компоненты пользовательского интерфейса на основе системы проектирования Material Design.
Сборник кратких руководств

Есть вопросы или отзывы

Перейдите на нашу страницу часто задаваемых вопросов и узнайте о кратких руководствах или свяжитесь с нами и сообщите нам свои мысли.
Перейти к часто задаваемым вопросам Оставить отзыв