Разработка программного обеспечения для Android: использование JetpackCompose для реализации NimReplyAppUI, часть 1
Разработка программного обеспечения для Android: использование JetpackCompose для реализации NimReplyAppUI, часть 1

Уже середина 2024 года. Как глухой независимый разработчик, я часто время от времени размышляю о себе: какого прогресса я достиг за последние шесть месяцев? Я от всего сердца посвящаю себя Jetpack Compose и Material Design При изучении и практике 3 (М3) используется это да Jetpack Compose、M3 и Kotlin язык реализованNimReplyApp процесс разработки. Независимо от того, являетесь ли вы новичком или опытным разработчиком, я считаю, что эта статья может вдохновить вас.

1. Предыстория проекта

NimReplyApp да Кейс-проект, имитирующий почтовое приложение.,Пользователи могут просматривать электронную почту, просматривать детали и отправлять ответы.,Это очень распространено в повседневной работе и жизни.

Почему стоит выбрать Jetpack Compose и Material Design 3? Это связано с тем, что это привело к реформе модели разработки, эффективность разработки очень высока, а пользовательский интерфейс Код прост для понимания и поддержки, он может реализовать сложную анимацию и управление состоянием, устраняя множество традиционных действий. UI Ручные операции в разработке.

2. Предварительная работа

2.1 Конфигурация проекта

Язык кода:groovy
копировать
dependencies {
    implementation "androidx.compose.ui:ui:1.5.0"
    implementation "androidx.compose.material3:material3:1.2.0"
    implementation "androidx.compose.ui:ui-tooling-preview:1.5.0"
    implementation "androidx.lifecycle:lifecycle-runtime-ktx:2.6.1"
    implementation "androidx.activity:activity-compose:1.7.2"
    implementation "androidx.navigation:navigation-compose:2.5.3"
}

2.2 Структура проекта

ReplyApp MVVM (Модель-Представление-ViewModel). мы понимаем Логика пользовательского интерфейса, обработка данных и состояние интерфейса управляются отдельно, что делает код чистым и удобным в сопровождении.

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

  • data：уровень данных,Имитирует локальный источник данных почты и учетной записи.
  • ui：UI слой, включая все UI компоненты, логика навигации и настройки темы.
  • components：повторное использованиеиз UI компоненты, такие как списки рассылки, панели навигации и т. д.
  • theme：Определить приложениеизцвет、Шрифт и стиль соответствуют цветовой гамме M3.

2.3 Класс расчетных данных

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

Язык кода:java
копировать
data class Account(
    val id: Long,
    val uid: Long,
    val firstName: String,
    val lastName: String,
    val email: String,
    val altEmail: String,
    @DrawableRes val avatar: Int,

    var isCurrentAccount: Boolean = false
) {
    val fullName: String = "$firstName $lastName"
}

Класс данных электронной почты используется для представления электронных писем.

Язык кода:java
копировать
data class Email(
    val id: Long,
    val sender: Account,
    val recipients: List<Account> = emptyList(),
    val subject: String,
    val body: String,
    val attachments: List<EmailAttachment> = emptyList(),
    var isImportant: Boolean = false,
    var isStarred: Boolean = false,
    var mailbox: MailboxType = MailboxType.INBOX,
    val createdAt: String,
    val threads: List<Email> = emptyList()

)

3. Основные компоненты NimReplyApp

В этой демонстрации я разработал несколько ключевых UI Компоненты, включая панель поиска, список рассылки, сведения о почте и т. д., и переданы Preview Для повышения эффективности разработки реализована функция предварительного просмотра в реальном времени. Далее основное внимание уделяется ReplyDockedSearchBar、ReplyEmailListItem а также ReplyEmailThreadItem и другие основные компоненты.

3.1 ReplyProfileImage——Отображение аватара пользователякомпоненты

ReplyProfileImage Это простой компонент отображения аватара, обычно используемый для отображения аватара отправителя или получателя. Этот компонент использует Image компоненты, комбинированные Modifier Добейтесь эффекта круглого аватара.

