Android на Kotlin и Jetpack Compose: первый экран

package com.example.services

data class Service(
    val id: Int,
    val title: String,
    val description: String,
    val badge: String? = null, // не у каждой услуги есть метка — тип допускает null
)

val sampleServices = listOf(
    Service(1, "Сайт компании", "Страницы услуг, форма заявки, SEO-основа", badge = "Популярное"),
    Service(2, "Мобильное приложение", "Нативное приложение для Android"),
    Service(3, "CRM-система", "Клиенты, сделки и задачи в одном месте"),
    Service(4, "Интеграции", "Связка сайта с 1С, оплатой и мессенджерами"),
    Service(5, "Аудит сайта", "Скорость, SEO и доступность", badge = "Новое"),
)

/** Возвращает новое множество: убирает id, если он был, или добавляет. */
fun toggle(selectedIds: Set<Int>, id: Int): Set<Int> =
    if (id in selectedIds) selectedIds - id else selectedIds + id

/** «В заявке: 1 услуга», «… 3 услуги», «… 5 услуг». */
fun selectedLabel(count: Int): String {
    if (count == 0) return "Выберите услуги"
    val word = when {
        count % 10 == 1 && count % 100 != 11 -> "услуга"
        count % 10 in 2..4 && count % 100 !in 12..14 -> "услуги"
        else -> "услуг"
    }
    return "В заявке: $count $word"
}

[versions]
agp = "9.4.1"
kotlin = "2.4.21"
coreKtx = "1.19.1"
activityCompose = "1.13.0"
lifecycle = "2.11.0"
composeBom = "2026.09.00"
junit = "4.13.2"
robolectric = "4.17"

[libraries]
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle", name = "lifecycle-viewmodel-compose", version.ref = "lifecycle" }
androidx-lifecycle-runtime-compose = { group = "androidx.lifecycle", name = "lifecycle-runtime-compose", version.ref = "lifecycle" }
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-compose-ui = { group = "androidx.compose.ui", name = "ui" }
androidx-compose-ui-tooling = { group = "androidx.compose.ui", name = "ui-tooling" }
androidx-compose-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-compose-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
androidx-compose-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
androidx-compose-material3 = { group = "androidx.compose.material3", name = "material3" }
junit = { group = "junit", name = "junit", version.ref = "junit" }
robolectric = { group = "org.robolectric", name = "robolectric", version.ref = "robolectric" }

[plugins]
android-application = { id = "com.android.application", version.ref = "agp" }
kotlin-compose = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }

plugins {
    alias(libs.plugins.android.application)
    alias(libs.plugins.kotlin.compose)
}

android {
    namespace = "com.example.services"
    compileSdk = 37

    defaultConfig {
        applicationId = "com.example.services"
        minSdk = 24
        targetSdk = 37
        versionCode = 1
        versionName = "1.0"
    }

    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_17
        targetCompatibility = JavaVersion.VERSION_17
    }
    buildFeatures {
        compose = true
    }
    testOptions {
        unitTests.isIncludeAndroidResources = true
    }
}

dependencies {
    implementation(libs.androidx.core.ktx)
    implementation(libs.androidx.activity.compose)
    implementation(libs.androidx.lifecycle.viewmodel.compose)
    implementation(libs.androidx.lifecycle.runtime.compose)

    implementation(platform(libs.androidx.compose.bom))
    implementation(libs.androidx.compose.ui)
    implementation(libs.androidx.compose.material3)
    implementation(libs.androidx.compose.ui.tooling.preview)
    debugImplementation(libs.androidx.compose.ui.tooling)

    testImplementation(libs.junit)
    // Compose UI-тесты на JVM через Robolectric — только для проверки урока
    testImplementation(platform(libs.androidx.compose.bom))
    testImplementation(libs.androidx.compose.ui.test.junit4)
    testImplementation(libs.robolectric)
    debugImplementation(libs.androidx.compose.ui.test.manifest)
}

package com.example.services

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
import androidx.compose.material3.Checkbox
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.services.ui.theme.ServicesTheme

