{"id":403451,"date":"2024-06-29T17:08:06","date_gmt":"2024-06-29T17:08:06","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=403451"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=403451","title":{"rendered":"<span>\u0414\u0435\u043b\u0430\u0435\u043c \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 Collapsing Toolbar \u043d\u0430 Jetpack Compose<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430 Jetpack Compose \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b\u0430 \u0433\u043b\u0430\u0434\u043a\u043e. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b\u0438 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043d\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043b \u0430\u043d\u0430\u043b\u043e\u0433 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0434\u043e\u0431\u0440\u043e\u0433\u043e <code>CollapsingToolbarLayout<\/code> \u0438\u0437 View-\u043c\u0438\u0440\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 Compose: \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u043c\u0441\u044f \u0432 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 Compose, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 androidx.compose.material3, \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0432\u0448\u0435\u0439 \u043d\u0430\u0441 \u043d\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0442\u0435\u043c, \u043a\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 Compose, \u0438 \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c\u0438 \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u044b Compose-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w780q1\/getpro\/habr\/upload_files\/c90\/d3d\/b9c\/c90d3db9cc15887dbe4b28efcacb4244.jpeg\" width=\"1600\" height=\"900\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/c90\/d3d\/b9c\/c90d3db9cc15887dbe4b28efcacb4244.jpeg\" data-blurred=\"true\"\/><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h2>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 Compose, \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/7a2\/84d\/6cc\/7a284d6cc7e0d144e65ee4f9d6e39d18.png\" width=\"540\" height=\"180\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/7a2\/84d\/6cc\/7a284d6cc7e0d144e65ee4f9d6e39d18.png\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d96\/19d\/2c6\/d9619d2c6dd6289448472c209251366f.gif\" width=\"540\" height=\"400\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/d96\/19d\/2c6\/d9619d2c6dd6289448472c209251366f.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u043d\u0438\u0437\u0443 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u0431\u044b ViewPager):<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e4d\/a5d\/2a6\/e4da5d2a6e8441c6566defd85b57f62d.gif\" width=\"540\" height=\"400\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/e4d\/a5d\/2a6\/e4da5d2a6e8441c6566defd85b57f62d.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043c\u0435\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0442\u0443\u043b\u0431\u0430\u0440\u0430, \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435: <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/310\/7e9\/801\/3107e9801311e48e23753e6e5d465c5c.gif\" width=\"540\" height=\"400\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/310\/7e9\/801\/3107e9801311e48e23753e6e5d465c5c.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a \u043a \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u043c\u043d\u043e\u0433\u043e\u0442\u043e\u0447\u0438\u0435\u043c:<\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/082\/e7b\/194\/082e7b194d7e26b7d145ebb253679985.gif\" width=\"540\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/082\/e7b\/194\/082e7b194d7e26b7d145ebb253679985.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043f\u0440\u0438 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0435\u043d\u044c \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430.<\/p>\n<h2>\u0418\u0449\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442<\/h2>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u044b\u043b\u043e \u0431\u044b \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 Compose-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: <code>Row<\/code> \u0438 <code>Column<\/code>, \u0435\u0441\u043b\u0438 \u0431\u044b \u043d\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435. \u0412 \u0441\u0442\u0430\u0440\u043e\u043c View-\u043c\u0438\u0440\u0435 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0443 \u0438\u0437 <code>CollapsingToolbarLayout<\/code> \u0438 <code>CoordinatorLayout<\/code> \u0438\u0437 material-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0434\u0430\u0432\u0430\u0439\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u0437 Compose-\u043c\u0438\u0440\u0430.<\/p>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/material3\/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)\">TopAppBar<\/a> \u0438\u0437 compose.material3. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e material3, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 compose.material \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u043d \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c. <code>TopAppBar<\/code> \u0438\u0437 material3 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043b\u0435\u0439\u0430\u0443\u0442, \u043d\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 (\u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0435\u0440\u0441\u0438\u0438 1.0.1) \u0443 \u043d\u0435\u0433\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u0443 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e \u043d\u0430\u043c <code>CollapsingToolbarLayout<\/code>. \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>TopAppBar<\/code> \u043d\u0435 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 fade-in\/fade-out: <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/75f\/f6d\/e1e\/75ff6de1e6dee0acf04d0604036354f8.gif\" width=\"540\" height=\"500\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/75f\/f6d\/e1e\/75ff6de1e6dee0acf04d0604036354f8.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u0441\u0435\u0440\u0447\u0430 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442:\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/onebone\/compose-collapsing-toolbar\">compose-collapsing-toolbar<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0432 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u043c\u043e\u0434\u0438\u0444\u0430\u0435\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0439 collapsing toolbar, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043f\u043e\u0434 \u0432\u0430\u0448 \u043a\u0435\u0439\u0441. <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u0439 \u043b\u0435\u0439\u0430\u0443\u0442, \u043d\u043e \u043f\u043e\u0432\u0435\u0440\u0445 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <\/p>\n<p>\u0410 \u0435\u0449\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 Compose-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/constraintlayout\/compose\/package-summary#motionlayouthttps:\/\/developer.android.com\/reference\/kotlin\/androidx\/constraintlayout\/compose\/package-summary#motionlayout\">MotionLayout<\/a>. \u041d\u043e \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u043d\u0435\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c, \u0430 \u043e\u0442\u0447\u0430\u0441\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>TopAppBar<\/code> \u0438\u0437 compose.material3 \u043f\u043e\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443 \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0432\u0435\u0434\u044c \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0441\u0445\u043e\u0436\u0438. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043f\u044b\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0445 Compose-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 MotionLayout, \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0432\u0430\u0448 \u0444\u0438\u0434\u0431\u0435\u043a \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0438\u043c, \u043d\u043e \u043c\u044b \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0448\u043b\u0438 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 <code>TopAppBar<\/code> \u0438\u0437 compose.material3 \u043f\u043e\u0434 \u043d\u0430\u0448\u0438 \u043d\u0443\u0436\u0434\u044b. <\/p>\n<h2>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 layout \u0432 Compose<\/h2>\n<p><code>TopAppBar<\/code> \u0438\u0437 compose.material3 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/package-summary#Layout(androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)\">Layout<\/a>. \u0421 \u0435\u0435 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 <a href=\"https:\/\/developer.android.com\/jetpack\/compose\/layouts\/custom\">\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u044d\u0442\u0430\u043f\u043e\u0432<\/a>: <\/p>\n<ul>\n<li>\n<p>\u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442 (\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u0435\u0439\u0430\u0443\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>Layout<\/code> \u0447\u0435\u0440\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <code>content<\/code>. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e: \u0442\u0435\u043a\u0441\u0442 \u0442\u0430\u0439\u0442\u043b\u0430, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b \u0434\u043b\u044f navigation icon, \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438 \u0441\u043b\u043e\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0435\u0433\u043e \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c \u043c\u043e\u0434\u0438\u0444\u0430\u0435\u0440 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/Modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.Any)\">layouId<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0435: <\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Layout<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = {         if (collapsingTitle != null) {             Text(                 modifier = Modifier.layoutId(ExpandedTitleId)                 \/\/ ...             )             Text(                 modifier = Modifier.layoutId(CollapsedTitleId)                 \/\/ ...             )         }          if (navigationIcon != null) {             Box(                 modifier = Modifier.layoutId(NavigationIconId)             ) {                 navigationIcon()             }         }          if (actions != null) {             Row(                 modifier = Modifier.layoutId(ActionsId)             ) {                 actions()             }         }          if (centralContent != null) {             Box(                 modifier = Modifier.layoutId(CentralContentId)             ) {                 centralContent()             }         }          if (additionalContent != null) {             Box(                 modifier = Modifier.layoutId(AdditionalContentId)             ) {                 additionalContent()             }         }     },     \/\/ ... )<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt#L70\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Text<\/code>, \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0430\u043b\u044c\u0444\u0430-\u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u0440\u0438 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u0438: \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u043e\u043a\u0430\u0437\u0443 \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0433\u043e \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. View-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>CollapsingToolbarLayout<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0442\u0440\u044e\u043a \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Text \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043e\u0442 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043a \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u043c\u0443<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = {         if (collapsingTitle != null) {             Text(                 modifier = Modifier                     .layoutId(ExpandedTitleId)                     .wrapContentHeight(align = Alignment.Top)                     .graphicsLayer(                         scaleX = collapsingTitleScale,                         scaleY = collapsingTitleScale,                         transformOrigin = TransformOrigin(0f, 0f)                     ),                 text = collapsingTitle.titleText,                 style = collapsingTitle.expandedTextStyle             )             Text(                 modifier = Modifier                     .layoutId(CollapsedTitleId)                     .wrapContentHeight(align = Alignment.Top)                     .graphicsLayer(                         scaleX = collapsingTitleScale,                         scaleY = collapsingTitleScale,                         transformOrigin = TransformOrigin(0f, 0f)                     ),                 text = collapsingTitle.titleText,                 style = collapsingTitle.expandedTextStyle,                 maxLines = 1,                 overflow = TextOverflow.Ellipsis             )         }         \/\/ ...     },     \/\/ ... )<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt#L72\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 <code>Layout<\/code> \u043b\u044f\u043c\u0431\u0434\u0443 <code>measurePolicy<\/code>. \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u044d\u0442\u043e\u0439 \u043b\u044f\u043c\u0431\u0434\u044b <code>measurables<\/code> \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/Measurable\">Measurable<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043a \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0435 <code>content<\/code>. \u041f\u043e <code>layoutId<\/code> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0438\u0445 \u043d\u0443\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = { \/* ... *\/ },     modifier = \/* ... *\/,     measurePolicy = { measurables, constraints ->       val horizontalPaddingPx = HorizontalPadding.toPx()       val expandedTitleBottomPaddingPx = ExpandedTitleBottomPadding.toPx()         \/\/ Measuring widgets inside toolbar:          val navigationIconPlaceable = measurables.firstOrNull { it.layoutId == NavigationIconId }           ?.measure(constraints.copy(minWidth = 0))          val actionsPlaceable = measurables.firstOrNull { it.layoutId == ActionsId }           ?.measure(constraints.copy(minWidth = 0))          val expandedTitlePlaceable = measurables.firstOrNull { it.layoutId == ExpandedTitleId }           ?.measure(               constraints.copy(                   maxWidth = (constraints.maxWidth - 2 * horizontalPaddingPx).roundToInt(),                   minWidth = 0,                   minHeight = 0               )           )          val additionalContentPlaceable = measurables.firstOrNull { it.layoutId == AdditionalContentId }           ?.measure(constraints)        val navigationIconOffset = when (navigationIconPlaceable) {           null -> horizontalPaddingPx           else -> navigationIconPlaceable.width + horizontalPaddingPx * 2       }          val actionsOffset = when (actionsPlaceable) {           null -> horizontalPaddingPx           else -> actionsPlaceable.width + horizontalPaddingPx * 2       }          val collapsedTitleMaxWidthPx =           (constraints.maxWidth - navigationIconOffset - actionsOffset) \/ fullyCollapsedTitleScale          val collapsedTitlePlaceable = measurables.firstOrNull { it.layoutId == CollapsedTitleId }           ?.measure(               constraints.copy(                   maxWidth = collapsedTitleMaxWidthPx.roundToInt(),                   minWidth = 0,                   minHeight = 0               )           )          val centralContentPlaceable = measurables.firstOrNull { it.layoutId == CentralContentId }           ?.measure(               constraints.copy(                   minWidth = 0,                   maxWidth = (constraints.maxWidth - navigationIconOffset - actionsOffset).roundToInt()               )           )        \/\/ ...    }<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt#L142\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043e\u0431\u044a\u0435\u043a\u0442 <code>constraints<\/code>, \u0438\u0437 \u043a\u043e\u0442\u043e\u0440\u043e\u0433\u043e \u0434\u043e\u0441\u0442\u0430\u0435\u043c \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430: \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0435 \u0435\u043c\u0443 \u0448\u0438\u0440\u0438\u043d\u0443 \u0438 \u0432\u044b\u0441\u043e\u0442\u0443. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430\u043c <code>navigationIcon<\/code> \u0438 <code>actions<\/code> \u043c\u044b \u0434\u0430\u043b\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0432\u0441\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u0441\u0442\u0432\u043e, \u0430 \u0434\u043b\u044f \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432 \u0432 \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u043c \u0438 \u0440\u0430\u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0438 \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u043b\u0438 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f \u0441 \u0443\u0447\u0435\u0442\u043e\u043c \u0431\u043e\u043a\u043e\u0432\u044b\u0445 \u043e\u0442\u0441\u0442\u0443\u043f\u043e\u0432 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0441\u043e\u0441\u0435\u0434\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<p>\u0412\u044b\u0437\u043e\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f (<a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/Measurable#measure(androidx.compose.ui.unit.Constraints)\">measure<\/a>) \u043d\u0430 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u0445 \u0442\u0438\u043f\u0430 <code>Measurable<\/code> \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/Placeable\">Placeable<\/a>, \u0442\u043e \u0435\u0441\u0442\u044c \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043a \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044e \u043d\u0430 \u043b\u0435\u0439\u0430\u0443\u0442\u0435. \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c\u0441\u044f \u0441 \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u043c\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u0430\u043c\u0438 \u043b\u0435\u0439\u0430\u0443\u0442\u0430: \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u0448\u0438\u0440\u0438\u043d\u0443, \u0430 \u0432\u044b\u0441\u043e\u0442\u0443 \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0435\u043c \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0442\u0435\u043a\u0443\u0449\u0438\u0435\u0439 \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430: <\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u043f\u0440\u0435\u0434\u0435\u043b\u044f\u0435\u043c \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = { \/* ... *\/ },     modifier = \/* ... *\/,     measurePolicy = { measurables, constraints ->                  \/\/ ...                val collapsedHeightPx = when {             centralContentPlaceable != null ->                 max(MinCollapsedHeight.toPx(), centralContentPlaceable.height.toFloat())             else -> MinCollapsedHeight.toPx()         }            var layoutHeightPx = collapsedHeightPx               \/\/ Calculating coordinates of widgets inside toolbar:            \/\/ Current coordinates of navigation icon         val navigationIconX = horizontalPaddingPx.roundToInt()         val navigationIconY = ((collapsedHeightPx - (navigationIconPlaceable?.height ?: 0)) \/ 2).roundToInt()            \/\/ Current coordinates of actions         val actionsX = (constraints.maxWidth - (actionsPlaceable?.width ?: 0) - horizontalPaddingPx).roundToInt()         val actionsY = ((collapsedHeightPx - (actionsPlaceable?.height ?: 0)) \/ 2).roundToInt()            \/\/ Current coordinates of title         var collapsingTitleY = 0         var collapsingTitleX = 0            if (expandedTitlePlaceable != null &amp;&amp; collapsedTitlePlaceable != null) {             \/\/ Measuring toolbar collapsing distance             val heightOffsetLimitPx = expandedTitlePlaceable.height + expandedTitleBottomPaddingPx             scrollBehavior?.state?.heightOffsetLimit = when (centralContent) {                 null -> -heightOffsetLimitPx                 else -> -1f             }                \/\/ Toolbar height at fully expanded state             val fullyExpandedHeightPx = MinCollapsedHeight.toPx() + heightOffsetLimitPx                \/\/ Coordinates of fully expanded title             val fullyExpandedTitleX = horizontalPaddingPx             val fullyExpandedTitleY =                 fullyExpandedHeightPx - expandedTitlePlaceable.height - expandedTitleBottomPaddingPx                \/\/ Coordinates of fully collapsed title             val fullyCollapsedTitleX = navigationIconOffset             val fullyCollapsedTitleY = collapsedHeightPx \/ 2 - CollapsedTitleLineHeight.toPx().roundToInt() \/ 2                \/\/ Current height of toolbar             layoutHeightPx = lerp(fullyExpandedHeightPx, collapsedHeightPx, collapsedFraction)                \/\/ Current coordinates of collapsing title             collapsingTitleX = lerp(fullyExpandedTitleX, fullyCollapsedTitleX, collapsedFraction).roundToInt()             collapsingTitleY = lerp(fullyExpandedTitleY, fullyCollapsedTitleY, collapsedFraction).roundToInt()         } else {             scrollBehavior?.state?.heightOffsetLimit = -1f         }            val toolbarHeightPx = layoutHeightPx.roundToInt() + (additionalContentPlaceable?.height ?: 0)          \/\/ ...    }<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt#L196\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u0412 \u0432\u044b\u0447\u0438\u0441\u043b\u0435\u043d\u0438\u044f\u0445 \u0432\u044b\u0441\u043e\u0442\u044b \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u043d\u0435\u043a\u0438\u0439 <code>collapsedFraction<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0443\u044e \u0434\u043e\u043b\u044e \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 (\u043e\u0442 0 \u0434\u043e 1). \u0412 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u043c\u044b \u0441\u0432\u044f\u0436\u0435\u043c \u0435\u0435 \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430. \u041f\u043e \u044d\u0442\u043e\u043c\u0443 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044e \u043e\u0447\u0435\u043d\u044c \u0443\u0434\u043e\u0431\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0442\u0435\u043a\u0443\u0449\u0438\u0435 \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u043b\u0438\u043d\u0435\u0439\u043d\u043e\u0439 \u0438\u043d\u0442\u0435\u0440\u043f\u043e\u043b\u044f\u0446\u0438\u0438 (<a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/util\/package-summary#lerp(kotlin.Float,kotlin.Float,kotlin.Float)\">lerp<\/a>). <\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u043a\u043e\u043e\u0440\u0434\u0438\u043d\u0430\u0442\u044b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u044b, \u043e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u043c\u0435\u0442\u043e\u0434 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/Placeable.PlacementScope#(androidx.compose.ui.layout.Placeable).placeRelative(androidx.compose.ui.unit.IntOffset,kotlin.Float)\">placeRelative<\/a>, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0444\u0438\u043a\u0441\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u043b\u0435\u0439\u0430\u0443\u0442\u0435:<\/p>\n<details class=\"spoiler\">\n<summary>\u0420\u0430\u0437\u043c\u0435\u0449\u0430\u0435\u043c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 \u043b\u0435\u0439\u0430\u0443\u0442\u0435<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = { \/* ... *\/ },     modifier = \/* ... *\/,     measurePolicy = { measurables, constraints ->                  \/\/ ...          layout(width = constraints.maxWidth, height = toolbarHeightPx) {             navigationIconPlaceable?.placeRelative(                 x = navigationIconX,                 y = navigationIconY             )                          actionsPlaceable?.placeRelative(                 x = actionsX,                 y = actionsY             )                          centralContentPlaceable?.placeRelative(                 x = navigationIconOffset.roundToInt(),                 y = ((collapsedHeightPx - centralContentPlaceable.height) \/ 2).roundToInt()             )                          if (expandedTitlePlaceable?.width == collapsedTitlePlaceable?.width) {                 expandedTitlePlaceable?.placeRelative(                     x = collapsingTitleX,                     y = collapsingTitleY,                 )             } else {                 expandedTitlePlaceable?.placeRelativeWithLayer(                     x = collapsingTitleX,                     y = collapsingTitleY,                     layerBlock = { alpha = 1 - collapsedFraction }                 )                 collapsedTitlePlaceable?.placeRelativeWithLayer(                     x = collapsingTitleX,                     y = collapsingTitleY,                     layerBlock = { alpha = collapsedFraction }                 )             }                          additionalContentPlaceable?.placeRelative(                 x = 0,                 y = layoutHeightPx.roundToInt()             )         }    }<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt#L254\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u043c\u044b \u0442\u0430\u043a\u0436\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043b\u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043e\u0442 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043a \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u043c\u0443 \u043f\u0440\u0438 \u043f\u043e\u043c\u043e\u0449\u0438 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u0430 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/Placeable.PlacementScope#(androidx.compose.ui.layout.Placeable).placeRelative(androidx.compose.ui.unit.IntOffset,kotlin.Float)\">layerBlock<\/a>.<\/p>\n<p>\u0418-\u0438-\u0438&#8230; \u041d\u0430\u0448 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043b\u0435\u0439\u0430\u0443\u0442 \u0433\u043e\u0442\u043e\u0432! \u041e\u0441\u0442\u0430\u0435\u0442\u0441\u044f \u0441\u0432\u044f\u0437\u0430\u0442\u044c \u0435\u0433\u043e \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c.<\/p>\n<h2>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 nested scroll \u0432 Compose <\/h2>\n<p>\u041c\u044b \u0445\u043e\u0442\u0438\u043c \u0434\u043e\u0431\u0438\u0442\u044c\u0441\u044f \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f, \u043f\u0440\u0438 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0441\u043a\u0440\u043e\u043b\u043b \u043e\u0442 \u043e\u0434\u043d\u043e\u0433\u043e \u0438 \u0442\u043e\u0433\u043e \u0436\u0435 \u0436\u0435\u0441\u0442\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u0438\u0437 \u043f\u0440\u043e\u043b\u0438\u0441\u0442\u044b\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u0435 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438 \u043d\u0430\u043e\u0431\u043e\u0440\u043e\u0442. \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u043e\u0434\u0438\u0444\u0430\u0439\u0435\u0440 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/input\/nestedscroll\/package-summary#(androidx.compose.ui.Modifier).nestedScroll(androidx.compose.ui.input.nestedscroll.NestedScrollConnection,androidx.compose.ui.input.nestedscroll.NestedScrollDispatcher)\">nestedScroll<\/a>. \u041e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u043c \u0435\u0433\u043e \u043d\u0430 \u043e\u0431\u0449\u0435\u043c \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0435 \u0434\u043b\u044f \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u043e\u0434 \u043d\u0438\u043c: <\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 nestedScroll<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">val nestedScrollConnection = object : NestedScrollConnection {        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {         return \/* consumed amount of scroll *\/       }        override fun onPostScroll(         consumed: Offset,         available: Offset,         source: NestedScrollSource,     ): Offset {         return \/* consumed amount of scroll *\/       }        override suspend fun onPreFling(available: Velocity): Velocity {         return \/* consumed amount of scroll velocity *\/     }             override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {         return \/* consumed amount of scroll velocity *\/     }  }  Scaffold(       modifier = Modifier.nestedScroll(nestedScrollConnection),       topBar = {           CustomToolbar(\/* toolbar params *\/)       },   ) { contentPadding ->     LazyColumn {       \/* screen content *\/     }   }<\/code><\/pre>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/input\/nestedscroll\/NestedScrollConnection\">NestedScrollConnection<\/a> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043e\u0431\u044b\u0442\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0432 Compose \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043f\u0440\u043e\u043a\u0438\u0434\u044b\u0432\u0430\u0435\u0442 \u0441\u043a\u0440\u043e\u043b\u043b \u0432\u043d\u0438\u0437 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438: \u043e\u0442 \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043a\u0430\u0436\u0434\u043e\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 &#171;\u0437\u0430\u0431\u0440\u0430\u0442\u044c \u0441\u0435\u0431\u0435&#187; \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430. \u041d\u0430 \u0442\u0430\u043a\u043e\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 \u043c\u0435\u0442\u043e\u0434\u044b <code>onPreScroll<\/code> \u0438 <code>onPreFling<\/code> \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <code>NestedScrollConnection<\/code>. \u0418\u0445 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u2014 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &#171;\u0437\u0430\u0431\u0440\u0430\u043b \u0441\u0435\u0431\u0435&#187; (consumed).<\/p>\n<p>\u041f\u043e\u0441\u043b\u0435 \u0442\u043e\u0433\u043e, \u043a\u0430\u043a \u0441\u043a\u0440\u043e\u043b\u043b \u0441\u043f\u0443\u0441\u0442\u0438\u043b\u0441\u044f \u0432\u043d\u0438\u0437 \u0438 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u043e\u0441\u0442\u0430\u0432\u0448\u0438\u0439\u0441\u044f \u043f\u043e\u0441\u043b\u0435 \u043d\u0438\u0445 \u0441\u043a\u0440\u043e\u043b\u043b \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0435\u0433\u043e \u043f\u043e\u0434\u044a\u0435\u043c \u0432\u0432\u0435\u0440\u0445 \u043f\u043e \u0438\u0435\u0440\u0430\u0440\u0445\u0438\u0438 \u2014 \u043e\u0442 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043a \u0440\u043e\u0434\u0438\u0442\u0435\u043b\u044c\u0441\u043a\u0438\u043c. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0439\u043c\u0430\u0442\u044c \u043e\u0442\u0441\u0442\u0430\u0432\u0448\u0438\u0439 \u0441\u043a\u0440\u043e\u043b\u043b, \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043c\u0435\u0442\u043e\u0434\u044b <code>onPostScroll<\/code> \u0438 <code>onPostFling<\/code>.  <\/p>\n<p>\u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 <code>TopAppBar<\/code> \u0438\u0437 compose.material3 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0439 \u043a\u043b\u0430\u0441\u0441, \u0432 \u043a\u043e\u0442\u043e\u0440\u043e\u043c \u0442\u0440\u0435\u043a\u0430\u0435\u0442\u0441\u044f \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0435\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0438 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u0442\u044c\u0441\u044f \u0442\u0443\u043b\u0431\u0430\u0440. \u0412 \u044d\u0442\u043e\u043c \u0436\u0435 \u043a\u043b\u0430\u0441\u0441\u0435 \u0437\u0430\u0434\u0430\u0435\u0442\u0441\u044f \u043c\u0430\u043a\u0441\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u0438 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0433\u0440\u0430\u043d\u0438\u0447\u0435\u043d\u0438\u0435 \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430, \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u0447\u0438\u0441\u043b\u0438\u0442\u044c <code>collapsedFraction<\/code>, \u0442\u043e \u0435\u0441\u0442\u044c \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0434\u043e\u043b\u044e \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>ScrollState \u0434\u043b\u044f \u0442\u0443\u043b\u0431\u0430\u0440\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">@Stable class CustomToolbarScrollState(     initialHeightOffsetLimit: Float,     initialHeightOffset: Float,     initialContentOffset: Float, ) {      \/* ... *\/      \/**      * The top app bar's height offset limit in pixels, which represents the limit that a top app      * bar is allowed to collapse to.      *      * Use this limit to coerce the [heightOffset] value when it's updated.      *\/     var heightOffsetLimit by mutableStateOf(initialHeightOffsetLimit)      \/**      * The top app bar's current height offset in pixels. This height offset is applied to the fixed      * height of the app bar to control the displayed height when content is being scrolled.      *      * Updates to the [heightOffset] value are coerced between zero and [heightOffsetLimit].      *\/     var heightOffset: Float         get() = _heightOffset.value         set(newOffset) {             _heightOffset.value = newOffset.coerceIn(                 minimumValue = heightOffsetLimit,                 maximumValue = 0f             )         }      \/**      * The total offset of the content scrolled under the top app bar.      *      * This value is updated by a [CustomToolbarScrollBehavior] whenever a nested scroll connection      * consumes scroll events. A common implementation would update the value to be the sum of all      * [NestedScrollConnection.onPostScroll] `consumed.y` values.      *\/     var contentOffset by mutableStateOf(initialContentOffset)      \/**      * A value that represents the collapsed height percentage of the app bar.      *      * A `0.0` represents a fully expanded bar, and `1.0` represents a fully collapsed bar (computed      * as [heightOffset] \/ [heightOffsetLimit]).      *\/     val collapsedFraction: Float         get() = if (heightOffsetLimit != 0f) {             heightOffset \/ heightOffsetLimit         } else {             0f         }      private var _heightOffset = mutableStateOf(initialHeightOffset)  } <\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbarScrollState.kt#L23\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c, \u043a\u0430\u043a \u044d\u0442\u043e\u0442 \u0441\u0442\u0435\u0439\u0442 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 <code>NestedScrollConection<\/code> \u0442\u0443\u043b\u0431\u0430\u0440\u0430. \u041d\u0430\u0447\u043d\u0435\u043c \u0441 \u043c\u0435\u0442\u043e\u0434\u0430 <code>onPreScroll<\/code>: <\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 onPreScroll<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">class CustomToolbarScrollBehavior(     val state: CustomToolbarScrollState,     \/\/ ... ) {      val nestedScrollConnection = object : NestedScrollConnection {          override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {             \/\/ Don't intercept if scrolling down.             if (available.y > 0f) return Offset.Zero              val prevHeightOffset = state.heightOffset             state.heightOffset = state.heightOffset + available.y             return if (prevHeightOffset != state.heightOffset) {                 \/\/ We're in the middle of top app bar collapse or expand.                 \/\/ Consume only the scroll on the Y axis.                 available.copy(x = 0f)             } else {                 Offset.Zero             }         }          \/* ... *\/      }  } <\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbarScrollBehavior.kt#L24\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u0417\u0434\u0435\u0441\u044c \u043c\u044b \u043d\u0435 \u0431\u0443\u0434\u0435\u043c \u0440\u0435\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0441\u043a\u0440\u043e\u043b\u043b \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043d\u0438\u0437, \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0443 \u043f\u043e\u0434 \u0442\u0443\u043b\u0431\u0430\u0440\u043e\u043c \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u0435\u043c\u0443 \u0441\u043a\u0440\u043e\u043b\u043b. \u0412 \u044d\u0442\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u0432 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0435 consumed-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u044f \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043c\u044b \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c 0, \u043f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043d\u0438\u043a\u0430\u043a\u043e\u0439 \u0441\u043a\u0440\u043e\u043b\u043b \u043d\u0430\u0448 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u043f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b. <\/p>\n<p>\u041f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u0432\u0432\u0435\u0440\u0445 \u043c\u044b \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043a \u0442\u0435\u043a\u0443\u0449\u0435\u043c\u0443 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0435\u043d\u043e\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438, \u0435\u0441\u043b\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0443 \u0435\u0449\u0435 \u0435\u0441\u0442\u044c \u043a\u0443\u0434\u0430 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u0442\u044c\u0441\u044f, \u0441\u043e\u043e\u0431\u0449\u0438\u043c \u0441\u0438\u0441\u0442\u0435\u043c\u0435 \u0441\u043a\u0440\u043e\u043b\u043b\u0430, \u0447\u0442\u043e \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u0439 \u043d\u0430\u043c \u0441\u043a\u0440\u043e\u043b\u043b, \u0432\u0435\u0440\u043d\u0443\u0432 \u0441\u043e\u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0435\u0435 consumed-\u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0438\u0437 <code>onPreScroll<\/code>. \u0422\u0430\u043a \u043c\u044b \u0438\u0437\u0431\u0435\u0436\u0438\u043c \u043b\u0438\u0448\u043d\u0435\u0433\u043e \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u043e\u0434 \u0442\u0443\u043b\u0431\u0430\u0440\u043e\u043c. \u0415\u0441\u043b\u0438 \u043c\u044b \u044d\u0442\u043e\u0433\u043e \u043d\u0435 \u0441\u0434\u0435\u043b\u0430\u0435\u043c, \u0442\u043e \u043f\u043e\u043b\u0443\u0447\u0438\u043c \u0432\u043e\u0442 \u0442\u0430\u043a\u043e\u0435 \u043d\u0435\u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435: <\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/751\/656\/810\/7516568104897eb049596a8b61f74786.gif\" width=\"540\" height=\"400\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/751\/656\/810\/7516568104897eb049596a8b61f74786.gif\"\/><figcaption><\/figcaption><\/figure>\n<p>\u0412 <code>onPostScroll<\/code>, \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u043e\u043b\u043b\u0430, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0443\u0436\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0438 \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043a \u043d\u0430\u043a\u0430\u043f\u043b\u0438\u0432\u0430\u0435\u043c\u043e\u043c\u0443 \u043d\u0430\u043c\u0438 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0435\u043d\u043e\u0441\u0442\u0438 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430: <\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 onPostScroll<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">class CustomToolbarScrollBehavior(     val state: CustomToolbarScrollState,     \/\/ ... ) {      val nestedScrollConnection = object : NestedScrollConnection {          \/* ... *\/                override fun onPostScroll(             consumed: Offset,             available: Offset,             source: NestedScrollSource,         ): Offset {             state.contentOffset += consumed.y              if (available.y &lt; 0f || consumed.y &lt; 0f) {                 \/\/ When scrolling up, just update the state's height offset.                 val oldHeightOffset = state.heightOffset                 state.heightOffset = state.heightOffset + consumed.y                 return Offset(0f, state.heightOffset - oldHeightOffset)             }              if (consumed.y == 0f &amp;&amp; available.y > 0) {                 \/\/ Reset the total content offset to zero when scrolling all the way down. This                 \/\/ will eliminate some float precision inaccuracies.                 state.contentOffset = 0f             }              if (available.y > 0f) {                 \/\/ Adjust the height offset in case the consumed delta Y is less than what was                 \/\/ recorded as available delta Y in the pre-scroll.                 val oldHeightOffset = state.heightOffset                 state.heightOffset = state.heightOffset + available.y                 return Offset(0f, state.heightOffset - oldHeightOffset)             }             return Offset.Zero         }           \/* ... *\/              }  } <\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbarScrollBehavior.kt#L39\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041f\u043e\u0441\u043a\u043e\u043b\u044c\u043a\u0443 \u043c\u044b \u0430\u043a\u043a\u0443\u043c\u0443\u043b\u0438\u0440\u0443\u0435\u043c \u0432 <code>state.contentOffset<\/code> \u0441\u0443\u043c\u043c\u0443 \u0438\u0437 \u0431\u043e\u043b\u044c\u0448\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0447\u0438\u0441\u0435\u043b \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0435\u0439 \u0442\u043e\u0447\u043a\u043e\u0439, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u043e\u0431\u043d\u0443\u043b\u044f\u0442\u044c \u044d\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e, \u043a\u043e\u0433\u0434\u0430 \u0441\u043a\u0440\u043e\u043b\u043b \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0435\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u0432\u043e\u0435 \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435. \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0433\u0430\u0435\u0442 \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u0443\u0441\u0442\u0440\u0430\u043d\u0438\u0442\u044c \u043f\u043e\u0441\u043b\u0435\u0434\u0441\u0442\u0432\u0438\u044f \u043e\u0448\u0438\u0431\u043e\u043a \u043e\u043a\u0440\u0443\u0433\u043b\u0435\u043d\u0438\u044f \u0447\u0438\u0441\u0435\u043b. \u0414\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043f\u043e\u0441\u043b\u0435 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u043c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c \u043c\u044b \u043f\u0440\u0438\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044e \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430. \u042d\u0442\u043e \u043a\u0435\u0439\u0441 \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043d\u0438\u0437.<\/p>\n<p>\u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u0433\u043e\u0432\u043e\u0440\u0438\u043c \u043f\u0440\u043e fling-\u0436\u0435\u0441\u0442. Fling-\u0436\u0435\u0441\u0442 \u2014 \u044d\u0442\u043e \u0440\u0435\u0437\u043a\u0438\u0439 \u0441\u0432\u0430\u0439\u043f \u0432\u0432\u0435\u0440\u0445 \u0438\u043b\u0438 \u0432\u043d\u0438\u0437. \u041e\u043d \u043e\u0442\u043b\u0438\u0447\u0430\u0435\u0442\u0441\u044f \u043e\u0442 \u043e\u0431\u044b\u0447\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u0442\u0435\u043c, \u0447\u0442\u043e \u0432\u043c\u0435\u0441\u0442\u043e \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u043e\u0433\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0430 \u0441\u043a\u0440\u043e\u043b\u043b\u0430 \u043c\u044b \u0441\u043e\u043e\u0431\u0449\u0430\u0435\u043c \u044d\u043a\u0440\u0430\u043d\u0443 \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0435\u043d\u043d\u0443\u044e \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c, \u0441 \u043a\u043e\u0442\u043e\u0440\u043e\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043a\u0440\u043e\u043b\u043b\u0438\u0442\u044c\u0441\u044f, \u0434\u0430\u0436\u0435 \u043a\u043e\u0433\u0434\u0430 \u043c\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0443\u0431\u0435\u0440\u0435\u0442 \u043f\u0430\u043b\u0435\u0446 \u0441 \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n<details class=\"spoiler\">\n<summary>\u0414\u0435\u043c\u043e fling-\u0436\u0435\u0441\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/699\/4a0\/01e\/6994a001eb9ee867dd1990fdcdb2cb1e.gif\" width=\"540\" height=\"1170\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/699\/4a0\/01e\/6994a001eb9ee867dd1990fdcdb2cb1e.gif\"\/><figcaption><\/figcaption><\/figure>\n<\/p>\n<\/div>\n<\/details>\n<p>\u0421\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0434\u043e\u043b\u0436\u043d\u0430 \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0443\u043c\u0435\u043d\u044c\u0448\u0430\u0442\u044c\u0441\u044f \u0434\u043e \u043f\u043e\u043b\u043d\u043e\u0439 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0438. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043c\u0435\u0442\u043e\u0434 <code>onPostFling<\/code> \u043f\u0440\u0438\u043d\u0438\u043c\u0430\u0435\u0442 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430, \u0430 velocity: \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c \u0432 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u0435 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 \u0441\u0435\u043a\u0443\u043d\u0434\u0443. \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0444\u043b\u0438\u043d\u0433-\u0436\u0435\u0441\u0442\u0430 \u2014 \u044d\u0442\u043e \u0442\u0435\u0445\u043d\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u0438. \u0422\u043e\u043b\u044c\u043a\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u0443\u0435\u043c \u043c\u044b \u043d\u0435 \u0441\u0430\u043c \u043a\u043e\u043d\u0442\u0435\u043d\u0442, \u0430 \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u0435 velocity, \u0447\u0442\u043e\u0431\u044b \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u0438\u043c\u0438\u0442\u0430\u0446\u0438\u044e \u0444\u0438\u0437\u0438\u0447\u0435\u0441\u043a\u043e\u0433\u043e \u044d\u0444\u0444\u0435\u043a\u0442\u0430 \u0437\u0430\u043c\u0435\u0434\u043b\u0435\u043d\u0438\u044f. \u042d\u0442\u0443 \u0430\u043d\u0438\u043c\u0430\u0446\u0438\u044e \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u043f\u0440\u043e\u0438\u0433\u0440\u044b\u0432\u0430\u0442\u044c \u0434\u043e \u0442\u0435\u0445 \u043f\u043e\u0440, \u043f\u043e\u043a\u0430 \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0432\u0441\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u0443\u044e \u043d\u0430\u0448\u0435\u043c\u0443 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0443 \u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c:<\/p>\n<details class=\"spoiler\">\n<summary>\u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 onPostFling<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">class CustomToolbarScrollBehavior(     val state: CustomToolbarScrollState,     \/\/ ... ) {      val nestedScrollConnection = object : NestedScrollConnection {          \/* ... *\/                override suspend fun onPostFling(consumed: Velocity, available: Velocity): Velocity {             var result = super.onPostFling(consumed, available)             \/\/ Check if the app bar is partially collapsed\/expanded.             \/\/ Note that we don't check for 0f due to float precision with the collapsedFraction             \/\/ calculation.             if (state.collapsedFraction > 0.01f &amp;&amp; state.collapsedFraction &lt; 1f) {                 result += flingToolbar(                     state = state,                     initialVelocity = available.y,                     flingAnimationSpec = flingAnimationSpec                 )             }             return result         }            \/* ... *\/              }  }  private suspend fun flingToolbar(     state: CustomToolbarScrollState,     initialVelocity: Float,     flingAnimationSpec: DecayAnimationSpec&lt;Float>?, ): Velocity {     var remainingVelocity = initialVelocity     \/\/ In case there is an initial velocity that was left after a previous user fling, animate to     \/\/ continue the motion to expand or collapse the app bar.     if (flingAnimationSpec != null &amp;&amp; abs(initialVelocity) > 1f) {         var lastValue = 0f         AnimationState(             initialValue = 0f,             initialVelocity = initialVelocity,         )             .animateDecay(flingAnimationSpec) {                 val delta = value - lastValue                 val initialHeightOffset = state.heightOffset                 state.heightOffset = initialHeightOffset + delta                 val consumed = abs(initialHeightOffset - state.heightOffset)                 lastValue = value                 remainingVelocity = this.velocity                 \/\/ avoid rounding errors and stop if anything is unconsumed                 if (abs(delta - consumed) > 0.5f) {                     cancelAnimation()                 }             }     }     return Velocity(0f, remainingVelocity) }  <\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbarScrollBehavior.kt#L69\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041c\u044b \u043f\u043e\u043b\u0443\u0447\u0438\u043b\u0438 \u0434\u0432\u0430 \u043a\u043b\u044e\u0447\u0435\u0432\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043b\u043e\u0433\u0438\u043a\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u043b\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430: <code>CustomToolbarScrollState<\/code> \u0438 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 <code>NestedScrollConnection<\/code>. \u0414\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043c\u044b \u0441\u043b\u043e\u0436\u0438\u043b\u0438 \u0438\u0445 \u0432 \u043e\u0434\u0438\u043d \u043a\u043b\u0430\u0441\u0441 <code>CustomToolbarScrollBehavior<\/code>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u0443\u0434\u0435\u0442 \u0447\u0430\u0441\u0442\u044c\u044e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e API \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430. <\/p>\n<h2>\u0418\u0442\u043e\u0433\u043e\u0432\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442<\/h2>\n<p>\u041f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0435 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0430. \u0412 \u0435\u0433\u043e API \u0432\u043e\u0448\u043b\u0438:<\/p>\n<ul>\n<li>\n<p>\u0421\u043b\u043e\u0442 \u0434\u043b\u044f \u0438\u043a\u043e\u043d\u043a\u0438 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0442 \u0434\u043b\u044f \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432 \u043f\u0440\u0430\u0432\u043e\u0439 \u0432\u0435\u0440\u0445\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0442 \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432\u043d\u0438\u0437\u0443 \u0442\u0443\u043b\u0431\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u0421\u043b\u043e\u0442 \u0434\u043b\u044f \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430  \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0442\u0443\u043b\u0431\u0430\u0440\u0430<\/p>\n<\/li>\n<li>\n<p>\u041e\u0431\u044a\u0435\u043a\u0442 \u0434\u043b\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u0438\u0437\u0430\u0446\u0438\u0438 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430<\/p>\n<\/li>\n<li>\n<p>Scroll behavior \u0434\u043b\u044f \u0438\u043d\u0442\u0435\u0433\u0440\u0430\u0446\u0438\u0438 \u0441 \u0441\u0438\u0441\u0442\u0435\u043c\u043e\u0439 \u0441\u043a\u0440\u043e\u043b\u043b\u0430<\/p>\n<\/li>\n<\/ul>\n<details class=\"spoiler\">\n<summary>\u041f\u0440\u0438\u043c\u0435\u0440 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0438\u0432\u0448\u0435\u0433\u043e\u0441\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">val scrollBehavior = rememberToolbarScrollBehavior()  Scaffold(     modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection)     topBar = {         CustomToolbar(             scrollBehavior = scrollBehavior,             collapsingText = CollapsingTitle(                 text = \"Toolbar tile\",                 expandedTextStyle = MaterialTheme.typography.headlineLarge             ),             actions = {                 ToolbarActionIcon(                     painter = painterResource(id = R.drawable.ic_settings),                     onClick = { }                 )             },             navigationIcon = { ToolbarBackIcon() },             additionalContent = { \/* optional content at toolbar bottom *\/ },             centralContent = { \/* opotional content at toolbar center *\/ },             collapsedElevation = 4.dp,         )     } ) {    LazyColumn {        \/* some screen content *\/    } }<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/CustomToolbarDemo.kt#L47\">\u0414\u0435\u043c\u043e-\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0442\u043e\u0440 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u042d\u0442\u043e \u0443\u0436\u0435 \u0432\u0442\u043e\u0440\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u043d\u0430 Compose, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u044b \u0432\u043d\u0435\u0434\u0440\u0438\u043b\u0438 \u043d\u0430 \u0432\u0441\u0435 \u043d\u0430\u0448\u0438 Compose-\u044d\u043a\u0440\u0430\u043d\u044b \u0432 \u043f\u0440\u043e\u0434\u0435. \u041f\u043e\u043c\u0438\u043c\u043e \u043d\u0430\u0448\u0435\u0433\u043e \u043e\u0441\u043d\u043e\u0432\u043d\u043e\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u043f\u043e\u0449\u0443\u043f\u0430\u0442\u044c \u0438 \u043f\u043e\u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0430\u0442\u044c \u0432\u0441\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u044b\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043e\u043f\u0438\u0441\u0430\u043d\u043d\u043e\u0439 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u043c\u043e\u0436\u043d\u043e \u0432 \u043d\u0430\u0448\u0435\u043c <a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\">\u0434\u0435\u043c\u043e-\u043f\u0440\u043e\u0435\u043a\u0442\u0435<\/a>. \u0422\u0430\u043c \u0436\u0435 \u0432\u044b \u043d\u0430\u0439\u0434\u0435\u0442\u0435 <a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/main\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt\">\u043f\u043e\u043b\u043d\u044b\u0439 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u0439 \u043a\u043e\u0434 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u044b \u0440\u0430\u0437\u043e\u0431\u0440\u0430\u043b\u0438 \u0432 \u0434\u0430\u043d\u043d\u043e\u0439 \u0441\u0442\u0430\u0442\u044c\u0435. <\/p>\n<p>\u0414\u0435\u043b\u0438\u0442\u0435\u0441\u044c \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0432\u0430\u0448\u0438\u043c \u043e\u043f\u044b\u0442\u043e\u043c \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043d\u0430 Compose, \u0432\u0441\u0435\u043c happy composing!<\/p>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/703192\/\"> https:\/\/habr.com\/ru\/articles\/703192\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430 Jetpack Compose \u043d\u0435 \u0432\u0441\u0435\u0433\u0434\u0430 \u043f\u0440\u043e\u0445\u043e\u0434\u0438\u043b\u0430 \u0433\u043b\u0430\u0434\u043a\u043e. \u0411\u043e\u043b\u044c\u0448\u0438\u043d\u0441\u0442\u0432\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043c\u044b \u043f\u0435\u0440\u0435\u043f\u0438\u0441\u0430\u043b\u0438 \u0431\u0435\u0437 \u043f\u0440\u043e\u0431\u043b\u0435\u043c, \u043d\u043e \u0441 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043f\u0440\u0438\u0448\u043b\u043e\u0441\u044c \u043f\u043e\u0432\u043e\u0437\u0438\u0442\u044c\u0441\u044f. \u041e\u0434\u043d\u0438\u043c \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0441\u0442\u0430\u043b \u0430\u043d\u0430\u043b\u043e\u0433 \u0441\u0442\u0430\u0440\u043e\u0433\u043e \u0434\u043e\u0431\u0440\u043e\u0433\u043e <code>CollapsingToolbarLayout<\/code> \u0438\u0437 View-\u043c\u0438\u0440\u0430. \u0412 \u0441\u0442\u0430\u0442\u044c\u0435 \u0440\u0430\u0437\u0431\u0435\u0440\u0435\u043c \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 Compose: \u043f\u043e\u0433\u0440\u0443\u0437\u0438\u043c\u0441\u044f \u0432 \u0442\u043e\u043d\u043a\u043e\u0441\u0442\u0438 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0438 \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0433\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u0430 Compose, \u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0432 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 androidx.compose.material3, \u0432\u0434\u043e\u0445\u043d\u043e\u0432\u0438\u0432\u0448\u0435\u0439 \u043d\u0430\u0441 \u043d\u0430 \u0438\u0442\u043e\u0433\u043e\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435.<\/p>\n<p>\u041c\u0430\u0442\u0435\u0440\u0438\u0430\u043b \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u043e\u043b\u0435\u0437\u0435\u043d \u0442\u0435\u043c, \u043a\u0442\u043e \u0441\u043e\u0431\u0438\u0440\u0430\u0435\u0442\u0441\u044f \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u044b\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043d\u0430 Compose, \u0438 \u0432\u0441\u0435\u043c, \u043a\u0442\u043e \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u0443\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u043c\u0438 \u0434\u0435\u0442\u0430\u043b\u044f\u043c\u0438 \u0440\u0430\u0431\u043e\u0442\u044b Compose-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432.\u00a0<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<h2>\u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430<\/h2>\n<p>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 Compose, \u0438\u043c\u0435\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439. \u0412\u043e\u0442 \u0442\u0430\u043a \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u0430\u043c\u043e\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0435:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043b\u0441\u044f \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043c\u0435\u043d\u044f\u0442\u044c \u0441\u0442\u0438\u043b\u044c \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430, \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043a\u043e\u043d\u043a\u0443 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438, \u043a\u043d\u043e\u043f\u043a\u0438 \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0445 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432\u043d\u0438\u0437\u0443 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0442\u0430\u0431\u044b ViewPager):<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u043c\u0435\u0442\u044c \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u043a\u043e\u043d\u0442\u0435\u043d\u0442 \u0432 \u0446\u0435\u043d\u0442\u0440\u0435 \u0442\u0443\u043b\u0431\u0430\u0440\u0430, \u043e\u0442\u043a\u043b\u044e\u0447\u0430\u044f \u043f\u0440\u0438 \u044d\u0442\u043e\u043c \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435: <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430 \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u044d\u043a\u0440\u0430\u043d\u0430\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a \u043c\u043e\u0436\u0435\u0442 \u0438\u043c\u0435\u0442\u044c \u043d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e \u0441\u0442\u0440\u043e\u043a. \u0412 \u0442\u0430\u043a\u0438\u0445 \u0441\u043b\u0443\u0447\u0430\u044f\u0445 \u043c\u044b \u0434\u043e\u043b\u0436\u043d\u044b \u043f\u043b\u0430\u0432\u043d\u043e \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043c\u0435\u0436\u0434\u0443 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u043c \u0438\u0437 \u0434\u0432\u0443\u0445 \u0441\u0442\u0440\u043e\u043a \u043a \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0443 \u0438\u0437 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u043e\u043a\u0438 \u0441 \u043c\u043d\u043e\u0433\u043e\u0442\u043e\u0447\u0438\u0435\u043c:<\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u0418, \u043a\u043e\u043d\u0435\u0447\u043d\u043e \u0436\u0435, \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0438\u0437 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0439 \u043f\u0440\u0438 \u043f\u0440\u043e\u0441\u043a\u0440\u043e\u043b\u043b\u0435 \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u044d\u043a\u0440\u0430\u043d\u0430 \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0430\u043d\u0438\u043c\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0438\u0442\u044c \u0442\u0435\u043d\u044c \u0432 \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430.<\/p>\n<h2>\u0418\u0449\u0435\u043c \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442<\/h2>\n<p>\u0422\u0430\u043a\u043e\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0431\u044b\u043b\u043e \u0431\u044b \u043b\u0435\u0433\u043a\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 Compose-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432: <code>Row<\/code> \u0438 <code>Column<\/code>, \u0435\u0441\u043b\u0438 \u0431\u044b \u043d\u0435 \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435. \u0412 \u0441\u0442\u0430\u0440\u043e\u043c View-\u043c\u0438\u0440\u0435 \u0434\u043b\u044f \u0442\u0430\u043a\u043e\u0433\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u044f \u043c\u044b \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0432\u044f\u0437\u043a\u0443 \u0438\u0437 <code>CollapsingToolbarLayout<\/code> \u0438 <code>CoordinatorLayout<\/code> \u0438\u0437 material-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. \u041f\u043e\u044d\u0442\u043e\u043c\u0443, \u043f\u0440\u0435\u0436\u0434\u0435 \u0447\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0435\u0442\u0430\u0442\u044c \u0441\u0432\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u0434\u0430\u0432\u0430\u0439\u0435 \u043f\u043e\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043d\u0430 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u044b \u0438\u0437 Compose-\u043c\u0438\u0440\u0430.<\/p>\n<p>\u041e\u0434\u0438\u043d \u0438\u0437 \u0442\u0430\u043a\u0438\u0445 \u0432\u0430\u0440\u0438\u0430\u043d\u0442\u043e\u0432 \u2014 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/material3\/package-summary#TopAppBar(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.Function1,androidx.compose.foundation.layout.WindowInsets,androidx.compose.material3.TopAppBarColors,androidx.compose.material3.TopAppBarScrollBehavior)\">TopAppBar<\/a> \u0438\u0437 compose.material3. \u041c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0435\u043c \u0438\u043c\u0435\u043d\u043d\u043e material3, \u0442\u0430\u043a \u043a\u0430\u043a \u0432 compose.material \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u043d \u0438 \u043d\u0438\u043a\u0430\u043a \u043d\u0435 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0443\u0435\u0442 \u0441\u043e \u0441\u043a\u0440\u043e\u043b\u043b\u043e\u043c. <code>TopAppBar<\/code> \u0438\u0437 material3 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u043d \u0447\u0435\u0440\u0435\u0437 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 \u043b\u0435\u0439\u0430\u0443\u0442, \u043d\u043e \u043f\u043e\u0432\u0435\u0434\u0435\u043d\u0438\u0435 \u043f\u0440\u0438 \u0441\u043a\u0440\u043e\u043b\u043b\u0435 (\u043d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u0432\u0435\u0440\u0441\u0438\u0438 1.0.1) \u0443 \u043d\u0435\u0433\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043e\u0432\u0441\u0435\u043c \u043d\u0435 \u0442\u0430\u043a, \u043a\u0430\u043a \u0443 \u043f\u0440\u0438\u0432\u044b\u0447\u043d\u043e\u0433\u043e \u043d\u0430\u043c <code>CollapsingToolbarLayout<\/code>. \u0417\u0430\u0433\u043e\u043b\u043e\u0432\u043e\u043a <code>TopAppBar<\/code> \u043d\u0435 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u0435\u0442\u0441\u044f, \u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 fade-in\/fade-out: <\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<p>\u041d\u0430 \u043c\u043e\u043c\u0435\u043d\u0442 \u043d\u0430\u0448\u0435\u0433\u043e \u0440\u0435\u0441\u0435\u0440\u0447\u0430 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u043b\u0438 \u0438 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442:\u00a0\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 <a href=\"https:\/\/github.com\/onebone\/compose-collapsing-toolbar\">compose-collapsing-toolbar<\/a>, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u043f\u0440\u0435\u0434\u043b\u0430\u0433\u0430\u0435\u0442 \u0441\u0432\u043e\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0433\u0438\u0431\u043a\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u0435\u0433\u043e \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435. \u0421\u0438\u0441\u0442\u0435\u043c\u0430 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0432 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0435 \u0441\u0442\u0440\u043e\u0438\u0442\u0441\u044f \u043d\u0430 \u043c\u043e\u0434\u0438\u0444\u0430\u0435\u0440\u0430\u0445, \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0437\u0430\u0434\u0430\u0442\u044c \u0438\u043c \u0432\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0441\u0442\u0438 \u0438\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0438\u0442\u044c \u043f\u0430\u0440\u0430\u043b\u043b\u0430\u043a\u0441. \u0415\u0441\u043b\u0438 \u0432\u0430\u043c \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0435\u0441\u043b\u043e\u0436\u043d\u044b\u0439 collapsing toolbar, \u0442\u043e, \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e, \u044d\u0442\u0430 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0430 \u0445\u043e\u0440\u043e\u0448\u043e \u043f\u043e\u0434\u043e\u0439\u0434\u0435\u0442 \u043f\u043e\u0434 \u0432\u0430\u0448 \u043a\u0435\u0439\u0441. <\/p>\n<p>\u041a \u0441\u043e\u0436\u0430\u043b\u0435\u043d\u0438\u044e, \u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0430 \u0438\u0437 \u044d\u0442\u043e\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u043e\u043a\u0430\u0437\u0430\u043b\u043e\u0441\u044c \u043d\u0435\u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0448\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0438\u043d\u0430\u043c\u0438\u0447\u0435\u0441\u043a\u0438 \u043c\u0435\u043d\u044f\u044e\u0449\u0435\u0433\u043e\u0441\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0443 \u043d\u0430\u0441 \u0441\u0438\u043b\u044c\u043d\u043e \u0437\u0430\u0432\u0438\u0441\u0438\u0442 \u043e\u0442 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432\u043d\u0443\u0442\u0440\u0438 \u0442\u0443\u043b\u0431\u0430\u0440\u0430. \u0418\u0437-\u0437\u0430 \u044d\u0442\u043e\u0433\u043e \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u043b\u043e\u0441\u044c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0432\u0440\u0443\u0447\u043d\u0443\u044e \u0434\u043e\u0432\u043e\u043b\u044c\u043d\u043e \u043c\u043d\u043e\u0433\u043e \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432, \u0438 \u0432 \u0438\u0442\u043e\u0433\u0435 \u043c\u044b \u043f\u0440\u0438\u0448\u043b\u0438 \u043a \u0442\u043e\u043c\u0443, \u0447\u0442\u043e \u0444\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0438\u0448\u0435\u043c \u0441\u0432\u043e\u0439 \u043b\u0435\u0439\u0430\u0443\u0442, \u043d\u043e \u043f\u043e\u0432\u0435\u0440\u0445 \u0441\u0442\u043e\u0440\u043e\u043d\u043d\u0435\u0439 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438. <\/p>\n<p>\u0410 \u0435\u0449\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 \u0438\u0437 \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b \u043d\u0430\u0432\u0435\u0440\u043d\u044f\u043a\u0430 \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0431\u044b \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0447\u0435\u0440\u0435\u0437 Compose-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044e <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/constraintlayout\/compose\/package-summary#motionlayouthttps:\/\/developer.android.com\/reference\/kotlin\/androidx\/constraintlayout\/compose\/package-summary#motionlayout\">MotionLayout<\/a>. \u041d\u043e \u043e\u0442\u0447\u0430\u0441\u0442\u0438 \u043d\u0430\u0441 \u043e\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u043b \u043d\u0435\u0438\u0434\u0435\u0430\u043b\u044c\u043d\u044b\u0439 \u043e\u043f\u044b\u0442 \u0440\u0430\u0431\u043e\u0442\u044b \u0441 \u043d\u0438\u043c \u0432 \u043f\u0440\u043e\u0448\u043b\u043e\u043c, \u0430 \u043e\u0442\u0447\u0430\u0441\u0442\u0438, \u043f\u043e\u0442\u043e\u043c\u0443 \u0447\u0442\u043e \u043e\u0447\u0435\u043d\u044c \u043f\u0440\u0438\u0432\u043b\u0435\u043a\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u043c \u043f\u043e\u043a\u0430\u0437\u0430\u043b\u0441\u044f \u0432\u0430\u0440\u0438\u0430\u043d\u0442 \u0430\u0434\u0430\u043f\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c <code>TopAppBar<\/code> \u0438\u0437 compose.material3 \u043f\u043e\u0434 \u0441\u043f\u0435\u0446\u0438\u0444\u0438\u043a\u0443 \u043d\u0430\u0448\u0435\u0439 \u0434\u0438\u0437\u0430\u0439\u043d-\u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u0432\u0435\u0434\u044c \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043e \u043c\u043d\u043e\u0433\u043e\u043c \u0441\u0445\u043e\u0436\u0438. \u0415\u0441\u043b\u0438 \u0443 \u0432\u0430\u0441 \u0435\u0441\u0442\u044c \u043e\u043f\u044b\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0445 Compose-\u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0447\u0435\u0440\u0435\u0437 MotionLayout, \u043f\u0438\u0448\u0438\u0442\u0435 \u0432 \u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0430\u0440\u0438\u044f\u0445 \u0432\u0430\u0448 \u0444\u0438\u0434\u0431\u0435\u043a \u043e \u0440\u0430\u0431\u043e\u0442\u0435 \u0441 \u043d\u0438\u043c, \u043d\u043e \u043c\u044b \u0432 \u0438\u0442\u043e\u0433\u0435 \u043f\u043e\u0448\u043b\u0438 \u0432 \u0441\u0442\u043e\u0440\u043e\u043d\u0443 \u0430\u0434\u0430\u043f\u0442\u0430\u0446\u0438\u0438 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u043e\u0432 <code>TopAppBar<\/code> \u0438\u0437 compose.material3 \u043f\u043e\u0434 \u043d\u0430\u0448\u0438 \u043d\u0443\u0436\u0434\u044b. <\/p>\n<h2>\u041a\u0430\u0441\u0442\u043e\u043c\u043d\u044b\u0439 layout \u0432 Compose<\/h2>\n<p><code>TopAppBar<\/code> \u0438\u0437 compose.material3 \u043f\u043e\u0441\u0442\u0440\u043e\u0435\u043d \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430. \u041a\u043b\u044e\u0447\u0435\u0432\u043e\u0439 Composable-\u0444\u0443\u043d\u043a\u0446\u0438\u0435\u0439 \u0434\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/package-summary#Layout(androidx.compose.ui.Modifier,androidx.compose.ui.layout.MeasurePolicy)\">Layout<\/a>. \u0421 \u0435\u0435 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0437\u0430\u0434\u0430\u0442\u044c \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u044b\u0439 \u0441\u043f\u043e\u0441\u043e\u0431 \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044f \u0438 \u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u0432\u0438\u0434\u0436\u0435\u0442\u043e\u0432. \u0420\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043a\u0430\u0441\u0442\u043e\u043c\u043d\u043e\u0433\u043e \u043b\u0435\u0439\u0430\u0443\u0442\u0430 <a href=\"https:\/\/developer.android.com\/jetpack\/compose\/layouts\/custom\">\u0441\u043e\u0441\u0442\u043e\u0438\u0442 \u0438\u0437 \u0442\u0440\u0435\u0445 \u044d\u0442\u0430\u043f\u043e\u0432<\/a>: <\/p>\n<ul>\n<li>\n<p>\u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u0432\u043b\u043e\u0436\u0435\u043d\u043d\u044b\u0445 \u0432 \u043b\u0435\u0439\u0430\u0443\u0442 (\u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445) \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432;<\/p>\n<\/li>\n<li>\n<p>\u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c \u0438\u0442\u043e\u0433\u043e\u0432\u044b\u0435 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0430;<\/p>\n<\/li>\n<li>\n<p>\u0440\u0430\u0441\u043f\u043e\u043b\u043e\u0436\u0438\u0442\u044c \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043b\u0435\u0439\u0430\u0443\u0442\u0430.<\/p>\n<\/li>\n<\/ul>\n<p>\u0414\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043c\u044b \u043f\u0435\u0440\u0435\u0434\u0430\u0435\u043c \u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e <code>Layout<\/code> \u0447\u0435\u0440\u0435\u0437 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442 <code>content<\/code>. \u0412 \u043d\u0430\u0448\u0435\u043c \u0441\u043b\u0443\u0447\u0430\u0435 \u044d\u0442\u043e: \u0442\u0435\u043a\u0441\u0442 \u0442\u0430\u0439\u0442\u043b\u0430, \u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u044b\u0435 \u0441\u043b\u043e\u0442\u044b \u0434\u043b\u044f navigation icon, \u044d\u043a\u0448\u0435\u043d\u043e\u0432, \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u0442\u0443\u043b\u0431\u0430\u0440\u0430 \u0438 \u0441\u043b\u043e\u0442 \u0434\u043b\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u043d\u0442\u0435\u043d\u0442\u0430 \u0432 \u0435\u0433\u043e \u043d\u0438\u0436\u043d\u0435\u0439 \u0447\u0430\u0441\u0442\u0438. \u0414\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 \u043c\u044b \u0443\u043a\u0430\u0436\u0435\u043c \u043c\u043e\u0434\u0438\u0444\u0430\u0435\u0440 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/Modifier#(androidx.compose.ui.Modifier).layoutId(kotlin.Any)\">layouId<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u043d\u0430\u043c \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u044d\u0442\u0438 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043f\u0440\u0438 \u043b\u0435\u0439\u0430\u0443\u0442\u0438\u043d\u0433\u0435: <\/p>\n<details class=\"spoiler\">\n<summary>\u041f\u0435\u0440\u0435\u0434\u0430\u0447\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u0432 Layout<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = {         if (collapsingTitle != null) {             Text(                 modifier = Modifier.layoutId(ExpandedTitleId)                 \/\/ ...             )             Text(                 modifier = Modifier.layoutId(CollapsedTitleId)                 \/\/ ...             )         }          if (navigationIcon != null) {             Box(                 modifier = Modifier.layoutId(NavigationIconId)             ) {                 navigationIcon()             }         }          if (actions != null) {             Row(                 modifier = Modifier.layoutId(ActionsId)             ) {                 actions()             }         }          if (centralContent != null) {             Box(                 modifier = Modifier.layoutId(CentralContentId)             ) {                 centralContent()             }         }          if (additionalContent != null) {             Box(                 modifier = Modifier.layoutId(AdditionalContentId)             ) {                 additionalContent()             }         }     },     \/\/ ... )<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt#L70\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u041f\u0440\u0438 \u044d\u0442\u043e\u043c \u0434\u043b\u044f \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0434\u0432\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 <code>Text<\/code>, \u043c\u0435\u0436\u0434\u0443 \u043a\u043e\u0442\u043e\u0440\u044b\u043c\u0438 \u0432 \u0434\u0430\u043b\u044c\u043d\u0435\u0439\u0448\u0435\u043c \u0431\u0443\u0434\u0435\u043c \u0432\u044b\u0447\u0438\u0441\u043b\u044f\u0442\u044c \u0430\u043b\u044c\u0444\u0430-\u043f\u0435\u0440\u0435\u0445\u043e\u0434 \u043f\u0440\u0438 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u0438: \u043f\u043e\u0441\u0442\u0435\u043f\u0435\u043d\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0442\u044c \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0439 \u0440\u0430\u0437\u0432\u0435\u0440\u043d\u0443\u0442\u044b\u0439 \u0442\u0435\u043a\u0441\u0442 \u0438 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u0442\u044c \u043a \u043f\u043e\u043a\u0430\u0437\u0443 \u0441\u0445\u043b\u043e\u043f\u043d\u0443\u0442\u043e\u0433\u043e \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0442\u0435\u043a\u0441\u0442\u0430. View-\u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f <code>CollapsingToolbarLayout<\/code> \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 \u043f\u043e\u0434 \u043a\u0430\u043f\u043e\u0442\u043e\u043c \u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b\u0439 \u0442\u0440\u044e\u043a \u0434\u043b\u044f \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u0441\u0445\u043b\u043e\u043f\u044b\u0432\u0430\u043d\u0438\u044f \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432:<\/p>\n<details class=\"spoiler\">\n<summary>\u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b Text \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0430 \u043e\u0442 \u043c\u043d\u043e\u0433\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u0433\u043e \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u043a \u043e\u0434\u043d\u043e\u0441\u0442\u0440\u043e\u0447\u043d\u043e\u043c\u0443<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = {         if (collapsingTitle != null) {             Text(                 modifier = Modifier                     .layoutId(ExpandedTitleId)                     .wrapContentHeight(align = Alignment.Top)                     .graphicsLayer(                         scaleX = collapsingTitleScale,                         scaleY = collapsingTitleScale,                         transformOrigin = TransformOrigin(0f, 0f)                     ),                 text = collapsingTitle.titleText,                 style = collapsingTitle.expandedTextStyle             )             Text(                 modifier = Modifier                     .layoutId(CollapsedTitleId)                     .wrapContentHeight(align = Alignment.Top)                     .graphicsLayer(                         scaleX = collapsingTitleScale,                         scaleY = collapsingTitleScale,                         transformOrigin = TransformOrigin(0f, 0f)                     ),                 text = collapsingTitle.titleText,                 style = collapsingTitle.expandedTextStyle,                 maxLines = 1,                 overflow = TextOverflow.Ellipsis             )         }         \/\/ ...     },     \/\/ ... )<\/code><\/pre>\n<p><a href=\"https:\/\/github.com\/hhru\/hh-histories-compose-custom-toolbar\/blob\/a514a48a86caf80d81653330399a0037fd2b86de\/app\/src\/main\/java\/ru\/hh\/toolbar\/custom_toolbar\/CustomToolbar.kt#L72\">\u041f\u043e\u043b\u043d\u044b\u0439 \u043a\u043e\u0434 \u043d\u0430 GitHub<\/a><\/p>\n<\/div>\n<\/details>\n<p>\u0414\u0430\u043b\u0435\u0435 \u043f\u0435\u0440\u0435\u0445\u043e\u0434\u0438\u043c \u043a \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432. \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043f\u0435\u0440\u0435\u0434\u0430\u0434\u0438\u043c \u0432 <code>Layout<\/code> \u043b\u044f\u043c\u0431\u0434\u0443 <code>measurePolicy<\/code>. \u041e\u0434\u0438\u043d \u0438\u0437 \u043f\u0430\u0440\u0430\u043c\u0435\u0442\u0440\u043e\u0432 \u044d\u0442\u043e\u0439 \u043b\u044f\u043c\u0431\u0434\u044b <code>measurables<\/code> \u2014 \u0441\u043f\u0438\u0441\u043e\u043a \u043e\u0431\u044a\u0435\u043a\u0442\u043e\u0432 <a href=\"https:\/\/developer.android.com\/reference\/kotlin\/androidx\/compose\/ui\/layout\/Measurable\">Measurable<\/a>, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043e\u0442\u0440\u0430\u0436\u0430\u044e\u0442 \u0433\u043e\u0442\u043e\u0432\u044b\u0435 \u043a \u0438\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u044e \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043b\u0435\u0439\u0430\u0443\u0442\u0430, \u043f\u0435\u0440\u0435\u0434\u0430\u043d\u043d\u044b\u0435 \u0440\u0430\u043d\u0435\u0435 \u0432 \u0430\u0440\u0433\u0443\u043c\u0435\u043d\u0442\u0435 <code>content<\/code>. \u041f\u043e <code>layoutId<\/code> \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0439\u0442\u0438 \u043a\u043e\u043d\u043a\u0440\u0435\u0442\u043d\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u0438 \u0438\u0437\u043c\u0435\u0440\u0438\u0442\u044c \u0438\u0445 \u043d\u0443\u0436\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<details class=\"spoiler\">\n<summary>\u0418\u0437\u043c\u0435\u0440\u0435\u043d\u0438\u0435 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0445 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u0432 \u043b\u0435\u0439\u0430\u0443\u0442\u0430<\/summary>\n<div class=\"spoiler__content\">\n<pre><code class=\"kotlin\">Layout(     content = { \/* ... *\/ },     modifier = \/* ... *\/,     measurePolicy = { measurables, constraints ->       val horizontalPaddingPx = HorizontalPadding.toPx()       val expandedTitleBottomPaddingPx = ExpandedTitleBottomPadding.toPx()         \/\/ Measuring widgets inside toolbar:          val navigationIconPlaceable = measurables.firstOrNull { it.layoutId == NavigationIconId }           ?.measure(constraints.copy(minWidth = 0))          val actionsPlaceable = measurables.firstOrNull { it.layoutId == ActionsId }           ?.measure(constraints.copy(minWidth = 0))          val expandedTitlePlaceable = measurables.firstOrNull { it.layoutId == ExpandedTitleId }           ?.measure(               constraints.copy(                   maxWidth = (constraints.maxWidth - 2 * horizontalPaddingPx).roundToInt(),                   minWidth = 0,                   minHeight = 0               )           )          val additionalContentPlaceable = measurables.firstOrNull { it.layoutId == AdditionalContentId }           ?.measure(constraints)        val navigationIconOffset = when (navigationIconPlaceable) {           null -> horizontalPaddingPx           else -> navigationIconPlaceable.width + horizontalPaddingPx * 2       }          val actionsOffset = when (actionsPlaceable) {           null -> horizontalPaddingPx           else -> actionsPlaceable.width + horizontalPaddingPx * 2       }          val collapsedTitleMaxWidthPx =           (constraints.maxWidth - navigationIconOffset - actionsOffset) \/ fullyCollapsedTitleScale          val collapsedTitlePlaceable = measurables.firstOrNull { it.layoutId == CollapsedTitleId }           ?.measure(               constraints.copy(                   maxWidth = collapsedTitleMaxWidthPx.roundToInt(),                   minWidth = 0,                   minHeight = 0               )           )          val centralContentPlaceable = measurables.firstOrNull { it.layoutId == CentralContentId }           ?.measure(               constraints.copy(                   minWidth = 0,   <\/code><\/pre>\n<\/div>\n<\/details>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-403451","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/403451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=403451"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/403451\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=403451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=403451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=403451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}