Язык кода:java
копировать
@Composable
fun ReplyProfileImage(
    drawableResource: Int,
    description: String,
    modifier: Modifier = Modifier
) {
    Image(
        modifier = modifier
            .size(40.dp)
            .clip(CircleShape), 
        painter = painterResource(id = drawableResource),
        contentDescription = description
    )
}

3.1.1 Интерпретация кода

  • Image компоненты：Используется для отображения пользователейиз Картинка аватара,проходить painterResource Загрузите указанный файл ресурсов.
  • Modifier и CircleShape：проходить Modifier.clip(CircleShape),Аватар обрезается до кругового эффекта,Используемый размер изображения size(40.dp) Возьмите под свой контроль.
  • Modifier：этоткомпоненты Прием внешних входящихиз modifier,При использовании компоненты могут быть расширены и настроены в соответствии с различными требованиями компоновки.

3.1.2 Тестовый интерфейс

Язык кода:java
копировать
@Preview(showBackground = true)
@Composable
fun PreviewReplyProfileImage() {
    ReplyProfileImage(
        drawableResource = R.drawable.nim, 
        description = "NimDrawable"
    )
}

3.2 ReplyDockedSearchBar——С функцией поискаиз Панель поиска по электронной почте

ReplyDockedSearchBar Это верхний компонент панели поиска, который поддерживает поиск в реальном времени. Введите здесь ключевые слова, чтобы отфильтровать соответствующие электронные письма. Этот компонент использует Jetpack Compose Новости Управление статусами LazyColumn Отображение результатов поиска.

Язык кода:java
копировать
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ReplyDockedSearchBar(
    emails: List<Email>,
    onSearchItemSelected: (Email) -> Unit,
    modifier: Modifier = Modifier
) {
    var query by remember { mutableStateOf("") }
    var expanded by remember { mutableStateOf(false) }
    val searchResults = remember { mutableStateListOf<Email>() }

    LaunchedEffect(query) {
        searchResults.clear()
        if (query.isNotEmpty()) {
            searchResults.addAll(
                emails.filter {
                    it.subject.startsWith(query, ignoreCase = true) ||
                    it.sender.fullName.startsWith(query, ignoreCase = true)
                }
            )
        }
    }

    DockedSearchBar(
        inputField = {
            SearchBarDefaults.InputField(
                query = query,
                onQueryChange = { query = it },
                onSearch = { expanded = false },
                expanded = expanded,
                onExpandedChange = { expanded = it },
                placeholder = { Text(text = «Поиск электронной почты...») }
            )
        },
        expanded = expanded,
        onExpandedChange = { expanded = it },
        content = {
            if (searchResults.isNotEmpty()) {
                LazyColumn {
                    items(searchResults) { email ->
                        ListItem(
                            headlineContent = { Text(email.subject) },
                            supportingContent = { Text(email.sender.fullName) },
                            leadingContent = { ReplyProfileImage(drawableResource = email.sender.avatar, description = email.sender.fullName) }
                        )
                    }
                }
            } else {
                Text(text = if (query.isNotEmpty()) «Результатов не найдено» else «Начни вводить поиск»)
            }
        }
    )
}

3.2.1 Интерпретация кода

  • Ядро этого компонента LazyColumn,Он используется для отображения отфильтрованного списка рассылки.
  • LaunchedEffect для мониторинга query（Ключевые слова для поиска）изизменять,Динамическое обновление результатов поиска на основе введенных данных.
  • DockedSearchBar да M3 компоненты панели поиска, используйте его для реализации функций поиска с помощью настраиваемых InputField Обработка входных данных поиска.

3.2.2 Тестовый интерфейс

Язык кода:java
копировать
@Preview(showBackground = true)
@Composable
fun PreviewReplyDockedSearchBar() {
    ReplyDockedSearchBar(emails = sampleEmailList, onSearchItemSelected = {})
}

3.3 EmailDetailAppBar——Используется для отображения сведений об электронной почтеизверхняя панель

EmailDetailAppBar да Верхняя панель навигации страницы сведений об электронном письме, обычно используемая для отображения заголовка и номера ответа на электронное письмо. также операции возврата и другие функции. Использовал M3 предоставил TopAppBar компонентов, настраивая стиль и содержание.