@Composable
fun ServiceCard(
    service: Service,
    selected: Boolean,
    onToggle: () -> Unit,
    modifier: Modifier = Modifier,
) {
    Card(
        modifier = modifier.fillMaxWidth(),
        colors = CardDefaults.cardColors(
            containerColor = if (selected) {
                MaterialTheme.colorScheme.primaryContainer
            } else {
                MaterialTheme.colorScheme.surfaceContainerHigh
            },
        ),
    ) {
        Row(
            modifier = Modifier
                .toggleable(value = selected, role = Role.Checkbox, onValueChange = { onToggle() })
                .padding(16.dp),
            verticalAlignment = Alignment.CenterVertically,
        ) {
            Box(
                modifier = Modifier
                    .size(40.dp)
                    .clip(CircleShape)
                    .background(MaterialTheme.colorScheme.primary),
                contentAlignment = Alignment.Center,
            ) {
                Text(
                    text = service.title.take(1),
                    color = MaterialTheme.colorScheme.onPrimary,
                    style = MaterialTheme.typography.titleMedium,
                )
            }
            Spacer(Modifier.width(16.dp))
            Column(modifier = Modifier.weight(1f)) {
                Text(service.title, style = MaterialTheme.typography.titleMedium)
                Text(
                    text = service.description,
                    style = MaterialTheme.typography.bodyMedium,
                    color = MaterialTheme.colorScheme.onSurfaceVariant,
                )
                service.badge?.let { badge ->
                    Text(
                        text = badge,
                        style = MaterialTheme.typography.labelMedium,
                        color = MaterialTheme.colorScheme.primary,
                    )
                }
            }
            Checkbox(checked = selected, onCheckedChange = null)
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ServiceCardPreview() {
    ServicesTheme {
        ServiceCard(service = sampleServices[0], selected = true, onToggle = {})
    }
}

package com.example.services

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue

@Composable
fun ServicesScreen() {
    var selectedIds by remember { mutableStateOf(setOf<Int>()) }

    ServicesContent(
        services = sampleServices,
        selectedIds = selectedIds,
        onToggle = { id -> selectedIds = toggle(selectedIds, id) },
    )
}

package com.example.services

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material3.BottomAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.services.ui.theme.ServicesTheme

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ServicesContent(
    services: List<Service>,
    selectedIds: Set<Int>,
    onToggle: (Int) -> Unit,
    modifier: Modifier = Modifier,
) {
    Scaffold(
        modifier = modifier,
        topBar = { TopAppBar(title = { Text("Услуги") }) },
        bottomBar = {
            BottomAppBar {
                Text(selectedLabel(selectedIds.size), modifier = Modifier.padding(horizontal = 16.dp))
            }
        },
    ) { innerPadding ->
        LazyColumn(
            modifier = Modifier.padding(innerPadding),
            contentPadding = PaddingValues(16.dp),
            verticalArrangement = Arrangement.spacedBy(12.dp),
        ) {
            items(services, key = { it.id }) { service ->
                ServiceCard(
                    service = service,
                    selected = service.id in selectedIds,
                    onToggle = { onToggle(service.id) },
                )
            }
        }
    }
}

@Preview(showBackground = true)
@Composable
fun ServicesContentPreview() {
    ServicesTheme {
        ServicesContent(services = sampleServices, selectedIds = setOf(1, 3), onToggle = {})
    }
}

package com.example.services.ui.theme

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext

private val LightColors = lightColorScheme(primary = Color(0xFF3949AB))
private val DarkColors = darkColorScheme(primary = Color(0xFF9FA8DA))

@Composable
fun ServicesTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit,
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }
        darkTheme -> DarkColors
        else -> LightColors
    }
    MaterialTheme(colorScheme = colorScheme, content = content)
}

package com.example.services

import androidx.lifecycle.ViewModel
import kotlinx.coroutines.flow.MutableStateFlow
import kotlinx.coroutines.flow.StateFlow
import kotlinx.coroutines.flow.asStateFlow
import kotlinx.coroutines.flow.update

data class ServicesUiState(
    val services: List<Service> = sampleServices,
    val selectedIds: Set<Int> = emptySet(),
)

class ServicesViewModel : ViewModel() {
    private val _uiState = MutableStateFlow(ServicesUiState())
    val uiState: StateFlow<ServicesUiState> = _uiState.asStateFlow()

