{"time":1740063026085,"blocks":[{"id":"c_GlgbLqTy","type":"paragraph","data":{"text":"Если раньше пользовательские интерфейсы приходилось писать вручную, то сейчас достаточно освоить инструмент для разработки интерфейсов Jetpack Compose и язык Kotlin. Так можно создавать современные UI с минимальным кодингом и максимальной эффективностью решений. Сегодня разберемся в основах Jetpack Compose и Cotlin и узнаем, как применять инструменты в своих проектах."}},{"id":"ibCc-oguxA","type":"header2","data":{"text":"Jetpack Compose: что это за зверь","level":2},"tunes":{}},{"id":"gziWhdBN6V","type":"paragraph","data":{"text":"Jetpack Compose — современный инструмент для создания пользовательских интерфейсов на Android, который использует декларативный подход. Разработчик описывает, как должен выглядеть UI в зависимости от данных, а система автоматически обновляет его при изменении этих данных. Так, вместо императивного управления элементами интерфейса, как в традиционной Android-разработке, Compose позволяет сосредоточиться на конечном результате."}},{"id":"Zjvriw7Tv5","type":"header3","data":{"text":"Чем Compose отличается от традиционного XML","level":3},"tunes":{}},{"id":"zCnoJF93l9","type":"paragraph","data":{"text":"Традиционно интерфейсы в Android создаются с помощью XML-разметки, но этот метод имеет ряд недостатков:"}},{"id":"AX7-30nQJA","type":"list","data":{"style":"unordered","items":["Разделяет логику интерфейса (XML) и управления им (Kotlin/Java), что усложняет поддержку;","Усложняет код по мере роста приложения;","Необходимо вручную обновлять UI при изменении данных."]}},{"id":"AVae1sqmYL","type":"paragraph","data":{"text":"Compose заменяет XML-разметку Kotlin-кодом, в котором UI описывается с помощью функций. Фреймворк сам отслеживает изменения данных и обновляет только нужные элементы."}},{"id":"YceAi6Z5iT","type":"header3","data":{"text":"Основные концепции: Composable-функции, Recomposition, State","level":3},"tunes":{}},{"id":"L8K09QqPHX","type":"header4","data":{"text":"Composable-функции","level":4},"tunes":{}},{"id":"z4XM0sbulX","type":"paragraph","data":{"text":"Основной строительный блок интерфейсов в Jetpack Compose — Composable-функции. Они представляют собой модули, из которых можно собирать весь UI. Каждая функция отвечает за определённую часть интерфейса, а сложные экраны формируются путем комбинирования элементов."}},{"id":"4xRTAIEFJT","type":"header4","data":{"text":"Recomposition","level":4},"tunes":{}},{"id":"qF2vZaq4Lp","type":"paragraph","data":{"text":"Одна из ключевых особенностей Jetpack Compose — механизм Recomposition. Если изменяются данные, система пересчитывает и обновляет только те элементы интерфейса, которые зависят от этих данных. Это повышает производительность и избавляет разработчика от необходимости вручную следить за обновлениями UI."}},{"id":"09yPOPBA7E","type":"header4","data":{"text":"State","level":4},"tunes":{}},{"id":"2wdxPiPPKQ","type":"paragraph","data":{"text":"Для управления изменяемыми данными в Compose используется механизм State. Он позволяет отслеживать изменения данных и автоматически обновлять связанные элементы интерфейса. Работа с состоянием в Compose построена на реактивных принципах, что делает его управление более удобным и предсказуемым."}},{"id":"CExEIMU4DS","type":"hint","data":{"text":"Jetpack Compose упрощает разработку UI на Android. Вместо сложных XML-разметок и ручного обновления элементов, разработчики теперь могут сосредоточиться на логике и удобстве использования своих приложений.","fullWidth":true}},{"id":"uXHQFOacWf","type":"header2","data":{"text":"Как установить и настроить проект","level":2},"tunes":{}},{"id":"l0NL2VEaIW","type":"header3","data":{"text":"Добавьте зависимости","level":3},"tunes":{}},{"id":"tJa_hNl19O","type":"paragraph","data":{"text":"Это первый шаг в освоении Jetpack Compose. Чтобы начать работу, нужно открыть build.gradle файл и добавить туда следующие строки:"}},{"id":"og7k9Evzai","type":"code","data":{"code":"dependencies {\n implementation \"androidx.compose.ui:ui:1.0.5\"\n implementation \"androidx.compose.material:material:1.0.5\"\n implementation \"androidx.compose.ui:ui-tooling-preview:1.0.5\"\n androidTestImplementation \"androidx.compose.ui:ui-test-junit4:1.0.5\"}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"enxWfEzPUo","type":"paragraph","data":{"text":"Так подключаются основные библиотеки для работы с Compose UI и Material Design."}},{"id":"VZCwR_yBTk","type":"header3","data":{"text":"Проверьте минимальные требования","level":3},"tunes":{}},{"id":"-WTgBT6FQN","type":"paragraph","data":{"text":"В первую очередь, нужно обновить Android Studio хотя бы до версии Arctic Fox или выше. Также необходимо апдейтнуть Gradle до 7.x и Kotlin до версии 1.5.x."}},{"id":"cdeQvUoUbk","type":"paragraph","data":{"text":"Минимальная версия API проекта должна быть не ниже 21 (да простят нас пользователи старых телефонов). Если хотите использовать все фишки Compose по максимуму — не ниже 23."}},{"id":"3dA8DZBbQS","type":"header3","data":{"text":"Легко запустите пустой проект","level":3},"tunes":{}},{"id":"VUlds05h2c","type":"paragraph","data":{"text":"Запустив Android Studio и создав новый проект, выберите шаблон Empty Compose Activity. В итоге увидите проект со всеми добавленными настройками и фрагментами."}},{"id":"HkpBWndMAc","type":"image","data":{"alt":"","title":"","caption":"","file":{"url":"https://media.tproger.ru/user-uploads/106063/2025-02-18/00ec1e3f-ed8e-415b-b6da-f31675c792a8.png","id":46430},"stretched":false,"withBackground":false,"withBorder":false,"width":910,"height":681,"optimizedFile":{"original":"https://media.tproger.ru/user-uploads/106063/2025-02-18/00ec1e3f-ed8e-415b-b6da-f31675c792a8.png","alt":"Jetpack Compose и Kotlin: как разрабатывать современные UI 1","dimensions":{"width":910,"height":681},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/BXAmCa8EsZD2PI1VIfDg58J_5rKg2XFhJ00lg3C7AfM/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/EDHBLwl1BhO6RHPB39DaYH1L6AvFv0M7RrZZaL-zdBg/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/AeXmrFZxS1L4TKDnxFEIat1av4bkXErTnkxNOIquwKk/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/m9qPG_ng11u5hBaWnaKJ_KGj-H8WiV1924RTKFq0R8M/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/ZP7alRdVJvTAbZbpYWabtIQUcPpaQ8IkxZgDlQmzNts/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/qLLdD9TvQgnaNnMw21LtLrUQrP0UusM4oIpRBhEK-Kk/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/dxzH1TD98WA2n2Ug4IOPxogs36jPCy_RFXD4c27tFD4/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/IKk93xEGsN1xl6rxnP8kU5rkBK3JukNi6B9JZeYLE6k/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC8wMGVjMWUzZi1lZDhlLTQxNWItYjZkYS1mMzE2NzVjNzkyYTgucG5n","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"XVV7XptCtf","type":"image","data":{"alt":"","title":"","caption":"","file":{"url":"https://media.tproger.ru/user-uploads/106063/2025-02-18/f1c9c808-b91d-4e93-b3dd-3047c8a107c4.png","id":46431},"stretched":false,"withBackground":false,"withBorder":false,"width":1361,"height":729,"optimizedFile":{"original":"https://media.tproger.ru/user-uploads/106063/2025-02-18/f1c9c808-b91d-4e93-b3dd-3047c8a107c4.png","alt":"Jetpack Compose и Kotlin: как разрабатывать современные UI 2","dimensions":{"width":1361,"height":729},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/U2dwI3rp1BtBbGuZ8q-OCiNC58eNhuBwQgrCBeNwXPM/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/UyyO6ThVAy-F_ULyAhEUm_LAEV25RnaCPRS383NXTrc/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/L7JnrvRJV1VRn6p3Jxp5X1gojGycbMu4jTXvj-lfbzI/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/ZVJZArFMp5GwItbQO_ZV5VNtKQR1MdXRwk2FxitAOC8/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/QBxinItE9sCjkZYk0ZKNbEkaFgBcygd5txxXQv6aD7A/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/BYaQUUoe8uu5RYFcB347sd7SiCupVK1PgbxB6itHjTs/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/3JgUKn5OAj4gDg9EtDy8x5QorW4iTKwIiY9uhb3-C58/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/J-0aBaeYoP2oof6WWm5s0ZhCy8iy9zt4ixPF8auiLyA/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VzZXItdXBsb2Fkcy8xMDYwNjMvMjAyNS0wMi0xOC9mMWM5YzgwOC1iOTFkLTRlOTMtYjNkZC0zMDQ3YzhhMTA3YzQucG5n","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"_iDga1l6tm","type":"paragraph","data":{"text":"Если же вы начинаете проект с нуля, то просто вставьте зависимости из первого пункта и проверьте настройки compileSdkVersion и minSdkVersion."}},{"id":"VscnI94wun","type":"header2","data":{"text":"Как создать базовые компоненты UI","level":2},"tunes":{}},{"id":"x8BTb_sJ4J","type":"paragraph","data":{"text":"Если раньше разработка интерфейсов была долгим и сложным логическим процессом, то с Kotlin и Jetpack Compose работа с UI превратилась в старый добрый тетрис, где задача — просто контролировать расположение блоков."}},{"id":"FUCSs3svER","type":"header3","data":{"text":"Работа с текстами","level":3},"tunes":{}},{"id":"KVRXBvoJmr","type":"paragraph","data":{"text":"Создать текстовый элемент здесь очень просто:"}},{"id":"iiRedghFzE","type":"code","data":{"code":"Text(text = \"Привет, это Tproger\")","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"HnaT25oZsd","type":"paragraph","data":{"text":"Если нужно работать с оформлением и стилем текста, то:"}},{"id":"h5duopOcrT","type":"code","data":{"code":"Text(\n text = \"Привет, это Tproger\",\n style = TextStyle(\n fontWeight = FontWeight.Bold,\n fontSize = 24.sp\n )\n)","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"ClrZmqOFvL","type":"header3","data":{"text":"Кнопки и их стилизация","level":3},"tunes":{}},{"id":"m9heoFWP0m","type":"paragraph","data":{"text":"В Compose кнопки создаются так же легко, как и текст:"}},{"id":"DCYA6UhBon","type":"code","data":{"code":"Button(onClick = { /* TODO: Обработать клик */ }) {\n Text(\"Подписаться\")}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"bEII8LKz5A","type":"paragraph","data":{"text":"Ещё кнопки можно стилизовать:"}},{"id":"x2HrB6e8Ir","type":"code","data":{"code":"Button(\n onClick = { /* TODO: Обработать клик */ },\n colors = ButtonDefaults.buttonColors(backgroundColor = Color.Cyan),\n shape = RoundedCornerShape(16.dp)\n) {\n Text(\"Подписаться\")\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"kjv67fKeo1","type":"header3","data":{"text":"Организация макетов: Column, Row, Box","level":3},"tunes":{}},{"id":"3zLsRzH09_","type":"paragraph","data":{"text":"В компоновке элементов UI всё должно быть на своих местах. В Jetpack Compose есть 3 главных инструмента для организации макета: Column, Row и Box."}},{"id":"ZmNQQEu2Mu","type":"paragraph","data":{"text":"Column используется для вертикального расположения элементов:"}},{"id":"DbXg3CFNUB","type":"code","data":{"code":"Column {\n Text(\"Первый элемент\")\n Text(\"Второй элемент\")\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"6KaYVT8xel","type":"paragraph","data":{"text":"И наоборот, когда элементы должны располагаться горизонтально, используется Row:"}},{"id":"NYiBtCm3dz","type":"code","data":{"code":"Row {\n Text(\"Лево\")\n Spacer(modifier = Modifier.width(16.dp))\n Text(\"Право\")\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"jQKV8XrKDN","type":"paragraph","data":{"text":"Box — инструмент для наложения элементов друг на друга:"}},{"id":"eiq9S95J9W","type":"code","data":{"code":"Box {\n Image(painterResource(id = R.drawable.sample), contentDescription = null)\n Text(\"Текст поверх изображения\", modifier = Modifier.align(Alignment.Center))\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"7PEobHUSh_","type":"header2","data":{"text":"Как управлять состоянием в Jetpack Compose","level":2},"tunes":{}},{"id":"K1Typ-H0rj","type":"paragraph","data":{"text":"В Jetpack Compose концепция State играет очень важную роль. State — часть данных приложения, которая может меняться со временем. Здесь «лежать» способно что угодно: от простого текста до информации о данных пользователя."}},{"id":"pUnOsZ3pae","type":"header3","data":{"text":"Использование remember и mutableStateOf","level":3},"tunes":{}},{"id":"yMceaO8gpB","type":"paragraph","data":{"text":"Как управлять состоянием в Kotlin и Jetpack Compose? Здесь на помощь приходят функции remember и mutableStateOf."}},{"id":"N4fzXCdcSX","type":"paragraph","data":{"text":"Когда вы пересоздаете UI (например, из-за изменения данных), remember поможет сохранить значения."}},{"id":"8oPjXxDed_","type":"paragraph","data":{"text":"Пример с кнопкой-счётчиком:"}},{"id":"2hovCjvlSJ","type":"code","data":{"code":"@Composable\nfun Counter() {\n val count = remember { mutableStateOf(0) }\n Button(onClick = { count.value++ }) {\n Text(\"Clicked ${count.value} times\")\n }\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"o7IuD1JSEE","type":"paragraph","data":{"text":"Здесь mutableStateOf(0) создаёт изменяемое состояние с начальным значением 0, а remember удерживает это состояние во время пересозданий компонента Counter. Так, при клике значение увеличивается на единицу."}},{"id":"7yWWMqkp0u","type":"header3","data":{"text":"Поддержание реактивности интерфейса","level":3},"tunes":{}},{"id":"jr4h8roKzT","type":"paragraph","data":{"text":"Один из главных плюсов Jetpack Compose — его реактивность. Изменения состояния автоматически обновляют пользовательский интерфейс без ручного ввода."}},{"id":"foH15d5Xpx","type":"paragraph","data":{"text":"Когда Counter вызывается заново из-за высокого значения count после клика, система Jetpack Compose автоматически обновляет только те части интерфейса, которые зависят от этих данных."}},{"id":"COl0ptL-a7","type":"paragraph","data":{"text":"Управление состоянием — база в создании UI на основе Kotlin и Jetpack Compose."}},{"id":"49KeK_n8Tg","type":"header3","data":{"text":"Темизация и стилизация","level":3},"tunes":{}},{"id":"k9O6GTjPCK","type":"paragraph","data":{"text":"Темизация и стилизация важны для создания классного UI. Kotlin и Jetpack Compose предлагают по-настоящему мощные инструменты для работы с темами, с помощью которых можно легко адаптировать внешний вид приложения в зависимости от предпочтений пользователей."}},{"id":"PLBV9m7S2j","type":"header2","data":{"text":"Работа с темами: Light и Dark mode","level":2},"tunes":{}},{"id":"pbJZ7AtrnS","type":"paragraph","data":{"text":"В Jetpack Compose можно автоматически переключаться между светлой и тёмной темами, используя при этом системные настройки. Ещё использовать MaterialTheme, встроенный в Compose. Он определяет палитру для обеих тем, создавая согласованность дизайна на всех экранах."}},{"id":"aY5vi5HKop","type":"header3","data":{"text":"Определение кастомной темы приложения","level":3},"tunes":{}},{"id":"EUmyrfZnal","type":"paragraph","data":{"text":"Для создания уникальной темы, которая будет отражать ваш бренд, можно использовать кастомизацию темы приложения."}},{"id":"E2kV_hE6qs","type":"paragraph","data":{"text":"Сначала нужно определить основные цвета, оттенки фона и акценты. Далее выбрать шрифты, их размер для разных текстовых элементов. Очень важно уделить внимание формам элементов (кнопкам и карточкам) — здесь можно выбрать обводку и углы закругления."}},{"id":"csLvWUe0DI","type":"header3","data":{"text":"Использование Material Design 3","level":3},"tunes":{}},{"id":"Gkzc80ydiL","type":"paragraph","data":{"text":"С выходом Material Design 3, на Android можно создавать ещё более интуитивные и адаптивные дизайны — всё зависит от ваших предпочтений и нужд."}},{"id":"f3403a4f-f128-42d9-8af9-0738ccb2b9bc","type":"embed","data":{"data":{"id":252386,"name":"--entuziasty-sravnili-proizvoditelnost-python-3-13-s-python-3-12-252386","type":"post","title":"🔥 Энтузиасты сравнили производительность Python 3.13 с Python 3.12","author":94744,"parent":72711,"status":"publish","content":"

Группа IT-энтузиастов сравнила производительность Python 3.13 с предыдущей версией — Python 3.12 — на различных конфигурациях компьютеров.

\r\n\r\n

Всего было проведено 100 тестов на устройствах с чипами AMD Ryzen 7000 серии и Intel Core 13-го поколения.

\r\n\r\n

Что нового: ускорение на 61% в асинхронных задачах

\r\n\r\n

Основные улучшения производительности в Python 3.13 касаются асинхронных операций и задач, связанных с вводом-выводом.

\r\n\r\n

Например, тест async_tree_eager_io_tg на компьютере с процессором AMD Ryzen 9 7900 показал ускорение на впечатляющие 61%. Это серьезное преимущество для тех, кто использует Python для обработки сетевых запросов и других I/O задач.

\r\n\r\n

Однако, в некоторых тестах, таких как coverage (замедление на 36%), новый Python показал не столь впечатляющие результаты. Это указывает на то, что в ряде специфических сценариев обновление может не давать ожидаемого прироста.

\r\n\r\n

«Мозговой штурм» на Intel: на 51% быстрее в SSL-запросах

\r\n\r\n

На мини-ПК с процессором Intel Core i3-1315U Python 3.13 также доказал свою силу. В тесте asyncio_tcp_ssl производительность выросла на 51%, что делает его идеальным для высоконагруженных серверных приложений.

\r\n\r\n

Тем не менее, в задачах по сериализации данных прирост был скромнее — всего 5%.

\r\n\r\n

Не всё золото, что блестит

\r\n\r\n

Несмотря на впечатляющие результаты, Python 3.13 не во всём выигрывает у предыдущей версии языка.

\r\n\r\n

Например, запуск программ и начальная загрузка немного замедлились, как показал тест python_startup (на 4% медленнее).

\r\n\r\n

Выводы

\r\n\r\n

Для тех, кто активно использует асинхронные функции и задачи с I/O, обновление до Python 3.13 принесет ощутимый прирост производительности.

\r\n\r\n

Но разработчикам, использующим Python для более узкоспециализированных задач, стоит внимательно изучить конкретные тесты перед переходом на новую версию.

\r\n\r\n

Группы тестов в сравнении:

\r\n\r\n

Асинхронные задачи: Python 3.13 быстрее на 22%.
Математические вычисления: прирост 6%.
Задачи сериализации данных: +5%.

\r\n\r\n

Python 3.13 ускоряет разработку во многих ключевых областях, но выбор всегда должен основываться на задачах проекта.

\r\n\r\n[newPoll id=\"670e264ba673587fc96a610e\"]\r\n\r\n","created_at":"2024-10-15T11:19:13.000+03:00","updated_at":"2024-10-16T19:49:29.000+03:00","created_at_gmt":"2024-10-15T08:19:13.000+03:00","updated_at_gmt":"2024-10-16T16:49:29.000+03:00"},"link":"https://tproger.ru/news/--entuziasty-sravnili-proizvoditelnost-python-3-13-s-python-3-12-252386","type":"tproger","image":null,"title":"🔥 Энтузиасты сравнили производительность Python 3.13 с Python 3.12","subType":"tproger_post","viewDomain":"tproger.ru"}},{"id":"1a9fkxCAmD","type":"paragraph","data":{"text":"Например, с помощью поддержки динамической цветовой схемы (Dynamic Color), можно адаптировать цвета интерфейса к обоям устройства и другим условиям."}},{"id":"71A-ylFTLA","type":"paragraph","data":{"text":"Кроме того, в Material Design 3 есть обновлённый набор компонентов UI с адаптацией под разрешение экрана и ориентацию устройства."}},{"id":"-dWX6ZkHTm","type":"header2","data":{"text":"Сложные интерфейсы","level":2},"tunes":{}},{"id":"nWYSSzVge5","type":"paragraph","data":{"text":"Эффективность, удобство и привлекательность — 3 кита, на которых строится успешное приложение. Разбираемся, как с помощью Kotlin и Jetpack Compose создавать сложные интерфейсы."}},{"id":"0IVbBQFr4o","type":"header3","data":{"text":"Работа со списками: LazyColumn и LazyRow","level":3},"tunes":{}},{"id":"sRgIp4_7hk","type":"paragraph","data":{"text":"Можно работать с LazyColumn и LazyRow — они используются для отображения больших наборов данных без «утяжеления» производительности приложения."}},{"id":"8QOfZ_vQz4","type":"paragraph","data":{"text":"LazyColumn — вертикальный список элементов, который подгружает данные по мере необходимости. Для создания списка используется @Composable, а сами элементы списка создаются внутри блока items:"}},{"id":"aXDpvgGfIx","type":"code","data":{"code":"LazyColumn {\n items(itemsList) { item ->\n Text(text = item.name)\n }\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"X8tcUVYE0P","type":"paragraph","data":{"text":"А LazyRow позволяет создавать горизонтальные списки — подойдёт для каруселей или галерей:"}},{"id":"22LVvr21Zn","type":"code","data":{"code":"LazyRow {\n items(imagesList) { image ->\n Image(painter = painterResource(id = image.resourceId), contentDescription = null)\n }\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"XaKbyA0bb9","type":"paragraph","data":{"text":"Также с помощью этих компонентов вы можете добавлять разделители и/или анимации:"}},{"id":"iBnNVzlydm","type":"code","data":{"code":"LazyColumn {\n items(users, key = { user -> user.id }) { user ->\n PersonView(\n name = user.name, modifier = Modifier\n .fillMaxWidth()\n .padding(8.dp)\n .animateItemPlacement()\n )\n }\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"n8dwtVc_ca","type":"header3","data":{"text":"Создание пользовательских Composable-компонентов","level":3},"tunes":{}},{"id":"Dnjjsr03xY","type":"paragraph","data":{"text":"Собственные composable-компоненты — возможность создавать уникальные элементы интерфейса. Для этого достаточно поместить логику отображения элементов с помощью @Composable:"}},{"id":"lyOMgNX8Ed","type":"code","data":{"code":"@Composable\nfun CustomButton(onClick: () -> Unit, label: String) {\n Button(onClick = onClick) {\n Text(text = label)\n }\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"8pKKTyVnRk","type":"paragraph","data":{"text":"@Composable можно использовать, например, с настройкой параметров onClick и label — так улучшается модульность кода."}},{"id":"UP8s5XKzol","type":"header3","data":{"text":"Анимации в Jetpack Compose: плавные переходы и визуальные эффекты","level":3},"tunes":{}},{"id":"vf1MZgAPZa","type":"paragraph","data":{"text":"В Jetpack Compose есть API для создания плавных переходов между блоками через функции по типу animateDpAsState и animateColorAsState. Например, для изменения размера можно использовать анимацию:"}},{"id":"XKnoHaa_zf","type":"code","data":{"code":"val size by animateDpAsState(targetValue = if (expanded) 100.dp else 50.dp)\nBox(\n Modifier.size(size).background(Color.Blue)\n)","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"dtfPkpJWEE","type":"paragraph","data":{"text":"Также необходима библиотека Accompanist или функции вроде AnimatedVisibility, для динамического отображения контента с эффектом появления/исчезновения:"}},{"id":"SRqK9Kdcua","type":"code","data":{"code":"AnimatedVisibility(visible = isVisible) {\n Text(text = \"Это Tproger.\")\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"PlFg-aN3IB","type":"header2","data":{"text":"Интеграция с существующими Android-компонентами","level":2},"tunes":{}},{"id":"t4MWgK3ktv","type":"paragraph","data":{"text":"Jetpack Compose можно использовать в существующих Android-приложениях, не переписывая их с нуля. Для этого предусмотрена интеграция с компонентами View через ComposeView."}},{"id":"L-TayN7PQY","type":"header3","data":{"text":"Встраивание Compose в существующие приложения","level":3},"tunes":{}},{"id":"UO4GHsOoHC","type":"paragraph","data":{"text":"В приложениях, где уже используется XML-разметка, элементы Compose можно добавлять через ComposeView, вставляя их прямо в макет или Activity:"}},{"id":"Im2tuPeQao","type":"paragraph","data":{"text":"Например: добавим Text в XML-разметку через ComposeView:"}},{"id":"kNoZnm0YPK","type":"code","data":{"code":"<com.google.android.material.composethemeadapter.ComposeView\n android:id=\"@+id/compose_view\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"wrap_content\"/>\n","language":"xml","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"dFsJ40jJhZ","type":"paragraph","data":{"text":"Далее, в Activity:"}},{"id":"WwmRts8liQ","type":"code","data":{"code":"val composeView = findViewById<ComposeView>(R.id.compose_view)\ncomposeView.setContent {\n Text(\"Ваш текст\")\n}\n","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"Xr5mDA1bj4","type":"header3","data":{"text":"Использование View и Compose вместе (interop)","level":3},"tunes":{}},{"id":"soZ3GuaMHb","type":"paragraph","data":{"text":"При постепенном переходе на Compose можно внедрять его в отдельные UI-элементы. Например, статическую часть формы оставить в XML, а интерактивную — реализовать на Compose:"}},{"id":"U1kIjBXzNQ","type":"code","data":{"code":"class MainActivity : AppCompatActivity() {\n override fun onCreate(savedInstanceState: Bundle?) {\n super.onCreate(savedInstanceState)\n setContentView(R.layout.activity_main)\n val composeView = findViewById(R.id.compose_view)\n composeView.setContent {\n Column {\n TextField(\n value = \"\",\n onValueChange = { /* Обработчик изменения текста */ },\n label = { Text(\"Ваш текст\") }\n )\n }\n }\n }","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"-mMxnF3gmj","type":"paragraph","data":{"text":"Такой подход позволяет постепенно внедрять Compose в проект, сохраняя совместимость с существующим кодом."}},{"id":"lwem9zLRbw","type":"header2","data":{"text":"Тестирование интерфейсов","level":2},"tunes":{}},{"id":"nimiCOgCWP","type":"header3","data":{"text":"Инструменты для тестирования Jetpack Compose","level":3},"tunes":{}},{"id":"ekTuRUslZC","type":"paragraph","data":{"text":"В Jetpack Compose есть набор инструментов для тестирования UI. Один из главных — библиотека Compose Test, в которой вы можете найти функции для проверки UI. Она работает с Android Testing Framework, а значит, можно не забывать привычный для разработчиков синтаксис."}},{"id":"GDeZSlHt-e","type":"paragraph","data":{"text":"С помощью Compose Test можно:"}},{"id":"aWteLO4mMI","type":"list","data":{"style":"unordered","items":["Проверять отображение и свойства элементов UI;","Симулировать пользовательские действия (нажатия, прокрутку, ввод текста);","Изменять состояние приложения в тестовой среде."]}},{"id":"uBwF1r-vwh","type":"header3","data":{"text":"UI-тесты и проверка состояния","level":3},"tunes":{}},{"id":"Jhj1gz5f7J","type":"paragraph","data":{"text":"В автоматизированных тестах есть 2 основных типа: юнит-тесты (фокус на коде) и UI-тесты (фокус на интерфейсе и взаимодействии пользователя с ним)."}},{"id":"IKH5B4yxLa","type":"paragraph","data":{"text":"UI-тесты позволяют проверить, правильно ли отображаются элементы, и реагируют ли они на действия пользователя. Например, можно проверить:"}},{"id":"dsdDVEJogj","type":"list","data":{"style":"unordered","items":["Отображается ли нужная кнопка на экране;","Изменяется ли текст после нажатия;","Работает ли прокрутка списков."]}},{"id":"rtxLQNiqWN","type":"paragraph","data":{"text":"Jetpack Compose делает UI-тестирование удобнее, позволяя работать с декларативным подходом и минимизировать сложность тестов."}},{"id":"BWBba639td","type":"header3","data":{"text":"Примеры написания тестов","level":3},"tunes":{}},{"id":"hyenHMR-Gh","type":"paragraph","data":{"text":"Несколько примеров UI-тестов с использованием библиотеки Compose Test."}},{"id":"bFBy_mUW15","type":"paragraph","data":{"text":"Пример 1: проверка наличия элемента"}},{"id":"IhugtMSRPK","type":"code","data":{"code":"@Test\nfun testElementIsDisplayed() {\n composeTestRule.setContent {\n MyApp()\n }\n composeTestRule.onNodeWithText(\"Ваш текст\").assertIsDisplayed()\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"TEjzMUAzOb","type":"paragraph","data":{"text":"Пример 2: работа с элементами"}},{"id":"2fSDu5YQgH","type":"code","data":{"code":"@Test\nfun testButtonClick() {\n composeTestRule.setContent {\n MyApp()\n }\n composeTestRule.onNodeWithText(\"Тык сюда\").performClick()\n composeTestRule.onNodeWithText(\"Button Clicked\").assertIsDisplayed()\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"-C37WSKkwz","type":"paragraph","data":{"text":"Пример 3: проверка изменения состояния"}},{"id":"DWTJiY4_OR","type":"code","data":{"code":"@Test\nfun testTextFieldInput() {\n composeTestRule.setContent {\n MyApp()\n }\n val inputText = \"Какой-то текст\"\n composeTestRule.onNodeWithTag(\"inputField\").performTextInput(inputText)\n composeTestRule.onNodeWithText(inputText).assertIsDisplayed()\n}","language":"clike","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"Ib76rfz11P","type":"paragraph","data":{"text":"Вообще инструменты Jetpack Compose крайне хороши для тестирования: повышается качество приложений за счёт поиска ошибок в интерфейсе."}},{"id":"3MhdkAB1Jj","type":"header2","data":{"text":"Советы по оптимизации производительности","level":2},"tunes":{}},{"id":"wSGXdfmAWi","type":"paragraph","data":{"text":"Kotlin и Jetpack Compose дают разработчикам инструменты, чтобы создавать современные интерфейсы — это факт. Но для достижения лучших результатов важно понимать, как и за счёт чего оптимизируется производительность."}},{"id":"E0yFTkx8BG","type":"header3","data":{"text":"Избегайте избыточной рекомпозиции","level":3},"tunes":{}},{"id":"DplGrLdzs5","type":"paragraph","data":{"text":"Рекомпозиция — пересоздание части интерфейса при изменении состояния приложения. Из минусов — она может сильно замедлить приложение. "}},{"id":"BWlT7wk2Bj","type":"paragraph","data":{"text":"Как свести рекомпозицию к минимуму:"}},{"id":"ndM6QgOGi2","type":"list","data":{"style":"ordered","items":["Используйте remember, чтобы не было пересоздания одного и того же состояния. Так снижается нагрузка на систему, а работа приложения ускоряется.","Разделяйте состояния композиций так, чтобы изменения одного элемента не приводили к рекомпозиции других элементов. Здесь поможет принцип SRP.","Чем более простой элемент, тем быстрее наступят изменения."]}},{"id":"HqAW_q63kn","type":"header3","data":{"text":"Используйте инструментов Android Studio для анализа производительности","level":3},"tunes":{}},{"id":"lFdGU1yNnR","type":"paragraph","data":{"text":"Основные инструменты:"}},{"id":"DKgRaB5-kJ","type":"list","data":{"style":"ordered","items":["Layout Inspector. Позволяет создать дерево компоновки приложения в реальном времени, показывая затраты на выполнение функций и методов.","Profiler. Даёт полную информацию об использовании ресурсов приложения и определяет потенциальные проблемы с производительностью.","Сравнительный анализ. Помогает выявить слабые места при взаимодействии пользователя с приложением."]}},{"id":"je1Z71CAzs","type":"hint","data":{"text":"Вы можете создавать более интерактивные и интересные (с точки зрения визуала) приложения с меньшими затратами времени и усилий. Вообще Jetpack Compose не только ускоряет процесс создания UI, но и поднимает качество приложения. Пользуйтесь!","fullWidth":true}},{"id":"hV4737di89","type":"paragraph","data":{"text":"Если хочешь освоить больше инструментов по мобильной разработке, собираем все актуальные новости тут."}}],"version":"2.25.0"}

Ошибка в настройках сайта