Язык кода:java
копировать
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EmailDetailAppBar(
    email: Email,
    isFullScreen: Boolean,
    modifier: Modifier = Modifier,
    onBackPressed: () -> Unit
) {
    TopAppBar(
        modifier = modifier,
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.inverseOnSurface
        ),
        title = {
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = if (isFullScreen) Alignment.CenterHorizontally else Alignment.Start
            ) {
                Text(
                    text = email.subject,
                    style = MaterialTheme.typography.titleMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant
                )
                Text(
                    modifier = Modifier.padding(top = 4.dp),
                    text = "${email.threads.size} ${stringResource(id = R.string.messages)}",
                    style = MaterialTheme.typography.labelMedium,
                    color = MaterialTheme.colorScheme.outline
                )
            }
        },
        navigationIcon = {
            if (isFullScreen) {
                FilledIconButton(
                    onClick = onBackPressed,
                    modifier = Modifier.padding(8.dp),
                    colors = IconButtonDefaults.filledIconButtonColors(
                        containerColor = MaterialTheme.colorScheme.surface,
                        contentColor = MaterialTheme.colorScheme.onSurface
                    )
                ) {
                    Icon(
                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                        contentDescription = stringResource(id = R.string.back_button),
                        modifier = Modifier.size(14.dp)
                    )
                }
            }
        },
        actions = {
            IconButton(onClick = { /*TODO*/ }) {
                Icon(
                    imageVector = Icons.Default.MoreVert,
                    contentDescription = stringResource(id = R.string.more_options_button),
                    tint = MaterialTheme.colorScheme.onSurfaceVariant
                )
            }
        }
    )
}

3.3.1 Интерпретация кода

  1. TopAppBar：этоткомпонентыда M3 компоненты Компоненты навигации верхней панели, используемые для отображения заголовка и значка навигации приложения и Кнопка действия,Отрегулируйте выравнивание заголовка в зависимости от полноэкранного режима: при отображении в полноэкранном режиме.,Выровнять заголовок по центру,Выровнено по левому краю, если не в полноэкранном режиме.
  2. отображение заголовка：Почта показана вверхуиз subject,Ниже показана цепочка сообщения (количество ответов),проходить Column Комбинируйте заголовки и подзаголовки.
  3. Кнопки навигации：слеваизкнопка назад,Срабатывает, когда пользователь нажимает onBackPressed Обратный вызов для уведомления родителя о необходимости выполнения операции возврата.
  4. Кнопка действия：правая сторонаиз MoreVert Значок (кнопка дополнительных параметров), используемый для расширения последующих функций (таких как сбор, обмен и т. д.).

3.3.2 Тестовый интерфейс

Язык кода:java
копировать
@Preview(showBackground = true)
@Composable
fun PreviewEmailDetailAppBar() {
    EmailDetailAppBar(
        email = sampleEmail,
        isFullScreen = true,
        onBackPressed = {}
    )
}

3.4 ReplyEmailListItem——Используется для отображения элементов списка рассылки.

ReplyEmailListItem Компонент представляет собой компонент отображения элемента списка каждого электронного письма, посредством Card Упаковка: пользователи могут перейти на страницу сведений об электронной почте, щелкнув элемент списка.

Язык кода:java
копировать
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ReplyEmailListItem(
    email: Email,
    navigateToDetail: (Long) -> Unit,
    toggleSelection: (Long) -> Unit,
    isOpened: Boolean = false,
    isSelected: Boolean = false
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(8.dp)
            .combinedClickable(
                onClick = { navigateToDetail(email.id) },
                onLongClick = { toggleSelection(email.id) }
            ),
        colors = CardDefaults.cardColors(
            containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer
            else if (isOpened) MaterialTheme.colorScheme.secondaryContainer
            else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(modifier = Modifier.padding(16.dp)) {
            Text(text = email.subject, style = MaterialTheme.typography.titleMedium)
            Text(text = email.sender.fullName, style = MaterialTheme.typography.bodyMedium)
        }
    }
}