    fun onToggle(id: Int) {
        _uiState.update { state -> state.copy(selectedIds = toggle(state.selectedIds, id)) }
    }
}

package com.example.services

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel

@Composable
fun ServicesRoute(viewModel: ServicesViewModel = viewModel()) {
    val uiState by viewModel.uiState.collectAsStateWithLifecycle()

    ServicesContent(
        services = uiState.services,
        selectedIds = uiState.selectedIds,
        onToggle = viewModel::onToggle,
    )
}

package com.example.services

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import com.example.services.ui.theme.ServicesTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ServicesTheme {
                ServicesRoute()
            }
        }
    }
}

package com.example.services

import org.junit.Assert.assertEquals
import org.junit.Test

class ServicesTest {
    @Test
    fun toggleAddsAndRemoves() {
        val once = toggle(emptySet(), 3)
        assertEquals(setOf(3), once)
        assertEquals(emptySet<Int>(), toggle(once, 3))
    }

    @Test
    fun labelUsesRussianPlurals() {
        assertEquals("Выберите услуги", selectedLabel(0))
        assertEquals("В заявке: 1 услуга", selectedLabel(1))
        assertEquals("В заявке: 3 услуги", selectedLabel(3))
        assertEquals("В заявке: 5 услуг", selectedLabel(5))
        assertEquals("В заявке: 11 услуг", selectedLabel(11))
        assertEquals("В заявке: 21 услуга", selectedLabel(21))
    }

    @Test
    fun viewModelTogglesSelection() {
        val viewModel = ServicesViewModel()
        viewModel.onToggle(2)
        viewModel.onToggle(5)
        assertEquals(setOf(2, 5), viewModel.uiState.value.selectedIds)
        viewModel.onToggle(2)
        assertEquals(setOf(5), viewModel.uiState.value.selectedIds)
    }
}

package com.example.services

import androidx.compose.ui.test.assertIsOff
import androidx.compose.ui.test.assertIsOn
import androidx.compose.ui.test.hasScrollAction
import androidx.compose.ui.test.hasText
import androidx.compose.ui.test.isToggleable
import androidx.compose.ui.test.junit4.v2.createComposeRule
import androidx.compose.ui.test.onNodeWithText
import androidx.compose.ui.test.performClick
import androidx.compose.ui.test.performScrollToNode
import com.example.services.ui.theme.ServicesTheme
import org.junit.Rule
import org.junit.Test
import org.junit.runner.RunWith
import org.robolectric.RobolectricTestRunner
import org.robolectric.annotation.Config

// Проверка урока на JVM (Robolectric), не на устройстве
@RunWith(RobolectricTestRunner::class)
@Config(sdk = [35])
class ServicesScreenTest {
    @get:Rule
    val composeRule = createComposeRule()

    @Test
    fun tapOnCardTogglesSelectionAndLabel() {
        composeRule.setContent { ServicesTheme(dynamicColor = false) { ServicesScreen() } }

        composeRule.onNodeWithText("Выберите услуги").assertExists()
        composeRule.onNodeWithText("Сайт компании").performClick()
        composeRule.onNodeWithText("В заявке: 1 услуга").assertExists()

        composeRule.onNodeWithText("Мобильное приложение").performClick()
        composeRule.onNodeWithText("В заявке: 2 услуги").assertExists()

        composeRule.onNodeWithText("Сайт компании").performClick()
        composeRule.onNodeWithText("В заявке: 1 услуга").assertExists()
    }

    @Test
    fun cardIsOneToggleableNode() {
        composeRule.setContent { ServicesTheme(dynamicColor = false) { ServicesScreen() } }

        val card = composeRule.onNode(hasText("Сайт компании") and isToggleable())
        card.assertIsOff()
        card.performClick()
        card.assertIsOn()
    }

    @Test
    fun lastItemIsReachableByScroll() {
        composeRule.setContent { ServicesTheme(dynamicColor = false) { ServicesScreen() } }

        composeRule.onNode(hasScrollAction()).performScrollToNode(hasText("Аудит сайта"))
        composeRule.onNodeWithText("Аудит сайта").performClick()
        composeRule.onNodeWithText("В заявке: 1 услуга").assertExists()
    }
}

./gradlew assembleDebug testDebugUnitTest