3.4.1 Интерпретация кода

  • Card да Jetpack Compose детские Очень практично UI Компоненты: каждое электронное письмо оформлено в виде затененной карточки.
  • combinedClickable Используется для обработки событий щелчка и длительного нажатия.,Нажмите, чтобы перейти на страницу подробностей,Длительное нажатие, чтобы выбрать адрес электронной почты.

3.4.2 Тестовый интерфейс

Язык кода:java
копировать
@Preview(showBackground = true)
@Composable
fun PreviewReplyEmailListItem() {
    ReplyEmailListItem(
        email = sampleEmail,
        navigateToDetail = {},
        toggleSelection = {},
        isOpened = false,
        isSelected = false
    )
}

3.5 SelectedProfileImage——выбранный штатиз Отображение аватара

Когда вам нужно выполнить специальную обработку выбранного состояния, например, придать выбранному состоянию другой цвет фона или отобразить Check значок указывает, что он был выбран。SelectedProfileImage Нужна цель.

Язык кода:java
копировать
@Composable
fun SelectedProfileImage(modifier: Modifier = Modifier) {
    Box(
        modifier
            .size(40.dp)  
            .clip(CircleShape)  
            .background(MaterialTheme.colorScheme.primary)  
    ) {
        Icon(
            Icons.Default.Check, 
            contentDescription = null,  
            modifier = Modifier
                .size(24.dp)  
                .align(Alignment.Center),  
            tint = MaterialTheme.colorScheme.onPrimary 
        )
    }
}

3.5.1 Интерпретация кода

  • Box：для аватараизфони Check значки сгруппированы вместе。Box да Простой контейнер, который может выравнивать перекрывающиеся пары контента. использовать Box Круглый фон аватара Check Значки наложены друг на друга.
  • size и clip(CircleShape)：Сначала установите аватаризразмердля 40.dp,проходить clip(CircleShape) Обрезатьдлякруглый。CircleShape да Compose Предопределенные формы для создания круговых видов.
  • background(MaterialTheme.colorScheme.primary)：Установить цвет фонадлятемаизосновной цвет,Указывает, что оно выбрано.
  • Icon：в аватареиз Покажи один в центре Check Значок, использование цвета значка MaterialTheme.colorScheme.onPrimary,Контрастный цвет фона,Очень заметно.

3.5.2 Тестовый интерфейс

Язык кода:java
копировать
@Preview(showBackground = true)
@Composable
fun PreviewSelectedProfileImage() {
    SelectedProfileImage()
}

3.6 ReplyEmailListItemSelected — отображает выбранные элементы списка адресов электронной почты.

за почтовое отправление（ReplyEmailListItem）при выборе,Еще нужно использовать SelectedProfileImage Заменяет аватар пользователя по умолчанию, указывая, что он был выбран.

Язык кода:java
копировать
@OptIn(ExperimentalFoundationApi::class)
@Composable
fun ReplyEmailListItem(
    email: Email,
    navigateToDetail: (Long) -> Unit,
    toggleSelection: (Long) -> Unit,
    modifier: Modifier = Modifier,
    isOpened: Boolean = false,
    isSelected: Boolean = false,
) {
    Card(
        modifier = modifier
            .padding(horizontal = 16.dp, vertical = 4.dp)
            .semantics { selected = isSelected }
            .combinedClickable(
                onClick = { navigateToDetail(email.id) },
                onLongClick = { toggleSelection(email.id) }
            ),
        colors = CardDefaults.cardColors(
            containerColor = if (isSelected) MaterialTheme.colorScheme.primaryContainer
            else if (isOpened) MaterialTheme.colorScheme.secondaryContainer
            else MaterialTheme.colorScheme.surfaceVariant
        )
    ) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .padding(20.dp)
        ) {
            Row(modifier = Modifier.fillMaxWidth()) {
                val clickModifier = Modifier.clickable { toggleSelection(email.id) }
                if (isSelected) {
                    SelectedProfileImage(modifier = clickModifier)  // Показать выбранный аватар
                } else {
                    ReplyProfileImage(
                        drawableResource = email.sender.avatar,
                        description = email.sender.fullName,
                        modifier = clickModifier
                    )
                }

                Column(
                    modifier = Modifier
                        .weight(1f)
                        .padding(horizontal = 12.dp),
                    verticalArrangement = Arrangement.Center
                ) {
                    Text(
                        text = email.sender.firstName,
                        style = MaterialTheme.typography.labelMedium
                    )
                    Text(
                        text = email.createdAt,
                        style = MaterialTheme.typography.labelMedium,
                    )
                }
                IconButton(
                    onClick = { /*TODO*/ },
                    modifier = Modifier.clip(CircleShape)
                ) {
                    Icon(
                        imageVector = Icons.Default.StarBorder,
                        contentDescription = "Favorite",
                        tint = MaterialTheme.colorScheme.outline
                    )
                }
            }

            Text(
                text = email.subject,
                style = MaterialTheme.typography.bodyLarge,
                modifier = Modifier.padding(top = 12.dp, bottom = 8.dp)
            )
            Text(
                text = email.body,
                style = MaterialTheme.typography.bodyMedium,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis
            )
        }
    }
}

3.6.1 Интерпретация кода

  1. isSelected параметр：проходитьэтот Логическое значение для оценкикогдабывшая почтада Оно выбрано?。когда isSelected для true когда, показать SelectedProfileImage,В остальном отображается нормальноиз ReplyProfileImage。
  2. Динамический цвет фона：почтовые отправленияизфонцвет会根据 isSelected или isOpened Статус меняется динамически.
  3. повторное использование SelectedProfileImage：проходить Условное суждение,когда isSelected для true когда, Показать выбранный аватар статуса.

3.6.2 Тестовый интерфейс

Язык кода:java
копировать
@Preview(showBackground = true)
@Composable
fun PreviewReplyEmailListItemSelected() {
    ReplyEmailListItem(
        email = sampleEmail,  
        navigateToDetail = {},
        toggleSelection = {},
        modifier = Modifier.fillMaxWidth(),
        isOpened = true,  // Указывает, что электронное письмо было открыто
        isSelected = true  // Указывает, что адрес электронной почты выбран.
    )
}

3.7 ReplyEmailThreadItem——Отображение ветки электронной почтыкомпоненты

Когда пользователь просматривает детали электронного письма, что может включать в себя несколько ответов на электронное письмо, необходимо использовать ReplyEmailThreadItem Компонент отображает каждый ответ.

Язык кода:java
копировать
@Composable
fun ReplyEmailThreadItem(
    email: Email,
    modifier: Modifier = Modifier
) {
    Card(
        modifier = modifier.padding(16.dp),
        colors = CardDefaults.cardColors(containerColor = MaterialTheme.colorScheme.surfaceContainerHigh)
    ) {
        Column(modifier = Modifier.padding(20.dp)) {
            Row {
                ReplyProfileImage(drawableResource = email.sender.avatar, description = email.sender.fullName)
                Column(modifier = Modifier.weight(1f).padding(12.dp)) {
                    Text(text = email.sender.firstName, style = MaterialTheme.typography.labelMedium)
                    Text(text = «1 день назад», style = MaterialTheme.typography.labelMedium, color = MaterialTheme.colorScheme.outline)
                }
            }
            Text(text = email.subject, style = MaterialTheme.typography.bodyMedium)
            Text(text = email.body, style = MaterialTheme.typography.bodyLarge)
        }
    }
}

3.7.1 Интерпретация кода

  • ReplyEmailThreadItem Используется для отображения конкретного содержимого электронного письма, подходит для отображения нескольких ответов на электронное письмо. оно проходит Card и Row、Column Компоненты реализуют упорядочение информации.
  • ReplyProfileImage Используется для отображения информации об аватаре отправителя.

3.7.2 Тестовый интерфейс

Язык кода:java
копировать
@Preview(showBackground = true)
@Composable
fun PreviewReplyEmailThreadItem() {
    ReplyEmailThreadItem(email = sampleEmailThread)
}

Продолжение: во второй части будет показано, как реализовать NimReplyAppLogic), так что следите за обновлениями.

Не стесняйтесь задавать любые вопросы, спасибо всем, кто дочитал)

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose
©